Prvo pitanje koje se postavlja u debati između React-a i Angular-a je, kako možete uporediti biblioteku – React sa frameworkom – Angular-om?
Iako je React biblioteka (kao što je navedeno i na React-ovom web sajtu), mnogi programeri ga smatraju frameworkom, zbog svojih funkcionalnosti. Tako se React često može naći na listama najboljih/najpopularnijih JavaScript frameworka, ili se može upoređivati sa drugim frameworkom, poput Angular-a.
I React i Angular se koriste za Frontend development, ali koriste različite programske paradigme, imaju različite karakteristike, funkcionalnosti i performanse.
React ili Angular: Rivalstvo
Postoje brojne JavaScript biblioteke, kao što su Vue.js i jQuery i frameworci poput Ember i Backbone.js, ali zbog čega se programeri oslanjaju uglavnom na React i Angular?
To je zbog činjenice da ih, osim funkcionalnosti koju imaju, podržavaju velike IT kompanije poput Facebook-a i Google-a. React i Angular zajedno pokrivaju ogroman deo današnjeg web prostora.
React
React biblioteka, kreirana od strane Facebook-a, izašla je 2013. godine, kao tehnologija za izgradnju dinamičkih korisničkih interfejsa (UI). Proteklih godina bili smo svedoci daljeg razvoja React tehnologije sa redovnim ažuriranjima. React je baziran na JavaScript-u i JSX-u (PHP ekstenzija). JSX se koristi za razvoj HTML-a za višekratnu upotrebu i za dalju implementaciju u front-end razvoju. React je najpopularniji među JavaScript bibliotekama i često se naziva najboljom Javascript bibliotekom/frameworkom.
Angular
Angular framework, koji je razvio Google, prvi put je objavljen 2010. godine kao AngularJS zasnovan na JavaScript-u, jednom od najpopularnijih programskih jezika, zbog toga i ima u nazivu sufiks JS. U trenutku izdavanja, prepoznatljiva karakteristika Angulara-a bila je mogućnost pretvaranja HTML dokumenta u dinamični sadržaj, što je utabalo put njegovom daljem uspehu i razvoju.
Šest godina kasnije, 2016. godine, Angular je imao potpuni preobražaj. Google je ponovo ispisao kompletan framework pomoću TypeScript-a, relativno novog programskog jezika. Ova poptuno nova verzija Angulara nazvana je Angular 2.
Univerzalnost
React se koristi i u web development-u i u mobile development-u. Međutim, za mobile development potrebno je da bude povezan sa Cordovom. Štaviše, za razvoj mobilnih uređaja postoji dodatna biblioteka – React Native.
React se može koristiti za izradu web sajtova sa jednom stranicom, kao i web sajtove sa više stranica.
Angular je pogodan i za web development i za mobile development. U mobile development-u, međutim, veliki deo posla obavlja Ionic. Angular, kao i React, ima dodatnu biblioteku za mobile development. Protivnik React Native-a je NativeScript.
Angular se takođe može koristiti za web-aplikacije sa jednom ili više stranica.
Samostalnost
React se koristi za UI development, tako da su za aplikacije pisane u React-u potrebne dodatne biblioteke. Na primer, Redux, React Router, ili Helmet optimizuju procese state menagement-a, rutiranje i interakcije sa API-jem. Funkcije poput data binding-a, component-based routing, project generation, validacija forme, ili dependancy injection zahtevaju instaliranje dodatnih modula ili biblioteka.
Angular je kompletan framework za software development, koji uobičajeno ne zahteva dodatne biblioteke. Sve navedene funkcionalnosti, mogu biti implementirane uz pomoć Angular-a.
Učenje
React je minimalistički i prilično lak za razumevanje, ukoliko već znate JavaScript. Međutim, potrebno je vremena da se nauči kako postaviti projekat, jer ne postoji predefinisana struktura projekta. Takođe je potrebno da naučite Redux biblioteku, koja se koristi u više od pola React aplikacija za state management. Stalno ažuriranje framework-a zahteva dodatno zalaganje od strane programera, kako bi bili upoznati sa novitetima.
Angular je sam po sebi ogromna biblioteka i učenje svih koncepata zahtevaju više vremena nego što je to slučaj sa React-om. Angular je kompleksniji za razumevanje, postoji dosta nepotrebne sintakse, a upravljanje komponentama je prilično zamršeno. Neke komplikovane karakteristike ugrađene su u jezgro framework-a, što znači da programer ne može da izbegne da ih koristi. Takođe, postoji mnogo načina za rešavanje jednog problema. Iako je TypeScript veoma sličan JavaScript-u, ipak je potrebno određeno vreme da bi se naučio. Kao i u slučaju sa React-om, i Angular ima česta ažuriranja, pa je potrebno dodatno vreme za učenje.
Zajednica
React je jedan od najpopularnijih JavaScript biblioteka/framework-a širom sveta, a zajednica koja ga podržava i razvija je ogromna.
U radu sa Reactom morate kontinuirano učiti, s ozbirom na već pomenuta česta ažuriranja. Iako zajednica pokušava da ide u korak sa najnovijom dokumentacijom, praćenje svih promena nije tako jednostavno. Ponekad se može desiti da nedostaje dokumentacija, ali je taj problem često rešen uz pomoć podrške zajednice na forumima.
React aktivno koriste kompanije poput Facebook-a, Twitter-a, Netflix-a, Airbnb-a, PayPal, The New York Times-a, Walmart-a, Uber-a, Microsoft-a, Dropbox-a itd.
Angular je, takođe, veoma popularan framework, s tim da se za njega vezuje i određeni skepticizam, zbog prve verzije Angulara, koja nije zaživela. Programeri su ga odbacivali, jer je bio previše komplikovan i bilo je potrebno mnogo vremena da se nauči. S obzirom na to da je razvijen od strane Google-a, ta činjenica veoma ide u korist njegovom kredibilitetu. Google pruža dugoročnu podršku framework-u i stalno ga unapređuje. Zbog čestih ažuriranja, dešava se da i dokumentacija zaostaje.
Angular koriste kompanije kao što su McDonald’s, AT&T, HBO, Apple, Forbes, Adobe, Nike, a takođe i Microsoft i PayPal.
Struktura
Struktura React-a pruža programerima slobodu izbora. Ne postoji „jedina ispravna struktura“ za React aplikaciju. Međutim, neophodno je na početku projekta odrediti strukturu, što usporava započinjanje projekta.
Pored toga, React nudi samo View iz Model-View-Controller arhitekture, a Model i Controller su dodati uz korišćenje drugih biblioteka.
Arhitektura React-a zasnovana je na komponentama. Kod je napravljen od React komponenti, koje se renderuju sa React DOM bibliotekom i usmeravaju se na 2 načina: funkcijom (funkcija koja vraća JSX) i klasama (ES6 klase).
Struktura Angular-a je predefinisana (ali promenljiva) i kompleksna, pogodna za iskusne programere. Angular je baziran na Model-View-Controller arhitekturi. Objekat odgovoran za Model pokreće Controller i prikazan je View.
Kod se sastoji različitih Angular komponenti, a svaki se piše u 5 odvojeniha fajlova:
– TypeScript za implementaciju komponenti
– HTML za definisanje View-a
– CSS za definisanje stila, koji se koristi na View-u
– Specijalni fajl za svrhe testiranja
Linkovi ka ovim fajlovima upisani su u direktivama aplikacije, koje prikazuju strukturnu logiku aplikacije. U skladu sa tim, komponente u Angularu se mogu upotrebiti više puta.
DOM (The Document Object Model)
React koristi virtuelni DOM, koji omogućava jednostavnu implementaciju manjih promena podataka u jednom elementu, bez potrebe da ažurira cele strukture. On kešira u memoriji strukture podataka, izračunava promene i efikasno ažurira DOM u browser-u. Na ovaj način, čini se da se čitava stranica renderuje pri svakoj promeni, dok zapravo biblioteke prikazuju samo izmenjene komponente ( što prikazivanje čini dosta bržim i ne opterećuje server u tolikoj meri, kao kada bi morao da svaki put ažurira celu strukturu). Tim koji radi na React-u stalno radi na unapređivanju Fiber-a – mehanizma koji ima za cilj da poveća produktivnost prikazivanja promena.
Angular koristi pravi DOM (ne virtuelni), koji ažurira celu strukturu pri svakoj promeni. Pravi DOM se smatra sporijim i manje efektivnim u odnosu na virtuelni DOM. Da bi nadoknadio ovaj nedostatak, Angular koristi otkrivanje promena, kako bi identifikovao komponente koje je potrebno izmeniti. Na ovaj način, pravi DOM je podjedanko efikasan kao i virtuelni DOM.
Zaključak
Uporedivši i React i Angular, došli smo do zaključka da nijedan nije bolji. Oba se konstantno ažuriraju i unapređuju.
Odabir React-a ili Angulara je stvar ličnog izbora, veština i navika. Ukoliko ste početnik u programiranju, za vas bi verovatno bolji izbor bio React, a ukoliko ste iskusan programer, savet je da radite sa onim sa kojim ste već upoznati.
Izvor: edureka, mlsdev, freecodecamp
