En kjapp intro til Blazor. Fra mitt foredrag for NNUG Trondheim den 4. oktober 2018.

1. Blazor, en kjapp intro
Rune Andreas Grimstad, @runegri, rune@udelt.no

2. Blazor er ...
 Browser Razor
 SPA
 Webassembly
 .Net
 Tidlig teknologi, uferdig

3. Hvorfor?
 Ikke for å ta livet av Javascript!
 Valgfrihet i rammeverk og spark, fleksibilitet
 Gode utviklingsverktøy
 Gjenbruke kunnskap
 Gjenbruke kode
 (Fordi vi kan!)

4. Hvordan er dette mulig?
 WebAssembly og Mono
 Startet med å kjøre i DotNetAnywhere (DNA)
 Kjører nå i Mono, kompilert for WebAssembly
 Laster vanlige .NET-biblioteker (dll)
 Bruker fremdeles JS for DOM og mye annet
 Dette vil endre seg i framtidige versjoner av WebAssembly

5. Hvordan Blazor er oppbygd
 Komponenter
 Databinding
 Event handling
 Livssyklus
 Layouts
 Routing
 Dependency Injection
 Javascript interop
 Server-side

6. Kode!
Nytt prosjekt, gjennomgang

7. Komponenter
 Grunnsteinen i en Blazor-app
 Gjenbrukbare HTML-fragmenter
 Brukes som egne hjemmelagde HTML-tagger
 Kan ta parametre via [Parameter]
 Kan få innhold via parametre, må hete ChildContent
 Binding

8. Komponenter - Databinding
 For input-elementer bruker man syntaksen bind=“@propertynavn”
 Formattering via format-value
 Har en egen syntaks for databinding til komponenter
 bind-{propertynavn}
 Krever en parameter propertynavn og en tilhørende parameter av typen Action<>
{propertynavn}Changed

9. Komponenter - Event handling
 Kan håndtere de fleste vanlige events som OnClick, OnSubmit, OnChange, osv.
 Bruker vanlig binding-syntaks for å peke til en metode
 onclick=“@OnClickHandler”
 Noen eventer gir argumenter, event handler trenger ikke å ta i mot disse
 Kan bruke lamdametoder
 onclick=“@(e => something.something())”

10. Komponenter - livssyklus
 OnInit / OnInitAsync
 Fungerer i praksis som en konstruktør
 OnParametersSet / OnParametersSetAsync
 Før parametere settes i komponenten
 OnAfterRender / OnAfterRenderAsync
 Kalles etter komponenten er ferdig rendret
 Kalles også hvis komponenten oppdateres
 ShouldRender
 Kan overstyres for å kontrollere rendring av komponenten
 Kalles for å tvinge komponenten til å oppdatere seg

11. Komponenter - IDisposable
 Kan implementeres for å sikre opprydding av ressurser
 @implements IDisposable
 Dispose() {}

12. Komponenter – “code-behind”
 Kan implementere en klasse som arver fra BlazorComponent
 View må kalle @implements {klassenavn}
 Den ryddigste måten å skille design og implementasjon

13. Kode!
Gammel og ny kode i en herlig blanding...

14. Layouts
 Egentlig komponenter for sideoppsett
 Arver fra BlazorLayoutComponent
 @Body definerer innholdet i siden
 Komponenten bruker @layout for å markere hvilken layout som skal brukes
 Kan markere at alle komponenter i en mappe skal bruke samme layout via
_ViewImports.cshtml

15. Routing
 Bruker @page for å markere en url
 @page /route
 @page /route/{verdi}
 Krever en [Parameter] string Verdi {get; set;}
 NavLink rendrer en <a>-tag med klassen active satt eller ikke satt

16. Dependency Injection
 Veldig likt Asp.net Core
 services.Add / AddSingleton / AddTransient
 Constructor injection
 Komponenter via @inject eller [Inject] i kode
 Standardtjenester
 -IUriHelper
 HttpClient

17. Javascript interop
 IJSRuntime via JSRuntime.Current
 InvokeAsync<T>(metode, parameter1, ...)
 Kan kastes til IJSInProcessRuntime for Invoke<T>
 Alle JS-metoder må være scopet til window

18. Javascript interop – kjøre .Net fra JS
 DotNet.invokeMethod(assembly, metodenavn, parameter1, ...)
 DotNet.invokeMethodAsync
 Kaller en statisk metode, markert med [JSInvokable]

19. Hvordan kjøre Blazor?
 Som en komponent i en vanlig webside
 Evt i en Asp.Net Core-side
 Som en desktop applikasjon via Electron
 Som en terminal der programkoden kjører på serveren
 Via SignalR

20. Server-side Blazor
 Egen type prosjekt
 Bruker SignalR
 Akurat samme struktur og modell som “vanlig” Blazor

21. Kode!
Veldig kort gjennomgang av server-side Blazor

22. ... også kom Blazor 0.6 på Tirsdag!
 Komponenter med maler
 F.eks. ListView med en mal for hvert list item
 RazorTemplates – små gjenbrukbare razor-snutter
 Støtte for Azure SignalR Service
 Denne vil hete Razor Components og blir en del av .Net Core 3.0!

23. Til slutt noen nyttige ressurser
 https://blazor.net/
 Her finner du stort sett alt
 http://learn-blazor.com/
 Alternativ ressurs for Blazor
 https://blogs.msdn.microsoft.com/webdev/category/blazor/
 Microsofts Blazor-blogg
 https://github.com/aspnet/Blazor
 Koden
 https://www.youtube.com/watch?v=MiLAE6HMr10
 Den første demoen av Blazor, på NDC 2017