En sammenligning mellem Angular og React og deres kernesprog

I denne artikel vil vi sammenligne to af de mest populære webteknologier i 2019 og også behandle deres historie, nøgleforskelle, kernesprog, der anbefales (TypeScript og JavaScript) og så videre. Samlet set har disse teknologier gjort det meget nemmere for udviklere at genbruge, omlægge og vedligeholde kode ved at opdele ting i moduler / komponenter.

Målet med denne artikel er ikke at finde den bedste teknologi, men at sammenligne, fremhæve og afklare få misforståelser. Vi vil også fokusere på, hvad der er vigtigt i stedet for mindre detaljer, der ikke rigtig betyder noget på lang sigt.

Du skal være opmærksom på, at sammenligningen mellem disse to teknologier ikke kan dækkes fuldt ud. Angular leveres med en komplet ramme (MVC), mens React er et fronted-bibliotek med masser af open source-pakker at integrere med.

Hvis du vil blive en bedre webudvikler, starte din egen virksomhed, lære andre eller blot forbedre dine udviklingsevner, kan du abonnere på mit nyhedsbrev for at få de seneste webnyheder og opdateringer.

Spørgsmål, der skal behandles

  • Hvad er de vigtigste forskelle mellem vinkel og reagerer?
  • Hvad gør TypeScript så specielt?
  • Hvor populære er disse teknologier?
  • Hvad er den aktuelle open source-status?
  • Hvilken teknologi bruger virksomheder mest?
  • Påvirker statiske typede sprog kodekvalitet og udviklingstid?

Fremtidige sektioner vil blive tilføjet baseret på efterspørgsel fra kommentarerne.

Nøglesammenligninger

Her er en hurtig side-til-side sammenligning mellem Vinkel (venstre) og Reager (højre).

En ting, der er rigtig god ved React med hensyn til ydeevne, er Virtual DOM, som du sikkert har hørt om et par gange. Hvis ikke, skal du ikke bekymre dig, jeg forklarer det!

Problem

Lad os sige, at du vil opdatere en brugers fødselsdato inden for en blok med HTML-tags.

Virtuel DOM

Det opdaterer kun den del, der kræves ved at se forskellene mellem den forrige og aktuelle HTML-version. Det er en lignende tilgang til, hvordan GitHub fungerer, når detektering af ændringer i filen.

Regelmæssig DOM

Det opdaterer hele træstrukturen for HTML-tags, indtil den når fødselsdatoen.

Hvorfor betyder det noget?

Det betyder muligvis ikke noget for det ovenfor beskrevne problem. Men hvis vi behandler 20-30 asynkrone dataanmodninger på den samme side (og for hver sideanmodning erstatter vi hele HTML-blokken), vil det påvirke ydeevnen såvel som brugeroplevelsen.

Brug for mere kontekst? Tjek Daces artikel!

Men først tilbage til begyndelsen ...

Historie

Vi bliver nødt til at kende lidt historie (kontekst), fordi det giver indsigt i, hvordan ting kan forme sig i fremtiden.

Jeg vil ikke gå i detaljer om, hvad der præcist skete mellem Angular og AngularJS, og jeg er sikker på, at der er mange ressourcer til rådighed, der dækker det. Men kort sagt, Google erstattede AngularJS med Angular og JavaScript med TypeScript.

Okay, så tilbage i dagene med ES4 / ES5 var læringskurven for JavaScript virkelig høj. Hvis du kom fra Java, C # eller C ++, en verden af ​​objektorienteret programmering (OOP), var læring af JavaScript simpelthen ikke så intuitiv. Med andre ord var det en smerte i røvet.

Det er ikke fordi sproget var dårligt skrevet, men fordi det har et andet formål. Det blev bygget til at håndtere den asynkrone natur på internettet, såsom brugerinteraktion, begivenhedsbinding, overgange / animationer osv. Det er et andet dyr med forskellige instinkter.

Popularitet

Som Google Trends afslører, er Angular og React to af de mest populære webteknologier i 2019.

Angular har flere søgehits end React, men det betyder ikke nødvendigvis, at den ene er bedre end den anden. Men dette indikerer, hvad folk finder interessante, uanset årsagen. Det er vigtigt at være opmærksom på, at folk kan blande mellem nøgleord som AngularJS eller Angular, og dermed føre til højere søgehits.

Én ting er helt sikkert - begge teknologier vokser, og fremtiden ser lys ud. Det betyder, at du ikke behøver at bekymre dig, hvis en teknologi fejler og efterlader dig.

Det er vigtigt, at vi ikke forsømmer historien med hensyn til, hvad der skete mellem AngularJS og Angular, fordi historien er en form for indikation på, hvad der kan ske i fremtiden. Men hvis du har nogle erfaringer med Angular og AngularJS, så vil du højst sandsynligt se, hvorfor beslutningerne blev taget til det bedre. Bare for at nævne, sådanne ting kan ske med alle rammer derude, inklusive React.

Open source

React har over 100.000 stjerner sammen med 1200 bidragydere og tæt på 300 udgaver, der venter på at blive løst.

React har en time-to-market fordel, da den blev frigivet 3 år før Angular. Og det betyder, at det har stået over for mange problemer i den virkelige verden, har gennemgået kritiske tests og generelt har udviklet sig til et fleksibelt frontbibliotek, som mange elsker.

Når det kommer til Angular, ved første øjekast kan vi tydeligt se, at Angular har 6 gange flere problemer end React (ikke godt). Vi må dog ikke glemme, at Angular er en meget større ramme og også har færre udviklere, der bruger den (i øjeblikket), fordi den blev frigivet i 2016.

Statistikker taget fra Angular og Reagerer GitHub-siden.

Hvad virksomheder bruger

React blev oprindeligt udviklet på Facebook til Facebook for at optimere og lette udviklingen af ​​komponenter. En artikel skrevet af Chris Cordle påpeger, at React har en højere anvendelse på Facebook end Angular har hos Google.

Så hvem bruger hvilken teknologi?

# Reager

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

# Vinklet

  • Spis24
  • CVS butik
  • en fodbold
  • Google Express
  • NBA
  • Delta
  • wix.com
Hvis du kender til store (kendte) virksomheder, der bruger Angular, bedes du dele med et link.

TypeScript og JavaScript (ES6 +)

Som jeg nævnte, kan det være vildledende kun at sammenligne Angular og React uden at fokusere på det grundlæggende sprog, som hver enkelt har lagt vægt på (ifølge deres dokumenter).

Bemærk! Målet i dette afsnit er ikke at afgøre, om vi vælger Vinkel eller Reager. Men præciser få misforståelser mellem statisk- og dynamisk-typede sprog, der har foregået i et stykke tid, bakket op med forskning.

Med hensyn til brugerbase er JavaScript overlegen. Men TypeScript stiger hurtigt, så hvem ved hvad 10-15 år bringer.

TypeScript popularitet i de sidste 5 år

JavaScript-popularitet i de sidste 5 år

JavaScript versus TypeScript popularitet i de sidste 5 år

TypeScript blev oprindeligt udviklet af Microsoft for at gøre JavaScript lettere (med andre ord for at gøre ES5 lettere). Den blev udgivet i oktober 2012. Og det er simpelthen en transpiller, der kompilerer TypeScript til JavaScript-kode, hvilket også betyder, at du kan skrive ES5-kode i en TypeScript-fil. TypeScript kaldes et supersæt af JavaScript.

Generelt giver TypeScript en jævn overgang til programmører med en objektorienteret programmerings (OOP) baggrund. Det er vigtigt at bemærke, at TypeScript blev frigivet i ES5-perioden, og i løbet af denne tid var ES5 ikke et klassebaseret OOP-sprog.

Kort sagt, det tætteste du kunne komme til klasser og objekter dengang var gennem arv af prototype. Og som vi ved, var dette en vanskelig overgang for de fleste udviklere med en OOP-baggrund. Så den ideelle beslutning var selvfølgelig at vælge noget, du følte dig komfortabel og fortrolig med, hvilket sandsynligvis var TypeScript.

I de sidste år har JavaScript imidlertid udviklet sig og implementeret masser af store ændringer såsom moduler, klasser, spredningsoperatorer, pilefunktioner, skabelonbogstaver osv. Samlet set giver det udviklere mulighed for at skrive deklarativ kode, mens de understøtter egenskaberne ved et ægte OOP-sprog (dvs. klassebaseret struktur).

Statisk og dynamisk typede sprog

Et statisk skrevet sprog betyder grundlæggende, at du kan definere variabeltypen (streng, nummer eller array osv.). Du kan spørge, hvorfor det er vigtigt. Her er en ægte verdens analogi, jeg har opsat (kreativitet bedst).

Lad os sige, at du vil tanke din bil med gas. En ting, der er vigtigt, er at brænde med den rigtige gas - benzin eller diesel. Og hvis du ikke ved det, skal du muligvis købe en ny bil.

Selvfølgelig er sværhedsgraden ikke sådan med kodning, men i nogle tilfælde kan det være. Tænk over det. Hvis du arbejder med en stor applikation, vil du gerne vide det argument og egenskabstype, der sendes, ellers kan du bryde koden.

Okay, så hvis du stadig er forvirret, hvad statisk skrevet betyder, skal du tjekke dette:

Statisk skrevet egenskab

Statisk skrevet argument

Jeg har lært, at mange mennesker tror, ​​at et statisk skrevet sprog betyder pålidelig kode og ofte bruges som et vindende argument over dynamisk typede sprog. Og ærligt talt er det ret vanskeligt at modbevise denne erklæring, fordi den grundlæggende er afhængig af udviklingsmiljøet, programmørerne oplever og selvfølgelig projektkravene.

Heldigvis har forskning (tl; dr video) taget dette alvorligt og sat denne myte på prøve med 49 forsøgspersoner.

Observationerne fra forskningen er:

  • Statisk skrevet sprog kræver mere tid på grund af rettelse af typefejl
  • Dynamisk skrevet sprog er læsbart og lettere at skrive (erklærende kode)

Figur 5 viser, at udviklere i gennemsnit reducerer deres udviklingstid med en faktor to, når de skriver et dynamisk skrevet sprog.

Hvis du vil grave dybere ned i dette emne, foreslår jeg at læse denne artikel af Eric Elliott, der siger, at du muligvis ikke har brug for TypeScript (eller statisk typede sprog).

Hvad man skal vælge

Så spørgsmålet handler ikke kun om, hvad Angular eller React tilbyder, men også om, hvilket kernesprog du skal bruge tid på. Og det betyder ikke rigtig, så længe du vælger noget, der passer til dine krav og kompleksitet.

Hvis du ikke er fan af typer, er der intet i vejen for at skrive ES6-kode i TypeScript. Det er bare, at hvis du har brug for det, så er det der.

Men hvis du bygger en temmelig stor front-end-applikation med Angular, der beskæftiger sig med mange HTTP-anmodninger, hjælper det virkelig at have typer med spørgsmål som "Hvilken type objekt er dette, hvilke felter kan jeg bruge, og hvilken type er dette felt osv." . Det fungerer godt til samarbejde og afklaring af små ting.

Her er en simpel sammenligning af klasse-objekter mellem TS og JS (ES6).

IMO

Statisk skrevet føles struktureret, sikker, læselig og let at samarbejde med andre (forhindrer folk i at overføre uventede værdier). Men når jeg arbejder med dynamisk skrevet, har jeg fleksibiliteten og kreativiteten til at fokusere mere på at skabe end at tænke meget om typer, grænseflader og generics osv.

Og fra de tidligere webapps, jeg har bygget, har jeg ikke rigtig haft store problemer med ikke at have statisk indtastning. Det betyder ikke, at jeg ikke kan lide det - jeg bare, at jeg ikke har brug for det, men måske gør jeg det i fremtiden.

Her er en opdatering - i øjeblikket arbejder jeg med et par Microsoft-udviklere for at opbygge en applikation ved hjælp af Angular framework. Årsagen til, at vi har valgt Angular, er, at de fleste af pakkerne allerede er defineret, og dokumentationen for alt er ét sted. Det understreger også på TypeScript, hvilket er et perfekt valg, fordi de fleste devs allerede har masser af erfaring med objektorienteret programmering.

På den anden side har jeg set lignende apps, som vi arbejder med, bygget med React. Så generelt er begge kraftfulde værktøjer og er mest afhængige af, hvordan du konfigurerer arkitekturen.

Takeaway-noter

  • TypeScript er simpelthen en transpiller, den kan bruges med React eller andre JS-rammer
  • React håndterer hukommelsesstyring effektivt (virtuel DOM)
  • React bruger JavaScript (ES6), et anerkendt websprog siden 1995
  • Angular bruger TypeScript, udgivet i 2012
  • Statisk skrevet sprog er fantastisk, men det er ikke et must
  • Dynamisk typede sprog kræver mindre tid til at skrive og mere fleksibilitet til at bruge kreativitet
  • At lære statisk-skrevet sprog kan være en udfordring, især hvis du kun har arbejdet med dynamisk typede sprog
  • ES6 har implementeret masser af fantastiske funktioner såsom moduler, klasser, spredningsoperator, pilfunktioner, skabelonbogstaver, der giver dig mulighed for at skrive mindre, renere og mere struktureret kode (syntaktisk sukker)
  • TS er simpelthen ES6 + med typer og meget mere

Konklusion

Den ramme / komponentbibliotek, du vælger, kan påvirke, hvor meget tid du bruger programmering og dit budget. Hvis du har et team med C #, Java eller C ++ udviklere, ville jeg sandsynligvis gå til Angular, da TypeScript deler mange ligheder med disse sprog.

Den bedste anbefaling, jeg kan tilbyde, er at konfigurere en grundlæggende applikation både i Angular og React og derefter evaluere sprog og arbejdsproces, inden du træffer en beslutning.

Som tidligere nævnt har begge teknologier deres eget sæt fordele og ligheder, og det koger virkelig ned til, hvilken type krav applikationen tilbyder, kompleksiteten og niveauet af erfaring, udviklerne har.

Her er et par artikler, jeg har skrevet om web-økosystemet sammen med personlige tip og tricks til programmering.

  • Et kaotisk sind fører til kaotisk kode
  • Udviklere, der konstant vil lære nye ting
  • En praktisk guide til ES6-moduler
  • Lær disse centrale webkoncepter
  • Forøg dine færdigheder med disse vigtige JavaScript-metoder
  • Programmer hurtigere ved at oprette brugerdefinerede bash-kommandoer

Du kan finde mig på Medium, hvor jeg udgiver ugentligt. Eller du kan følge mig på Twitter, hvor jeg sender relevante tips og tricks til webudvikling sammen med personlige historier.

PS Hvis du nød denne artikel og vil have mere, skal du klappe ❤ og dele med venner, der muligvis har brug for det, det er god karma.