Aller au contenu principal

Blazor x WebAssembly

Blazor vs. Blazor Server vs. Blazor WASM​

Blazor est un framework de développement Web open source créé par Microsoft, qui permet aux développeurs de construire des applications Web interactives en utilisant C# et Razor, plutôt que JavaScript.

Blazor offre deux modèles distincts: Blazor WebAssembly (Blazor WASM) et Blazor Server.

La principale différence entre Blazor WASM et Blazor Server est au niveau de l'exécution du code et du rendu HTML.

  • Blazor WebAssembly: Le code C# est compilé en WebAssembly et exécuté directement dans le navigateur de l'utilisateur. Cela signifie que toute la logique de l'application est gérée côté client. On fait des appels à un API pour obtenir les données en provenance du serveur et sauvegarder des données sur ce dernier.

  • Blazor Server: Le code C# est exécuté sur le serveur et les mises à jour du Document Object Model (DOM) sont envoyées au navigateur de l'utilisateur via une connexion SignalR en temps réel. La logique de l'application est donc gérée entièrement côté serveur.

Blazor WebAssembly (Blazor WASM) est donc une variante de Blazor qui exécute le code C# directement dans le navigateur en utilisant la technologie WebAssembly.

C'est cette technologie que nous utiliserons pour l'application d'administration.

Un exemple bien connu de WASM est l'application Web Figma. En effet, cette dernière fait usage de cette technologie et c'est de cette façon qu'elle est en mesure d'offrir une expérience de qualité desktop pour un type d'application qui habituellement est offert au format natif.

Imgur

WebAssembly​

WebAssembly, ou wasm, est un format de code binaire pour les navigateurs Web conçu pour être plus rapide et plus efficace que JavaScript traditionnellement utilisé pour les applications Web.

Cette technologie présente de nombreux avantages, notamment la rapidité d'exécution et la portabilité. WebAssembly permet d'exécuter du code à des vitesses proches de celles des applications natives, offrant ainsi de meilleures performances et, dans certains cas, une expérience utilisateur améliorée. De plus, WebAssembly est conçu pour être indépendant de la plate-forme, ce qui signifie que le même code peut être utilisé sur différents systèmes d'exploitation et architectures matérielles sans modification.

Un autre avantage de WebAssembly est sa capacité à fonctionner en parallèle avec JavaScript, permettant aux développeurs de tirer parti des forces de chaque technologie. Il est ainsi possible d'utiliser WebAssembly pour certaines tâches et JavaScript pour d'autres.

WebAssembly est désormais pris en charge par la plupart des navigateurs modernes.

Bien que WebAssembly offre de nombreux avantages, il présente également certains inconvénients et limitations qu'il est important de prendre en compte lors de l'évaluation de son utilisation dans un projet de développement Web. Voici quelques-uns des désavantages de cette technologie :

  1. Adoption et support: Bien que la plupart des navigateurs modernes prennent en charge WebAssembly, il existe encore des navigateurs qui ne le supportent pas. Cela peut poser des problèmes de compatibilité pour certaines applications. De plus, la communauté de développeurs WebAssembly est encore relativement petite comparée à celle de JavaScript, ce qui peut limiter les ressources d'apprentissage disponibles.

  2. Taille de téléchargement initial: Bien souvent, le code WebAssembly peut être plus volumineux que l'équivalent en JavaScript. De plus, l'entièreté de l'application est téléchargée lors de la requête initiale. Cela peut entraîner des temps de chargement plus longs pour les utilisateurs, bien que des techniques de compression puissent atténuer cet inconvénient.

  3. Moins adapté pour la manipulation du DOM: WebAssembly n'est pas conçu pour manipuler directement le Document Object Model (DOM) des pages Web. Pour interagir avec le DOM, on doit passer par une couche intermédiaire (Interop) n'étant pas particulièrement facile d'approche. Ainsi, pour les tâches impliquant de nombreuses interactions avec le DOM, JavaScript reste souvent le choix le plus adapté.

  4. Application monopage / Single Page Application (SPA): Une application WASM est en quelque sorte une application monopage. Une page est chargée et son contenu est modifié dynamiquement sans toutefois réellement changer de page du point de vue du navigateur. Cela peut ne pas être un problème, mais peut l'être dans le cas d'une application pour laquelle le référencement est important (SEO).