Introducere în Blazor WebAssembly cu C#
Blazor WebAssembly este o tehnologie moderna dezvoltata de Microsoft care permite rularea aplicatiilor web scrise în C# direct in browser, fara a fi nevoie de JavaScript. Bazata pe WebAssembly, aceasta abordare deschide drumul dezvoltarii full-stack cu .NET folosind acelasi limbaj – C#.
In acest articol vom explora:
-
Ce este Blazor WebAssembly
-
Cum se compara cu Blazor Server
-
Cum se creeaza un proiect nou
-
Structura proiectului
-
Un prim exemplu „Hello, Blazor!”
π§ Ce este Blazor WebAssembly?
Blazor WebAssembly (sau Blazor WASM) este o aplicatie SPA (Single Page Application) care ruleaza complet in browser. Codul C# este compilat in WebAssembly, un format binar rapid care poate fi executat de browsere moderne.
Diferenta principala fata de Blazor Server este ca nu exista o conexiune constanta cu serverul – logica aplicatiei ruleaza local, in browserul utilizatorului.
βοΈ Blazor WebAssembly vs. Blazor Server
|
CaracteristicΔ |
Blazor WebAssembly |
Blazor Server |
|---|---|---|
|
Rulare |
In browser (client-side) |
Pe server (via SignalR) |
|
Viteza de pornire |
Mai lenta la început |
Instant, logica pe server |
|
Dimensiune aplicatie |
Mai mare (descarcare DLL-uri) |
Mai mica (cod pe server) |
|
Interactiuni offline |
Posibile |
Nu |
|
Reactie la reatea slaba |
Mai buna |
Slaba (necesita conexiune) |
π οΈ Crearea unui proiect nou Blazor WebAssembly
-
Deschide terminalul sau foloseste un IDE (Visual Studio sau Rider).
-
Creeaza proiectul:
dotnet new blazorwasm -n BlazorIntro
cd BlazorIntro
dotnet run
-
Acceseaza https://localhost:5001 sau http://localhost:5000.
𧩠Structura unui proiect Blazor WASM
BlazorIntro/
βββ wwwroot/ # Fisiere statice (CSS, JS, imagini)
βββ Pages/ # Paginile aplicatiei
βββ Shared/ # Componente partajate
βββ Program.cs # Punctul de pornire
βββ App.razor # Configurare routing
βββ index.html # Pagina HTML principala
π Exemplu: Hello, Blazor!
Sa cream o pagina noua:
-
Creeaza un fisier nou în Pages/Hello.razor:
@page "/hello"
<h3>Hello from Blazor!</h3>
<p>Data curenta: @DateTime.Now.ToString("f")</p>
-
Adauga un link în Shared/NavMenu.razor:
<NavLink href="hello" Match="NavLinkMatch.All">
<span class="oi oi-star" aria-hidden="true"></span> Hello
</NavLink>
-
Gata! Navigheaza la /hello si vezi pagina ta în actiune π
π§ Ce urmeaza?
Acum ca ai vazut cum se creeaza o aplicatie Blazor WebAssembly, in urmatorul articol vom explora Routing-ul in Blazor si cum poti construi o aplicatie multi-pagina.
π Ramai aproape pentru urmatorul articol din serie!