JavaScript je postao izuzetno popularan tokom godina, sa zajednicom koja rapidno raste. Programeri svakodnevno kreiraju i razvijaju alate za ovaj jezik.
To stvara izazov pri izboru pravog alata, okvira ili biblioteke za određeni zadatak, jer uvek postoji više opcija za sve što poželite da uradite u JavaScriptu. Na početku je posebno teško odlučiti koju biblioteku ili okvir prvo naučiti.
Ovaj članak ima za cilj da rasvetli prednosti upotrebe nekoliko JavaScript front-end okvira i biblioteka, pružajući jasniju sliku o njihovim mogućnostima i olakšavajući proces odabira.
React
React nije okvir, već JavaScript biblioteka za izgradnju korisničkih interfejsa.
Radi se o open-source projektu, koji održavaju Facebook i zajednica nezavisnih programera. React je inicijalno razvijen od strane Jordana Walkea kao interni alat u Facebooku. Kasnije je postao open source i objavljen javnosti 2013. godine, nakon čega je stekao ogromnu popularnost.
Neke od ključnih karakteristika Reacta uključuju:
- Pruža reaktivne, prilagodljive i višekratne komponente.
- Koristi virtuelni DOM.
- Izuzetno je brz.
- Baziran je na komponentama.
- Podržava jednosmerno vezivanje podataka.
- Omogućava ponovnu upotrebu koda.
- Ima živahan i napredan ekosistem.
- Efikasno upravlja stanjem aplikacije.
Instalacija i upotreba
React se može koristiti u front-endu na dva načina:
Preko CDN-a
Možete pogledati zvaničnu stranicu kako biste dobili linkove ka skriptama koje možete uključiti u header vašeg HTML dokumenta. Izaberite linkove na osnovu svrhe.
Na primer, ako radite u razvojnom okruženju, koristite:
<script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
Za produkciono okruženje, koristite:
<script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
Korišćenje Node.js
Pretpostavlja se da već imate instaliran Node.js. Da biste instalirali React, jednostavno unesite sledeću komandu:
sudo npm i -g create-react-app –save-dev
Kada se instalacija završi, unesite sledeću komandu:
create-react-app my-first-react-application
Gornja komanda će instalirati sve potrebne biblioteke za ispravan rad Reacta, uključujući razvojni server, Webpack i Babel.
Uđite u folder my-first-react-application i pokrenite sledeću komandu:
npm start
Ovo će pokrenuti razvojni server na portu 3000. Kada pristupite serveru preko porta 3000, trebalo bi da vidite nešto slično ovome:
React postaje sve popularniji i tražen je od strane velikih organizacija. Ako ste zainteresovani za učenje Reacta, preporučujemo vam ovaj kompletan kurs.
Vue.js
Vue.js je progresivni JavaScript okvir za izgradnju interaktivnih korisničkih interfejsa i jednostraničnih aplikacija. To je framework za prikaz modela sa osnovnom bibliotekom, fokusirajući se na sloj prikaza. Vue je popularan zbog svoje sposobnosti pokretanja jednostraničnih aplikacija. Za razliku od Reacta, Vue koristi sirov HTML umesto JSX-a.
Vue.js je open-source projekat koji je originalno kreirao Evan You, a javno je objavljen u februaru 2014. godine. Neke od njegovih karakteristika su:
- Pruža reaktivne i komponibilne komponente pogleda.
- Koristi virtuelni DOM.
- Fokusira se na osnovnu biblioteku (tj. rutiranje i upravljanje stanjem).
- CSS opseg se obrađuje bez CSS-in-JS.
- Podržava jednosmerno vezivanje unutar komponenti.
- Podrška za osnovne dodatke.
- Omogućava ponovnu upotrebu koda.
Instalacija i upotreba
Vue.js možete koristiti u front-endu preko CDN-a ili sa Node.js.
Da biste koristili CDN metod, dodajte sledeću skriptu u header sekciju HTML stranice:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Gornja skripta je pogodna za razvojne svrhe jer uključuje važne konzolne poruke. Međutim, za produkciju bi trebalo da koristite donju:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
A da biste ga koristili sa Node.js, instalirajte ga pomoću npm komande:
npm install vue
Preporučuje se da pročitate zvaničnu Vue.js dokumentaciju kako biste saznali više, ili razmislite o ovom putu.
Angular
Angular je strukturni JavaScript okvir za dinamičke stranice. Omogućava upotrebu HTML-a kao jezika šablona i dozvoljava upotrebu HTML sintakse za jasno i koncizno izražavanje komponenti aplikacije. To je open-source projekat koji održavaju Google i drugi saradnici.
Instalacija
Uverite se da imate instaliran najnoviji Node.js. Prva stvar koju treba da instalirate je Angular CLI alat.
npm install -g @angular/cli
Nakon što je instaliran, možemo kreirati novi projekat pomoću sledeće komande:
ng new my-first-angular-app
Pratite uputstva na ekranu. Ovo generiše neke datoteke i foldere i koristi npm modul za preuzimanje biblioteka trećih strana koje su potrebne za ispravan rad Angulara.
Da biste pokrenuli novokreiranu aplikaciju, pokrenite sledeću komandu iz foldera aplikacije:
ng serve
Ovo bi trebalo automatski da pokrene server na portu 4200.
[[email protected] my-first-angular-app]# ng serve
10% building 3/3 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to //index.html
chunk {main} main.js, main.js.map (main) 47.8 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 10 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.81 MB [initial] [rendered]
Date: 2019-12-28T12:08:20.138Z - Hash: 5d4b93c7bf9e61979c4d - Time: 12864ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Compiled successfully.
Zaključak
Dakle, ono što odlučite da naučite je više lična preferencija nego „šta je bolje“.
Svi okviri/biblioteke navedeni iznad su odlični. Evo kratkog rezimea:
- Trebalo bi da naučite Angular ako želite framework na koji želite da se oslonite bez potrebe za spoljnim zavisnostima.
- Trebalo bi da naučite React ako želite da napravite brzu, PWA, jednostraničnu aplikaciju, i ako vam je prijatno sa JSX-om.
- React ima najživahniju zajednicu i više mogućnosti za posao zbog svoje velike zajednice.
- React je relativno lako započeti.
- React je veoma prilagodljiv i tretira svaki deo korisničkog interfejsa kao komponentu.
- Vue ima iste prednosti kao React, ali bez JSX-a.
- Tržište rada za Vue se stalno povećava.
Evo grafikona sa Google Trendova koji pokazuje poređenje popularnosti ova tri okvira/biblioteke:
Ako ste zainteresovani za razvoj front-enda, možete pogledati ovaj Udemy kurs.