W ostatnich latach obserwujemy, jak aplikacje webowe wypierają "oldschoolowy" desktop stając się standardem. Aby zapewnić tę samą szybkość działania i wygodę korzystania z aplikacji webowych, przetwarzanie interakcji z użytkownikiem trzeba było przenieść z serwera do przeglądarki. Stąd tak popularne jeszcze do niedawna wśród programistów .NET frameworki takie jak ASP.NET Core MVC czy Razor Pages stały się niewystarczające.
Popularność zdobyły natomiast środowiska Angular, React i Vue, ale barierą dla programistów C# jest konieczność posługiwania się w nich językiem JavaScript. Częściowo problem ten rozwiązuje język TypeScript, ale nadal wymaga nauki nowego języka, co wydłuża czas opanowania technologii.
Idealnym rozwiązaniem z punktu widzenia programisty .NET byłaby możliwość posługiwania się językiem C# zarówno po stronie klienta jak i serwera.
I tutaj na scenę wchodzi Blazor
Co to jest Blazor?
Blazor jest open source'owym frameworkiem stworzonym przez Microsoft do tworzenia interaktywnych aplikacji webowych z użyciem czystego języka C#, kodu HTML i szablonów Razor zamiast JavaScript. Tworzenie rozwiązania polega na definiowaniu komponentów, z których budujemy strony, które następnie używamy wewnątrz aplikacji. Co więcej, możemy nadal korzystać ze swoich ulubionych bibliotek w C#, co znacznie ułatwia rozwój aplikacji.
Przeglądarki co prawda nie potrafią bezpośrednio uruchamiać kodu w C#, ale wspierają format WebAssembly, który jest fundamentem dla Blazora.
Jak to działa?
WebAssembly w skrócie WASM, można sobie najłatwiej wyobrazić jako bibliotekę binarną, którą przeglądarka pobiera wraz ze stroną HTML i wykonuje jej kod w izolowanym środowisku, w tak zwanej "piaskownicy". WASM wspierany jest obecnie przez wszystkie popularne przeglądarki, o czym można się przekonać na stronie https://caniuse.com/wasm. WASM pod maską to niskopoziomowy język programowania o reprezentacji tekstowej w postaci notacji S-wyrażeń.
Przykład:
1(module 2 (import "env" "memory" (memory 1)) 3 (import "env" "log" (func $log (param i32 i32))) 4 5 (data (i32.const 0) "Hello, World!") 6 7 (func (export "hello") 8 i32.const 0 9 i32.const 13 10 call $log 11 ) 12)
Powyższy kod wypisuje na konsolę przeglądarki tekst "Hello World!".
Ale gdzie jest obiecany kod C#? C# jak i wiele innych języków programowania, można skompilować do WASM i uruchomić bezpośrednio w przeglądarce lub alternatywnie po stronie serwera zależnie od wybranego modelu hostingu. Cały proces kompilacji bierze na siebie Blazor więc programista .NET może skupić się na kodzie C# aplikacji.
Tworzenie aplikacji
Do rozpoczęcia przygody z Blazorem niezbędna jest znajomość języka C#, podstaw HTML i CSS.
Jeśli masz doświadczenie z MVC i Razor Pages to z pewnością z niego skorzystasz, bo wiele mechanizmów jest żywcem przeniesiona do Blazora, chociażby jak składnia Razor, pomocnicy znaczników (Tag Helpers) czy atrybuty.
W Blazorze wszystko jest komponentem, począwszy od układu stron (Layout), poprzez strony (Pages) a skończywszy na kontrolkach. Zatem twoja praca polegać będzie na kompozycji, czyli łączeniu poszczególnych elementów w całość.
Spójrzmy na kod przykładowej strony:
1@page "/customers/{name}" 2@using Microsoft.AspNetCore.Authorization; 3@inject HttpClient Http 4@attribute [Authorize] 5 6<PageTitle>Hello @customer.Name</PageTitle> 7 8@if (@customer is null) 9{ 10 <LoadingComponent>Loading data...</LoadingComponent> 11} 12else 13{ 14 <p>Welcome: @customer.Name</p> 15} 16 17<button class="btn btn-primary" @onclick="GetCustomer">Get Customer</button> 18 19@code { 20 private Customer? customer; 21 22 [Parameter] 23 public string Name { get; set; } 24 25 private async Task GetCustomer() 26 { 27 customer = await Http.GetAsync($"/api/customers/{Name}"); 28 } 29} 30
Na samej górze znajduje się sekcja ze znacznikami wspólnymi dla całej strony:
- @page oznacza, że jest to strona, dostępna pod wskazanym adresem (tzw. routing)
- @using dołącza wskazaną przestrzeń nazw
- @inject umożliwia wstrzykiwanie zależności bezpośrednio do strony
- @attribute służy do deklarowania atrybutów, w tym przypadku wymagana jest autoryzacja
daje nam z kolei kontrolę nad tytułem strony
Następna sekcja odpowiada za widok, który definiujemy za pomocą składni HTML i Razor w celu powiązania danych (data-binding) i obsługi zdarzeń. Możesz stosować w nim instrukcje warunkowe oraz pętle i nie musisz się przejmować odświeżaniem widoku- Blazor nanosi zmiany na DOM automatycznie. Możemy również osadzać komponenty zdefiniowane wcześniej.
W sekcji @code umieszczamy logikę strony, czyli zmienne i metody, które zapisujemy w języku C#. Dla zwiększenia czytelności kod ten możemy przenieść do osobnego pliku (partial class).
Pamiętajmy, że Blazor to nie tylko biblioteka, ale cały framework bogaty w wiele przydatnych mechanizmów:
- Routing umożliwia nawigowanie między komponentami w aplikacji bez przeładowywania całej aplikacji
- Wstrzykiwanie zależności zapewnia wstrzykiwanie zarejestrowanych usług
- Parametry kaskadowe upraszczają przekazywanie informacji do zagnieżdżonych komponentów
- Izolowane CSS usprawniają stylizowanie aplikacji
- Walidacja formularzy ułatwia weryfikację wprowadzonych danych
- JavaScript Interop umożliwia wywoływanie funkcji JavaScript z C# i odwrotnie
- Debuger dostarcza niezbędnych narzędzi do usuwania błędów
Tworzenie aplikacji w Blazorze jest naprawdę przyjemne, a Microsoft z wersji na wersję wprowadza kolejne usprawnienia, aby było jeszcze łatwiej i szybciej.
Gdzie wykorzystywany jest Blazor?
Blazor nadaje się do tworzenia zarówno prostych aplikacji SPA w stylu kalkulator podatkowy jak i złożonych projektów, chociażby zarządzanie obiegiem dokumentów.
Kluczową sprawą przed rozpoczęciem projektu jest wybór modelu hostingu Blazor Server czy Blazor WebAssembly. Zaletą pierwszego podejścia jest natychmiastowe uruchomienie takiej aplikacji, ale wymagane jest ciągłe utrzymywanie połączenia z serwerem. Drugie podejście umożliwia tworzenie aplikacji bezpołączeniowych, ale wadą jest wydłużony czas uruchomienia aplikacji.
Według zapowiedzi ma to ulec poprawie, bo wraz z premierą .NET 8 dojdzie jeszcze jeden model Blazor Unified, który połączy obydwa podejścia w jedną całość. Programista już na poziomie komponentu będzie mógł decydować, po której stronie ma wykonać się kod albo włączyć tryb automatyczny, który samodzielnie podejmie taką decyzję.
Microsoft wskazuje na jeszcze jedno zastosowanie Blazora do tworzenia aplikacji mobilnych i desktopowych. Polega to na tym, że komponenty Blazor umieszczamy wewnątrz aplikacji natywnej w środowisku MAUI.NET W rezultacie jeden kod może być współdzielony przez aplikację webową, mobilną i desktopową co dla niektórych może być kluczową sprawą przy wyborze technologii.
Podsumowanie
Wielu twierdzi, ze przyszłość aplikacji internetowych należeć będzie do WebAssembly. Zatem Blazor idealnie wpisuje się w ten trend, oferując programistom .NET wygodne narzędzie do budowania nowoczesnych rozwiązań. Zatem nie warto czekać, lecz zacząć poznawać nową technologię już teraz, bo za chwilę może stać się ona kluczową w ekosystemie .NET
Jeśli chcesz poznać Blazor od podszewki sprawdź szkolenie Tworzenie aplikacji w Blazor 7.0, podczas którego stworzymy kompletne rozwiązanie z dostępem do bazy danych i autoryzacją. Do zobaczenia!
