Beruflich Dokumente
Kultur Dokumente
Maturski Rad - BLAZOR
Maturski Rad - BLAZOR
Blazor
Framework za kreiranje interaktivnih client-side
web aplikacija na .NET developerskoj platformi
Maglaj, 2020.godina
SADRŽAJ
Uvod.......................................................................................................................................................2
1. Web aplikacije................................................................................................................................3
2. WebAssembly................................................................................................................................4
2.1. Ukratko...................................................................................................................................4
2.2. Definicija................................................................................................................................4
2.3. Historijski pregled..................................................................................................................4
2.4. Podrška...................................................................................................................................5
3. .Net framework...............................................................................................................................5
3.1. .Net developerska platforma...................................................................................................5
3.2. ASP.NET................................................................................................................................7
4. C# programski jezik.......................................................................................................................8
4.1. Ukratko...................................................................................................................................8
4.2. Ciljevi dizajna.........................................................................................................................8
4.3. Historija..................................................................................................................................8
4.4. Sintaksa..................................................................................................................................9
4.5. Biblioteke...............................................................................................................................9
4.6. Standardizacija i licenciranje..................................................................................................9
4.7. Implementacije.....................................................................................................................10
4.8. Odlike...................................................................................................................................10
5. Blazor...........................................................................................................................................13
5.1. Uopšteno...............................................................................................................................13
5.2. Interaktivni web UI s C#.......................................................................................................13
5.3. Pokretanje na WASM-u ili web serveru...............................................................................15
5.3.1. Blazor WebAssembly...................................................................................................15
5.3.2. Blazor Server................................................................................................................16
5.4. Dijeljenje koda i biblioteka...................................................................................................17
5.5. Veza s JavaScript-om...........................................................................................................17
5.6. Alati za rad s Blazor-om.......................................................................................................17
5.6.1. Visual Studio................................................................................................................18
5.6.2. Visual Studio Code.......................................................................................................19
5.7. Ekosistem UI komponenti....................................................................................................19
Literatura..............................................................................................................................................20
Uvod
Web development ili razvoj internet softvera predstavlja različite poslove koji se obavljaju
prilikom razvoja website-a ili web aplikacije za internet (svjetska mreža) ili intranet (privatna
mreža). Nivoi složenosti su različiti i mogu varirati od razvoja najjednostavnije statičke web
stranice, pa sve do izrade najsloženijih internet aplikacija za elektronsko poslovanje.
Razvoj internet softvera predstavlja celokupnu pripremu i izradu internet stranice. Pod
razvojem internet softvera podrazumijeva se: web design, programiranje, programiranje baza
podataka, server administracija, upravljanje sadržajem, marketing.
Pojam web development obuhvata procese kao što su web design, izrada i razvoj veb-
sadržaja, programiranje, razvoj baza podataka, konfigurisanje servera i mreže, upravljanje
sadržajem, razvoj elektronskog poslovanja, marketing itd.
Izrada sajtova (eng. Website Making) se vrši pomoću HTML, CSS i JavaScript u osnovi a
shodno sposobnostima samog web developera aplikacije mogu u pozadini imati još neke
dodatne jezike ili frameworke i tehnologije koje omogućavaju dodatnu funkcionalnost.
Osnova svakog websitea je HTML i svi pretraživači vide isključivo podatke koji su napisani u
HTML-u. Svi ostali programski jezici se koriste u kombinaciji sa HTML-om, za
modernizovanje i kreiranje naprednih funkcija webiste-a.
Od samog početka izrade interaktivnih web aplikacija JavaScript kao jezik na tržištu je bio i
ostao jedina opcija za kreiranje navedenih web aplikacija ali se nedavno pojavio novi
framework od strane Microsofta koji je i tema ovog maturskog rada – Blazor.Trenuto mnogo
obećava i predstavlja novu i revolucinarnu ideju u samoj izradi web aplikacija.Ovo je prvi
framework koji omogućava da sav client-side kod koji je pisan u JavaScript-u pišemo u
nekom drugom jeziku,u ovo smučaju C#, i pruža mnoge prednosti i olakšanja koja ćemo
istražiti kroz ovaj maturski rad.Da bi smo uopšte počeli o Blazoru,potrebno je imati znanje o
određenim tehnologijama koje ćemo kroz poglavlja istražiti prije priče o samom Blazoru.
Web aplikacije su programska rješenja kojima se pristupa putem internet preglednika koristeći
internet ili intranet.
Vrtoglavi rast i razvoj web aplikacije trebaju zahvaliti činjenici da su dostupne u bilo koje
vrijeme s bilo kojeg mjesta, i računala i moblinih telefona. Osim toga, web poslovne
programe nije potrebno periodički nadograđivati svakom računalu s kojeg im se pristupa, jer
im se pristupa identično kao i ostalim web stranicama, s bilo kojeg računala putem internet
browsera.
Za upotrebu web poslovnih programa nije potrebno posebno znanje, dovoljno je poznavanje
korištenja internetom.
3
2. WebAssembly
2.1. Ukratko
Da bi uopšte počeli s pričom o Blazoru moramo razjanisti neke stvari i pojmove kao što je
WebAssembly(Wasm).WebAssembly postao je W3C(World Wide Web Consortium)
standard 5.12.2019. iz uz HTML,CSS i JavaScript četvrti je jezik koji se pokreće
izvorno(natively) u pregledniku.
2.2. Definicija
WebAssembly je binarni instrukcioni format za stack-based virtualne mašine.Diznajniran je
kao portabilni kompajler za jezike visokog reda kao što su C#,C,C++,Rust koji omogućava
njihov deployment na webu za client i server aplikacije.Njegov osnovni cilj je omogućavanje
high-performance aplikacija na web stranicama ali format je prilagođen i kreiran da se
pokreće i integriše i u druge okoline.Trenutno oko 40 programskih jezika podržava Wasm kao
kompilacijski target.
4
2.4. Podrška
U novembru 2017. godine Mozilla je najavila podršku u skoro svim preglednicima,te danas
Wasm je omogućen skoro korisnicima interneta(91.9% desktop preglednici,91.78% mobilni
preglednici) a onim koji nemaju mogućnost korištenja Wasm-a,za starije proglednike,stvoren
je JavaScript polyfill(kod koji implementira funkcije u pregledniku koje izvorno nisu
kompaktibilne ili podržane od strane tog preglednika) koji kompajlira Wasm kod u asm.js.
Prvobitni cilj bio je podrška za kompajliranje koda u C i C++ te je kasnije omogućena i za
Rust i .Net jezike(C#,F#,...)
3. .Net framework
FCL pruža korisnički interfejs, pristup podacima, povezanost baze podataka, kriptografiju,
razvoj web-aplikacija, numeričke algoritme, i mrežne komunikacije. Programeri proizvode
softver kombinacijom vlastitih izvornih kodova sa .NET Frameworkom i ostalim
bibliotekama. .NET Framework je namijenjen za upotrebu većine novih aplikacija kreiranih
za Windows platforme. Microsoft također proizvodi integrirano razvojno okruženje uglavnom
za .NET softver nazvan Microsoft Visual Studio.
5
Slika 5. Cross platform mogućnosti .NET-a
Aplikacije za .NET platformu mogu se pisati u raznim programskim jezicima, gotovo svim
poznatijim. CLR, međutim, ne poznaje niti jedan taj jezik - on dobiva naredbe isključivo u
jeziku nazvanom Microsoft Intermediate Language (skraćeno MSIL), temeljen na pravilima
koja se nazivaju Common Language Specifications (CLS). Stoga je jasno da mora postojati
kompajler koji će programski jezik u kojem programer piše kôd prevesti u MSIL kako bi ga
CLR razumio. Ovi kompajleri nazivaju se IL-kompajleri te su dostupni za velik broj
programskih jezika. Microsoft je izdao kompajlere za pet jezika: C#, J#, C++, Visual Basic i
JScript, dok su se ostali proizvođači softvera potrudili oko brojnih drugih kao što su: Perl,
Python, Cobol, Eiffel…
6
3.2. ASP.NET
Početkom devedesetih godina prošlog stoljeća, tačnije 1992. godine, svoj je razvoj započeo
World Wide Web, danas najpoznatiji i najkorišteniji dio Interneta. Svojim ubrzanim razvojem
uveliko je dorpinijeo ogromnoj popularnosti Interneta u svijetu te je kod većine ljudi postao
njegovim sinonimom. Tako danas većina ljudi govoreći o Internetu, zapravo govori o Webu i
Web stranicama.
Nešto malo prije popularizacije PHP-a, na Web scenu stupa Microsoft, izdavanjem Option
Packa za Windows NT Server, u kojem unutar IIS-a 4.0 (Internet Information Services) uvodi
značajnu novost - prvu verziju svog Web programskog jezika nazvanog Active Server Pages
ili skraćeno ASP. Dvije godine kasnije, izlaskom Windowsa 2000, izlazi i IIS 5.0 s ASP-om
3.0 što će, budućnost će pokazati, biti ujedno i posljednja inačica "klasičnog" ASP-a.
Već tada Microsoftov ASP po svojim mogućnostima uveliko zaostaje za PHP-om koji je uz to
pod Open Source licencom i vrti se na Linux/Unix-based operativnim sistemima (besplatna
platforma). Upravo zbog toga Microsoft prestaje razvijati staru tehnologiju i okreće se izradi
nove, koja će, vrijeme će pokazati, predstavljati revoluciju i svijetu Web-a, ali i
informatičkom svijetu uopšte.
Negdje početkom 2001. godine, Microsoft objavljuje osnovnu arhitekturu svoje nove
tehnologije nazvanu .NET. Sredinom 2002. godine finaliziran je .NET Framework 1.0 i MS
Visual Studio 2002. Od tog vremena potječe sveopća opčinjenost .NET-om koja traje i danas.
ASP.NET je objavljen 2002. godine uz .NET 1.0 i bio je open-source framwork namjenjen za
izradu server-side web aplikacija i izradu dinamičnih web stranica ali i aplikacija i servisa.
7
4. C# programski jezik
4.1. Ukratko
C# je programski jezik višestruke paradigme koji usvaja strogo tipovanje, imperativne,
deklarativne, funkcionalne, generične, objektno-orijentirane (ima klase) i komponentno-
orijentirane programske discipline. Razvio ga je Microsoft unutar .NET inicijative, a kasnije
su ga za standard odobrili Ecma (ECMA-334) i ISO (ISO/IEC 23270:2006). C# je jedan od
programskih jezika dizajniran za CLI.
4.3. Historija
Tokom razvoja .NET Frameworka, klasne biblioteke bile su originalno pisane korištenjem
sistema kompajlera upravljanog koda zvanog Simple Managed C (SMC).U januaru 1999,
Anders Hejlsberg je formirao tim za razvoj novog jezika svojevremeno zvanog Cool, koji je
bio skraćenica za "C-like Object Oriented Language" (bosanski: Objektno-orijentirani jezik
nalik na C).Microsoft je uzeo u obzir zadržanja imena "Cool" kao krajnje ime jezika, ali ga
8
nije odabrao iz pravnih razloga. Vremenom .NET projekt je javno objavljen u julu 2000. na
stručnoj razvojnoj konferenciji, promijenio ime u C#, a klasne biblioteke su, kao i ASP.NET
runtime, ubačene u C#.
4.4. Sintaksa
Sržna sintaksa C# jezika jeste slična onima iz ostalih C-stilskih jezika kao što su C, C++ i
Java. U biti:
4.5. Biblioteke
Pojedinosti C# navode minimalni skup biblioteka klasa i tipova za koje se očekuje da ih
kompajler ima dostupne. U praksi, C# je najčešće korišten sa nekim implementacijama iz
Common Language Infrastructure (CLI), što je standardizirano kao ECMA-335 Common
Language Infrastructure (CLI).
U julu 2005, ECMA je priložila standarde i vezane TRove za ISO/IEC JTC 1 preko ovog
drugog Fast-Track procesa. Ovaj proces obično uzima 6–9 mjeseci.
Definicija C# jezika i CLI su standardizirani pod ISO i Ecma standardima koji pridaju zaštitu
razložnog i nediskriminirajućeg licenciranja od tvrdnji patenta.
9
4.7. Implementacije
Izvorni kompajler za C# je Microsoft Visual C#, koji je zatvorenog koda.
Microsoft vodi razvoj novog kompajlera otvorenog koda za C# i skup alata, prethodnog
kodnog imena "Roslyn". Kompajler, koji je potpuno pisan u upravljanom kodu (C#), bio je
otvoren i funkcionalno obrađen kao API. To omogućava razvojnim programerima kreiranje
refaktoringa i dijagnostičke alate.
Ostali C# kompajleri postoje, često sadržavajući implementaciju CLI i .NET biblioteka klasa
sve do .NET 2.0:
Mono
DotGNU
Rotor project
4.8. Odlike
Portabilnost
Tipovanje
C# podržava strogo pisane implicitne varijabilne deklaracije pomoću koda var, te implicitno
zadatih nizova sa kodom new[] koje prate inicijalizatori kolekcije.
C# je sigurniji po tipovanju nego C++. Jedine implicitne pretvorbe koje su zadate su one koje
se smatraju sigurnim, kao što je proširivanje cijelih brojeva. Ovo se provodi pri vremenu
kompajliranja, tokom JIT-a, i, u nekim slučajevima, pri pokretanju. Implicitne konverzije se
ne dešavaju između Booleanova i integera, niti između enumeracijskih članova i integera
(osim za literarnu 0, što se može implicitno pretvoriti u bilo koji enumerirani tip).
Jezik C# ne dopušta globalne varijable ili funkcije. Sve metode i članovi moraju biti
deklarisani unutar klasa (razreda). Statički članovi javnih klasa mogu se zamijeniti za
globalne varijable i funkcije.
10
Meta programiranje
Meta programiranje preko C# atributa dijelom je jezika. Većina ovih atributa dupliciraju
funkcionalnsot GCCova i preprocesorskih direktiva zavisnih o platformi Visual C++a.
Metode i funkcije
Kao C++, a za razliku od Jave, C# programer moraju koristiti kod virtual za dopuštanje
metodama da budu nadjačane podklasama.
Tip dynamic dopušta metodu vezivanja runtimea, što dopušta pozivanje metoda slično kao u
JavaScriptu i objektnu kompoziciju runtimea
C# ima podršku za strogo tipovane funkcijske pointere preko koda delegate. Kao što Qt
framework ima pseudo-C++ komande signal i slot, C# ima semantiku specifičnu okružnim
stilskim događajima "publish-subscribe", mada C# za to koristi delegate.
Svojstva
C# nudi svojstva kao sintaktički šećer za opći obrazac u kojem par metoda, pristupnik (getter)
i mutator (setter) kapsuliraju operacije na jednom samom atributu unutar klase. Nema viška
potpisa metoda za implementacije Getter/Setter koje trebaju biti napisane, a svojstvu se može
pristupiti pomoću atributa sintakse umjesto više opširnog poziva metoda.
Namespace
C# kod namespace omogućava isti nivo kodne izolacije kao Javin package i kod C++-a
namespace, sa veoma sličnim pravilima i mogućnostima za package.
Pristupanje memoriji
U C#, pokazivači memorijske adrese mogu biti korišteni samo unutar blokova specifično
označenih kao nesigurni, a programi sa nesigurnim kodom trebaju adekvatne dozvole za
pokretanje. Većina pristupa objektima urađena je kroz sigurne objektne reference, koje uvijek
bilo pokazuju na "žive" objekte ili imaju dobro definisane null vrijednost; nemoguće je dobiti
referencu od "mrtvog" objekta (onaj koji je prikupljen od gapbage kolekcije), ili od slučajno
odabranog bloka memorije. Nesigurni pokazivač može pokazati na instancu vrijednosnog
tipa, niza, stringa, ili bloka memorije dodijeljenog na stack. Kod koji nije markiran
nesigurnim može i dalje pohranjivati i manipulisati pokazivače kroz kodni System.IntPtr tip,
ali ih ne može dereferencirati.
11
Upravljana memorija ne može biti izričito oslobođena; umjesto toga, automatski je
prikupljena u garbage kolekciji. Garbage kolekcija adresira problem curenja memorije
oslobađanjem programera od odgovornosti za oslobađanje memorije koja više nije potrebna.
Izuzeci
Provjereni izuzeci nisu prisutni u C# (za razliku od Jave). Ovo je bila svjesna odluka bazirana
na problemima skalabilnosti i verzionabilnosti.[24]
Polimorfizam
Za razliku od C++, višestruko nasljeđivanje ne podržava C#, iako klasa može implementirati
bilo koji broj interfejsa. Ovo je bila dizajnerska odluka od strane glavnog arhitekte jezika da
se izbjegnu komplikacije i pojednostave arhitekturni zahtjevi kroz CLI. Kod implementiranja
višestrukih interfejsa koji sadrže metodu sa istim potpisom, C# omogućava programeru
implementiranje svake metode zavisno od toga koji interfejs ta metoda poziva, ili, kao Java,
omogućava programeru implementaciju metode jednom i da ima jednostruko pozivanje po
pozivu kroz bilo koji od interfejsa klase.
Funkcionalno programiranje
12
5. Blazor
5.1. Uopšteno
Blazor omogućava kreiranje interaktivnih web korisničkih interfejsa koristeći C# umjesto
JavaScript-e.Blazor aplikacije su komponirane od web UI komponenti koje se mogu iznova
koristiti(reusable web UI component) koje se implementiraju koristeći C#,HTML i CSS.
Kod i na klijent i server strani napisan je u C# što omogućava dijeljenje koda i biblioteka.
Blazor je dio ASP.NET-a koji je dio .NET developerske platforme koja posjeduje moćne i
robusne alatke za kreiranje web aplikacija.
Slika 8. Docker
Prednosti korištenja .NET-a na klijent strani web developmenta pruža mnoge prednosti:
13
Komponente su .NET klase ugrađene u .NET assemblies koje:
Komponenta je inače klasa koja se piše u formi Razor markup stranice sa .razor nastavkom za
datoteku.Komponente u Blazoru formalno se nazivaju Razor komponentama.Razor je sintaksa
koja kombinira HTML i C# u istom fajlu sa IntelliSense podrškom.Razor stranice i MVC
takođe koriste Razor.Za razliku od Razor stranica i MVC,koji su građeni na principu
request/response modela, komponente su korištene specifično za klijentsku stranu UI logike i
kompozicije.
<div>
<h1>@Title</h1>
@ChildContent
<button @onclick="OnYes">Yes!</button>
</div>
@code {
[Parameter]
public string Title { get; set; }
[Parameter]
public RenderFragment ChildContent { get; set; }
14
@page "/"
<h1>Hello, world!</h1>
<Dialog Title="Blazor">
Do you want to <i>learn more</i> about Blazor?
</Dialog>
Pokretanje .NET koda unutar preglednika omogućio je WASM.WASM kod može pristupiti
punoj funkcionalnosti preglednika putem JavaScript-a(JavaScript interoperability / JavaScript
interop). .NET kod izvršen preko WASM-a u pregledniku pokreće se u preglednikovom
JavaScript sandbox-u sa zaštitom koju taj sandobx pruža protiv zlonamjenrih akcija na
klijentskoj mašini.
15
Slika 10. Blazor WebAssembly
16
Slika 11. Blazor Server
.NET Standard omogućava da se isti kod i biblioteke koriste na serveru,u preglediku ili bilo
gdje gdje se koristi .NET kod.
Pored Microsoftovih editora,postoje i .NET command line alatke koje omogućavaju rad s bilo
kojim editorom.
17
5.6.1. Visual Studio
Microsoft Visual Studio jest integrirano razvojno okruženje (IDE) koga pravi Microsoft.
Koristi se za razvoj računarskih programa za Windows, veb-stranica, aplikacija i usluga.
Koristi Microsoftove platforme za razvoj poput aplikativnih programskih interfejsa (API) za
Windows, Windows Forms, Windows Presentation Foundation, Windows Store i Microsoft
Silverlight. Može proizvesti nativni kôd i upravljani kôd (eng. managed code).
Visual Studio sadrži uređivač izvornog kôda koji podržava IntelliSense (komponenta koja
predlaže ostatak kôda) kao i refaktoriranje kôda. Integrirani program za otklanjanje grešaka
(debugger) radi na nivou izvornog i mašinskog koda. Program također sadrži alate poput
dizajnera oblika koji se koristi za pravljenje aplikacija s grafičkom korisničkim interfejsom,
veb-dizajnera, dizajnera klasa i dizajnera shema baza podataka. Prihvata proširenja koja
poboljšavaju funkcionalost na skoro svakom nivou dodajući podršku sistema za upravljanje
izvornim kôdom (poput softvera subversion) i dodajući nove nizove alata poput tekstualnih
uređivača i vizualnih dizajnera za jezik određenih domena ili za druge dijelove procesa
razvoja softvera (poput klijenta Team Explorer).
Visual Studio podržava različite programske jezike i dozvoljava uređivaču kôda i debuggeru
da podržava (u različitoj mjeri) gotovo bilo koji programski jezik, pod uvjetom da usluga za
taj jezik postoji. Ugrađeni jezici su C, C++ i C++/CLI (preko Visual C++), VB.NET (preko
Visual Basic .NET)-a, C# (preko Visual C#) i F# (počevši od programa Visual Studio 2010).
Podrška za ostale programske jezike poput M-a, Pythona, i Rubyja kao i ostalih dostupna je
instalacijom jezičkih servisa koji se mogu zasebno instalirati. Također podržava XML/XSLT,
HTML/XHTML, JavaScript i CSS.
18
5.6.2. Visual Studio Code
VS Code je dizaniran i kreiran za lakši rad sa Web i Cloud aplikacijama, VS Code
developerima nudi novi svježi način pristupa razvoju i alatima, kombinirajući lakoću i brzinu
kod editora i inteligentni pristup preuzet od IDE-a. Ovo je prvi cross-platform alat u familiji
Visual Studija, koji se izvršava nativno na Linuxu, OS X-u i Windowsu naravno.
VS Code je open-source, jako brz i snažan kod editor odličan za svakodnevnu upotrebu,
osigurava odličnu kontrolu nad podešavanjima i veliku pomoć pri pisanju koda kao što su:
autocomplite, syntax highlighting, bracket matching, ugrađeni i custom snipeti itd.. Naravno
tu je i podrška za mnogo programskih jezika. Za ozbiljniju podršku u razvoju aplikacija tu je
intellisense sa svim svojim velikim prednostima koje su već poznate u Visual Studio
verzijama. Za sada najveća podrška je za Node.js sa TypeScriptom i JavaScriptom i ASP.NET
5 sa C# programskim jezikom.Out-of-the box integracija sa git source controlom, kao i bogato
debugging okruženje za Node.js i ASP.NET web aplikacije te sa potpunom podrškom za
extenzije preko oficijalnog marketplace-a.
19
Literatura
Internet članci
https://webassembly.org/ - WebAssembly
https://pspdfkit.com/blog/2017/webassembly-a-new-hope/ - WebAssembly
https://dotnet.microsoft.com/learn/dotnet/what-is-dotnet-framework - .NET
Framework
https://dotnet.microsoft.com/apps/aspnet - ASP.NET
https://docs.microsoft.com/en-us/dotnet/csharp/ - C#
https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor - Blazor
https://stackoverflow.blog/2020/02/26/whats-behind-the-hype-about-blazor/ -
Blazor
https://www.infoq.com/news/2020/02/blazor-webassembly-preview/- Blazor
https://docs.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-3.1 –
Blazor
https://almirvuk.blogspot.com/2016/03/visual-studio-code-nodejs-
development.html - Visual Studio Code
https://code.visualstudio.com/?wt.mc_id=DX_841432 – Visual Studio Code
https://visualstudio.microsoft.com/ - Visual Studio
Knjige
https://aka.ms/blazor-ebook – Daniel Roth, Jeff Fritz, Taylor Southwick, Scott
Addie; „Blazor For .NET Web Forms Developers“; 28.09.2019.
20