Archiwum kategorii: Blazor

Hello Blazor

W ostatnich dniach na „ołpen spejsach” i „salonach internetowych” tematem numer 1 jest WebAssembly.

Zaciekawiony, postanowiłem przyjrzeć się tematowi bliżej.

Nowy twór MSu – Blazor jest implementacją WebAssembly w .NET.

Jak to wygląda w praktyce?

Po pierwsze musimy mieć zainstalowany .NET Core 2.1 (>=2.1.402). Przyda się też rozszerzenie do naszego Visual Studio:  ASP.NET Core Blazor Language Services.

Tworzymy nowy projekt typu „ASP.NET Core Web Application” i wybieramy szablon „Blazor”.

F5 i hello world zrobił się sam.

hello World Blazor

Świeżo stworzona solucja:

Podgląd ładowanych zasobów:

[Debug]

[Release]

i faktycznie… serwer zwrócił 13 plików z roszerzeniem dll.

Pierwszą rzeczą jaką zapragnąłem zrobić było pobranie pliku „BlazorHelloWorld.WebApp.dll” i otworzeniu go/jej w dotpeek 🙂

Proszę bardzo, tak to wygląda:

 

Porównałem zawartość dllki z tym co znajduje się w projekcie i mamy odwzorowanie 1 do 1. Każdy widok (to dalej jest widok?;)) – każdy plik o rozszerzeniu cshtml odpowiada klasie.

Na pierwszy ogień dekompiluje klasę _ViewImport. Rezultat niżej.

Zaciekawił mnie tylko atrybut Layout. Cieszy mnie podejście komponentowe, a tak poza tym zgodnie z przewidywaniami ta klasa poza podtrzymaniem życia BuildRenderTree nic nie robi.

Layout:

W szablonie dzieje się już jakaś akcja 🙂

Widzimy, że Layout dziedziczy po innej klasie niż _ViewImports.

W BuildRenderTree najpierw wykonuje bazową metodę budowania drzewa, a następnie drzewo jest rozbudowywane o elementy html’a.

Na uwagę zasługuje:

W końcu to coś innego niż tworzenie elementów html i dodawanie do nich atrybutów.

NavMenu:

Sporo kodu w zdecydowanej większość proste budowanie elementów, ale przyjrzyjmy się bliżej wybranym fragmentom.

Mamy tutaj użytą metodę onclick podpiętą do zdarzenia ToggleNavMenu. Nice… nazwa „UIMouseEventArgs” pachnie trochę wpf’em.

Zobaczmy jak to zrobić od jedynej słusznej strony. NavMenu.cshtml:

Wygląda prosto. Mamy sekcję functions, która pozwala nam na stworzenie metody i zmiennych. Z poziomu razor’a podpinamy do metody onclick zdefiniowaną niżej metodę.

A jak to wygląda w html’u?

Żadnych onclick’ów bezpośrednio w javascript. Zdarzenie zarejestrowane jest w webAssembly. Rąbka tajemnicy uchyliłoby przeanalizowanie plików wasm, ale sami zobaczcie jak to wygląda.

Kolejny fragment wart uwagi to komponent NavLink.

NavLink jest to wbudowany w blazora komponent do tworzenia linków.

W pliku NavMenu.cshtml wygląda to tak:

Można mu ustawić atrybut Match (niestety intellisense nie podpowiedziało mi wszystkich wartości (na dziś są to All i Prefix) ). Kiedy url pasuje do aktualnego adresu do linku jest dodawana klasa „active”.

Więcej o navlink:

Koncepcja jest bardzo ciekawa i nie ukrywam, że mi się podoba.

W końcu po dłuższej przerwie zdecydowałem się napisać artykuł akurat o Blazor’ze 😉