Primerjava med Angular in React ter njihovimi osnovnimi jeziki

V tem članku bomo primerjali dve najbolj priljubljeni spletni tehnologiji v letu 2019 in obravnavali tudi njihovo zgodovino, ključne razlike, priporočene osnovne jezike (TypeScript in JavaScript) in tako naprej. Na splošno so te tehnologije razvijalcem olajšale ponovno uporabo, predelavo in vzdrževanje kode, tako da so stvari razdelile na module / komponente.

Cilj tega članka ni najti najboljše tehnologije, temveč primerjati, poudarjati in razjasniti nekaj napačnih predstav. Osredotočili se bomo tudi na tisto, kar je pomembno, namesto na manjše podrobnosti, ki dolgoročno v resnici niso pomembne.

Zavedati se morate, da primerjave med tema dvema tehnologijama ni mogoče v celoti zajeti. Angular ima celoten okvir (MVC), medtem ko je React čelna knjižnica z veliko odprtokodnimi paketi, s katerimi se lahko integrira.

Če želite postati boljši spletni razvijalec, ustanoviti svoje podjetje, poučevati druge ali preprosto izboljšati svoje razvojne sposobnosti, se naročite na moje glasilo in prejemajte najnovejše spletne novice in posodobitve.

Vprašanja, ki jih je treba obravnavati

  • Katere so ključne razlike med Angular in React?
  • Zakaj je TypeScript tako poseben?
  • Kako priljubljene so te tehnologije?
  • Kakšno je trenutno odprtokodno stanje?
  • Katero tehnologijo podjetja največ uporabljajo?
  • Ali statični tipkani jeziki vplivajo na kakovost kode in čas razvoja?

Prihodnji oddelki bodo dodani na podlagi povpraševanja po komentarjih.

Ključne primerjave

Tu je hitra primerjava med seboj Angular (levo) in React (desno).

Ena stvar, ki je pri Reactu resnično odlična glede zmogljivosti, je navidezni DOM, za katerega ste verjetno že nekajkrat slišali. Če ne, ne skrbite, razložil vam bom!

Težava

Recimo, da želite posodobiti datum rojstva uporabnika v bloku oznak HTML.

Navidezni DOM

Posodobi le tisti del, ki ga zahteva, tako da vidi razlike med prejšnjo in trenutno različico HTML. Njegov podoben pristop k delovanju GitHub pri zaznavanju sprememb v datoteki.

Redni DOM

Posodobil bo celotno drevesno strukturo oznak HTML, dokler ne doseže rojstnega datuma.

Zakaj je to pomembno?

Za zgoraj opisano težavo morda ni pomembno. Če pa na isti strani obravnavamo 20–30 asinhronih podatkovnih zahtev (in za vsako zahtevo strani nadomestimo celoten blok HTML), bo to vplivalo na uspešnost in uporabniško izkušnjo.

Potrebujete več konteksta? Oglejte si Daceov članek!

Najprej pa nazaj na začetek ...

Zgodovina

Morali bomo poznati nekaj zgodovine (konteksta), ker ponuja vpogled v to, kako se bodo stvari lahko oblikovale v prihodnosti.

Ne bom se spuščal v podrobnosti, kaj natančno se je zgodilo med Angular in AngularJS, in prepričan sem, da je na voljo veliko virov, ki to pokrivajo. A na kratko, Google je AngularJS zamenjal z Angular, JavaScript pa s TypeScriptom.

V redu, torej v časih z ES4 / ES5 je bila učna krivulja za JavaScript resnično visoka. Če ste prišli iz sveta Jave, C # ali C ++, sveta objektno usmerjenega programiranja (OOP), potem učenje JavaScript preprosto ni bilo tako intuitivno. Z drugimi besedami, to je bila bolečina v zadku.

Ne zato, ker je bil jezik slabo napisan, ampak zato, ker ima drugačen namen. Zgrajen je bil za obdelavo asinhrone narave spleta, kot so interakcija uporabnika, vezava dogodkov, prehodi / animacije itd. Gre za drugačno žival z drugačnimi instinkti.

Priljubljenost

Kot razkrivajo Google Trendi, sta Angular in React dve najbolj priljubljeni spletni tehnologiji v letu 2019.

Angular ima več iskalnih zadetkov kot React, vendar to ne pomeni nujno, da je eden boljši od drugega. Toda to kaže, kaj se ljudem zdi zanimivo, ne glede na razlog. Pomembno je vedeti, da se lahko ljudje mešajo med ključnimi besedami, kot sta AngularJS ali Angular, in s tem vodijo do višjih zadetkov iskanja.

Eno je gotovo - obe tehnologiji rasteta in prihodnost je videti svetla. To pomeni, da vam ni treba skrbeti, če bo katera od tehnologij odpovedala, in vas bo pustil za seboj.

Pomembno je, da ne zanemarjamo zgodovine glede tega, kaj se je zgodilo med AngularJS in Angular, ker je zgodovina oblika indikacije, kaj se lahko zgodi v prihodnosti. Če pa imate nekaj izkušenj z Angular in AngularJS, boste najverjetneje videli, zakaj so bile odločitve sprejete na bolje. Naj omenim, da se takšne stvari lahko zgodijo katerim koli ogrodjem, vključno z Reactom.

Odprtokodno

React ima več kot 100.000 zvezd, skupaj z 1200 sodelavci in skoraj 300 vprašanj, ki čakajo na rešitev.

React ima prednost v času prodaje, saj je bil izdan tri leta pred izdajo Angular. To pomeni, da se je soočil z veliko resničnimi problemi, opravil kritične preizkuse in se na splošno razvil v prilagodljivo in prilagodljivo knjižnico, ki jo mnogi ljubijo.

Ko gre za Angular, na prvi pogled jasno vidimo, da ima Angular 6-krat več težav kot React (ni dobro). Vendar ne smemo pozabiti, da je Angular veliko večji okvir in ima tudi manj razvijalcev, ki ga trenutno uporabljajo, ker je bil izdan leta 2016.

Statistika vzeta s strani Angular and Reacts GitHub.

Kaj uporabljajo podjetja

React je bil prvotno razvit na Facebooku za Facebook, da bi optimiziral in olajšal razvoj komponent. V članku, ki ga je napisal Chris Cordle, je poudarjeno, da ima React na Facebooku večjo uporabo kot Angular pri Googlu.

Kdo torej uporablja katero tehnologijo?

# Reagiraj

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

# Kotna

  • Jejte 24
  • CVS trgovina
  • enogometna žoga
  • Google Express
  • NBA
  • Delta
  • wix.com
Če poznate katero od večjih (znanih) podjetij, ki uporabljajo Angular, prosimo, delite s povezavo.

TypeScript in JavaScript (ES6 +)

Kot sem že omenil, je lahko zavajajoče primerjati le Angular in React, ne da bi se osredotočili na jedrni jezik, ki ga ima vsak posebej (v skladu z njihovimi dokumenti).

Opomba! Cilj tega odseka ni odločiti se, ali bomo izbrali Angular ali React. Razjasnite pa nekaj napačnih predstav med statično in dinamično natipkanimi jeziki, ki se že nekaj časa dogajajo ob podpori raziskav.

Glede uporabniške baze je JavaScript boljši. Toda TypeScript se hitro povečuje, zato kdo ve, kaj bo prineslo 10–15 let.

Popularnost TypeScript v zadnjih 5 letih

Priljubljenost JavaScript v zadnjih 5 letih

JavaScript in TypeScript priljubljenost v zadnjih 5 letih

TypeScript je prvotno razvil Microsoft, da olajša JavaScript (z drugimi besedami, da olajša ES5). Izdan je bil oktobra 2012. In to je preprosto prevajalnik, ki prevede TypeScript v kodo JavaScript, kar pomeni tudi, da lahko kodo ES5 napišete v datoteko TypeScript. TypeScript se imenuje nadnabor JavaScript.

Na splošno TypeScript zagotavlja nemoten prehod za programerje z ozadjem objektno usmerjenega programiranja (OOP). Pomembno je omeniti, da je bil TypeScript izdan v obdobju ES5 in v tem času ES5 ni bil jezik OOP, ki temelji na razredu.

Skratka, najbližje razredom in predmetom, ki ste jih takrat lahko imeli, je bilo dedovanje prototipov. In kot vemo, je bil to težaven prehod za večino razvijalcev z OOP ozadjem. Idealna odločitev je bila seveda izbira nečesa, kar se vam zdi udobno in vam je znano, kar je bil verjetno TypeScript.

Vendar se je v zadnjih letih JavaScript razvil in izvedel veliko velikih sprememb, kot so moduli, razredi, operatorji širjenja, funkcije puščic, literal predloge itd. Na splošno razvijalcem omogoča pisanje deklarativne kode, hkrati pa podpira značilnosti pravega jezika OOP (to je, vključno s strukturo, ki temelji na razredu).

Statično in dinamično natipkani jeziki

Statično natipkan jezik v bistvu pomeni, da lahko določite vrsto spremenljivke (niz, število ali matrika itd.). Lahko se vprašate, zakaj je to pomembno. Tukaj imam resnično analogijo, ki sem jo nastavil (kreativnost v najboljšem primeru).

Recimo, da želite avtomobil napolniti z bencinom. Pomembno je, da gorivo polnite s pravim plinom - bencinom ali dizelskim gorivom. In če ne veste, boste morda morali kupiti nov avto.

Seveda resnost ni takšna kot pri kodiranju, v nekaterih primerih pa je lahko. Premisli. Če delate z veliko aplikacijo, bi radi vedeli, kakšen argument in vrsto lastnosti ste podali, sicer lahko kodo zlomite.

Torej, če ste še vedno zmedeni, kaj pomeni statično natipkan, preverite to:

Statično tipkana lastnost

Statični tipkan argument

Naučil sem se, da veliko ljudi verjame, da statično tipkan jezik pomeni zanesljivo kodo in se najpogosteje uporablja kot zmagovalni argument pred dinamično tipkanimi jeziki. In odkrito povedano, težko je ovreči to izjavo, ker se v osnovi opira na razvojno okolje, izkušnje programerjev in seveda projektne zahteve.

Na srečo so raziskave (tl; dr video) to vzele resno in ta mit preizkusile z 49 preiskovanci.

Pripombe iz raziskave so:

  • Statično tipkan jezik zahteva več časa zaradi odpravljanja napak pri tipkanju
  • Dinamično natipkan jezik je berljiv in lažji za pisanje (deklarativna koda)

Slika 5 kaže, da razvijalci pri pisanju dinamično natipkanega jezika v povprečju skrajšajo čas razvoja za faktor dva.

Če se želite poglobiti v to temo, predlagam, da preberete članek Erica Elliotta, v katerem piše, da TypeScript (ali statično natipkani jeziki) morda ne boste potrebovali.

Kaj izbrati

Vprašanje torej ni samo v tem, kaj ponuja Angular ali React, ampak tudi v tem, v kateri temeljni jezik bi morali vložiti čas. In pravzaprav ni pomembno, dokler izberete nekaj, kar ustreza vašim zahtevam in zahtevnosti.

Če niste ljubitelj tipov, vam ni treba ničesar zapisati v kodo ES6 v TypeScript. Samo, če ga potrebujete, potem je tam.

Ampak, če z Angular-om sestavite dokaj veliko front-end aplikacijo, ki se ukvarja s številnimi zahtevami HTTP, potem imate tipe resnično v pomoč pri vprašanjih, kot je »Kakšen tip predmeta je to, katera polja lahko uporabim in kakšno vrsto je to polje itd.« . Odlično deluje za sodelovanje in razjasnitev majhnih stvari.

Tu je preprosta primerjava predmetov razredov med TS in JS (ES6).

IMO

Statično natipkan je strukturiran, varen, berljiv in enostaven za sodelovanje z drugimi (preprečuje, da bi ljudje prenašali nepričakovane vrednote). Vendar pa imam pri delu z dinamično natipkanimi prilagodljivostmi in kreativnostjo, da se bolj osredotočam na ustvarjanje kot pa na razmišljanje o vrstah, vmesnikih in generičnih izdelkih itd.

In od preteklih spletnih aplikacij, ki sem jih zgradil, v resnici nisem imel večjih težav s tem, da nisem vnašal statičnih podatkov. To ne pomeni, da mi ni všeč - samo, da ga ne rabim, morda pa ga imam v prihodnosti.

Tu je posodobitev - trenutno sodelujem z nekaj Microsoftovimi razvijalci, da bi ustvaril aplikacijo z uporabo okvira Angular. Razlog, da smo izbrali Angular, je, da je večina paketov že definiranih in je dokumentacija za vse na enem mestu. Poudarja tudi TypeScript, ki je odlična izbira, ker ima večina programov že veliko izkušenj s objektno usmerjenim programiranjem.

Po drugi strani pa sem videl podobne aplikacije, s katerimi delamo, zgrajene z Reactom. Tako sta na splošno močno orodje in se večinoma zanašata na to, kako nastavite arhitekturo.

Opombe za s seboj

  • TypeScript je preprosto transpiler, uporablja se lahko z Reactom ali katerim koli drugim ogrodjem JS
  • React učinkovito upravlja s pomnilnikom (virtualni DOM)
  • React uporablja JavaScript (ES6), priznani spletni jezik od leta 1995
  • Angular uporablja TypeScript, izdan leta 2012
  • Statično tipkan jezik je odličen, ni pa nujen
  • Dinamično natipkani jeziki zahtevajo manj časa za pisanje in večjo prilagodljivost za uporabo ustvarjalnosti
  • Učenje statično tipkanega jezika je lahko izziv, še posebej, če ste delali samo z dinamično tipkanimi jeziki
  • ES6 je uvedel veliko odličnih funkcij, kot so moduli, razredi, operator širjenja, funkcije puščic, literal predloge, ki vam omogoča, da napišete manj, čistejšo in bolj strukturirano kodo (skladenjski sladkor)
  • TS je preprosto ES6 + z vrstami in še veliko več

Zaključek

Izbrana knjižnica / komponenta lahko vpliva na to, koliko časa porabite za programiranje in na vaš proračun. Če imate ekipo z razvijalci za C #, Java ali C ++, potem bi verjetno izbral Angular, saj ima TypeScript veliko podobnosti s temi jeziki.

Najboljše priporočilo, ki ga lahko ponudim, je, da nastavite osnovno aplikacijo tako v Angular kot v React, nato pa pred odločitvijo ocenite jezik in potek dela.

Kot smo že omenili, imata obe tehnologiji nabor prednosti in podobnosti, ki se v resnici odvisno od vrste zahtev, ki jih ponuja aplikacija, zahtevnosti in stopnje izkušenj razvijalcev.

Tu je nekaj člankov, ki sem jih napisal o spletnem ekosistemu, skupaj z osebnimi nasveti in triki za programiranje.

  • Kaotični um vodi v kaotično kodo
  • Razvijalci, ki se nenehno želijo naučiti novih stvari
  • Praktični vodnik po modulih ES6
  • Spoznajte te ključne spletne koncepte
  • Izboljšajte svoje znanje s temi pomembnimi metodami JavaScript
  • Hitreje programirajte z ustvarjanjem ukazov bash po meri

Najdete me v Mediju, kjer tedensko objavljam. Lahko pa me spremljate na Twitterju, kjer skupaj z osebnimi zgodbami objavim ustrezne nasvete in trike za spletni razvoj.

PS Če ste uživali v tem članku in želite še več, prosim ploskajte ❤ in delite s prijatelji, ki jih morda potrebujejo, to je dobra karma.