Usporedba između Angular i React i njihovih osnovnih jezika

U ovom ćemo članku usporediti dvije najpopularnije web tehnologije u 2019. godini, a također ćemo se osvrnuti na njihovu povijest, ključne razlike, preporučene osnovne jezike (TypeScript i JavaScript) i tako dalje. Sve u svemu, ove su tehnologije mnogo olakšale programerima ponovnu upotrebu, refaktoriranje i održavanje koda dijeljenjem stvari na module / komponente.

Cilj ovog članka nije pronaći najbolju tehnologiju, već usporediti, istaknuti i razjasniti nekoliko zabluda. Također ćemo se usredotočiti na ono što je važno umjesto na manje detalje koji dugoročno zapravo nisu važni.

Trebali biste biti svjesni da se usporedba između ove dvije tehnologije ne može u potpunosti pokriti. Angular dolazi s kompletnim okvirom (MVC), dok je React fronted-knjižnica s puno open-source paketa s kojima se može integrirati.

Ako želite postati bolji web programer, otvoriti vlastiti posao, podučavati druge ili jednostavno poboljšati svoje razvojne vještine, pretplatite se na moj bilten da biste dobivali najnovije vijesti i novosti na webu.

Pitanja koja treba riješiti

  • Koje su ključne razlike između Angular i React?
  • Po čemu je TypeScript toliko poseban?
  • Koliko su popularne ove tehnologije?
  • Koji je trenutni status otvorenog koda?
  • Koju tehnologiju tvrtke najviše koriste?
  • Utječu li statički tipizirani jezici na kvalitetu koda i vrijeme izrade?

Budući dijelovi bit će dodani na temelju potražnje iz komentara.

Ključne usporedbe

Evo kratke usporedbe između strana Angular (lijevo) i React (desno).

Jedna stvar koja je zaista izvrsna u vezi s Reactom u pogledu izvedbe je Virtualni DOM, za koji ste vjerojatno čuli nekoliko puta. Ako ne, ne brinite, objasnit ću vam!

Problem

Recimo da želite ažurirati datum rođenja korisnika u bloku HTML oznaka.

Virtualni DOM

Ažurira samo onaj dio koji je potreban vidjevši razlike između prethodne i trenutne HTML verzije. Sličan je pristup načinu na koji GitHub djeluje prilikom otkrivanja promjena u datoteci.

Redovni DOM

Ažurirat će cijelu strukturu stabla HTML oznaka dok ne dosegne datum rođenja.

Zašto je to važno?

Možda nije važno za gore opisani problem. Međutim, ako rješavamo 20–30 asinkronih zahtjeva za podacima na istoj stranici (a za svaki zahtjev stranice zamjenjujemo cijeli HTML blok), to će utjecati na izvedbu kao i na korisničko iskustvo.

Trebate više konteksta? Pogledajte Daceov članak!

Ali prvo, povratak na početak ...

Povijest

Morat ćemo znati malo povijesti (konteksta) jer pruža uvid u to kako se stvari mogu oblikovati u budućnosti.

Neću ulaziti u detalje što se točno dogodilo između Angular-a i AngularJS-a, i siguran sam da postoji mnogo dostupnih resursa koji to pokrivaju. No, ukratko, Google je AngularJS zamijenio Angular, a JavaScript TypeScriptom.

Dobro, tako da je u doba ES4 / ES5 krivulja učenja za JavaScript bila jako visoka. Ako ste došli iz svijeta Jave, C # ili C ++, svijeta objektno orijentiranog programiranja (OOP), tada učenje JavaScript-a jednostavno nije bilo toliko intuitivno. Drugim riječima, bila je to bol u dupetu.

To nije zato što je jezik bio loše napisan, već zato što ima drugu svrhu. Izgrađen je za rukovanje asinkronom prirodom weba, poput interakcije korisnika, vezivanja događaja, prijelaza / animacija i tako dalje. To je druga životinja s različitim instinktima.

Popularnost

Kao što otkrivaju Google Trendovi, Angular i React dvije su najpopularnije web tehnologije u 2019.

Angular ima više pogodaka za pretraživanje nego React, no to ne mora nužno značiti da je jedan bolji od drugog. Ali to ukazuje na ono što je ljudima zanimljivo, bez obzira na razlog. Važno je imati na umu da se ljudi mogu miješati između ključnih riječi poput AngularJS ili Angular, što dovodi do većih pogodaka pretraživanja.

Jedno je sigurno - obje tehnologije rastu, a budućnost izgleda sjajno. To znači da se ne morate brinuti hoće li jedna tehnologija zakazati i ostaviti vas iza sebe.

Važno je da ne zanemarujemo povijest u smislu onoga što se dogodilo između AngularJS-a i Angular-a, jer je povijest oblik naznake što se može dogoditi u budućnosti. Ali ako imate neko iskustvo s Angular-om i AngularJS-om, tada ćete najvjerojatnije vidjeti zašto su odluke donesene na bolje. Samo da napomenem, takve se stvari mogu dogoditi bilo kojem okviru, uključujući React.

Otvoreni izvor

React ima više od 100.000 zvijezda, zajedno s 1200 suradnika i blizu 300 problema koji čekaju da budu riješeni.

React ima prednost u vremenu izlaska na tržište jer je objavljen 3 godine prije izdanja Angular. A to znači da se suočio s puno problema iz stvarnog svijeta, prošao kritične testove i sveukupno se razvio u prilagodljivu i fleksibilnu sučelnu knjižnicu koju mnogi vole.

Kad je riječ o Angulu, na prvi pogled možemo jasno vidjeti da Angular ima 6 puta više problema od React-a (nije dobar). Međutim, ne smijemo zaboraviti da je Angular puno veći okvir, a također ima i manje programera koji ga koriste (trenutno) jer je objavljen 2016. godine.

Statistika preuzeta sa stranice Angular and Reacts GitHub.

Ono što tvrtke koriste

React je u početku razvijen na Facebooku za Facebook kako bi optimizirao i olakšao razvoj komponenata. U članku koji je napisao Chris Cordle ističe se da React na Facebooku koristi više nego Angular na Googleu.

Pa tko koristi koju tehnologiju?

# Reagirati

  • Facebook
  • AirBnb
  • Uber
  • Netflix
  • Instagram
  • što ima
  • Dropbox

# Kutna

  • Jedite24
  • CVS trgovina
  • jednonogomet
  • Google Express
  • NBA
  • Delta
  • wix.com
Ako znate bilo koju veliku (poznatu) tvrtku koja koristi Angular, podijelite s vezom.

TypeScript i JavaScript (ES6 +)

Kao što sam spomenuo, može biti zavaravajuće uspoređivati ​​Angular i React bez fokusiranja na osnovni jezik koji svaki od njih naglašava (prema njihovim dokumentima).

Bilješka! Cilj ovog odjeljka nije odlučiti hoćemo li odabrati Angular ili React. Ali razjasnite nekoliko pogrešnih predodžbi između statički i dinamički upisanih jezika koje se već neko vrijeme odvijaju, potkrijepljene istraživanjima.

Što se tiče korisničke baze, JavaScript je superioran. Ali TypeScript se brzo povećava, pa tko zna što će donijeti 10-15 godina.

Popularnost TypeScript-a u posljednjih 5 godina

Popularnost JavaScript-a u posljednjih 5 godina

Popularnost JavaScript-a i TypeScript-a u posljednjih 5 godina

TypeScript je u početku razvio Microsoft kako bi olakšao JavaScript (drugim riječima, kako bi olakšao ES5). Objavljen je u listopadu 2012. I to je jednostavno transpiler koji kompajlira TypeScript u JavaScript kôd, što također znači da ES5 kôd možete pisati u datoteku TypeScript. TypeScript se naziva nadskupom JavaScripta.

Općenito, TypeScript pruža glatki prijelaz programerima s pozadinom objektno orijentiranog programiranja (OOP). Važno je primijetiti da je TypeScript objavljen u razdoblju ES5, a za to vrijeme ES5 nije bio OOP jezik zasnovan na klasama.

Ukratko, najbliže klasama i objektima tada ste mogli biti kroz nasljeđivanje prototipa. I kao što znamo, ovo je bio težak prijelaz za većinu programera s OOP pozadinom. Dakle, idealna je odluka naravno bila odabrati nešto što vam je ugodno i poznato, što je vjerojatno bio TypeScript.

Međutim, posljednjih godina JavaScript je evoluirao i implementirao puno velikih promjena kao što su moduli, klase, operatori širenja, funkcije strelica, literal predložaka i tako dalje. Sveukupno, omogućuje programerima pisanje deklarativnog koda, istovremeno podržavajući karakteristike istinskog OOP jezika (to jest, uključujući strukturu zasnovanu na klasama).

Jezici statički i dinamički upisani

Statički tipkan jezik u osnovi znači da možete definirati tip varijable (niz, broj ili niz itd.). Možete se pitati zašto je to važno. Evo analogije iz stvarnog svijeta koju sam postavio (kreativnost u najboljem slučaju).

Recimo da svoj automobil želite napuniti benzinom. Jedna stvar koja je važna je gorivo s pravim plinom - benzinom ili dizelom. A ako ne znate, možda ćete trebati kupiti novi automobil.

Naravno, ozbiljnost nije takva s kodiranjem, međutim, u nekim slučajevima može biti. Razmisli o tome. Ako radite s velikom aplikacijom, željeli biste znati argument i vrstu svojstva koja se prosljeđuju, inače možete razbiti kôd.

U redu, pa ako ste i dalje zbunjeni što znači statički upisan, pogledajte ovo:

Statično upisano svojstvo

Statički upisani argument

Naučio sam da puno ljudi vjeruje da statički upisan jezik znači pouzdan kôd i da se najčešće koristi kao pobjednički argument nad dinamički upisanim jezicima. I iskreno, prilično je teško opovrgnuti ovu izjavu jer se ona u osnovi oslanja na razvojno okruženje, iskustvo programera i naravno projektne zahtjeve.

Srećom, istraživanje (tl; dr video) ovo je shvatilo ozbiljno i stavilo ovaj mit na test s 49 ispitanika.

Zapažanja iz istraživanja su:

  • Statički tipkan jezik zahtijeva više vremena zbog ispravljanja pogrešaka pri tipkanju
  • Dinamički upisan jezik čitljiv je i lakši za pisanje (deklarativni kod)

Slika 5 pokazuje da programeri u prosjeku smanjuju vrijeme razvoja za faktor dva kada pišu dinamički tipkani jezik.

Ako želite dublje istražiti ovu temu, predlažem da pročitate ovaj članak Erica Elliotta u kojem stoji da vam možda neće trebati TypeScript (ili statički upisani jezici).

Što odabrati

Dakle, pitanje se ne odnosi samo na ono što nudi Angular ili React, već i na to na koji biste osnovni jezik trebali uložiti vrijeme. I zapravo nije važno sve dok odaberete nešto što odgovara vašim zahtjevima i složenosti.

Ako niste ljubitelj tipova, onda vam ništa ne stoji na putu pisanja ES6 koda u TypeScript-u. Samo ako vam zatreba, onda je tu.

Ali ako izradite prilično veliku front-end aplikaciju s Angulom koja se bavi mnogim HTTP zahtjevima, posjedovanje tipova stvarno pomaže u pitanjima poput "Kakva je ovo vrsta objekta, koja polja mogu koristiti i koji je tip ovog polja itd." . Izvrsno funkcionira za suradnju i razjašnjavanje sitnica.

Evo jednostavne usporedbe predmeta klasa između TS i JS (ES6).

IMO

Statički upisani osjeća se strukturirano, sigurno, čitljivo i lako je surađivati ​​s drugima (sprječava ljude da prenose neočekivane vrijednosti). Međutim, kad radim s dinamički upisanim, imam fleksibilnost i kreativnost da se usredotočim više na stvaranje nego da razmišljam puno o vrstama, sučeljima i generičkim podacima i slično.

A od prošlih web-aplikacija koje sam izgradio, nisam imao velikih problema s time što nisam otkucao statički tekst. To ne znači da mi se ne sviđa - samo da mi ne treba, ali možda mi se sviđa u budućnosti.

Evo ažuriranja - trenutno radim s nekoliko Microsoftovih programera na izradi aplikacije koja koristi Angular framework. Razlog zbog kojeg smo odabrali Angular je taj što je većina paketa već definirana, a dokumentacija za sve nalazi se na jednom mjestu. Također naglašava TypeScript, koji je savršen izbor jer većina razvojnih programera već ima puno iskustva s objektno orijentiranim programiranjem.

S druge strane, vidio sam slične aplikacije s kojima radimo izgrađene s Reactom. Dakle, općenito, oba su moćni alati i uglavnom se oslanjaju na to kako postavljate arhitekturu.

Bilješke za poneti

  • TypeScript je jednostavno transpiler, može se koristiti s Reactom ili bilo kojim drugim JS okvirima
  • React učinkovito upravlja upravljanjem memorijom (virtualni DOM)
  • React koristi JavaScript (ES6), priznati web jezik od 1995
  • Angular koristi TypeScript, objavljen 2012. godine
  • Statički upisan jezik je sjajan, ali nije nužan
  • Dinamički upisani jezici zahtijevaju manje vremena za pisanje i veću fleksibilnost za korištenje kreativnosti
  • Učenje statički upisanog jezika može biti izazov, pogotovo ako ste radili samo s dinamički upisanim jezicima
  • ES6 je implementirao mnoštvo sjajnih značajki kao što su moduli, klase, operator širenja, funkcije strelice, literal predložaka koji vam omogućuje da napišete manje, čišći i strukturiraniji kod (sintaktički šećer)
  • TS je jednostavno ES6 + s vrstama i mnogo više

Zaključak

Odabrani okvir / biblioteka komponenata može utjecati na to koliko vremena trošite na programiranje i na vaš proračun. Ako imate tim s programerima za C #, Java ili C ++, tada bih se vjerojatno odlučio za Angular, jer TypeScript dijeli mnoge sličnosti s tim jezicima.

Najbolja preporuka koju mogu ponuditi je postaviti osnovnu aplikaciju u Angular i React, a zatim procijeniti jezik i tijek rada prije nego što donesete odluku.

Kao što je prethodno spomenuto, obje tehnologije imaju svoj niz prednosti i sličnosti, a doista se svodi na vrstu zahtjeva koju aplikacija nudi, složenost i razinu iskustva koje programeri imaju.

Evo nekoliko članaka koje sam napisao o web-ekosustavu, zajedno s osobnim programskim savjetima i trikovima.

  • Kaotičan um vodi do kaotičnog koda
  • Programeri koji neprestano žele učiti nove stvari
  • Praktični vodič za ES6 module
  • Naučite ove temeljne web koncepte
  • Poboljšajte svoje vještine ovim važnim JavaScript metodama
  • Programirajte brže stvaranjem prilagođenih bash naredbi

Možete me pronaći u Medijumu gdje objavljujem tjedno. Ili me možete pratiti na Twitteru, gdje objavljujem relevantne savjete i trikove za web razvoj, zajedno s osobnim pričama.

PS Ako ste uživali u ovom članku i želite još, pljeskajte ❤ i podijelite s prijateljima kojima će možda trebati, dobra je karma.