Geen Javascript meer voor mij?

14 jul Geen Javascript meer voor mij?

Geplaatst op 11:59h in Algemeen door
0 Likes

Vandaag zijn Angular, React, Vue, enz. de meest populaire Javascript frameworks voor de ontwikkeling van webapplicaties. Het ASP.NET team bij Microsoft heeft hiervoor een alternatief ontwikkeld: Blazor. Dankzij Blazor kunnen we ook webapplicaties ontwikkelen, maar dan in C#.

Blazor?

Blazor is een naamcombinatie van Browser en Razor. Blazor is een open-source client-side UI-framework dat toelaat om een interactieve UI te bouwen met HTML, CSS, C# en Razor in de plaats van Javascript. Dankzij Blazor kan er zowel voor de front-end als back-end ontwikkeld worden in C#, wat toelaat om code en bestaande of zelfgeschreven libraries te delen en te hergebruiken. Met behulp van WebAssembly werkt de front-end code geschreven in C# in alle moderne browsers.

Hoe werkt Blazor?

Blazor webapplicaties bestaan uit herbruikbare UI-componenten die geïmplementeerd kunnen worden met de Razor syntax, in combinatie met C#. De .cshtml broncodebestanden die we kennen uit ASP.NET zijn vervangen door .razor broncodebestanden. In deze bestanden kunnen we simpelweg aan UI event handling, data binding, UI state management, enz. doen. Er wordt geen onderscheid gemaakt tussen pagina’s en componenten. Een pagina is niet meer dan een component met een extra @page directive.

blazor-page

Blazor webapplicaties hosten

Een Blazor webapplicatie kent twee hosting models:

Blazor Server

Via het “Blazor Server”-hosting model draait de Blazor webapplicatie op een webserver, bovenop de volle .NET Core runtime. Wanneer een gebruiker de webapplicatie laadt, wordt er een kleine javascript file gedownload die een real-time, two-way SignalR-connectie opzet met de webserver. Elke gebruikersinteractie wordt via SignalR naar deze webserver verstuurd, die het op zijn beurt verwerkt. Nadat de server klaar is met de verwerking worden, via dezelfde SignalR-connectie, de UI wijzigingen terug naar de client gestuurd en toegepast op het Document Object Model, of DOM.

blazor-server

Blazor WebAssembly

Het “Blazor WebAssembly”-hosting model is het meest interessante hosting model en een directe concurrent voor de eerder genoemde populaire Javascript frameworks. De Blazor componenten worden rechtstreeks uitgevoerd in de browser die gebruik maakt van een op WebAssembly-gebaseerde .NET runtime. Wanneer een gebruiker de app laad, wordt de Blazor app tezamen met de .NET Runtime gedownload naar de browser. Op deze manier draait de .NET code rechtstreeks in jouw browser, zonder gebruik te moeten maken van plugins of dergelijke. In tegenstelling tot Blazor Server gebeurt hier de verwerking van de UI wijzigingen in de browser en is er dus geen extra server-client communicatie meer nodig.

blazor-webassembly

Voor- en nadelen

  • Voordelen
    • Blazor Server
      • Snelle opstart wegens kleine download
      • Code blijft op de server
    • Blazor WebAssembly
      • Offline support
      • Kan gehost worden als statische website
      • Draait volledig clientside
  • Nadelen
    • Blazor Server
      • Geen offline support, continu connectie met server is vereist
      • Hogere UI latency
    • Blazor WebAssembly
      • Trage opstart wegens grote download
      • Trage runtime performantie

Hoe zit het met Javascript?

Wilt dit nu zeggen dat we geen Javascript meer kunnen gebruiken? Nee totaal niet.
Via JavaScript interop kunnen we nog steeds gebruik maken van onze “favoriete” Javascript libraries. Een Blazor webapplicatie staat toe om vanuit .NET methodes JavaScript functies aan te roepen en .NET methodes aan te roepen vanuit JavaScript functies.

blazor-js1

Conclusie

Blazor is echt een game changer. Het heeft front-end ontwikkelingen terug leuk gemaakt voor C#-ontwikkelaars. In combinatie met een goede UI library, zoals bijvoorbeeld MubBlazor, ontwikkel je in no-time een interactieve en dynamische webapplicatie in jouw favoriete ontwikkeltaal. De gewoontes en voorkeuren die je misschien hebt voor back-end development zijn nu ook van toepassing op front-end development. De echte hype zit misschien zelfs achter de flexibiliteit van Blazor. Eén programmeermodel dat je overal kan toepassen!

Bye bye JavaScript?