Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Angular
Code

Angular vs. React: 7 szempont szerint összehasonlítva

by
Length:LongLanguages:

Hungarian (Magyar) translation by Peter Matyus-Jarai (you can also view the original English article)

Angular vs React

Az Angular és React összehasonlítása általában vitát szül a frontend JavaScript fejlesztők között, és az eredmény gyakran elfogult lesz, vagy az egyik, vagy a másik technológia előnyére. A Google és a Facebook által fejlesztett Angular és React ma az a két népszerű technológia, amivel interaktív single-page alkalmazásokat lehet készíteni.

Nem könnyű egy teljesen átfogó összehasonlítást készíteni, mivel bizonyos területeken vannak köztük átfedések, pl. az alkalmazás frontend nézeteinek elkészítése esetén, illetve más területeken, ahol a kínált funkcionalitás csak részben teljes, és ezen pl. csak harmadik féltől származó könyvtárak tudnak segíteni. Egyik technológia kiválasztása a másikkal szemben egy olyan kérdést vet fel, hogy az Angular vagy a React oldja-e meg a problémáinkat, aminek megválaszolásához kell egy kis megérzés is. Ebben a tutorialban összehasonlítjuk az Angular és React hét különböző tulajdonságát.

Lelkes támogatója vagyok a code-first megközelítésnek (a kód minden szónál hangosabban beszél, mondják). Ezt szem előtt tartva példakódokat készítettem, ahol csak lehetséges volt, így építhetsz a benyomásaidra, és eldöntheted melyik működik számodra és melyik nem. Kezdjük is el.

Keretrendszer vs Könyvtár

Az Angular egy keretrendszer míg a React egy könyvtár.

Mit jelent ez? Csupán React-et használva nem tudsz egy web alkalmazást készíteni, mivel ezt nézetek készítésére tervezték (ezt jelzi az MVC-ben a 'V'). React-tel komponens alapú nézeteket tudsz csinálni, amelyek adatait a gyermek nézeteknek is át lehet adni. Hogy ezt az űrt kitöltsék, a Facebook kifejlesztette a Flux-ot, ami egy építő minta és kiegészíti a React-et. A Flux architektúrát a React-el párosítva a következő forgatókönyvet kapjuk:

  1. A felhasználó egy React elemen kattint.
  2. Egy esemény váltódik ki. Ez az esemény egy Store-nak küldődik a Dispatcher könyvtáron keresztül.
  3. A Store nyomon követi az alkalmazás állapotát és adatlekérdező metódusait. Minden állapotfrissítés hatással lesz a nézeten, és ez segít abban, hogy a nézetek konzisztensek legyenek az alkalmazás állapotával.

Még nem teljesen világos? Ez az ábra segít.

An image that depicts how the Flux architecture complements React
A Flux kiegészíti a React-et és megvalósítja az egyirányú adatfolyam koncepcióját.
Az Angular egy framework, kliens alkalmazások készítéséhez.

AngularJS határozottan az MVC minta szerint készült, ami három különböző rétegre választja szét az alkalmazást. A model, nézet, kontroller kombinálása, plusz a hozzáadott komplexitás magába foglalja az utasításokat, gyárakat, szolgáltatásokat és más komponenseket a single-page alkalmazások készítéséhez, és a Google így a fejlesztőket a komponens alapú architektúra felé mozdítják.

De amikor az alkalmazásod elkezd nőni, nagyon fontos hogy legyen egy szilárd szerkezet, ami elszeparálja az alkalmazásod üzleti logikáját a komponensektől. Keretrendszerként, az Angular biztosítja a strukturális szervezést azzal, hogy az üzleti szabályokat egy domain modellbe mozgatja (model osztályok és szolgáltatások kombinációjával) és beszúrja a modellt a komponenseidbe a dependency injection segítségével (függőségek automatikus beszúrása nyelvi elemek vagy típusok segítségével).

Itt van egy példakód, ami illusztrálja hogy az üzleti logika a User modelbe és szolgáltatásba van ágyazva, és külön van választva a komponenseinktől.

Komponens alapú megközelítés

A komponensek a legalapvetőbb építőkockái egy UI-nak egy Angular alkalmazásban. Egy Angular alkalmazás egy Angular komponensekből felépülő fa.

Mik azok a komponensek? Angularban a komponensek TypeScript osztályok, amelyeket egy @Component dekorátor jelez felettük. Továbbá ezeken a dekorátorokon belül definiáljuk, hogy mit hív az Angulra meta-data-nak, ami lehet a template, stílusok, selectorok és így tovább.

Az Angular komponens hierarchiáját úgy tervezték, hogy a struktúrát és a funkcionalitást egyetlen entitáshoz lehet rendelni. Itt egy magas szintű architekturális áttekintést láthatunk a komponensekről és hogyan kapcsolódnak a elemek egymáshoz Angularban.

The architecture of Angular
Angular architektúrája. Komponens a középpontban és minden más körülötte forog.

A komponensek közötti adatmegosztás a komponensek egymásba ágyazásával lehetséges, ahogy az alábbi példa mutatja.

A komponensek ötlete mélyen a React-be van ágyazva, ahogy az Angular-ban is. A Facebook egy komponens alapú könyvtárnak nevezi a React-et, ami interaktív felhasználói felületek építésében segít neked. Azonban, az Angulartól eltérően, a React komponensek csak JavaScript függvények, tetszőleges számú inputtal és egy outputtal. Az alábbi forráskód egy komponenst mutat, amit egy JavaScript függvény definiál és ES6 osztályt használ.

Ezentúl az ES6 szabványhoz ragaszkodunk a komponensek fejlesztésénél, amit a Facebook is javasol. Minden React komponens tetszőleges számú bemenetet fogad, ami egy props nevezetű objektumban tárolódik.

Továbbá van egy render metódusa, és ahogy a neve is mutatja, ez a metódus határozza meg, hogy mi legyen megjelenítve amikor a komponens meghívódik. Minden komponens egy belső állapotot menedzsel (a this.state segítségével), és amikor az állapot változik, meghívódik az adott komponens render függvénye.

Nyelvi funkciók: TypeScript vs ES6

Az Angular alkalmazások TypeScript-ben készülnek, ami az ECMA2015 részhalmaza, és egy átalakító programot használ ahhoz, hogy lefordítsa az erősen típusos .ts fájlt egyszerű .js fájlra. A TypeScript olyan nyelvi kiterjesztéseket kínál, amiket arra terveztek, hogy a JavaScript kód írását megkönnyítsék. Típus információt rendel a JavaScript entitásokhoz, hogy biztosítsa a típus ellenőrzést és növelje a fejlesztési munkafolyamatot.

A TypeScript néhány lényeges funkciója között van pl. az opcionális statikus típus, és támogatja az interfészeket, osztályokat és dekorátorokat. (A dekorátorok olyan függvények, melyek előtt egy '@' prefix áll, és egy osztály vagy paraméter vagy tulajdonság követ.)

Ugorjunk neki a React-nek. Az egyik fontos nyelvi tulajdonsága a React-nek az alábbi kód alapján nyilvánvaló lesz.

Nagyszerű ugye? React-el XML/HTML mezőket lehet a JavaScript fileba írni, és ezt a JSX-en keresztül tehetjük meg, ami szintaxis kiterjesztést nyúlt a JavaScript számára. Egy fordító eszközt kell használnunk, mint pl. a Babel, ami a JSX kódunkat JavaScript-re fordítja, amit már a böngésző is ért. A fenti kód fordításának eredménye lentebb látható:

Bár a JSX használata javasolt, maradhatunk a React.createElement() függvényhívásnál is, ha nem akarunk HTML tag-eket ágyazni a JavaScript-be.

Továbbá akár az ES6 szabványt, akár a hagyományos JavaScript nyelvet is használhatjuk, amikor React-ben dolgozunk. Bár az ES6 eléggé új, sok funkciót nyújt, mint pl. osztályok, arrow függvények, template literálok, destruktor, let és const használata. Az egyik hátrány, amire gondolni tudok az, hogy egy kis kódrészletet mindig meg kell hívni, mint pl. a super() amikor a constructor()-t hívjuk, és ez nincs automatikusan hozzárendelve az esemény kezelő metódusokhoz a this-en keresztül.

Típus ellenőrzés Angularban vs PropTypes React-ben

A statikus típus ellenőrzés fordítási időben történik. A fordító figyelmeztet, ha egy potenciális típus eltérés van, és bizonyos hibákat detektál, amelyek egyébként észrevétlenül maradnának. Továbbá ha egy contract-ot definiálunk egy változón vagy tulajdonságon vagy egy függvény paraméterein, az sokkal olvashatóbb és kezelhetőbb kódot eredményez.

A változó és függvény deklarációk sokkal kifejezőbbek, ha a típusukkal együtt deklaráljuk őket. A különböző primitív adattípusokról a TypeScript dokumentációjában olvashatunk többet.

Ha az API felületet interfésszel definiáljuk, akkor a kód kevésbé lesz kétértelmű és könnyebb lesz megérteni. Az interfész egy gyors útmutatóként is szolgálhat, ami segít abban hogy azonnal el tudjuk kezdeni a munkát és időt takarít meg, amit egyébként a dokumentáció olvasására fordítanánk, vagy az aktuális könyvtár implementációjának olvasására.

A type kulcsszót a TypeScript-ben egy típus alias létrehozására lehet használni. Ezzel új típust lehet készíteni, ami uniója vagy metszete lehet az alap típusoknak.

A React kevésbé támogatja a típus ellenőrzést, mivel a mögötte lévő ES6 nem támogatja ezt. Egyébként a típus ellenőrzést a prop-types könyvtárral lehet implementálni, amit a React csapata fejlesztett ki. Egy komponens props tulajdonságának típus ellenőrzése látható lentebb, ellenőrzi, hogy sztring-e.

De a prop-types nem csak sztrinekre, számokra és boolean értékekre korlátozódik. sokkal több mindent lehet csinálni vele, amit a prop-types könyvtár dokumentációja tartalmazza. Azonban ha a statikus típus ellenőrzést komolyan gondoljuk, akkor a Flow-hoz hasonlót kell használnunk, ami egy statikus típus ellenőrző könyvtár JavaScript-ben.

Angular CLI vs create-react-app

Nulláról kezdeni egy projektet kezdetben jónak tűnik. Azonban a kezdeti folyamatok, miszerint felállítjuk a könyvtárstruktúrát, megírjuk a komponensek mintakódjait és elkészítjük az alkalmazás alapverzióját, jelentéktelen és terméketlen gyakorlatok. A stratégiánk az kellene hogy legyen, hogy minél hamarabb végezzünk ezekkel és a konkrét alkalmazás fejlesztésére fókuszálhassunk. Hála a Google-nek és a Facebook-nak, vannak elérhető eszközök arra, hogy elkészítsük és nyugodtan megalapozzuk az alkalmazásainkat.

npm-mel könnyen fel lehet telepíteni az Angular-CLI-t és a create-react-app-ot.

Új Angular alkalmazás készítéséhez az alábbi parancsot lehet használni:

De nem csak ebből áll a dolog. Az ng generate paranccsal komponenseket, route-okat, pipe-okat, direktívákat, és szolgáltatásokat is lehet generálni.

Angular CLI sokkal többet is tud, mint pl. Angular app build-et készít, unit tesztek futtatását vezérli, és end-to-end tesztelést is. Erről a GitHub-on olvashatsz többet.

Másrészről, a create-react-app a hivatalosan is támogatott módja annak, hogy React app-ot lehessen készíteni bármilyen konfig fájlok nélkül.

$ npm install -g create-react-app

Ez egy működőképes React alkalmazást készít, minden Babel és webpack függőséget figyelembe véve. Az npm start paranccsal el is indíthatod az appot a böngészőben.

Megtalálhatod a szkripteket a react app-hez a package.json file-ban.

Adat kötés: Két utas binding vs Egyirányú binding

Az adat binding egy olyan funkció, ami az alkalmazás állapota (modellje) és a nézet közötti adat szinkronizációt valósítja meg. Az egyutas adatkötéssel bármilyen állapotváltozás az alkalmazásban automatikusan frissíti a nézetet. Viszont a kétutas adatkötés összeköti a tulajdonságot és eseményeket egy egyedi entitásba, tehát bármilyen módosítás a modelben frissíti a nézetet és fordítva.

React-ben a tulajdonságok a szülőtől a gyerek komponensek felé adódnak át, amit úgy is ismerhetünk, mint az egyirányú vagy fentről lefelé irányuló adatfolyam. Egy komponens állapota beágyazott és nem érhető el más komponensek számára, csak ha egy tulajdonságok keresztül egy gyerek komponensnek átadja, tehát ha a komponens állapota a gyerek komponens egy tulajdonságává válik.

Mi van akkor ha az adatot a komponens fán keresztül felfelé szeretnénk terjeszteni (propagálni)? Ezt a gyerek eseményeken és a szülő callback-eken keresztül lehet megoldani. A React dokumentációja tartalmaz egy jó példát, ami egy ilyen esetet mutat be.

Az elérhető adat kötő technikák azok közé a funkciók közé tartoznak, amelyek érdekesség teszik az Angular-t. Az Angular alapból támogatja az interpolációt, egyutas, kétutas binding-et és az esemény bindinget.

Az interpoláció a legegyszerűbb módja annak, hogy a komponensünk egy tulajdonságát egy szöveghez kössük, a HTML tag-ekés attribútumok hozzárendelésével.

<p>Welcome back {{currentUser.name}}!</p>

A tulajdonság kötése hasonlít az interpolációhoz abban a tekintetben, hogy a nézet elemeinek a tulajdonságát a komponens tulajdonságaihoz lehet kötni. A tulajdonság kötése kedvez a komponensek közötti kommunikációnak is és megegyezik azzal, hogy a tulajdonságokat hogyan adják lentebbi hierarhiába a React-ben.

<img [src]="userImgUrl">

<user-child [user]="currentUser"></user-child>

Az esemény kötés visszairányú adatfolyamot tesz lehetővé, pl. egy elemtől egy komponenshez. Itt, a click a cél esemény, és a jobb oldalon van az onSave() metódus, ami meghívódik, amikor az esemény bekövetkezik.

<button (click)="onSave()">Save</button>

De a legfontosabb képesség a kétutas kötés az [(ngModel)] használatával. Ez egyesíti a tulajdonság kötését és az esemény kötését egy direktívával és különösen hasznos a formok és input mezők esetén.

Szerver oldali renderelés

A szerver oldali renderelés egy tradicionális renderelési technika. Itt a szerver visszatér a teljes HTML fájlal a kérésre, és a böngészőnek csak meg kell jelenítenie a felhasználó részére. A kliens oldali renderelés másrészről visszatér a csupasz HTML dokumentummal, a stíluslappal és egy JavaScript fájlal.

A JavaScript későbbi kérésekkel rendereli a weboldal többi részét a böngészőben. A React, az Angular és minden más modern JavaScript frontend könyvtár jó példa a kliens oldali renderelésre. Ez egyértelművé válik, ha megnézzük az Angular/React alkalmazásunk forráskódját.

De a kliens oldali renderelésnek az a hátránya, hogy nem működik jól SEO szempontból és nem teljes HTML tartalmat ad vissza amikor megosztjuk az oldal linkjét valamelyik social media oldalon. Az Angularnak van egy megoldása, amit Angular Universal-nak hívnak, ami gondoskodik arról, hogy a keresőmotor és a social media barát tartalmat generáljon. Ez egy könyvtár, amit az Angular csapata készített és a használata egyértelműen javasolt.

Az Universal egy elő renderelő technikát használ, ahol a teljes weboldal a szerverről renderelődik és aztán néhány másodperc után a felhasználó átvált a kliens oldali renderelésre. Amíg ez a motorháztető alatt megtörténik, a felhasználó semmi különöset sem vesz észre.

Ha Redux-al használjuk a React-et, a Redux dokumentációja jó útmutatást nyújt a szerver oldali renderelés felállításához. Úgy is be lehet állítani a React-et hogy a szerverről rendereljen, hogy a BrowserRouter és a StaticRouter komponenseket használjuk, amelyek a react-router könyvtárban érhetőek el. Erről ebben a Medium cikkben lehet többet olvasni. De ha a sebesség és optimalizálás területében jártasak vagyunk, kipróbálhatjuk a next.js-t is, ami az SSR-hez egy könyvtár React-ben.

Összegzés

Összehasonlítani egy kiforrott, funkció gazdag keretrendszert egy robusztus UI könyvtárral talán nem tűnik fairnek. Azonban ezek haladó JavaScript technológiák, amelyeket interaktív single page alkalmazások fejlesztéséhez is lehet használni, és ebből a szempontból ez a cikk segítséget nyújthat abban, hogy választhassunk közülük.

Mi a véleményetek az Angular vs React-ról? Osszátok meg lentebb a kommentekben.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.