Összehasonlítás az Angular és a React és az alapnyelvek között

Ebben a cikkben összehasonlítjuk két legnépszerűbb webtechnológiát 2019-ben, és kitérünk azok történetére, a legfontosabb különbségekre, az ajánlott alapnyelvekre (TypeScript és JavaScript) stb. Összességében ezek a technológiák sokkal könnyebbé tették a fejlesztők számára a kód újrafelhasználását, átalakítását és karbantartását azáltal, hogy a dolgokat modulokra / komponensekre osztották.

A cikk célja nem a legjobb technológia megtalálása, hanem néhány tévhit összehasonlítása, kiemelése és tisztázása. Arra is összpontosítunk, hogy mi fontos a kisebb részletek helyett, amelyek hosszú távon nem igazán számítanak.

Tudnia kell, hogy a két technológia összehasonlítását nem lehet teljes mértékben lefedni. Az Angular egy teljes keretrendszerrel (MVC) érkezik, míg a React egy elülső könyvtár, sok nyílt forráskódú csomaggal, amelyekbe integrálható.

Ha jobb webfejlesztővé akar válni, kezdje el saját vállalkozását, tanítson másokat, vagy egyszerűen fejlessze fejlesztési készségeit, iratkozzon fel a hírlevelemre, hogy megkapja a legfrissebb webes híreket és frissítéseket.

Megoldandó kérdések

  • Melyek a legfontosabb különbségek az Angular és a React között?
  • Mitől olyan különleges a TypeScript?
  • Mennyire népszerűek ezek a technológiák?
  • Mi a jelenlegi nyílt forráskódú állapot?
  • Melyik technológiát használják a vállalatok a legtöbbet?
  • A statikus gépelt nyelvek befolyásolják-e a kód minőségét és a fejlesztési időt?

A jövőbeni szakaszok a megjegyzések igénye alapján kerülnek hozzáadásra.

Főbb összehasonlítások

Itt van egy gyors összehasonlítás az Angular (bal) és a React (jobb) között.

Ami a teljesítmény szempontjából igazán nagyszerű a React-ben, az a Virtual DOM, amelyről valószínűleg már hallottál párszor. Ha nem, ne aggódjon, elmagyarázom!

Probléma

Tegyük fel, hogy a felhasználó születési dátumát egy HTML-címkék blokkján belül szeretné frissíteni.

Virtuális DOM

Csak azt a részt frissíti, amelyre szükség van az előző és a jelenlegi HTML verzió közötti különbségek meglátásával. Hasonló megközelítés a GitHub működéséhez a fájl változásainak észlelésekor.

Rendszeres DOM

Frissíti a HTML-címkék teljes fa struktúráját, amíg el nem éri a születési dátumot.

Miért számít?

Lehet, hogy nem számít a fent leírt probléma szempontjából. Ha azonban ugyanazon az oldalon 20–30 aszinkron adatigénylést kezelünk (és minden oldaligénynél lecseréljük a teljes HTML blokkot), akkor ez a teljesítményt és a felhasználói élményt is befolyásolja.

Több kontextusra van szüksége? Nézze meg Dace cikkét!

De először is, vissza a kezdetekhez ...

Történelem

Tudnunk kell egy kis történelmet (kontextust), mert betekintést nyújt abba, hogy a dolgok hogyan alakulhatnak a jövőben.

Nem részletezem, hogy mi is történt pontosan az Angular és az AngularJS között, és biztos vagyok benne, hogy rengeteg forrás áll rendelkezésre, amelyek ezt lefedik. Röviden: a Google az AngularJS-t Angularra, a JavaScriptet pedig TypeScript-re cserélte.

Rendben, így az ES4 / ES5 használatával a JavaScript tanulási görbéje nagyon magas volt. Ha a Java, a C # vagy a C ++, az objektum-orientált programozás (OOP) világából érkeztél, akkor a JavaScript megtanulása egyszerűen nem volt ilyen intuitív. Más szóval, fájdalom volt a szamárban.

Nem azért, mert a nyelv rosszul volt írva, hanem azért, mert más célja van. A web aszinkron jellegének kezelésére épült, mint például a felhasználói interakció, az események kötése, az átmenetek / animációk stb. Ez egy másik állat, más ösztönökkel.

Népszerűség

Amint a Google Trends felfedi, az Angular és a React a két legnépszerűbb webes technológia 2019-ben.

Az Angular több keresési találattal rendelkezik, mint a React, de ez nem feltétlenül jelenti azt, hogy az egyik jobb, mint a másik. De ez jelzi, hogy az emberek mit találnak érdekesnek, bármi is legyen az oka. Fontos tisztában lenni azzal, hogy az emberek keverhetnek olyan kulcsszavakat, mint az AngularJS vagy az Angular, és így magasabb keresési találatokat eredményezhetnek.

Egy biztos - mindkét technológia növekszik, és a jövő fényesnek tűnik. Ez azt jelenti, hogy nem kell aggódnia, ha egy technológia meghiúsul, és hátrahagy.

Fontos, hogy ne hanyagoljuk el a történelmet az AngularJS és az Angular között történtek szempontjából, mert a történelem egyfajta jelzés arra, hogy mi történhet a jövőben. De ha van némi tapasztalata az Angular és az AngularJS-ről, akkor valószínűleg meglátja, miért döntöttek jobbra. Csak hogy megemlítsem, ilyen dolgok bármelyik keretrendszerrel megtörténhetnek, beleértve a React-et is.

Nyílt forráskód

A React több mint 100 000 csillaggal rendelkezik, 1200 közreműködővel és közel 300 megoldásra váró kérdéssel.

A React a piacra kerülési idővel rendelkezik, mivel 3 évvel az Angular előtt jelent meg. Ez azt jelenti, hogy rengeteg valós problémával szembesült, kritikus teszteken ment keresztül, és összességében alkalmazkodó és rugalmas front-könyvtárgá fejlődött, amelyet sokan szeretnek.

Ami az Angulart illeti, első pillantásra egyértelműen láthatjuk, hogy az Angularnak hatszor több kérdése van, mint a Reactnek (nem jó). Nem szabad megfeledkeznünk arról sem, hogy az Angular egy sokkal nagyobb keretrendszer, és kevesebb fejlesztő is használja (jelenleg), mert 2016-ban jelent meg.

Az Angular and Reacts GitHub oldalról vett statisztikák.

Mit használnak a vállalatok

A React-et eredetileg a Facebookon fejlesztették ki a Facebook számára, hogy optimalizálják és megkönnyítsék az alkatrészek fejlesztését. Egy Chris Cordle által írt cikk rámutat arra, hogy a React a Facebook-nál nagyobb mértékben használja, mint az Angular a Google-nál.

Tehát ki melyik technológiát használja?

# Reagál

  • Facebook
  • AirBnb
  • Uber
  • Netflix
  • Instagram
  • Whatsapp
  • Dropbox

# Szögletes

  • Egyél24
  • CVS bolt
  • lábgolyó
  • Google Express
  • NBA
  • Delta
  • wix.com
Ha tud valamilyen nagy (jól ismert) vállalatról, amely Angular-t használ, kérjük, ossza meg egy linkkel.

TypeScript és JavaScript (ES6 +)

Mint említettem, félrevezető lehet csak az Angular és a React összehasonlítása anélkül, hogy az egyes általuk hangsúlyozott alapnyelvre összpontosítanánk (a dokumentumok szerint).

Jegyzet! Ennek a szakasznak nem célja eldönteni, hogy az Angular vagy a React lehetőséget választjuk-e. De tisztázzon néhány tévhitet a statikus és a dinamikusan tipizált nyelvek között, amely egy ideje folyt, kutatással alátámasztva.

A felhasználói bázist tekintve a JavaScript kiváló. De a TypeScript gyorsan növekszik, így ki tudja, mit hoz 10–15 év.

A TypeScript népszerűsége az elmúlt 5 évben

A JavaScript népszerűsége az elmúlt 5 évben

A JavaScript vs TypeScript népszerűsége az elmúlt 5 évben

A TypeScript-et eredetileg a Microsoft fejlesztette ki a JavaScript megkönnyítésére (más szóval, az ES5 megkönnyítésére). 2012 októberében jelent meg. És ez egyszerűen egy transzpiler, amely a TypeScript-et fordítja JavaScript-kódba, ami azt is jelenti, hogy ES5-kódot írhat egy TypeScript fájlba. A TypeScript-t a JavaScript szuperkészletének nevezik.

A TypeScript általában zökkenőmentes átmenetet biztosít az objektum-orientált programozási (OOP) háttérrel rendelkező programozók számára. Fontos megjegyezni, hogy a TypeScript az ES5 időszakában jelent meg, és ez idő alatt az ES5 nem volt osztályalapú OOP nyelv.

Röviden, akkor a legközelebb az osztályokhoz és tárgyakhoz juthatott a prototípus öröklődése. És mint tudjuk, ez a legtöbb OOP háttérrel rendelkező fejlesztő számára nehéz átmenet volt. Tehát az ideális döntés természetesen valami olyasmit választott, amelyet jól érzett és jól ismert, ami valószínűleg a TypeScript volt.

Az elmúlt években azonban a JavaScript sok nagy változást fejlesztett és hajtott végre, például modulokat, osztályokat, spread operátorokat, nyílfüggvényeket, sablon literálokat és így tovább. Összességében lehetővé teszi a fejlesztők számára, hogy deklaratív kódot írjanak, miközben támogatják a valódi OOP nyelv jellemzőit (vagyis az osztályalapú struktúrát is).

Statikusan és dinamikusan beírt nyelvek

A statikusan beírt nyelv alapvetően azt jelenti, hogy meghatározhatja a változó típusát (karakterlánc, szám, tömb stb.). Megkérdezheti, miért fontos ez. Itt van egy valóságos analógia, amelyet beállítottam (a kreativitás a legjobb).

Tegyük fel, hogy benzinnel akarja tankolni autóját. Egy dolog fontos, hogy a megfelelő gázzal - benzin vagy dízel - üzemanyagot használjunk. És ha nem tudja, akkor lehet, hogy új autót kell vásárolnia.

Természetesen a súlyosság nem olyan, mint a kódolásnál, azonban bizonyos esetekben lehet. Gondolkodj el rajta. Ha nagy alkalmazással dolgozik, akkor szeretné tudni az átadott argumentumot és tulajdonságtípust, különben megtöri a kódot.

Rendben, szóval, ha még mindig zavarodott, mit jelent a statikus gépelés, nézze meg ezt:

Statikus gépelt tulajdonság

Statikus tipizált argumentum

Megtudtam, hogy sokan úgy gondolják, hogy a statikusan begépelt nyelv megbízható kódot jelent, és leggyakrabban a dinamikusan gépelt nyelvek felett nyerő érvként használják. Őszintén szólva meglehetősen nehéz megcáfolni ezt az állítást, mert alapvetően a fejlesztői környezetre, a programozók tapasztalataira és természetesen a projekt követelményeire támaszkodik.

Szerencsére a kutatás (tl; dr videó) ezt komolyan vette, és 49 mínuszral próbára tette ezt a mítoszt.

A kutatás megfigyelései a következők:

  • A statikusan beírt nyelv több időt igényel a gépelési hibák kijavítása miatt
  • A dinamikusan beírt nyelv olvasható és könnyebben írható (deklaratív kód)

Az 5. ábra azt mutatja, hogy a fejlesztők átlagosan kettővel csökkentik fejlesztési idejüket egy dinamikusan beírt nyelv írásakor.

Ha mélyebbre akarsz merülni ebben a témában, javaslom elolvasni Eric Elliott ezt a cikkét, amely kimondja, hogy nem biztos, hogy szüksége van TypeScript-re (vagy statikusan beírt nyelvekre).

Mit válasszon

Tehát a kérdés nemcsak arról szól, hogy mit kínál az Angular vagy a React, hanem az is, hogy milyen alapnyelvre kell fektetnie az időt. És nem igazán számít, amíg olyasmit választ, amely megfelel az Ön igényeinek és összetettségének.

Ha nem rajong a típusokért, akkor semmi sem akadályozza az ES6 kód beírását a TypeScript-ben. Csak ha szüksége van rá, akkor ott van.

De ha meglehetősen nagy méretű front-end alkalmazást építesz szöggel, amely sok HTTP kérést kezel, akkor a típusok használata valóban segít olyan kérdésekben, mint például: „Milyen típusú objektum ez, milyen mezőket használhatok, és milyen típusú ez a mező stb.” . Remekül működik az együttműködés és az apró dolgok tisztázása érdekében.

Itt van egy egyszerű osztály-objektum összehasonlítás a TS és a JS (ES6) között.

IMO

A statikusan beírt szöveg strukturáltnak, biztonságosnak, olvashatónak és könnyen együttműködőnek érzi magát (megakadályozza az embereket a váratlan értékek átadásában). Dinamikusan gépelve dolgozva azonban van rugalmasságom és kreativitásom arra, hogy inkább a létrehozásra koncentráljak, mintsem hogy sokat gondolkodjak a típusokról, az interfészekről, a generikus gyógyszerekről és így tovább.

És a korábbi webalkalmazásokból, amelyeket építettem, nem igazán voltak olyan nagy problémáim, hogy nem lett volna statikus gépelve. Ez nem azt jelenti, hogy nem szeretem - csak azt, hogy nincs rá szükségem, de talán a jövőben is.

Itt egy frissítés - jelenleg pár Microsoft-fejlesztővel dolgozom együtt egy alkalmazás felépítésében az Angular framework használatával. Azért választottuk az Angulart, mert a legtöbb csomag már meg van határozva, és a dokumentáció mindenre egy helyen található. Hangsúlyozza a TypeScript-et is, amely tökéletes választás, mert a fejlesztők többségének már sok tapasztalata van az objektum-orientált programozással kapcsolatban.

Másrészt láttam hasonló alkalmazásokat, amelyekkel együtt dolgozunk, a React alkalmazással. Tehát általában mindkettő hatékony eszköz, és leginkább az architektúra beállításán alapul.

Elvihető jegyzetek

  • A TypeScript egyszerűen transzpiler, használható a React vagy bármely más JS keretrendszerrel
  • A React hatékonyan kezeli a memóriakezelést (virtuális DOM)
  • A React a JavaScriptet (ES6) használja, amely 1995 óta elismert web-nyelv
  • Az Angular a 2012-ben megjelent TypeScript-t használja
  • A statikusan beírt nyelv nagyszerű, de nem kötelező
  • A dinamikusan beírt nyelvek kevesebb időt igényelnek az íráshoz, és nagyobb rugalmasságot igényelnek a kreativitás használatához
  • A statikusan gépelt nyelv megtanulása kihívást jelenthet, különösen, ha csak dinamikusan beírt nyelvekkel dolgozott
  • Az ES6 számos nagyszerű funkciót valósított meg, például modulokat, osztályokat, spread operátorokat, nyílfüggvényeket, sablon literálokat, amelyek lehetővé teszik kevesebb, tisztább és strukturáltabb kód (írási cukor) írását.
  • A TS egyszerűen ES6 + típusokkal és még sok mással

Következtetés

A választott keretrendszer / komponens-könyvtár befolyásolhatja a programozásra fordított idő és a költségvetés összegét. Ha van csapata C #, Java vagy C ++ fejlesztőkkel, akkor valószínűleg az Angular-t választanám, mivel a TypeScript sok hasonlóságot mutat ezekkel a nyelvekkel.

A legjobb ajánlás az, hogy beállítok egy alapalkalmazást mind Angular, mind React-ben, majd a döntés meghozatala előtt értékeld a nyelvet és a munkafolyamatot.

Mint korábban említettük, mindkét technológiának megvannak a maga előnyei és hasonlóságai, és ez valóban arra utal , hogy az alkalmazás milyen típusú követelményeket kínál, a fejlesztők összetettsége és tapasztalati szintje.

Íme néhány cikk, amelyet a web-ökoszisztémáról írtam, valamint személyes programozási tippek és trükkök.

  • A kaotikus elme kaotikus kódhoz vezet
  • Fejlesztők, akik folyamatosan szeretnének új dolgokat megtanulni
  • Gyakorlati útmutató az ES6 modulokhoz
  • Ismerje meg ezeket az alapvető webkoncepciókat
  • Növelje képességeit ezekkel a fontos JavaScript módszerekkel
  • Gyorsabb programozás egyedi bash parancsok létrehozásával

Megtalál a Mediumon, ahol heti rendszerességgel publikálok. Vagy követhet a Twitteren, ahol releváns webfejlesztési tippeket és trükköket teszek közzé személyes történetekkel együtt.

PS Ha tetszett ez a cikk, és még többet szeretnél, kérlek tapsolj ❤ és oszd meg barátaiddal, akiknek szükségük lehet rá, ez jó karma.