Ultimate JavaScript Frameworks -vertailu: Angular vs React

Minulta kysytään melkein päivittäin, pitäisikö minun aloittaa ReactJS:llä vai Angularilla? Ennen kuin jatkan, haluan kuitenkin antaa sinulle vastuuvapauslausekkeen.

Se ei ole blogi, jossa aion lyödä yhtä tai toista tai sanoa, että sinun pitäisi aina käyttää yhtä tai toista. Jokainen kehittäjä ja jokainen projekti ovat täysin erilaisia, ja niillä on erilaiset vaatimukset, joten sanominen, että sinun tulee aina käyttää ReactJS:ää tai aina Angularia, on melko pirun typerää.

Looginen argumentti

Voit väittää, että Angular on kehys ja React on teknisesti kirjasto itsessään. En kiellä tätä tosiasiaa, mutta tämä on argumentti, johon en nyt halua mennä. Voit lisätä Reactiin paketteja, jotka tekevät siitä puitteet, jotka kilpailevat suoraan Angularin kanssa. Vertailemme kahta ekosysteemiä, emme tarkkaa viitekehystä tarkalleen kirjastoon.

Oppimiskäyrä

Aloitetaan Angularista. Vielä yksi vastuuvapauslauseke: kun sanon Angularin, puhun Angular 4:stä, en AngularJS:stä.

Angular on iso runko, mikä tarkoittaa, että se on tehokas ja sisältää paljon. Opittavaa on paljon. Tulet kuulemaan paljon uutta pelottavaa sanastoa, kuten riippuvuusruiskeen, ohjeiden sisustajat, putket jne. Sitten sinun täytyy käsitellä Typescriptiä, joka on JavaScript sekä joukko muita ominaisuuksia, kuten staattinen kirjoittaminen.

Angular on mielipiteesevämpi kuin React, mikä on mielestäni yksi eduista, koska Reactilla voit tehdä saman asian miljoonalla eri tavalla. Angularissa on yleensä yksi tai kaksi tapaa tehdä tiettyjä asioita, mikä helpottaa seuraamista, antaa sinulle paljon selkeämpiä ohjeita siitä, mitä sinun pitäisi tehdä.

Mutta sitten taas, se riippuu mieltymyksistä. Saatat pitää joustavuudesta tehdä asioita eri tavoin. Kuten mainitsin, ReactJS on kirjasto, jos puhumme vain ydinkirjastosta, se on paljon pienempi ja paljon helpompi oppia kuin Angular-kehys. Voit sanoa, että opit reagoimaan lyhyemmässä ajassa. React on itsessään loistava näkymäkirjasto, mutta se ei ole edes lähellä yhtä tehokasta suuriin sovelluksiin. Jos haluat reitityksen, vahvistuksen, HTTP-pyynnöt Reactissa, sinun on asennettava muita paketteja, mikä lisää oppimiskäyrää.

Jos tarkastelet kahden eri kehittäjän React-koodia, ne näyttävät todennäköisesti täysin erilaisilta riippumatta siitä, tekevätkö he HTTP-pyyntöjä tai käsittelevätkö tilaa ja ominaisuuksia. Kaikki nämä asiat voidaan käsitellä hyvin eri tavalla ja usein se voi olla väärällä tavalla.

Löydät parhaat käytännöt ja kaikki ongelmat poistuvat, mutta se lisää oppimiskäyrää.

Toisin kuin Angular React ei käytä malleja. Se käyttää jotain, jota kutsutaan JSX- tai JavaScript-laajennukseksi tai JavaScript-syntaksilaajennukseksi, jonka avulla voimme upottaa HTML:n JavaScriptiin. Aluksi tämä voi tuntua hieman omituiselta. Varsinkin, kun luultavasti opetettiin erottamaan merkintäsi ja JavaScripti.

Ajattele sitä kuin laittaisit HTML:n JavaScriptin sisään parilla eri muutoksella: et voi käyttää class-attribuuttia ja sinun on käytettävä luokan nimeä.

Lopuksi meillä on Redux. Reactia käytetään usein Reduxin tai Fluxin kanssa, jotka ovat sovellustason tilanhallintaohjelmia. Mielestäni Redux on hirveän vaikeaa vain sen asentamisessa, ja sen käsitteiden oppiminen on vaikeaa.

Minusta sitä on käytetty liikaa. Uskon, että monet kehittäjät käyttävät reduxia siellä, missä sitä ei tarvita. Et tarvitse sitä pienempiin sovelluksiin, mutta monet kehittäjät vaativat sen käyttöä. Se taas riippuu mieltymyksistä. Redux on erittäin voimakas, en halua ottaa sitä pois. Kun puhutaan oppimiskäyrästä, sitä on helvetin vaikea käsittää.

ominaisuudet	Reagoi	Kulmikas
Ohjelmointikieli	JavaScript	TypeScript
Koodirakenne	Itsepäinen	Joustava
Ydinkirjasto	Pieni	Hyvin suuri
Mallintaminen	JSX	HTML
Pätevyys	Pienet sovellukset	Laajamittaiset sovellukset

Voittaja: Tasapeli

Esitys

Ei ole reilua verrata suoraan Angular to Reactin suorituskykyä. Angular on täydellinen edestä taaksepäin -kehys, joka sisältää reitityksen, lomaketyökalut, HTTP-kirjaston, reaktiiviset laajennukset jne. Kaikki nämä ominaisuudet turvottavat puitteet ja hidastavat sitä. React itsessään on kuitenkin vain näkymäkirjasto, joka on paljon pienempi ja nopeampi.

Kun aloitat lisäämään paketteja, kuten reititintä, HTTP-asiakasohjelmaa tai mitä tahansa, mitä aiot lisätä React-sovellukseesi, se alkaa tulla hieman enemmän siihen, missä Angular on, ja sitten voit alkaa vertailla niitä reilusti, mutta senkin jälkeen React silti voittaa suoritusosaston. Se on yleisesti ottaen erittäin nopea tekniikka.

Vaihto Angular 2:sta Angular 4:ään konepellin alla he tekivät melkoisesti parantaakseen suorituskykyä. Angular 4 toimii paremmin kuin Angular 2. Siitä huolimatta React voittaa edelleen suorituskykyosastolla.

Angular vs React. Lähde: Academind.com

Voittaja: reagoi

ominaisuudet

Molemmilla kehyksillä on paljon samoja yleisiä ominaisuuksia ja etuja: ne järjestävät koodisi, ne ovat komponenttipohjaisia, ne tarjoavat dynaamista merkintää jne. Niillä on paljon samoja asioita, ja ne jakavat paljon samoja ominaisuuksia.

ominaisuudet	AngularJS	Reagoi
Julkaisupäivä	2009	2013
Kieli	TypeScript, JavaScript	JavaScript
Markkinaosuus	0,3 %	<0,1 %
Malli	Joo	Ei
Näytä	Joo	Joo
Ohjain	Joo	Ei
Oppimiskäyrä	Monimutkainen	Helppo
Mallintaminen	Joo	Ei
Epäonnistuminen	Ajoaika	Käännösaika
Tarjoilupuolen renderöinti	Ei	Joo
DOM	Joo	Virtuaalinen
Mobiilituki	Joo	Joo
Tarjoilupuolen renderöinti	Ei	Joo

Tarkastellaan joitain yksittäisiä ominaisuuksia. Angularilla on ilmeisesti paljon enemmän ominaisuuksia kuin Reactissa ytimessä. Muistutan teitä, puhumme kahdesta ekosysteemistä ja yleisistä paketeista, joita käytetään Reactin kanssa.

Angular on kaikki mukana oleva runko. Sen mukana tulee komponenttireititin, reaktiiviset laajennukset havainnoitaville kohteille, HTTP-asiakas, lomakkeen validointimoduuli ja luettelo jatkuu. Lisäksi se tarjoaa kaksisuuntaista tiedonsidontaa tavalla, jota mikään muu kehys ei todellakaan tee. Tietojen sitominen näkymästä malliin on erittäin helppoa ng model -direktiivin avulla.

Angular tukee myös MVC:tä (Model View controller) tai ainakin eri näkökohtia tästä suunnittelukuviosta. sen mukana tulee myös ominaisuuksia, joiden avulla voit helposti toteuttaa testauksen: sekä yksikkötestauksen että päästä päähän -testauksen. Angular on täynnä ominaisuuksia yritystason käyttöliittymäsovellusten rakentamiseen. Reaktio toisaalta ei sisällä paljoa ytimeen. Asiat voidaan kuitenkin lisätä antamaan sille Angularin sisältämät ominaisuudet sekä joitain muita ominaisuuksia.

React käyttää virtuaalista DOM:ia, joka on erittäin tehokas. Se luo oman kevyen versionsa todellisesta Domista ja sisältää ja päivittää vain sen, mitä tarvitaan, sen sijaan, että virkistäisi koko asian. Virtuaalinen DOM on tärkein syy siihen, että React on räjähtävän nopea.

React käyttää JSX:ää, joka on tehokkaampi kuin tavalliset mallit, koska voit laittaa siihen mitä tahansa JavaScript-tyyppiä. JSX ei vaadi Reactin käyttöä, mutta se tekee asioista helvetin paljon helpompaa. En keksi mitään syytä, miksi et käyttäisi JSX:ää myös Angularin kanssa. React tekee myös todella hyvää työtä komponenttien tilan ja ominaisuuksien hallinnassa. Se tekee tietojen käsittelystä ja siirtämisestä komponenttien välillä todella helppoa. Tietojen välittäminen komponenttien välillä Angularilla on paljon vaikeampaa kuin Reactissa.

Core Reactin sovellustason tilaa on vaikea ylläpitää. Komponenttitila on helppoa, mutta jos haluat todellisen sovellustason tilanhallinnan, tarvitset Reduxin tai Fluxin, mikä aiemmin sanoin, on melko hämmentävää oppia. Ulkoiset paketit, joita käytetään usein, kuten uusi React-reitittimen versio 4, on hieman vaikea käsittää, mutta se on myös erittäin tehokas, kun se oppii suorittamaan ja asentamaan sen. On myös monia erilaisia ​​tapoja käyttää sitä. Reactissa ei ole HTTP-ydinkomponenttia, kuten Angularilla, mutta voit käyttää Fetchiä tai Axiosta, jotka ovat ulkoinen HTTP-asiakas, ja sitten Enzyme on suosittu Reactin todistamiseen. Joitakin erilaisia ​​paketteja käytetään yleisesti Reactin kanssa, vaikka ne eivät ole osa varsinaista kirjastoa.

Vaikka molemmilla teknologioilla on useita yhteisiä ominaisuuksia, jos vertaat vain ydinteknologioita, Angular on voittaja.

Voittaja: Angular

Työkalu

Angularilla ja Reactilla on melko mukavia komentoriviliittymiä. Angular CLI ja Create React App ovat molemmat melko mahtavia ja niiden avulla voimme todella virtaviivaistaa kehitystä. Angular CLI on hieman tehokkaampi, koska voimme luoda nopeasti asioita, kuten komponentteja ja palveluita. Luo React ei voi tehdä sitä. Sinun on luotava kaikki itse tiedostoihin ja perusrakenteeseen asti. Molemmat järjestelmät käyttävät verkkopakettia, niillä on omat automaattisesti latautuvat kehityspalvelimet sekä käännös- ja rakennustyökalut. On selvää, että Angularilla on ylimääräinen tehtävä Transpiloida Typescript. CLI:llä on komentosarja tätä varten, kun suoritamme palvelun. Kaikki mitä tapahtui kulissien takana. Se käyttää jotain nimeltä TSC tai Typescript Compiler, ja molemmilla on myös testaustyökaluja.

ominaisuudet	Kulmikas	Reagoi
Komentorivikäyttöliittymä	Kulmikas CLI	Luo React
Lisätehtävät	Transpiloi konekirjoitus	Ei mitään
Testaus	Jasmiini & Karma	On

Jos kyseessä on täysi pinosovellus, niin nämä ovat todella tärkeitä. Sinun ei tarvitse käyttää niitä. Voit rakentaa React-sovelluksen alusta alkaen verkkopaketin avulla. Nämä helpottavat huomattavasti sovelluksen rakentamisen lisäksi myös sen kääntämistä ja rakentamista tuotantoa varten.

He ovat molemmat kauniita jopa sillä osastolla.

Voittaja: Angular

Ekosysteemi

Kuten sanoin, näillä molemmilla teknologioilla on omat ekosysteeminsä, jotka ovat nyt levinneet paljon verkkoselaimen ulkopuolelle.

Ionic on suosittu hybridikehys, joka on Angular-sovellus, joka toimii mobiilisovellusten alkuperäisessä kääreessä. Voit luoda mobiilisovelluksia Angularilla. Hybridisovellukset voivat olla hieman kömpelöitä verrattuna alkuperäisiin sovelluksiin. Käyttökokemus ei voi toisinaan olla niin loistava – ei niin nopea ja reagoiva. Erilaisten hybridikehysten joukosta Ionic 3 on paras. Mukana on myös NativeScript, jonka avulla voimme rakentaa todellisia natiivisovelluksia iOS- ja Android-sovelluksia Angularilla sekä JavaScriptillä.

ominaisuudet	Kulmikas	Reagoi
Hybridisovelluskehitys	Ioninen	*Ei vaadittu
Natiivisovellusten kehitys	NativeScript	React Native
Palvelinpuolen renderöinti	Kulmikas universaali	ETTÄ
Valtionhallinnon kirjasto	NgRx Store	Reax Redux, MobX
Materiaalin käyttöliittymäkirjasto	Kulmikas materiaali	Materiaali-käyttöliittymä
Virtuaalitodellisuus	Reaktiivinen VR	ETTÄ

Siitä huolimatta NativeScript ei näytä olevan yhtä hyvä kuin Facebookin React Native ainakaan tässä vaiheessa. Angularilla on myös materiaalisuunnittelukomponenttikirjasto, jos olet materiaalisuunnittelun fani. Angular Universal on siemenprojekti, jota voidaan käyttää Angularin renderöimiseen palvelinpuolella. Siellä on myös NgRx-kauppa, joka on Reax reduxin inspiroima valtionhallintakirjasto. Se perustuu vertaisvähentäjien mutatoimaan tilaan. Se on myös integroitu Reactive-laajennuksiin.

Olisit huomannut. Kerran yksi heistä tekee jotain, toinen kopioi eri tavalla. Reactista ja Angularista on tullut Microsoftin ja Applen JavaScript-kehys.

Reactilla on melkoinen ekosysteemi. Siinä on React native, joka on suosittu. Se on paras tapa rakentaa mobiilisovelluksia verkkoteknologian avulla. React Native on nopea, ja monet sovellukset, jos ne on rakennettu oikein, ovat valmiina Swiftille tai Javalle rakennetuilla alkuperäisillä sovelluksilla. Reactilla on materiaalisuunnittelukirjasto nimeltä Material-UI, joka muistuttaa paljon Angularin materiaalisuunnittelukomponenttia, mutta kypsempi. JS on kehys palvelinpuolen React-sovellusten renderöintiin. Se pyrkii tekemään tämän yksinkertaisimmalla mahdollisella tavalla, jotta tätä voidaan verrata Angular Universaliin. MobX on toinen tapa hallita tilaa. Se toimii hieman eri tavalla kuin redux. Se tarjoaa joukon sisustajia havainnoitavien kohteiden ja tarkkailijoiden määrittämiseen, ja se tuo reaktiivisen logiikan tilaan.

Storybook on Reactin kehitysympäristö. Sen avulla voit selata komponenttikirjastoa, tarkastella kunkin komponentin eri tiloja sekä kehittää ja testata komponentteja interaktiivisesti. Reactive VR on saamassa Reactin virtuaalitodellisuuteen. React Desktop on JavaScript-kirjasto, joka on rakennettu Reacts-kirjaston päälle ja jonka oletetaan tuovan verkkoon alkuperäisen työpöytäkokemuksen sisältäen monia macOS- ja Windows 10 -komponentteja. React-ekosysteemi on erittäin suuri ja voimakas. React etenee teknologian kaikilla osa-alueilla ja on selvä voittaja.

Voittaja: reagoi

Puvussa ja solmiossa pukeutuvat ihmiset käyttävät Angularia ja nuhjuiset hipsterit Reactia.

	AngularJS	Reagoi
Pääkehittäjät	Google	Facebook+Instagram
Ikä	6 vuotta	2 vuosi
Laajennettavuus	Joo	Joo
Nopeus*	1,35 sekuntia	310 millisekuntia
DOM	Selain	Virtuaalinen; vain renderöi muuttuneet tiedot uudelleen korjausmekanismilla
Arkkitehtuuri	Täysi MVC-kehys	Vain näkymäkomponentti
Oppimiskäyrä	Aluksi vaikeaa; vaatii tiettyjen käsitteiden, kuten DOM-direktiivien, suodattimien ja tehtaiden tuntemusta.	Helpompi aloittaa; sisältää yksinkertaistetun API:n ja syntaksin
Rakenne ja komponentit	HTML, JS ja CSS	Sama; mutta voi integroida HTML:n JS:ään käyttämällä JSX:ää

Bottom line: Se on solmio

Jos päätät näiden kehysten välillä, katso eri luokkia ja katso, mikä sinua kiinnostaa. Kokeile molempia ja katso, kumman valitset nopeammin. Tee tutkimusta enemmän kuin tämä blogi. Et koskaan saa kaikkea tarvitsemaasi tietoa yhdestä blogista, joten lue lisää.

Jos tarkastelet suurempaa ekosysteemiä, joka sisältää alkuperäisen mobiilisovelluskehityksen, valitse React ajattelematta kahdesti. Jos kaipaat ominaisuuksia, Angular on valtava. Ominaisuuksia on enemmän kuin tarvitset.