1. diel - Blazor - .NET Core SPA s C # .NET aj na strane klienta
Posledných niekoľko rokov sa venujem vývoji .NET webových aplikácií s architektúrou MVC a pozerám sa po nejakých novších technológiách. Áno, .NET nahrádza .NET Core a EF zase EF Core, ale priznám sa, že z môjho pohľadu sa zas toľko nezmenilo a vývoj vyzerá vcelku podobne.
Veľa klientov si želá také tie "rýchlejšie" stránky, kde s každým kliknutím nemusíte přenačítat celý obsah a na to nie je MVC úplne stavané. Máme možnosť vrhnúť sa do písania JavaScriptov na klientovi a používať AJAX alebo začať písať klienta s pomocou Angular, Vue či podobných JS nadstavieb. V každom prípade musíme objavovať svet odlišný od .net. Nie, že by na tom bolo niečo zlé. Hovorí sa "koľko jazykov vieš, toľkokrát si programátorom". Ale stojí to veľa času a nie každý ho má:)
Blazor
Keď Microsoft prišiel s frameworkom Blazor, povedal som si, že to by mohla byť presne tá cesta, ktorú hľadám. Umožňuje totiž:
- interaktívne užívateľské rozhranie pomocou jazyka C# namiesto JavaScriptu
- zdieľanie logiky aplikácie na strane servera a klienta napísané v .NET
- využitie existujúcich .NET knižníc
Vytvorenie novej aplikácie
Vo Visual Studio zvoľme Create a new project a šablónu Blazor App. Po tradičnom zadaní názvu projektu dostaneme na ďalšej stránke sprievodca na výber medzi variantmi Blazor Server App a Blazor WebAssembly App.
Blazor WebAssembly App chápem ako plnohodnotnú SPA (aplikácia beží priamo na klientovi), zatiaľ čo prvá varianta beží na serveri a správanie SPA simuluje s pomocou technológie SignalR. Z toho môžu vyplynúť aj výhody / nevýhody každej z variantov. Zatiaľ čo u serverového typu Blazoru by malo byť rýchlejšie počiatočné načítanie aplikácie, jednotlivé akcie v aplikácii môžu mať o niečo pomalší odozvu z dôvodu nutnosti neustálej komunikácie so serverom. U WebAssembly by to malo byť presne naopak - dlhší načítanie aplikácie, ale rýchlejší odozvy. Navyše musí prehliadač užívateľa podporovať technológiu WebAssembly.
Spustení aplikácie
Ja zvolím pre začiatok Server App, pretože táto technológia bola oficiálne vydaná prvá. Šablóna programu už obsahuje tri jednoduché stránky ako príklady použitia, takže ju skúsme hneď spustiť a uvidíme funkčnú aplikáciu so stránkami:
- Home - jednoduchá stránka s komponentom, ale bez vlastného kódu
- Counter - stránka zobrazujúci obsah premennej a možnosťou zvýšenia hodnoty premennej kliknutím na tlačidlo
- Fetch dáta - stránka zobrazujúci dáta získané zo služby inicializované s pomocou Dependency Injection
Štruktúra aplikácie
Štruktúra šablóny aplikácie je pomerne jednoduchá. V Solution Exploreri nájdeme nasledovné zložky:
wwwroot/- obsahuje súbory s kaskádovými štýlmi a JavaScriptData/- obsahuje model a servisu pre zobrazované dáta na poslednej stránke (vo väčších aplikáciách možno budú tieto súbory v iných vrstvách - dátové resp. Business, v menších aplikáciách by som ich rovnako minimálne oddelil do nových zložiek, napr.Model/aService/)Pages/- pre jednotlivé stránky výslednej aplikácieShared/- pre komponenty, ktoré môžeme naprieč stránkami zdieľať
Okrem toho v roote aplikácie nájdeme súbory ako Startup.cs,
Program.cs a appsettings.json, ktoré už by ste mali
poznať z predchádzajúcich typov .NET Core
aplikácií. Ak ich nepoznáte, na ITnetworku sa o nich určite dočítate v
iných kurzoch, takže to tu nebudeme opakovať. Zaujímavým pre nás bude
súbor _Imports.razor, kam si budeme pridávať ďalšie menné
priestory, ktoré budeme chcieť v aplikácii využívať.
Základ celej aplikácie nájdeme v súbore _Host.cshtml, čo je
vlastne webová stránka. V nej je odkaz na súbor App.razor, kde
sa zabezpečuje routovanie. Ani jeden z týchto súborov zatiaľ nebudeme
upravovať. V súbore App.razor je ako predvolený layout
definovaná komponenta MainLayout.razor a v nej už vidíme vzhľad
našej aplikácie - menu s pomocou komponenty NavMenu.razor, horný
riadok s odkazom a časť pre telo aplikácie (<body>).
Prvý úpravy
Hello world! už v šablóne máme, tak musíme vymyslieť niečo
sofistikovanejšieho. Pre prvé zoznámenie s frameworkom Blazor som teda
zvolil jednoduchý príklad - zoznam úloh. Každá úloha bude samostatnou
zložkou, začnime teda vytvorením nové komponenty TodoItem.
Pravým tlačidlom myši nad zložkou Shared/ (pretože
komponenty sú opakovane použiteľné a patrí práve tam) vyvoláme
kontextové menu a zvolíme Add -> New item ... -> Razor
component alebo priamo Add -> Razor component (ak máte ako ja
v ponuke). Komponent pomenujeme TodoItem.
Každý komponent má časť s HTML kódom a časť sa C# kódom, ktoré sú od seba oddelené (vlastne sa môžu nachádzať aj v rôznych súboroch). Naša nová komponenta bude obsahovať text úlohy a informáciu, či je úloha splnená alebo nie. Jej obsah bude nasledujúce:
<div> <input type="checkbox" /> Naučit se Blazor na ITnetwork </div>
Prvá verzia komponenty žiadny C# kód neobsahuje, takže časť
@code môžeme odstrániť úplne. Samozrejme táto komponenta
nevie zatiaľ nič než zobraziť príslušný HTML kód. Čo si hneď overíme.
V súbore Index.razor nahradíme existujúci obsah (okrem prvého
riadku) zavolaním našej nové komponenty:
<TodoItem/>
Aplikáciu spustíme, výsledok by mal vyzerať nejako takto:
Druhá verzia - Parametre
Aby bola komponenta znovupoužiteľná, musí byť samozrejme "múdrejší". Pridáme si teda do našej komponenty dva parametre, konkrétne:
- zobrazovaný text a
- údaj, či je úloha splnený alebo nie.
Príslušne tomu musíme samozrejme tiež upraviť aktuálne HTML kód:
<div> <input type="checkbox" checked="@Done"/> <span>@Text</span> </div> @code{ [Parameter] public string Text { get; set; } = "Naučit se Blazor na ITnetwork"; [Parameter] public bool Done { get; set; } = false; }
Je dobré nastavovať parametrom predvolené hodnoty, pretože naplnenie parametrov pri použití komponenty nie je povinné.
Teraz už môžeme úpravou súboru Index.razor zobraziť viac
rozdielnych položiek nášho zoznamu úloh napríklad takto:
<TodoItem/> <TodoItem Text="Vytvořit vlastní Blazor aplikaci" /> <TodoItem Text="Pochopit práci s parametry komponenty" Done="true"/>
Tretia verzia - Štýl
V poslednej dnešnej verzii komponenty si pridáme nový štýl pre splnené
úlohy. Takéto úlohy budeme zobrazovať preškrtnutým písmom. Do komponenty
pridáme textovú premennú textStyle, ktorej hodnota sa bude
odvodzovať od hodnoty vlastnosti Done a bude ovplyvňovať štýl
zobrazeného textu:
<div> <input type="checkbox" checked="@Done"/> <span class="@textStyle">@Text</span> </div> @code{ [Parameter] public string Text { get; set; } = "Naučit se Blazor na ITnetwork"; [Parameter] public bool Done { get; set; } = false; string textStyle => Done ? "done" : ""; }
A samozrejme do súboru site.css musíme pridať definíciu
nového štýlu:
.done { text-decoration:line-through; }
Po spustení aplikácie vyzerá všetko v poriadku, ale po kliknutí na
ľubovoľný z úloh zistíme, že sa nový štýl na text neuplatňuje. Dôvod
je v jednosmernom Binding našej vlastnosti Done na komponent. V
takýchto prípadoch sa pri renderovaní komponenty použije hodnota premennej,
ale zmena stavu komponenty na stránke sa už neprenesie späť do premennej.
Preto musíme zmeniť binding na obojsmerný:
... <input type="checkbox" @bind="Done"/> ...
Teraz si môžeme vyskúšať, že sa štýl textu sa zaškrtnutím komponenty naozaj zmení. No nie je to krásne bez kúska JavaScriptu?:-)
To je pre dnešok všetko. Pokiaľ bude o tento článok záujem a v komentároch sa objaví konštruktívna kritika, pokúsim sa pokračovať ďalšie lekcií:-)
Prajem veľa programátorských úspechov!
V ďalšej lekcii, Blazor - Rozšírenie Todo aplikácie v .NET Core SPA , budeme v našej Todo aplikácii pokračovať a ukážeme si, ako správne reagovať na udalosti.
