Focus on Blazor - Server Side

Blazor je framework na vytvaranie Single Page Aplikacii v C# bez javascriptu. Nedavno prebehla konferencia pre vyvojarov .NET Conf: Focus on Blazor, kde sa venovali vyhradne tomuto: image

Zaznamy z prednasok su tu: https://www.youtube.com/playlist?list=PLdo4fOcmZ0oWlP1Qpzg7Dwzxr298ewdUQ

Funguje podobne ako React alebo Angular - generuje virtualny DOM, detekuje na nom zmeny a tie synchronizuje s browser DOMom. Z pohladu vyvojara si zobral Blazor to lepsie z oboch.

Blazor vie ale bezat cisto na servery, kde si zije VDOM a zmeny posiela cez websockety do browsera. Toto je v .NET Core 3 oficialne vydane a mozete to pouzivat v produkcii.

Niekedy v maji ma vyjst verzia, ktora bude bezat cisto v browser vo WebAssembly. Inicialny bundle mam mat 1.5MB co zahrna .NET runtime (0.5MB) a pribalene kniznice (razor, routing, httpclient, etc…) a samozrejme aplikaciu. Nieje to malo, ale na druhej strane to nieje to iste ako 1.5MB javascriptu, lebo to netreba parsovat a kompilovat, takze sa usetri nejaka sekunda. Navyse server side prerendering je ovela jednoduchsi ako v Reacte alebo Angulari.

Pre mna je revolucny ale Server Side Model (I ked podobne pokusy tu uz boli), pretoze tam je ta produktivita najvacsia:

  • Nielenze sa nahradil javascript C#-om a vsetko je typesafe, ale
  • usetri sa cela komunikacna vrstva (webapi) a to hned 2x: webapi/swagger na serveri a k tomu prislusny kod na klientovi.
  • Netreba srotit typescriptove definicie, parsovat JSON a serializovat DTOcka do JSONu, atd.
  • Netreba riesit bundle size a lazy loading, minifikaciu, atd… -> Mimoriadne vhodne na funkcne velke projekty
  • Nehovoriac o tom, ze cely development stack sa vyrazne zjednodusi. Proste odpadne prakticky vsetko z FE, okrem mozno nejakeho boostrapu, alebo component toolkitu,

Publishol som pre vas server-side Blazor aplikaciu: https://blazorapp220200121030557.azurewebsites.net/, mozete si na vlastnej kozi vyskusat to “lagovanie” sposobene tym, ze to bezi na serveri a nie na klientovi. Mimochodom, server ma 1 CPU Core a 1GB ram a bezi na nom este dalsia website.

Mimochodom, vsimite si velku podobnost WebForms a Blazor co sa tyka sposobu vyvoja. WebFormsove aplikacie su mimoriadne vhodne na modernizaciu pomocou Blazor. Prakticky budete len prepisovat .aspx na razor syntax a to sa po case stane rutinou.

Co si o tom myslite?

Len menší detail, komplet Blazor nestihli dokončiť do .net core 3 (tu je len jeho Server part), full je súčasťou až .net core 3.1 (teda ten webassembly aj to v preview verzii)

Blazor Server is supported in ASP.NET Core 3.0. Blazor WebAssembly is in preview for ASP.NET Core 3.1.

Blazor Server Side bol planovany do .NET Core 3.0 a Blazor WebAssembly nikdy nebol planovany do .NET Core 3.0. Okrem toho pracuju este aj na Blazor PWA, Blazor Electron (ma k dispozicii full .NET Core a teda pristup k OS) a Blazor Mobile (Xamarin - v principe to iste ako React Native, ale s lepsim pristupom k nativnym API).

Naschval som hovoril o Blazor Server Side. WebAssembly mod ma zatial az tak nezaujima.

Vidíš a to ma zaujíma. Blazor Server Side a Blazor WebAssembly sú dve nezávisle technológie, alebo vies povedať, že tohto užívateľa porieš cez server side a tohoto spracuj cez webassembly? To znamená, že napíšeš jeden kód a to ako sa renderuje je len nejaký prepínač.

Nieje to len prepinac, urcite to treba minimalne skompilovat 2x. Su to dva diametralne odlisne pristupy. Pri ServerSide nemusis riesit komunikaciu s prehliadacom, cize ziadne webservicy a podobne. Velmi, naozaj velmi to pripomina WebForms development, akurat ze user experience je niekde uplne inde.

Ale moznoze bude existovat v Blazor WebAssembly nejaky fallback, ked sa to prepne do server modu - neviem. Kazdopadne prerendering to podporuje

Viem, ze je to uz starsie forum ale zapojim sa.

Vidíš a to ma zaujíma. Blazor Server Side a Blazor WebAssembly sú dve nezávisle technológie, alebo vies povedať, že tohto užívateľa porieš cez server side a tohoto spracuj cez webassembly?

Vies zdielat razor kompoenenty medzi Blazor Server a WebAssembly (ako razor kniznice).

“Server side Blazor” som planoval pouzit na jeden COVID projekt, ale nakoniec s toho zislo, za pol hodinu som mal naprotypovany “online excel” a vdaka technologii je tam realtimovost uplne zadarmo a vyvja sa v nom naozaj richlo.

Co sa tyka Blazoru WebAssembly, tak ma prakticky zachranil pred javascriptom, v ktorom su niektore veci naozaj bolestive (moj blog k tomu https://harrison314.github.io/Blazor.html). Dufam, ze v nom budem mat viac projektov.

Ano, tu realtimeovost pri server side modely mam sam vyskusanu a je to velka vyhoda bez namahy, ci uz ide a realtime zobrazovanie zivych dat, logov z backgroud procesu, alebo kooperacia viacerych uzivatelov.

Mimochodom, prepinanie medzi server side a webassembly je mozne. Ja mam jednoducho nareferencovany webassembly projekt v server side projekte a ked to zbuildujem, mam dva vystupy.

Ja ale na intranetove business aplikacie silne preferujem server side model, lebo cas potrebny na vyboj server side a nasledne prioadne prerobenie do webassembly je len o malo vacsi ako rovno to pisat vo webassembly, ale mozna uspora je obrovska, odhadom cca 25%

@vlko: toto by sa vam hodilo na finstat, nie? daj vediet, keby ste chceli s tym pomoct :yum:

To je komplikovane. Obsah u nas je staticky, lebo main trafic zdroj je z googlu, plus musis podporovat IE9, lebo par ludi, co si za sluzby platia ho este pouzivaju. A primarne to chces mat ako staticku stranku prave kvoli google a prepisat vsetky tie kvanta views na blazor by mi uz nikto nedovolil (len konverzia na .net core trvala cez 4 mesiace).
Co sa tyka casti, co su SPA a take mame, tak tam to klasicky robime cez Angular, mame ich uz asi 4 a tam potrebujes komponenty na vizualizaciu a neviem v akom stave su komponenty pre blazor, ale par rokov asi este potrva, kym sa vybuduje cely ekosystem, aby to postacovalo.
Teda migrovat asi nebudeme a o par rokov sa to uz ani neoplati:)

Nehodis ten prototyp “online excel” niekde na github, rad by som si to pozrel ako to vyzera.

Ono to naozaj nie je ziadna uzasna magia, len si to musis este nastilovat.

Ten javascript je tam kvoli fokusu, pretoze, v momente, ked sa vyrenderuje virtualny DOM, tak este nie je updatnuty realny.

@vlko:

Obsah u nas je staticky, lebo main trafic zdroj je z googlu

Ok, ved nie vsetko ma zmysel robit ako SPA, ale:

“Staticky”, myslis asi ze html generovane na serveri - o dovod viac pouzit blazor server side. Na klienta uz dostanes hotove html.

plus musis podporovat IE9 - to je problem

@vlko:

mimochodom, tiez som davnejsie cez obednu pauzu nakodil nieco podobne :upside_down_face:
https://blazorrealtimeediting.azurewebsites.net

1 Like