Czym jest Blazor?<\/h2>\n\n\n\n
U podstaw le\u017cy technologia WebAssembly, kt\u00f3ra pozwala na uruchamianie natywnego kodu C# czy chocia\u017cby Rust w przegl\u0105darce. Po wej\u015bciu na stron\u0119 pobierany jest dotnet runtime oraz dllki z kodem aplikacji.<\/p>\n\n\n\n Nast\u0119pnie jest on wykonywany bezpo\u015brednio przez przegl\u0105dark\u0119. Aplikacje napisane w taki spos\u00f3b mog\u0105 by\u0107 nawet hostowane jako statyczne bez backendu i dzia\u0142a\u0107 w pe\u0142ni offline.<\/p>\n\n\n\n Mieli\u015bmy ju\u017c do czynienia z pr\u00f3bami uruchomienia kodu innego ni\u017c JavaScript poprzez przesy\u0142anie akcji u\u017cytkownika na serwer i renderowanie odpowiedzi (WebForms) czy konwertowania kodu do JavaScriptu (SharpKit), lecz tym razem mo\u017cemy wykona\u0107 kod C# bezpo\u015brednio w przegl\u0105darce!<\/strong><\/p>\n\n\n\n Obecnie wszystkie przegl\u0105darki poza IE wspieraj\u0105 standard WebAssembly, wi\u0119c nie musimy si\u0119 o to martwi\u0107.<\/p>\n\n\n\n Nie zabiera nam to mo\u017cliwo\u015bci wykorzystania JavaScriptu w naszym kodzie. Zosta\u0142 stworzony do tego serwis JSInterop, kt\u00f3ry pozwala na komunikacje w obie strony, dzi\u0119ki czemu biblioteki takie jak Bootstrap czy Materialize mog\u0105 by\u0107 wykorzystywane wraz z Blazorem. Powsta\u0142o nawet wiele wrapper\u00f3w np. MudBlazor czy Blazorise, kt\u00f3re maj\u0105 przygotowan\u0105 komunikacje mi\u0119dzy Blazorem a JavaScriptem wraz z opakowanymi elementami bibliotek w komponenty Blazora.<\/p>\n\n\n\n Wykorzystanie Blazora w projektach mo\u017ce przynie\u015b\u0107 kilka pozytywnych skutk\u00f3w. Jako developerzy, zwi\u0105zani ze stackiem technologicznym Microsoftu wi\u0119kszo\u015b\u0107 naszego oprogramowania powstaje w j\u0119zyku C#, a co za tym idzie mamy w nich najwi\u0119cej do\u015bwiadczenia, kt\u00f3re mo\u017cemy przy wykorzystaniu Blazora przenie\u015b\u0107 na frontend, zwi\u0119kszaj\u0105c tym samym nasz\u0105 produktywno\u015b\u0107.<\/p>\n\n\n\n Ponadto b\u0119d\u0105c developerami aplikacji desktopowych, mobilnych b\u0105d\u017a backednowych \u0142atwiej b\u0119dzie nam wej\u015b\u0107 w \u015bwiat frontendu wykorzystuj\u0105c ten sam j\u0119zyk i wiele bibliotek, kt\u00f3rych u\u017cywali\u015bmy do tej pory. Natomiast, je\u017celi rozwijamy projekt legacy w technologiach takich jak WebForms to Blazor proponowany jest jako rozwi\u0105zanie, do kt\u00f3rego migracja b\u0119dzie o wiele prostsza i szybsza ni\u017c do alternatywnych rozwi\u0105za\u0144 z wykorzystaniem framework\u00f3w Javascript.<\/p>\n\n\n\n Obok Blazora w wersji na aplikacje webowe prowadzone s\u0105 r\u00f3wnie\u017c prace nad .NET MAUI Blazor. Jest to podej\u015bcie z wykorzystaniem Blazora na aplikacje mobilne i desktopowe, wi\u0119c pisz\u0105c aplikacje w Blazorze, mo\u017cemy przenosi\u0107 mi\u0119dzy r\u00f3\u017cnymi platformami.<\/p>\n\n\n\n Aby nie by\u0107 jednostronnym pora na kilka wad Blazora, z kt\u00f3rymi warto si\u0119 zapozna\u0107 przed zdecydowaniem si\u0119 na wykorzystanie go w projektach.<\/p>\n\n\n\n Przede wszystkim Blazor ca\u0142y czas jest wolniejszy, je\u017celi chodzi o za\u0142adowanie aplikacji od alternatywnych rozwi\u0105za\u0144. Dodatkowo, pliki niezb\u0119dne do uruchomienia aplikacji s\u0105 znacznie wi\u0119ksze. Warto o tym pami\u0119ta\u0107 i upewni\u0107 si\u0119, \u017ce nie jest jednym z wa\u017cniejszych wymaga\u0144 w Twoim projekcie.<\/p>\n\n\n\n Oczywi\u015bcie sam Blazor jako nadal stosunkowo nowe rozwi\u0105zanie ma znacznie mniejsz\u0105 rozpoznawalno\u015b\u0107 ni\u017c takie frameworki jak Angular czy React przez co na rynku jest trudniej znale\u017a\u0107 osoby do\u015bwiadczone.<\/p>\n\n\n\n Zalety:<\/strong><\/p>\n\n\n\n Wady:<\/strong><\/p>\n\n\n\n Blazor na pewno zostanie przywitalny z otwartymi r\u0119kami w startupach i projektach, gdzie developerzy musz\u0105 rozwija\u0107 zar\u00f3wno frontend jak i backend<\/strong>. Sprawdzi si\u0119 tak\u017ce w projektach na potrzeby wewn\u0119trzne firm, takich jak systemy CRM czy obs\u0142uga proces\u00f3w firmowych. Musimy tylko pami\u0119ta\u0107, aby wcze\u015bniej upewni\u0107 si\u0119, \u017ce maszyny, na kt\u00f3rych b\u0119d\u0105 uruchamiane aplikacje, poradz\u0105 sobie pod wzgl\u0119dem wydajno\u015bci.<\/p>\n\n\n\n Jestem te\u017c przekonany, \u017ce na wszelkiego rodzaju warsztatach czy prezentacjach b\u0119dzie to jeden z cz\u0119stszych wybor\u00f3w, ze wzgl\u0119du na jego prostot\u0119 i \u0142atwo\u015b\u0107 w przygotowaniu oraz wdro\u017ceniu rozwi\u0105zania.<\/p>\n\n\n\n W przypadku projekt\u00f3w z bran\u017cy e-commerce, gdzie czas wyrenderowania aplikacji mo\u017ce mie\u0107 znaczenie oraz w przypadku projekt\u00f3w IoT \/ Embbedded<\/strong> sprawdzi\u0142bym na pocz\u0105tku, jakie s\u0105 parametry urz\u0105dzenia, na kt\u00f3rym b\u0119dzie hostowana aplikacja, aby mie\u0107 pewno\u015b\u0107, \u017ce nie wyst\u0105pi\u0105 problemy wydajno\u015bciowe, kt\u00f3rych nie b\u0119dzie si\u0119 da\u0142o rozwi\u0105za\u0107.<\/p>\n\n\n\n Pora sprawdzi\u0107 jak Blazor radzi sobie w akcji. Przyjrzymy si\u0119 jego mo\u017cliwo\u015bciom, wykorzystuj\u0105c podstawow\u0105 aplikacj\u0119, kt\u00f3r\u0105 dostaniemy po utworzeniu nowego projektu. Mo\u017cemy go utworzy\u0107 wykorzystuj\u0105c Visual Studio poprzez Create a new project<\/em> oraz wybieraj\u0105c Blazor WebAssembly App<\/em>. Alternatywnie mo\u017cemy u\u017cy\u0107 dotnet cli i wpisa\u0107 w wierszu polece\u0144 dotnet new blazorwasm<\/em>.<\/p>\n\n\n\n Na pocz\u0105tek zerknijmy na struktur\u0119 projektu.<\/p>\n\n\n\n Aplikacja sk\u0142ada si\u0119 z plik\u00f3w razor, kt\u00f3re pozwalaj\u0105 na jednoczesne wykorzystywanie sk\u0142adni html oraz C#. Tworzenie aplikacji w Blazorze jest podobne do tego znanego z React. Ca\u0142a aplikacja zbudowana jest z mniejszych cz\u0119\u015bci zwanych komponentami.<\/p>\n\n\n\n W pliku Program.cs<\/em> znajduje si\u0119 informacja o g\u0142\u00f3wnym komponencie<\/p>\n\n\n\n Jest to komponent App.razor<\/em>, kt\u00f3ry b\u0119dzie wyrenderowany w miejscu oznaczonym id #app. To nasz komponent rozruchowy aplikacji i zawiera takie elementy jak routing czy obs\u0142uga b\u0142\u0119d\u00f3w.<\/p>\n\n\n\n Nast\u0119pnie mamy jeszcze plik _Imports.razor<\/em>, kt\u00f3ry pozwala na dodanie przestrzeni nazw dla wszystkich komponent\u00f3w. W ramach samych komponent\u00f3w mamy jeszcze rozr\u00f3\u017cnienie na takie, kt\u00f3re zajmuj\u0105 si\u0119 Layoutem, czyli uk\u0142adem komponent\u00f3w wewn\u0105trz aplikacji, aby\u015bmy nie musieli powiela\u0107 tych samych sekcji w wielu miejscach oraz komponentach, kt\u00f3re zajmuj\u0105 si\u0119 ju\u017c bezpo\u015brednio logik\u0105 naszej aplikacji.<\/p>\n\n\n\n Jest to spora dawka wiedzy, a zrozumienie mechanizmu dzia\u0142ania jej mo\u017ce Ci chwil\u0119 zaj\u0105\u0107, dlatego na ten moment spr\u00f3bujmy skupi\u0107 si\u0119 na podstawowym elemencie Blazora czyli komponencie. Wykorzystamy do tego plik Counter.razor<\/em>, kt\u00f3ry wygl\u0105da nast\u0119puj\u0105co:<\/p>\n\n\n\n Sk\u0142ada si\u0119 on z dw\u00f3ch sekcji. Pierwsza odpowiada za to, co widzimy na ekranie po uruchomieniu aplikacji. Znajduj\u0105 si\u0119 tu tagi html oraz kod C#, kt\u00f3ry musi by\u0107 poprzedzony znacznikiem @, aby kompilator m\u00f3g\u0142 zrozumie\u0107 nasze intencje. Dalej mamy sekcj\u0119 @code z wy\u0142\u0105cznie kodem C#. Ta sekcja odpowiada za code-behind naszego komponentu. W tym miejscu mamy dost\u0119p do metod cyklu \u017cycia naszego komponentu, mo\u017cemy te\u017c tworzy\u0107 pola i metody, kt\u00f3re b\u0119d\u0105 nast\u0119pnie wykonywane i wy\u015bwietlane w aplikacji.<\/p>\n\n\n\n W naszym przypadku komponent Counter odpowiada za zwi\u0119kszenie licznika klikni\u0119\u0107 w przycisk. Wykorzystujemy do tego pole currentCount, kt\u00f3re jest wy\u015bwietlane w aplikacji oraz metod\u0119 IncrementCount, kt\u00f3ra zosta\u0142a podczepiona do akcji klikni\u0119cia poprzez @onclick. Po uruchomieniu aplikacji i przej\u015bciu do zak\u0142adki Counter powinni\u015bmy dosta\u0107 taki w\u0142a\u015bnie widok:<\/p>\n\n\n\n Klikni\u0119cie w przycisk spowoduje zwi\u0119kszenie licznika Current counter o 1. Jest to jedna z podstawowych interakcji z u\u017cytkownikiem, jakie mo\u017cemy zastosowa\u0107 w naszych komponentach. W przypadku formularzy mamy dodatkowe mo\u017cliwo\u015bci takie jak bindowanie danych czy walidacja.<\/strong><\/p>\n\n\n\n Nasz komponent by\u0142 dost\u0119pny pod adresem \/counter. By\u0142o to mo\u017cliwe dzi\u0119ki zastosowaniu atrybutu @page. Mogliby\u015bmy pomin\u0105\u0107 ten atrybut w przypadku, gdyby komponent by\u0142 wykorzystywany wy\u0142\u0105cznie wewn\u0105trz innych. Poza nim wyst\u0119puj\u0105 te\u017c inne atrybuty takie jak @implements, @inherits, @using czy @inject, kt\u00f3re pozwalaj\u0105 na budowanie drzewa dziedziczenia czy wstrzykiwanie serwis\u00f3w do komponentu.<\/p>\n\n\n\n Przedstawi\u0142em Ci zaledwie podstawy dzia\u0142ania aplikacji opartych o Blazora. Zach\u0119cam Ci\u0119 do dok\u0142adniejszego przeanalizowania ich samodzielnie. Mo\u017cesz zacz\u0105\u0107 od sprawdzenia komponentu FetchData.razor<\/em>, kt\u00f3ry pobiera i wy\u015bwietla dane pogodowe.<\/p>\n\n\n\n Je\u017celi z jakiego\u015b powodu b\u0119d\u0105c developerem .NET jeszcze nie s\u0142ysza\u0142e\u015b o Blazorze, to mam nadziej\u0119, \u017ce przekona\u0142em Ci\u0119, \u017ce warto go wypr\u00f3bowa\u0107. Min\u0119\u0142o ju\u017c kilka lat od wydania pierwszej wersji oraz wersji stabilnej produkcyjnie i wygl\u0105da na to, \u017ce Blazor zostanie z nami na d\u0142u\u017cej, wi\u0119c warto go przetestowa\u0107. Kto wie, mo\u017ce to w\u0142a\u015bnie Blazor pozwoli Ci dostarczy\u0107 kolejny projekt na czas.<\/strong><\/p>\n\n\n\n Natomiast, je\u017celi ju\u017c s\u0142ysza\u0142e\u015b o Blazorze albo nawet masz z nim pewne do\u015bwiadczenia to mam nadzieje, \u017ce sekcja o wadach i zaletach oraz jego potencjalnym zastosowaniu pozwoli\u0142a Ci na uzupe\u0142nienie wiedzy o nowe spojrzenie.<\/p>\n\n\n\n W mojej opinii jest to framework, kt\u00f3ry idealnie pasuje do tego, czym zajmujemy si\u0119 jako developerzy .NET, buduj\u0105c nasze aplikacje zar\u00f3wno na backendzie jak i frontendzie, mo\u017cemy wykorzysta\u0107 wiedz\u0119, kt\u00f3r\u0105 ju\u017c mamy, dostarczaj\u0105c tym samym nasze produkty jeszcze szybciej i z jeszcze wi\u0119ksz\u0105 jako\u015bci\u0105.<\/p>\n\n\n\n Na koniec zostawiam Ci\u0119 z my\u015bl\u0105, \u017ce Blazor si\u0119 ci\u0105gle rozwija i ca\u0142kiem mo\u017cliwe, \u017ce w momencie, gdy to czytasz niekt\u00f3re jego problemy zosta\u0142y ju\u017c rozwi\u0105zane, a mo\u017ce nawet Blazor po kilku aktualizacjach wraz .NET zyska\u0142 na kolejnych zaletach, za co trzymam kciuki!<\/p>\n\n\n\n ***<\/p>\n\n\n\n Je\u015bli interesuje Ci\u0119 .NET, zach\u0119camy do lektury artyku\u0142\u00f3w naszych specjalist\u00f3w poruszaj\u0105cych t\u0119 tematyk\u0119 np. OAuth 2.0 On Behalf flow in Azure Active Directory and .NET Core<\/a>. Je\u015bli chcesz dowiedzie\u0107 si\u0119 wi\u0119cej nt. zastosowania frontendu, przeczytaj koniecznie artyku\u0142 Nowoczesny frontend w e-commerce.<\/a><\/p>\n\n\n![\"Diagram](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/06\/Ryc.-1.png\")
<\/a><\/a>Zalety i wady Blazora<\/h2>\n\n\n\n
Kilka s\u0142\u00f3w o zaletach<\/h3>\n\n\n\n
Kilka s\u0142\u00f3w o wadach<\/h3>\n\n\n\n
Podsumujmy wady i zalety Blazora<\/h3>\n\n\n\n
\n
\n
Gdzie si\u0119 sprawdzi?<\/h2>\n\n\n\n
Przyk\u0142adowa aplikacja<\/h2>\n\n\n\n
Struktura projektu<\/h3>\n\n\n\n
<\/a><\/a>Komponent<\/h3>\n\n\n\n
<\/a><\/a>Podsumowanie<\/h2>\n\n\n\n