Présentation et exemples d’utilisation d’Asm.js

Présentation et exemples d'utilisation d'Asm.js

 

Présentation d’Asm.js

“asm.js est un langage intermédiaire constituant un sous-ensemble du

langage JavaScript. Il permet une amélioration importante des performances pour les applications web écrites en langage à typage statique avec gestion manuelle de la mémoire (comme le C) puis converti en JavaScript par un compilateur source à source. Asm.js ne vise à améliorer les performances que pour un tel code compilé depuis un autre langage, pas celles de code JavaScript écrit à la main.”

 

Voici la déscription d’Asm.js que j’ai pu trouvé sur Wikipedia. Je n'ai pas réussi à l'expliquer mieux que ça et encore moins avec mes mots.

 

En partant de cette description, je vais approfondir les cas d’utilisation et à quoi Asm.js sert.

 

Pour commençer Asm.js permet d’améliorer les performances de vos code écrit en C par exemple, en compilant votre code C en language Java Script et permet de faire des applications Java Script très rapide.

 

Exemple d’utilisation :

 

Nous allons voir tout cela fonctionne avec un exemple plutôt simple :

 

Un problème peut se poser, c’est qu’on sait que Java Script est un langage qui au niveau du typage on peut faire un peu tout est n’importe quoi.

On peut déclarer une variable, lui assigner un nombre, et ensuite lui assigner une chaine de caractère sans aucun problème, dans un premier temps Asm.js va régler se problème en Java Script en faisant des typages un petit plus formelle.

 

Un exemple très simple :

 

var first = 5;
var second = first;

Voilà une chose qu’on voit souvent en Java Script, on déclare une variable avec un Integer de 32-bit et on dit que la variable “second” est égal a la variable “first”, la variable second est alors également un Integer de 32-bit, Sauf que comme je l’ai dis avant, on peut mettre tout est n’importe quoi dans cette variable “second”. Et en C ou en C++ ce n’est pas vraiment possible.

 

Voyons voir ce que donnerez ce code écrit en Asm.js

var first = 5;
var second = first | 0;

Comme on peut le voir il n’y a pas grand chose qui as changé, mise a part un opérateur “ou” dans la déclaration de la variable “second” avec cette opérateur on est sur que c’est un integer de 32-bit qui peut ou qui va lui être assigner.

 

Mais pour la suite nous n’allons pas écrire du code Asm.js a la main, ce serait beaucoup trop fastidieux, pas vraiment maintenable, et on passerait plus de temps a debug notre code qu'à la coder.

Donc la question qu’on peut se poser, c’est comment allons nous faire pour générer notre code Asm.js depuis nos application C/C++ ?

 

Et bien tout simplement en utilisant des outils de générateurs de code JavaScript/Asm.js et pour cela on va se concentrer sur l’outil Emscripten, Je choisis celui-ci mais il en existe une multitude d’autre et libre a vous de trouver celui qui vous convient le mieux.

 

Donc qu’est-que Emscripten ? Outre son nom qui est plutôt difficile à prononcer c’est un compilateur Open Source qui permet de compiler du bitCode LLVM en asm.js qui peut être exécuté par des naviguateur web.

Le bitCode LLVM est généré à partir de vos programme écrit en C/C++

et pour cela on va utiliser un outil pour générer du bitCode LLVM a partir de nos programme C/C++ et c’est : Clang, qui est un outil qui va nous permettre de générer du bitCode LLVM. Une fois qu’on a notre application C/C++ qui est généré en bitCode on a plus qu'à faire appel l’outil Emscripten.

Et par extension Emscripten permet donc de compiler un programme C/C++ en Javascript, et ça tombe bien car c’est exactement ça dont nous avons besoin !

 

Pour illustrer le chemin que va prendre notre programme pour être converti a la fin en Java Script je vous montre ce petit Schéma :

Comme on peut le voir sur ce schéma :

 

N°1 : Nous avons notre application faites en C/C++

 

N°2 : On converti notre application en bitCode LLVM

N°3 : On utilise l’outil Emscripten en lui passant notre bitCode LLVM

 

N°4 : On a notre application en Java Script utilisable sur le net 🙂

 

Finalement le chemin que prend notre programme n’est pas trop compliqué.

 

Caractéristique d’asm.js :

Asm.js est compatible avec JavaScript, et n'apporte aucune fonction supplémentaire mais pour être validé et compilé il ne doit contenir que le sous-ensemble défini par la spécification.

 

Le code Asm.js est compilé en code natif lors de chaque exécution mais le code compilé demeure en place et est réutilisé si le source n'est pas modifié.

Il fonctionne sur tout navigateur mais plus vite quand Asm.js est implémenté.

 

C'est un langage typé sans déclaration. Toutes la variables ont un type qui est attribué lors de la compilation mais non expressément indiqué par le programmeur.

 

Les annotations sont des déclarations qui donnent un type et une valeur par défaut aux variables, notamment quand elles sont les arguments d'une fonction ou les valeurs de retour.. Cela a la forme x = x | 0; La valeur par défaut est 0 et le type est entier.

 

Les chaînes de caractères sont traitées comme des zones de mémoire.

 

Les seules librairies standards valides sont Math et stdlib.

 

La spécification ne fait pas mention d'objets.

 

Un type de tableau générique ArrayBufferView, dont dérivent plusieurs types numériques.

 

L'accès au DOM n'est pas effectué en Asm.js, mais en JavaScript. Il n'est pas accéléré.

 

Il n'a pas de garbage-collector. Le générateur de code gére l'allocation mémoire. Il est prévu d'en inclure un plus tard.

 

Un module est défini sous la même forme qu'une fonction dont la première ligne du corps est "use asm"; Il contient d'autres fonctions. Il peut être utilisé par le JavaScript standard.

 

La compilation dynamique telle que le fait eval est possible. Le code peut donc se développer dynamiquement.

 

Il est prévu de permettre le stockage du code généré pour une compilation unique lors de la première exécution.

 

On ne peut tirer avantage d'Asm.js que si le langage compilé à des types statiques car c'est sur ce point qu'Asm.js trouve sa vitesse. Un langage dynamique devrait plutôt être compilé en JavaScript ordinaire pour fonctionner dans le navigateur.

 

Asm.js et la concurrence :

 

Quelle solution doit-on préférer, Asm.js, ou NaCl, autrement dit des programmes compilés en bitcode pour LLVM, fonctionnant eux-aussi dans le navigateur?

 

Un programme sous NaCl même s'il fonctionne dans le navigateur doit être compilé pour chaque système d'exploitation.

 

Donc le créateur doit fournir de multiples versions ce qui n'est pas le cas pour Asm.js qui fonctionne à l'identique sous tout système.

 

Sachant que Mozilla ne veut pas implémenter NaCl, cela l'exclut de Firefox, et apparemment d'Internet Explorer aussi.

 

Asm.js fonctionne d'office puisqu'un compilateur JS existe déjà dans chaque navigateur.

 

On sait l'optimiser et il ne faut que quelques modification mineures pour qu'il fonctionne sur V8 ou autre JIT (Just-In-Time) ou AOT (Ahead-Of-Time).

 

L'annonce de WebAssembly en juin 2015, rend NaCl obsolète, d'autant qu'il sera supporté par tous les navigateurs alors que NaCl ne l'est que par Chrome.

 

Mais ce n'est pas le cas d'Asm.js avec lequel il va coexister.

 

En fait le code WebAssembly sera similaire au code Asm.js au départ, avant de diverger.

 

Wasm pourra être converti en Asm.js pour fonctionner sur les anciens navigateurs.

 

Il il pourra aussi être utilisé dans des modules JavaScript ou Asm.js.

 

Exemples de sites fait avec Asm.js :

 

Monster Madness :

 

Monster Madness offre une expérience multi-joueurs sans-plugin grâce aux performances de asm.js, résultat de l'utilisation combinée de JavaScript et l'Unreal Engine 3 porté sur le Web

 

En 2013, Mozilla et Epic Games ont présenté Unreal Engine 3 sur Firefox et d'autres navigateurs grâce à asm.js, Emscripten, et WebGL, démontrant ainsi le pouvoir du Web comme plate-forme dans l'univers des jeux vidéo. Cette démo a attiré l'attention de NomNom Games, une filiale de Trendy Entertainment.

 

En une semaine et avec un soutien technique minimum de la part d'Epic et Mozilla, NomNom adaptait le code de Monster Madness pour Firefox, avec en plus un support multi-joueurs. Le portage HTML5 de Monster Madness repose uniquement sur des technologies Web standardisées.

 

Cette expérience a amené l'entreprise à positionner Emscripten et asm.js au coeur de sa stratégie Web. Aujourd'hui, Monster Madness voit le jour en version Alpha.

 

Monster Madness est disponible sur Firefox, Chrome et Opera en cliquant ici www.playverse.com/Anonplayer/0-a2aadd1b76e14d0e848ea1de18dca4e8

 

Grâce à l'asm.js de Mozilla, il est maintenant possible de faire tourner sur le Web du code compilé dans des langages tels que C et C++ , pour qu'il soit compatible avec tous les navigateurs modernes.

 

Les performances sont optimales et se rapprochent de celles proposées par les applications natives qui optimisent du code de type asm.js comme Firefox et Chrome.

 

Son adoption devrait continuer de croître dans d'autres domaines que celui du jeu vidéo, grâce notamment à la variété des langages utilisables, la qualité des performances obtenues et la facilité du déploiement sur le Web.

 

BananaBread :

 

La Fondation Mozilla a publié un jeu de type shoot them up, BananaBread, pour démontrer les capacités de ses bibliothèques Javascript.

 

Si cela fonctionne dans Mozilla Firefox, tous les navigateurs compatibles Javascript sont bien sûr concernés par ces développements.

 

Aucun téléchargement de plug-in n'est en effet nécessaire : tout s'exécute dans le navigateur.

 

Seul le code javascript est téléchargé (ce qui explique la lenteur de démarrage du jeu).

 

Technologiquement, il s'agit d'une amélioration du module asm.js réalisée par Mozilla avec l'aide d'Epic.

 

Le compilateur Emscripten a permis de convertir un jeu bâti avec le moteur d'animation Unreal Engine 3, écrit en C++, en un ensemble javascript/WebGL.

 

Mozilla a également annoncé le plein support de la norme WebRTC (Web Real Time Communication) dans Firefox 22. Cette norme permet des communications temps réel audio et vidéo en pair-à-pair. WebRTC est utilisé pour les dialogues entre joueurs dans BananaBread.

 

Exemples de code :

La grande utilité d'asm.js est la performance. Bien que celle-ci soit aussi dû avoir votre navigateur et à votre strucure matériel, l'asm.js est compilé de façons à être 4 à 10 fois plus rapides que les dernières versions Firefox et Chrome.

Initialement le code compilé en JS était 10 fois plus lent que du code natif. Mozilla est arrivé a des performances extrèmes qui montre le potentiel de compilé en Asm.Js Cela montre donc, qu'il y aura surement des améliorations de performances encore plus grandes dans les prochaines années.

Il convient de noter que presque toutes les applications qui ciblent Asm.js en ce moment sont des applications C / C ++ compilées à Asm.js en utilisant Emscripten. Dans cet esprit, le type d'applications qui vont cibler Asm.js, dans un proche avenir, sont celles qui bénéficieront de la portabilité de l'exécution dans un navigateur, mais qui ont un niveau de complexité dans lequel une connexion direct à JavaScript est impossible. Jusqu'à présent, la plupart des cas d'utilisation se sont centrés autour de bases de code où la performance est de la plus haute importance: comme dans les jeux en cours d'exécution, les graphismes, les interprètes de langage de programmation et les bibliothèques.

Comme mentionné précédemment, la version actuelle de Firefox est actuellement le seul navigateur qui supporte l'optimisation du code Asm.js. Cependant, il est important de souligner que Asm.js-formaté à partir de code JavaScript est encore justeu du code JavaScript, mais avec un ensemble important de restrictions. C'est pour cette raison que le code Asm.js- compilé peut encore s'exécuter dans d'autres navigateurs comme le code JavaScript normal, même si ce navigateur ne le prend pas en charge.

L'inconvéniant a cela, est la performance de ce code: Si un navigateur ne prend pas en charge les tableaux tapés ou ne compile pas spécialement le code Asm.js, la performance va être bien pire. Bien sûr, ce n'est pas spécial pour Asm.js, probablement tout navigateur qui n'a pas ces fonctionnalités souffre également d'autres manières.

Conclusion :

Comme vous pouvez probablement le voir à partir du code ci-dessus Asm.js n'est pas conçu pour être écrit à la main. Il va exiger une sorte d'outillage pour être écrire et il va exiger des changements plutôt drastiques dans la façon dont serait normalement écrit en JavaScript. Le cas d'utilisation le plus courant pour Asm.js en ce moment est dans les applications C / C ++ se compilant en JavaScript.

Presque aucune de ces applications interagissent avec le DOM d'une manière significative, au-delà d'utiliser WebGL. Pour qu'il soit utilisable par les développeurs réguliers, il va y avoir des langages intermédiaires qui sont plus accessibles aux utilisateurs qui peuvent compiler en Asm.js. Le meilleur candidat, à l'heure actuelle, est LLJS dans lequel le travail commence à faire la compilation en Asm.js. Il convient de noter qu'un langage comme LLJS va encore être très différente de JavaScript et sera probablement perturbant pour beaucoup d'utilisateurs JavaScript. Même avec un langage agréable plus accessible à l'utilisateur comme LLJS, il est probable qu'il ne sera toujours utilisé que par les développeurs les plus hardcore qui veulent optimiser des morceaux de code extrêmement complexes.

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *