VT2018 WebAssembly - Revision history

Quentin.Fombaron1: /* Comment ? */

2018-12-17T06:59:29Z

Comment ?

← Older revision		Revision as of 06:59, 17 December 2018
Line 33:		Line 33:
	Lorsque le navigateur télécharge le code de WebAssembly, il peut rapidement le transmettre à n'importe quel assemblage machine. Voici à quoi ressemble WebAssembly : il a un format textuel facile à lire (.wat pour WebAssembly Text Format), mais la représentation binaire est ce que l'on fournit réellement au navigateur (.wasm).		Lorsque le navigateur télécharge le code de WebAssembly, il peut rapidement le transmettre à n'importe quel assemblage machine. Voici à quoi ressemble WebAssembly : il a un format textuel facile à lire (.wat pour WebAssembly Text Format), mais la représentation binaire est ce que l'on fournit réellement au navigateur (.wasm).

	[[File:VT-WebAssembly.002.jpeg\|~~300px~~\|~~right\|thumb~~\|WebAssembly]]		[[File:VT-WebAssembly.002.jpeg\|500px\|center\|WebAssembly]]

	Ce que WebAssembly nous permet de faire est de prendre du code de niveau supérieur comme du C, C++ ou Rust (un langage recent développé par Mozilla) et de le compiler dans ce qu'on appelle un module WebAssembly. Vous pouvez le charger dans votre application web et l'appeler depuis JavaScript. Il est important de préciser que ce n'est pas un remplacement pour JavaScript, au contraire, il fonctionne avec JavaScript.		Ce que WebAssembly nous permet de faire est de prendre du code de niveau supérieur comme du C, C++ ou Rust (un langage recent développé par Mozilla) et de le compiler dans ce qu'on appelle un module WebAssembly. Vous pouvez le charger dans votre application web et l'appeler depuis JavaScript. Il est important de préciser que ce n'est pas un remplacement pour JavaScript, au contraire, il fonctionne avec JavaScript.

Quentin.Fombaron1: /* Comment ? */

2018-12-17T06:59:13Z

Comment ?

← Older revision		Revision as of 06:59, 17 December 2018
Line 33:		Line 33:
	Lorsque le navigateur télécharge le code de WebAssembly, il peut rapidement le transmettre à n'importe quel assemblage machine. Voici à quoi ressemble WebAssembly : il a un format textuel facile à lire (.wat pour WebAssembly Text Format), mais la représentation binaire est ce que l'on fournit réellement au navigateur (.wasm).		Lorsque le navigateur télécharge le code de WebAssembly, il peut rapidement le transmettre à n'importe quel assemblage machine. Voici à quoi ressemble WebAssembly : il a un format textuel facile à lire (.wat pour WebAssembly Text Format), mais la représentation binaire est ce que l'on fournit réellement au navigateur (.wasm).

	[[File:VT-WebAssembly.002.jpeg\|300px\|right\|WebAssembly]]		[[File:VT-WebAssembly.002.jpeg\|300px\|right\|thumb\|WebAssembly]]

	Ce que WebAssembly nous permet de faire est de prendre du code de niveau supérieur comme du C, C++ ou Rust (un langage recent développé par Mozilla) et de le compiler dans ce qu'on appelle un module WebAssembly. Vous pouvez le charger dans votre application web et l'appeler depuis JavaScript. Il est important de préciser que ce n'est pas un remplacement pour JavaScript, au contraire, il fonctionne avec JavaScript.		Ce que WebAssembly nous permet de faire est de prendre du code de niveau supérieur comme du C, C++ ou Rust (un langage recent développé par Mozilla) et de le compiler dans ce qu'on appelle un module WebAssembly. Vous pouvez le charger dans votre application web et l'appeler depuis JavaScript. Il est important de préciser que ce n'est pas un remplacement pour JavaScript, au contraire, il fonctionne avec JavaScript.

Quentin.Fombaron1: /* Comment ? */

2018-12-17T06:58:37Z

Comment ?

← Older revision		Revision as of 06:58, 17 December 2018
Line 33:		Line 33:
	Lorsque le navigateur télécharge le code de WebAssembly, il peut rapidement le transmettre à n'importe quel assemblage machine. Voici à quoi ressemble WebAssembly : il a un format textuel facile à lire (.wat pour WebAssembly Text Format), mais la représentation binaire est ce que l'on fournit réellement au navigateur (.wasm).		Lorsque le navigateur télécharge le code de WebAssembly, il peut rapidement le transmettre à n'importe quel assemblage machine. Voici à quoi ressemble WebAssembly : il a un format textuel facile à lire (.wat pour WebAssembly Text Format), mais la représentation binaire est ce que l'on fournit réellement au navigateur (.wasm).

	[[File:VT-WebAssembly.002.jpeg\|~~500px~~\|~~center~~\|WebAssembly]]		[[File:VT-WebAssembly.002.jpeg\|300px\|right\|WebAssembly]]

	Ce que WebAssembly nous permet de faire est de prendre du code de niveau supérieur comme du C, C++ ou Rust (un langage recent développé par Mozilla) et de le compiler dans ce qu'on appelle un module WebAssembly. Vous pouvez le charger dans votre application web et l'appeler depuis JavaScript. Il est important de préciser que ce n'est pas un remplacement pour JavaScript, au contraire, il fonctionne avec JavaScript.		Ce que WebAssembly nous permet de faire est de prendre du code de niveau supérieur comme du C, C++ ou Rust (un langage recent développé par Mozilla) et de le compiler dans ce qu'on appelle un module WebAssembly. Vous pouvez le charger dans votre application web et l'appeler depuis JavaScript. Il est important de préciser que ce n'est pas un remplacement pour JavaScript, au contraire, il fonctionne avec JavaScript.

Quentin.Fombaron1: /* Résumé */

2018-12-17T06:57:34Z

Résumé

← Older revision		Revision as of 06:57, 17 December 2018
Line 8:		Line 8:
	= Résumé =		= Résumé =

	Dans chaque navigateur que nous utilisons comme Chrome, Firefox, Edge ou Safari, le code est interprété et exécuté par un moteur JavaScript, c'est à lui que revient le travail d'exécuter le code, et uniquement le JavaScript. Malheureusement, JavaScript n'est pas idéal au point de vue des performances pour toutes les tâches que nous voulons effectuer. C'est là qu'intervient WebAssembly, c'est un nouveau type de code qui peut être exécuté dans les navigateurs modernes. Il a été créé pour obtenir de meilleures performances sur le web. Comment cela est-il possible ? C'est un format binaire ~~de bas niveau~~ qui a une petite taille, donc très rapide à charger et à exécuter. La clé est que nous n'écrivons pas WebAssembly, nous le compilons d'autres langages de niveau supérieur comme du C, C++ ou encore du Rust.		Dans chaque navigateur que nous utilisons comme Chrome, Firefox, Edge ou Safari, le code est interprété et exécuté par un moteur JavaScript, c'est à lui que revient le travail d'exécuter le code, et uniquement le JavaScript. Malheureusement, JavaScript n'est pas idéal au point de vue des performances pour toutes les tâches que nous voulons effectuer. C'est là qu'intervient WebAssembly, c'est un nouveau type de code qui peut être exécuté dans les navigateurs modernes. Il a été créé pour obtenir de meilleures performances sur le web. Comment cela est-il possible ? C'est un format binaire qui a une petite taille, donc très rapide à charger et à exécuter. La clé est que nous n'écrivons pas WebAssembly, nous le compilons d'autres langages de niveau supérieur comme du C, C++ ou encore du Rust.

	=== Mots clés ===		=== Mots clés ===

Quentin.Fombaron1: /* Résumé */

2018-12-17T06:57:04Z

Résumé

← Older revision		Revision as of 06:57, 17 December 2018
Line 8:		Line 8:
	= Résumé =		= Résumé =

	Dans chaque navigateur que nous utilisons comme Chrome, Firefox, Edge ou Safari, le code est interprété et exécuté par un moteur JavaScript, c'est à lui que revient le travail d'exécuter le code, et uniquement le JavaScript. Malheureusement, JavaScript n'est pas idéal au point de vue des performances pour toutes les tâches que nous voulons effectuer. C'est là qu'intervient WebAssembly, c'~~est~~ est un nouveau type de code qui peut être exécuté dans les navigateurs modernes. Il a été créé pour obtenir de meilleures performances sur le web. Comment cela est-il possible ? C'est un format binaire de bas niveau qui a une petite taille, donc très rapide à charger et à exécuter. La clé est que nous n'écrivons pas WebAssembly, nous le compilons d'autres langages de niveau supérieur comme du C, C++ ou encore du Rust.		Dans chaque navigateur que nous utilisons comme Chrome, Firefox, Edge ou Safari, le code est interprété et exécuté par un moteur JavaScript, c'est à lui que revient le travail d'exécuter le code, et uniquement le JavaScript. Malheureusement, JavaScript n'est pas idéal au point de vue des performances pour toutes les tâches que nous voulons effectuer. C'est là qu'intervient WebAssembly, c'est un nouveau type de code qui peut être exécuté dans les navigateurs modernes. Il a été créé pour obtenir de meilleures performances sur le web. Comment cela est-il possible ? C'est un format binaire de bas niveau qui a une petite taille, donc très rapide à charger et à exécuter. La clé est que nous n'écrivons pas WebAssembly, nous le compilons d'autres langages de niveau supérieur comme du C, C++ ou encore du Rust.

	=== Mots clés ===		=== Mots clés ===

Quentin.Fombaron1: /* Résumé */

2018-12-17T06:56:11Z

Résumé

← Older revision		Revision as of 06:56, 17 December 2018
Line 8:		Line 8:
	= Résumé =		= Résumé =

	Dans chaque navigateur que nous utilisons comme Chrome, Firefox, Edge ou Safari, le code est interprété et exécuté par un moteur JavaScript, c'est à lui que revient le travail d'exécuter le code, et uniquement le JavaScript. Malheureusement, JavaScript n'est pas idéal au point de vue des ~~performance~~ pour toutes les tâches que nous voulons effectuer. C'est là qu'intervient WebAssembly, c'est est un nouveau type de code qui peut être exécuté dans les navigateurs modernes. Il a été créé pour obtenir de meilleures performances sur le web. Comment cela est-il possible ? C'est un format binaire de bas niveau qui a une petite taille, donc très rapide à charger et à exécuter. La clé est que nous n'écrivons pas WebAssembly, nous le compilons d'autres langages de niveau supérieur comme du C, C++ ou encore du Rust.		Dans chaque navigateur que nous utilisons comme Chrome, Firefox, Edge ou Safari, le code est interprété et exécuté par un moteur JavaScript, c'est à lui que revient le travail d'exécuter le code, et uniquement le JavaScript. Malheureusement, JavaScript n'est pas idéal au point de vue des performances pour toutes les tâches que nous voulons effectuer. C'est là qu'intervient WebAssembly, c'est est un nouveau type de code qui peut être exécuté dans les navigateurs modernes. Il a été créé pour obtenir de meilleures performances sur le web. Comment cela est-il possible ? C'est un format binaire de bas niveau qui a une petite taille, donc très rapide à charger et à exécuter. La clé est que nous n'écrivons pas WebAssembly, nous le compilons d'autres langages de niveau supérieur comme du C, C++ ou encore du Rust.

	=== Mots clés ===		=== Mots clés ===

Quentin.Fombaron1: /* Partie 2 */

2018-12-16T15:03:17Z

Partie 2

← Older revision		Revision as of 15:03, 16 December 2018
Line 192:		Line 192:
	</syntaxhighlight>		</syntaxhighlight>

	On obtient alors le comportement voulu :		On lance la commande <code>npx serve</code> pour créer un serveur et ainsi éviter l'erreur "Cross-origin resource sharing". On obtient alors le comportement voulu :

	[[File:WebAssemblyDemo3.png\|1200px\|center\|Demo3]]		[[File:WebAssemblyDemo3.png\|1200px\|center\|Demo3]]

Quentin.Fombaron1: /* Partie 2 */

2018-12-16T14:45:46Z

Partie 2

← Older revision		Revision as of 14:45, 16 December 2018
Line 140:		Line 140:
	Ce que l'on télécharge est en réalité le fichier .wasm		Ce que l'on télécharge est en réalité le fichier .wasm

			'''square.wasm'''
	<syntaxhighlight lang=text>		<syntaxhighlight lang=text>
	�asm��`��p��memory��		�asm��`��p��memory��
Line 148:		Line 149:
	Il suffit ensuite d'importer le fichier binaire .wasm dans le Javascript :		Il suffit ensuite d'importer le fichier binaire .wasm dans le Javascript :

			'''script.js'''
	<syntaxhighlight lang=javascript>		<syntaxhighlight lang=javascript>
	let squareWASM ;		let squareWASM ;
Line 167:		Line 169:
	Et enfin, importer le script JS dans l'HTML :		Et enfin, importer le script JS dans l'HTML :

			'''index.html'''
	<syntaxhighlight lang=html5>		<syntaxhighlight lang=html5>
	<!DOCTYPE html>		<!DOCTYPE html>

Quentin.Fombaron1: /* Partie 2 */

2018-12-16T14:44:47Z

Partie 2

← Older revision		Revision as of 14:44, 16 December 2018
Line 96:		Line 96:
	== Partie 2 ==		== Partie 2 ==

			[[File:WebAssemblyDemo2.png\|1200px\|center\|Demo2]]


	On écrit un exemple simple en C++ dans le [https://mbebenita.github.io/WasmExplorer/ compilateur en ligne]		On écrit un exemple simple en C++ dans le [https://mbebenita.github.io/WasmExplorer/ compilateur en ligne]
Line 190:		Line 190:

	On obtient alors le comportement voulu :		On obtient alors le comportement voulu :

			[[File:WebAssemblyDemo3.png\|1200px\|center\|Demo3]]

	= Sources =		= Sources =

Quentin.Fombaron1: /* Partie 1 */

2018-12-16T14:43:50Z

Partie 1

← Older revision		Revision as of 14:43, 16 December 2018
Line 92:		Line 92:

	Puis à l'adresse <code>http://localhost:8080/</code>		Puis à l'adresse <code>http://localhost:8080/</code>
	[[File:WebAssemblyDemo.png\|1200px\|center\|~~The end of Javascript ?~~]]		[[File:WebAssemblyDemo.png\|1200px\|center\|Demo]]

	== Partie 2 ==		== Partie 2 ==