Commençons avec les WebAssembly et Blazor

avr. 4 2018 2:05

Série d'article sur Blazor :

La notion de WebAssembly est toute neuve puisqu'elle ne date que de Mars 2015. Le principe est parti d'une interrogation : comment faire pour accélérer les performances des applications web ?

a

Première solution, améliorer les moteurs d'interprétation javascript (mais vous aurez remarqué que depuis quelques années, les Google, Microsoft & Firefox se sont calmés sur leurs communications sur les perfs de leurs moteurs respectifs). On peut certainement encore aller plus vite, mais il n'y aura pas de gap monstrueux.

Donc l'autre solution est d'imaginer que les navigateurs puissent exécuter du code "natif" (ou presque). D'ou l'idée géniale (faut pas bourrer, c'est comme Javas et .NET) de créer un langage intermédiaire, proche de l'assembleur qui pourra être intérprété par le navigateur.

D'ou le projet WebAssembly (http://webassembly.org/), reconnu par le W3C, dont la principale fonction est de définir ce langage intermédiaire (le 1er public working draft ne date que du 15 Février dernier).

Bizarrement, ce projet a immédiatement été suivi par les principaux navigateurs puisqu'il est supporté par Chrome, Firefox, Safari et Edge.

Donc maintenant qu'on a ce langage intermédiaire, il faut pouvoir l'écrire. Alors tout comme en .NET ou vous pouvez vous amuser à programmer en IL, vous pouvez programmer en WAT.

What is WAT ?

WAT est la représentation textuelle du code binaire. Il y a une équivalence parfaite en le code WAT et le WASM (il existe des "traducteurs", décompilateurs qui traduisent le code binaire en WAT et inversement).

Par exemple, voici du WAT :

(module
 (table 0 anyfunc)
 (memory $0 1)
 (export "memory" (memory $0))
 (export "main" (func $main))
 (func $main (; 0 ;) (result i32)
  (i32.const 42)
 )
)

Sympa non ? Son équivalent en C est :

int main() {
  return 42;
}

Alors même si j'aime pas le C, je le préfère largement au WAT ;-) D'ou l'idée de créer des "compilateurs", qui traduisent votre code en langage de "haut niveau" en WAT/WASM.

Je résume :

  1. Vous écrivez dans votre langage de prédilection (C, C++, C#, VB .NET, F#, etc.),
  2. Un compilateur le traduit en code binaire WASM,
  3. Le navigateur charge ce code WASM et le compile en code natif
  4. Le navigateur exécute le code natif (dans une sandbox) à la vitesse de l'éclair.
NB : Dans les specs des WebAssembly, il y a la définition du code intermédiaire mais aussi comment ce code est chargé par le navigateur et comment il peut intéragir avec le DOM et le code javascript de l'application.

Et la bonne nouvelle, c'est qu'en .NET, l'équipe de Mono chez Microsoft a eu la bonne idée de créer un compilateur Wasm (ce n'est pas vieux, cela a été rendu public début de cette année). Vous pouvez même participer à ce projet Open Source sur Github.

OK, j'ai un compilateur qui me génère du WASM à partir de mon code C#, mais comment je fais une appli web moi ?

Blazor, les grands principes

C'est là qu'apparait notre projet Blazor.

Blazor est un framework SPA (Single Page Application) qui vous permet d'écrire du code en .NET, code qui sera exécuté côté client, dans le navigateur. Cool non ?

Plus la peine d'apprendre le javascript et profitez de la puissance de .NET pour écrire des applications SPA de la mort qui tue.

Comme son nom l'indique, Blazor est basé sur le moteur de rendu Razor, moteur bien connu des développeurs d'application ASP .NET MVC.

Tout comme une application ASP .NET MVC, vous allez créer des pages .cshtml (ou .vbhtml) avec du code behind. La différence majeure, c'est que le code que vous aurez écrit s'exécutera côté client, dans le navigateur et non côté serveur.

Magique ? Non, juste une application de tout ce qu'on a exposé ci-dessus :

  1. Votre application Web est compilée dans une assembly .NET standard (Razor génère des classes à partir de la page .cshtml que vous avez écrite),
  2. Quand le navigateur charge la page index.html, il charge le framework .NET de Mono (compilé en wasm) qui charge votre dll (.NET standard),
  3. Le framework Mono .NET WASM exécute alors votre appli,
  4. Cette dernière génère dynamiquement le code html (issu de l'interprétation de Razor) et l'injecte dans votre page index.html.
  5. Quand par exemple on clique sur un bouton, l'évènement est transmis par le framework Blazor à votre dll qui peut réagir, mettre à jour l'UI qui est injectée à nouveau dans le DOM.

Nous verrons plus tard plus en détail tout ce que contient Blazor car il y a pas mal de petites subtilités (comme par exemple le wrapper HttpClient).

Voyons maintenant comment tester Balzor.

Prérequis

Au jour ou j'écris ces lignes, Blazor en est à sa version 0.1 : c'est dire si c'est le début. Comme se plait à le dire Microsoft, c'est un projet expérimental, proposé en Open Source à la communauté. On verra quel est son accueil. (même au sein de Microsoft, tout le monde n'est pas du même avis sur l'avenir, la pertinence de Blazor).

Toujours est-il que les WebAssembly sont elles en plein boom et ce serait dommage de rater le train (<BlagueA2Balles>surtout qu'il y en a pas beaucoup aujourd'hui en France, jours de grêve de la SNCF</BlagueA2Balles>).

La première étape est d'installer le .NET Core 2.1 SDK. Il est encore en version preview aujourd'hui.

Deuxième étape (car les lignes de commande, c'est bien, mais Visual Studio c'est mieux), installer la version 15.7 de Visual Studio.

En mode Preview aujourd'hui, vous pouvez la charger gratuitement ici.

Pendant l'installation, pensez bien à cocher l'option Développement web et ASP .NET ainsi que le développement multiplateforme .NET Core.

Rassurez-vous : Vous pouvez installer cette version Preview en même temps que la version "officielle" de Visual Studio. LEs 2 environnements de développement coexistent sans problèmes.

Une fois l'installation terminée, comme Blazor ajoute des nouvelles fonctionnalités à Razor (des nouvelles languages extensions), il faut que Visual Studio les reconnaisse.

Donc téléchargez et installez ASP .NET Core Blazor Language Services Extension.

That's it! Vous êtes prêt pour tester votre première application Blazor.

Ma première appli Blazor

Lancez donc Visual Studio 2017 15.7 Preview, puis nouveau projet de type Web Core :

Vous devez ensuite choisir le template qui vous plait :

Le 1er template (Blazor seul) crée une appli cliente uniquement (comme un site web avec que du javascript, css et html).

Le second, plus complet, crée une appli cliente, une application serveur hébergeant les Web API consommés par l'appli cliente et un projet partagé entre les 2 (c'est là un des gros avantages de Blazor).

Faites comme vous voulez mais essayez tout d'abord le 1er template puis lancez le et regardez comment cela se passe dans le navigateur (activez le mode Développeur, F12).

Dans un premier temps vous verrez que le navigateur charge la webassembly mono.wasm :

Puis cette dernière télécharge et interprète les dlls .NET Standard de votre application avec ses dépendances (dont le framework) :

Nous verrons dans prochain article en détail le contenu de cette première application.

Bon dev!

blog comments powered by Disqus