Blazor
Wat is Blazor en wat kan je ermee?
Ontwikkel web apps in .NET, zónder Javascript!
Er zijn verschillende frameworks beschikbaar om een intelligente web app (ook wel SPA / Single Page Application genoemd) te bouwen. Veel gebruikt zijn Angular, React en Vue. Omdat tot voor kort alle browsers alleen Javascript ondersteunden, zijn deze frameworks daarop gebaseerd en schrijf je je code dus in Javascript of Typescript.
Als je gespecialiseerd bent in C#.NET – en daar je interesse en kunde liggen – is het niet ideaal om je ook in Javascript te moeten verdiepen. Je kunt een uitstekende backend ontwikkelen met ASP.NET en ook je native iOS en Android apps kun je met C#.NET ontwikkelen met Microsoft Xamarin, maar voor je web app moest je toch weer naar Javascript. Tot nu!
Gecompileerde .NET code in je browser
Op 19 mei 2020 heeft Microsoft Blazor WebAssembly officieel gereleased. Blazor maakt het mogelijk om gecompileerde .NET code te runnen in de browser! Je hebt daar de volledige .NET Standard library beschikbaar en je hebt géén plugin nodig (zoals vroeger bij Silverlight).
Blazor is gebaseerd op WebAssembly dat door alle moderne browsers wordt ondersteund. Het werkt dus ook op iOS en Android in de browser.
Verkocht
In eerste instantie was ik niet zo enthousiast: ik vond de Razor-voorbeelden met gecombineerde HTML- en C#-code bij elkaar in één bestand er erg rommelig uitzien; zie bijvoorbeeld hier. Maar in de praktijk (anders dan in die korte voorbeelden) combineer je de HTML- en de C#-code niet in hetzelfde bestand, maar scheid je die twee in aparte bestanden. Visual Studio houdt die bestanden dan bij elkaar. En ik kan je zeggen: direct toen ik ermee aan de slag ging was ik verkocht. Het is werkelijk ongelooflijk wat er opeens allemaal mogelijk is in de browser.
Je HTML wordt supersnel in de browser opgebouwd en je communiceert alleen nog via je API met je ASP.NET Core server om data uit te wisselen. Maar het grootste voordeel is wel, dat je je code gewoon in C#.NET kunt schrijven. Niet alleen de code voor je pages, maar ook al je business logic, (view)models, etc.
Een wereld van nieuwe mogelijkheden
Ik werk nu een maand of negen full time en intensief met Blazor en ik merk vooral dat de manier van werken heel anders is dan bij Javascript/Typscript gebaseerde frameworks. Doordat je nu in de browser volledig kunt beschikken over C#.NET, opent zich een wereld van nieuwe mogelijkheden. Dat is best wel even wennen!
Ervaren gebruikers zullen hun vele geliefde Javascript-/Typscript-componenten zeker missen. Je kunt die componenten nog wel gebruiken via Blazor Javascript Interop, maar ik raad aan om ze waar mogelijk op termijn te vervangen door Blazor/Razor componenten, waarbij de compiler de HTML- en C#-code netjes voor je bij elkaar houdt.
Wij kunnen jou helpen
Wil je meer informatie of kun je (bij je eerste opzet) wel wat hulp gebruiken, neem dan vooral contact met ons op. Wij helpen je graag op weg! Of je ons nu een paar weken full time bij je project wilt betrekken, of dat je maar zo nu en dan wat vragen hebt; er is altijd wel een modus te vinden waarin wij onze kennis aan jou kunnen overdragen. Vind het wiel niet opnieuw uit en maak samen met ons een vliegende start, van een beetje hulp tot het uitbesteden van je hele project. Jij beslist.
Een technische beschrijving
Je pages en web-componenten zijn .razor componenten. Die kunnen uit een combinatie van HTML- en C#-code bestaan (waarbij de C#-code in een @code blok staat) zoals je kunt zien in dit simpele voorbeeld op deze Blazor webpagina.
Maar je kunt de C#-code ook in een aparte C# (partial) class zetten, die Visual Studio netjes voor je bij elkaar houdt. Je C#-code voor de Counter.razor page staat dan in Counter.razor.cs, netjes als C# (partial) class. Zelf gebruik ik het @code blok alleen in heel simpele componenten; zodra het wat meer regels C#-code wordt, gebruik ik partial classes.
Je kunt gemakkelijk herbruikbare Razor-componenten ontwikkelen waarin de HTML- en C#-code gecombineerd is. Binnen je HTML-code kun je je C#-properties als parameters gebruiken (dat kan zelfs in je CSS!). Wanneer één of meer parameters wijzigen, roep je StateHasChanged() aan. Blazor zoekt dan uit hoe de HTML gewijzigd is en stuurt alleen die wijzigingen naar de render tree in de browser. Dat is een iets andere aanpak dan bij WPF/Xaml/Xamarin forms, waarbij gewijzigde properties via PropertyChanged doorgeven dat de view ge-üpdatet moet worden. Het voordeel is dat de properties in je Blazor view-code een stuk simpeler kunnen zijn.