Poznaj Blazora. Wykorzystaj potencjał .NET i C# do budowania aplikacji webowych bez użycia JavaScript.

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 przez cały czas 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 przez cały czas 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 uproszczeniu 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 w tej chwili 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: ```wasm (module (import "env" "memory" (memory 1)) (import "env" "log" (func $log (param i32 i32))) (data (i32.const 0) "Hello, World!") (func (export "hello") i32.const 0 i32.const 13 call $log ) ) ``` 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: ```csharp @page "/customers/{name}" @using Microsoft.AspNetCore.Authorization; @inject HttpClient Http @attribute [Authorize] Hello @customer.Name @if (@customer is null) { Loading data... } else {

Welcome: @customer.Name

} Get Customer @code { private Customer? customer; [Parameter] public string Name { get; set; } private async Task GetCustomer() { customer = await Http.GetAsync($"/api/customers/{Name}"); } } ``` Na samej górze znajduje się sekcja ze znacznikami wspólnymi dla całej strony: - @page oznacza, iż 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 dzięki 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, iż 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, iż 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ć, ale 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](https://www.sages.pl/szkolenia/blazor-7.0), podczas którego stworzymy kompletne rozwiązanie z dostępem do bazy danych i autoryzacją. Do zobaczenia!