Hyrndur vs Hvarf vs Vue - Samanburður

Að taka ákvörðun um JavaScript ramma fyrir vefforritið þitt getur verið yfirþyrmandi. Angular og React eru mjög vinsæl þessa dagana og það er uppistand sem hefur verið að fá mikla grip undanfarið: VueJS. Það sem meira er, þetta eru aðeins nokkur af nýju krökkunum á tálarinu.

Javascripts árið 2017 - hlutirnir eru ekki auðveldir þessa dagana!

Svo, hvernig eigum við að ákveða?

Áður en við byrjum - SPA eða ekki?

Þú ættir fyrst að taka skýra ákvörðun um hvort þú þarft einnar blaðsíðna umsóknar (SPA) eða hvort þú vilt frekar taka fjögurra blaðsíðna nálgun.

Ræsirnar í dag: Hyrndur, React og Vue

Í fyrsta lagi viljum við ræða líftíma og stefnumótandi sjónarmið. Þá förum við að eiginleikum og hugmyndum þriggja javascript ramma. Að lokum munum við komast að niðurstöðu.

Hér eru spurningarnar sem við munum taka á í dag:

  • Hversu þroskaðir eru umgjörðin / bókasöfnin?
  • Er líklegt að umgjörðin sé til um tíma?
  • Hversu víðtæk og gagnleg eru samsvarandi samfélög þeirra?
  • Hversu auðvelt er að finna forritara fyrir hvert rammaverk?
  • Hver eru grunn forritunarhugtök rammaverkanna?
  • Hversu auðvelt er það að nota umgjörðina fyrir lítil eða stór forrit?
  • Hvernig lítur námsferillinn út fyrir hvern ramma?
  • Hvers konar frammistöðu er hægt að búast við af rammanum?
  • Hvar er hægt að skoða nánar undir hettunni?
  • Hvernig geturðu byrjað að þróa með völdum ramma?

1. Lífsferill og stefnumörkunarsjónarmið

1.1 Nokkur saga

Angular er TypeScript byggir Javascript ramma. Google er hannað og viðhaldið og er lýst sem „Superheroic JavaScript MVWFramework“. Hyrndur (einnig „Hyrndur 2+“, „Hyrndur 2“ eða „ng2“) er endurskrifað, aðallega ósamrýmanleg arftaki AngularJS (einnig „Angular.js“ eða „AngularJS 1.x“). Þó að AngularJS (sá gamli) hafi upphaflega verið gefinn út í október 2010, þá er það enn að fá villuleiðréttingar osfrv. - Nýja Angular (sans JS) var kynnt í september 2016 sem útgáfa 2. Nýjasta aðalútgáfan er útgáfa 4, sem útgáfu 3 var sleppt. Angular er notað af Google, Wix, weather.com, health.gov og Forbes (samkvæmt madewithangular, stackshare og libscore.com).

React er lýst sem „JavaScript bókasafni til að byggja upp notendaviðmót“. Upphaflega gefin út í mars 2013, React var þróað og er viðhaldið af Facebook, sem notar React íhluti á nokkrum síðum (þó ekki sem eins blaðsíðna forrit). Samkvæmt þessari grein eftir Chris Cordle er React notað miklu meira á Facebook en Angular er á Google. React er einnig notað af Airbnb, Uber, Netflix, Twitter, Pinterest, Reddit, Udemy, Wix, Paypal, Imgur, Feedly, Stripe, Tumblr, Walmart og fleirum (samkvæmt Facebook, stackshare og libscore.com).

Facebook vinnur að útgáfu React Fiber. Það mun breytast React undir hettunni - flutningur er ætlað að vera mun hraðari fyrir vikið - en hlutirnir verða samhæfðir afturábak eftir breytingarnar. Facebook talaði um breytingarnar á ráðstefnu verktaki sinn í apríl 2017 og óopinber grein um nýja arkitektúrinn kom út. React Fiber kom út með React 16 í september 2017.

Vue er eitt ört vaxandi JS ramma árið 2016. Vue lýsir sér sem „leiðandi, fljótur og samsettur MVVM til að byggja upp gagnvirkt viðmót.“ Það kom fyrst út í febrúar 2014 af fyrrverandi starfsmanni Google Evan You (BTW: Evan skrifaði áhugaverða bloggfærslu um markaðsstarfsemina og tölur fyrstu vikuna þá). Það hefur gengið mjög vel, sérstaklega í ljósi þess að Vue er að fá svo mikla grip sem eins manns sýning án stuðnings stórs fyrirtækis. Evan er nú með teymi tugi kjarnahönnuða. Árið 2016 kom útgáfa 2 út. Vue er notað af Alibaba, Baidu, Expedia, Nintendo, GitLab - lista yfir smærri verkefni er að finna á madewithvuejs.com.

Öll þrjú rammar eru fáanlegir undir MIT leyfinu.

React send með sérstakri BSD3-leyfisskrá til september 2017. Miklar umræður urðu um einkaleyfaskrána. Ef þú hefur áhuga á sögu þessa geturðu lesið þessa umræðu um Github-málið, ástæður og sögu á bak við einkaleyfaskrána (af Ex-Facebook verkfræðingnum James Ide), af hverju þú ættir ekki að vera hræddur (eftir Dennis Walsh), viðvörun gegn notkun sprotafyrirtækja (eftir Raúl Kripalani) og fyrrum yfirlýsingu frá Facebook um þetta efni: Útskýra leyfi React. Engu að síður - allir ættu ekki að skipta máli lengur þar sem Facebook tilkynnti loksins að React mun fá MIT leyfið.

1.2 Kjarnaþróun

Eins og áður hefur komið fram eru Angular og React studd og notuð af stórum fyrirtækjum. Facebook, Instagram og Whatsapp nota það fyrir síðurnar sínar. Google notar það í mörgum verkefnum: til dæmis var nýja AdWords notendaviðmótið útfært með því að nota Angular & Dart. Aftur, Vue er að veruleika af hópi einstaklinga sem vinna er studd í gegnum Patreon og aðrar leiðir til styrktar. Þú getur sjálfur ákveðið hvort þetta er jákvætt eða neikvætt. Matthias Götzke heldur að litla teymið í Vue sé ávinningur vegna þess að það leiðir til hreinni og minna ofverkfræðilegs kóða / API.

Við skulum skoða nokkrar tölfræðilegar upplýsingar: Hyrndir listar 36 manns á liðasíðunni sinni, Vue listar 16 manns og React er ekki með liðarsíðu. Á Github er Angular með> 25.000 stjörnur og 463 framlag, React hefur> 70.000 stjörnur og> 1.000 framlag, og Vue hefur næstum 60.000 stjörnur og aðeins 120 framlag. Þú getur líka skoðað sögu Github Stars fyrir hyrnd, viðbrögð og vue. Enn og aftur virðist Vue stefna mjög vel. Samkvæmt bestof.js hefur Angular 2 síðustu þrjá mánuði fengið að meðaltali 31 stjörnur á dag, React 74 stjörnur og Vue.JS 107 stjörnur.

A Github Stars History for Angular, React & Vue (Heimild)

Uppfærsla: Paul Henschel takk fyrir að benda á þróun npm. Þeir sýna fjölda niðurhals fyrir gefna npm pakka og eru enn gagnlegri sem hreint útlit á Github stjörnurnar:

Npm halar niður tölurnar fyrir gefna npm pakka á síðustu 2 árum.

1.3 Lífsferill markaðarins

Það er erfitt að bera saman Angular, React og Vue í Google Trends vegna hinna ýmsu nafna og útgáfa. Ein leið til að samræma gæti verið að leita í flokknum „Internet & tækni“. Hér er niðurstaðan:

Jæja. Vue var ekki búið til fyrir árið 2014 - svo eitthvað er hér um bil. La Vue er franska fyrir „útsýni“, „sjón“ eða „skoðun“. Kannski er það það. Samanburður á „VueJS“ og „Angular“ eða „React“ er heldur ekki sanngjarn, þar sem VueJS hefur varla neinar niðurstöður miðað við hina.

Við skulum reyna eitthvað annað. Tækniskipan frá ThoughtWorks gefur góða sýn á hvernig tækni þróast með tímanum. Redux er á ættleiðingarstiginu (verður tekið upp í verkefnum!) Og það hefur verið ómetanlegt í fjölda ThoughtWorks verkefna. Vue.js er í prufurstiginu (prófaðu það!). Því er lýst sem léttum og sveigjanlegum valkosti við Hyrndur með lægri námsferil. Hyrndur 2 er í matsstiginu - það er notað með góðum árangri af ThoughtWork teymum, en ekki sterk meðmæli ennþá.

Samkvæmt síðustu Stackoverflow 2017 könnuninni er React elskað af 67% framkvæmdaraðila sem könnuð voru og AngularJS 52%. „Enginn áhuga á að halda áfram að þróa“ skráir hærri tölur fyrir AngularJS (48%) á móti React (33%). Vue er ekki í topp 10 í báðum tilvikum. Svo er könnun statejs.com sem ber saman „framaramma“. Áhugaverðustu staðreyndirnar: React og Angular hafa 100% vitund og 23% íbúanna sem spurðir voru vita af Vue. Varðandi ánægju skoraði React 92% fyrir „myndi nota aftur“, Vue 89% og Angular 2 aðeins 65%.

Hvað með aðra ánægju viðskiptavina? Eric Elliott byrjaði einn í október 2016 til að meta Angular 2 og React. Aðeins 38% landsmanna myndu nota Angular 2 aftur en 84% myndu nota React aftur.

1.4 Langtíma stuðningur og fólksflutningar

React API eru nokkuð stöðug eins og Facebook segir í hönnunarreglum sínum. Það eru líka nokkur skrift til að hjálpa þér að fara frá núverandi API til nýrra: skoðaðu svara-kóðann. Búferlaflutningar eru nokkuð auðveldir og það er enginn hlutur (þörf) sem langtíma stuðningsútgáfa. Í þessari Reddit færslu taka menn fram að uppfærslurnar voru í raun aldrei vandamál. React teymið skrifaði bloggfærslu um útgáfuáætlun sína. Þegar þeir bæta við afskriftarviðvörun geyma þær það sem eftir er af núverandi útgáfu útgáfu áður en hegðun er breytt í næstu aðalútgáfu. Það er engin fyrirhuguð breyting á nýrri meiriháttar útgáfu - v14 kom út í október 2015, v15 var gefin út í apríl 2016 og v16 er ekki með útgáfudag enn. Uppfærslan ætti ekki að vera vandamál, eins og nýlega hefur komið fram af React algerlega verktaki.

Varðandi Angular, þá er til bloggfærsla um útgáfu og útgáfu á Angular byrjun með v2 útgáfunni. Það verður ein meiriháttar uppfærsla á sex mánaða fresti og það verður að minnsta kosti sex mánaða afskriftartími (tvær helstu útgáfur). Það eru nokkur API tilrauna merkt í skjölunum með styttri afskriftatímabilum. Það er engin opinber tilkynning ennþá en samkvæmt þessari grein hefur Angular teymið tilkynnt langtíma stuðningsútgáfur sem byrja á Angular 4. Þeir munu fá stuðning í að minnsta kosti eitt ár umfram næstu útgáfu af helstu útgáfum. Þetta þýðir að Angular 4 verður studdur þar til að minnsta kosti september 2018 með villuleiðréttingum og mikilvægum plástrum. Í flestum tilfellum er það eins auðvelt að uppfæra hyrndan frá v2 til v4 og að uppfæra hyrnd háð. Angular býður einnig upp á leiðbeiningar með upplýsingum um hvort þörf sé á frekari breytingum.

Uppfærsluferlið fyrir Vue 1.x til 2.0 ætti að vera auðvelt fyrir lítið forrit - þróunarteymið hefur fullyrt að 90% af forritaskilunum héldust eins. Það er gott uppfærslu- til að greina flutning-hjálparverkfæri sem vinnur á stjórnborðið. Einn verktaki tók fram að uppfærslan frá v1 til v2 væri samt ekkert skemmtileg í stóru forriti. Því miður er engin skýr (opinber) vegvísi um næstu helstu útgáfu eða upplýsingar um áætlanir um LTS útgáfur.

Einn hlutur í viðbót: Hyrndur er fullur umgjörð og býður upp á margt sem er búnt saman. Viðbrögðin eru sveigjanlegri en Hyrnd og þú munt líklega taka til með því að nota sjálfstæðari, óupptekin og fljótt færandi bókasöfn - þetta þýðir að þú þarft að sjá um samsvarandi uppfærslur og flutninga á eigin spýtur. Það gæti einnig verið skaðlegt ef tilteknum pakka er ekki lengur viðhaldið eða einhver annar pakki verður í reynd staðalinn á einhverjum tímapunkti.

1.5 Mannauður og ráðning

Ef þú ert með innanlands HTML verktaki sem vilja ekki læra meira Javascript, þá er þér betra að velja Angular eða Vue. React felur í sér meira Javascript (við ræðum um þetta seinna).

Ertu með hönnuðir sem vinna nálægt kóðanum? Notandinn „pier25“ bendir á Reddit að React sé skynsamlegt ef þú ert að vinna fyrir Facebook, þar sem allir eru ofurhetjuhönnuður. Í hinum raunverulega heimi finnurðu ekki alltaf hönnuð sem getur breytt JSX - sem slíkur verður mun auðveldara að vinna með HTML sniðmátum.

Það góða við rammaumgjörðina er að nýr Angular 2 verktaki frá öðru fyrirtæki mun fljótt kynna sér öll nauðsynleg samkomulag. Viðbrögð verkefna eru hvert um sig hvað varðar byggingarákvarðanir og verktaki þarf að kynnast tiltekinni skipulagningu verkefnisins.

Hyrndur er líka góður ef þú ert með forritara með hlutbundinn bakgrunn eða sem ekki líkar Javascript. Hér er tilvitnun í Mahesh Chand til að keyra þennan punkt heim:

Ég er ekki JavaScript verktaki. Bakgrunnur minn er að byggja stórfelld fyrirtækiskerfi með „raunverulegum“ hugbúnaðarpöllum. Ég byrjaði árið 1997 við að byggja forrit með C, C ++, Pascal, Ada og Fortran. (…) Ég get skýrt sagt að JavaScript er bara svívirðilegt fyrir mig. Sem Microsoft MVP og sérfræðingur hef ég góðan skilning á TypeScript. Ég sé ekki heldur á Facebook sem hugbúnaðarþróunarfyrirtæki. Hins vegar eru Google og Microsoft nú þegar stærstu hugbúnaðarframleiðendurnir. Mér finnst þægilegra að vinna með vöru sem hefur sterka stoð frá Google og Microsoft. Einnig (…) með mínum bakgrunni veit ég að Microsoft hefur enn stærri áætlanir um TypeScript.

Jæja, þá… ég ætti líklega að nefna að Mahesh er svæðisstjóri hjá Microsoft.

2. Samanburður á React, Angular & Vue

2.1 Íhlutir

Umgjörðin sem um ræðir eru öll byggð á íhlutum. Íhlutur fær inntak og eftir nokkra innri hegðun / tölvunarfræði skilar hann útgefnu UI sniðmáti (innskráningar- / útskráningar svæði eða verkefnalisti) sem framleiðsla. Auðvelt er að endurnýta skilgreinda íhluti á vefsíðunni eða innan annarra íhluta. Til dæmis gætirðu verið með ristíhlut (sem samanstendur af hausþátt og nokkrum röð íhluta) með ýmsum eiginleikum (dálkar, upplýsingar um haus, gagnalínur o.s.frv.) Og getað endurnýtt íhlutinn með mismunandi gögnum á annarri síðu. Hér er yfirgripsmikil grein um íhluti, ef þú vilt fræðast meira um þetta.

React og Vue skara bæði fram úr við meðhöndlun heimskra íhluta: litlar, ríkisfangslausar aðgerðir sem fá inntak og skilaþætti sem framleiðsla.

2.2 Gerðarskrift á móti ES6 á móti ES5

React fjallar um notkun Javascript ES6. Vue notar Javascript ES5 eða ES6.

Hyrndur treystir á TypeScript. Þetta býður upp á meira samræmi í skyldum dæmum og opnum verkefnum (svör við dæmum er að finna í ES5 eða ES6). Þetta kynnir einnig hugtök eins og skreytingar og kyrrstæðar gerðir. Static tegundir eru gagnlegar fyrir njósna verkfæri, svo sem sjálfvirka endurgerð, fara í skilgreiningar o.s.frv. - Þeir eiga einnig að fækka villum í forriti. En vissulega er ekki samstaða um þetta efni. Eric Elliott er ósammála í grein sinni „Það átakanlega leyndarmál um truflanir“. Daniel C Wang segir að kostnaðurinn við notkun truflana geri engan skaða og að það sé gott að hafa bæði prófdrifna þróun (TDD) og truflanir.

Þú ættir líka líklega að vita að þú getur notað Flow til að virkja tegundarskoðun innan React. Þetta er truflanir gerðarafritunaraðilar þróaðir af Facebook fyrir JavaScript. Einnig er hægt að samþætta flæði í VueJS.

Ef þú ert að skrifa kóðann þinn í TypeScript skrifarðu ekki lengur venjulegt JavaScript. Jafnvel þó að það sé að aukast hefur TypeScript ennþá pínulítinn notendagrunn miðað við það á öllu JavaScript tungumálinu. Ein áhætta gæti verið sú að þú færir þig í ranga átt vegna þess að TypeScript getur - hvernig sem það er ólíklegt - einnig horfið með tímanum. Að auki bætir TypeScript mikið af (læra) kostnaði við verkefni - þú getur lesið meira um þetta í Angular 2 vs. React samanburði Eric Elliott.

2.3 Sniðmát - JSX eða HTML

Hvarfbrot með langbestu starfshætti. Í áratugi reyndu verktaki að aðgreina sniðmát HÍ og flokka Javascript rökfræði, en með JSX er þetta blandað saman aftur. Þetta gæti hljómað hræðilegt en þú ættir að hlusta á erindi Peter Hunt „React: Rethinking best practices“ (frá október 2013). Hann bendir á að aðgreining sniðmát og rökfræði sé einungis aðskilnaður tækni, ekki áhyggjur. Þú ættir að smíða hluti í stað sniðmáta. Íhlutir eru endurnýtanlegir, samsettir og einingarprófanlegir.

JSX er valfrjáls forvinnsla fyrir HTML eins setningafræði sem verður tekin saman í Javascript seinna. Það hefur nokkrar einkennilegar undirtektir - til dæmis þarftu að nota className í stað bekkjar, vegna þess að það síðarnefnda er verndað nafn í Javascript. JSX er stór kostur við þróun, vegna þess að þú hefur allt á einum stað, og lokið er við kóða og eftirlit með tíma saman. Þegar þú gerir prentvillu í JSX mun React ekki taka saman og það prentar út línunúmerið þar sem prentvillan átti sér stað. Hyrndur 2 bregst hljóðlega við keyrslutíma (þetta er rifrildi líklega ógilt ef þú notar AOT með Hyrndum).

JSX felur í sér að allt í React er Javascript - það er notað bæði fyrir JSX sniðmát og rökfræði. Cory House bendir á þetta í grein sinni frá janúar 2016: „Angular 2 heldur áfram að setja„ JS “í HTML. React setur „HTML“ inn í JS. “. Þetta er góður hlutur því Javascript er öflugri en HTML.

Hyrnd sniðmát er endurbætt HTML með sérstöku hyrndartungumáli (hlutir eins og ngIf eða ngFor). Þó React krefst þekkingar á JavaScript, neyðir Angular þig til að læra sértæk setningafræði.

Vue er með „einnar skráaríhluti“. Þetta virðist vera málamiðlun varðandi aðskilnað áhyggjuefna - sniðmát, forskriftir og stíll eru í einni skrá en í þremur mismunandi, skipuðum hlutum. Þetta þýðir að þú færð setningafræðiáherslu, CSS stuðning og auðveldari notkun forvinnsluaðila eins og Jade eða SCSS. Ég hef lesið í öðrum greinum að JSX sé auðveldara að kemba vegna þess að Vue sýnir ekki slæmar villur í setningafræði í HTML. Þetta er ekki satt vegna þess að Vue breytir HTML til að gera aðgerðir - svo villur eru sýndar án vandamála (þökk sé Vinicius Reis fyrir athugasemdir og leiðréttinguna!).

Hliðarbréf: Ef þér líkar vel við hugmyndina um JSX og vilt nota hana í Vue geturðu notað babel-plugin-transform-vue-jsx.

2.4 Framework vs. bókasafn

Hyrndur er umgjörð frekar en bókasafn vegna þess að það veitir sterkar skoðanir á því hvernig umsóknin þín ætti að vera uppbyggð og hefur einnig meiri virkni utan kassans. Angular er „heildarlausn“ - rafhlöður fylgja og tilbúin til að veita þér skemmtilega byrjun. Þú þarft ekki að greina bókasöfn, leiðarlausnir eða þess háttar - þú getur bara byrjað að vinna.

React og Vue eru aftur á móti almennt sveigjanleg. Hægt er að para bókasöfnin þeirra við alls kyns pakka (það eru töluvert fyrir React á npm, en Vue er með færri pakka vegna þess að það er ennþá nokkuð ungt). Með React geturðu jafnvel skipt um bókasafnið sjálft fyrir API-samhæft val eins og Inferno. En með miklum sveigjanleika fylgir mikil ábyrgð - það eru engar reglur og takmarkaðar leiðbeiningar með React. Sérhvert verkefni þarf ákvörðun varðandi arkitektúr þess og hlutirnir geta farið úrskeiðis auðveldara.

Hyrndur kemur aftur á móti með ruglingslegt hreiður af smíðatækjum, ketilplötu, lindrum og tímaskekkjum til að takast á við. Þetta á einnig við um React ef ræsipakkar eða ketilplötur eru notaðir. Þeir eru náttúrulega mjög hjálpsamir, en React virkar ekki úr kassanum og það er líklega leiðin sem þú ættir að læra á. Stundum er vísað til ýmissa tækja sem þarf til að vinna í Javascript umhverfi sem „Javascript þreyta“. Það er grein um það eftir Eric Clemmons, sem hefur þetta að segja:

Það er ennþá fullt af uppsettum tækjum, þú ert ekki vanur, þegar byrjað er á umgjörðinni. Þetta er búið til en líklega skilja margir verktaki ekki, hvað er að gerast undir hettunni - eða það tekur mikinn tíma fyrir þá að gera.

Vue virðist vera hreinasta og léttasta ramma þriggja. GitLab er með bloggfærslu um ákvörðun sína varðandi Vue.js (október 2016):

Vue.js er með fullkomið jafnvægi hvað það mun gera fyrir þig og það sem þú þarft að gera sjálfur. (...) Vue.js er alltaf innan seilingar, traustur, en sveigjanlegur öryggisnet tilbúinn til að hjálpa þér að halda forrituninni skilvirkum og þjáningar þínar af völdum DOM í lágmarki.

Þeim líkar einfaldleiki og vellíðan í notkun - kóðinn er mjög læsilegur og engin gögn eða ytri bókasöfn eru nauðsynleg. Allt er mjög einfalt. Vue.js „gerir ekki stórar forsendur um mikið af neinu heldur“. Það er líka podcast um ákvörðun GitLab.

Annar bloggpóstur um tilfærslu í átt að Vue kemur frá Pixeljets. React „var stórt framfaraskref fyrir JS heiminn hvað varðar vitund ríkisins og það sýndi fullt af fólki raunverulega hagnýta forritun á góðan og praktískan hátt“. Eitt af stóru gögnum React vs. Vue er vandamálið að skipta íhlutum niður í smærri hluti vegna JSX takmarkana. Hér er tilvitnun í greinina:

Fyrir mig og mitt lið er læsileiki kóðans mikilvægur en það er samt mjög mikilvægt að það sé skemmtilegt að skrifa kóða. Það er ekki fyndið að búa til 6 íhluti þegar þú ert að innleiða virkilega einfaldan reiknivél. Í mörgum tilfellum er það líka slæmt hvað varðar viðhald, breytingar eða beita sjónrænri yfirferð á einhvern búnað, vegna þess að þú þarft að hoppa um margar skrár / aðgerðir og athuga hvert lítið klump af HTML fyrir sig. Aftur, ég er ekki að leggja til að skrifa monoliths - ég legg til að nota íhluti í stað örhluta til daglegrar þróunar.

Það eru áhugaverðar umræður um bloggfærsluna um Hacker fréttir og Reddit - það eru rök frá andófsmönnum og frekari stuðningsmönnum Vue jafnt.

2.5 Ríkisstjórnun og gagnabindandi

Það er erfitt að byggja HÍ fyrir sig, því alls staðar eru ríki - gögn sem breytast með tímanum fela í sér margbreytileika. Skilgreind vinnuferill ríkisins er mikil hjálp þegar forrit stækka og verða flóknari. Fyrir takmarkaðar umsóknir er þetta líklega of mikið og eitthvað eins og Vanilla JS myndi duga.

Hvernig virkar það? Íhlutir lýsa HÍ hvenær sem er. Þegar gögn breytast, gerir umgjörðin upp allan HÍ-þáttinn - gögn sem birtast eru alltaf uppfærð. Við getum kallað þetta hugtak „UI as function“.

React vinnur oft saman með Redux. Redux lýsir sér í þremur grundvallarreglum:

  • Einn uppspretta sannleikans
  • Ríki er skrifvarið
  • Breytingar eru gerðar með hreinum aðgerðum

Með öðrum orðum: staða heildarforritsins er geymd í hlutartré í einni verslun. Þetta hjálpar til við að kemba forritið og það er auðveldara að útfæra suma virkni. Ríkið er skrifvarið og er aðeins hægt að breyta með aðgerðum til að forðast keppnisaðstæður (það hjálpar einnig við kembiforrit). Kröfur eru skrifaðar til að tilgreina hvernig hægt er að umbreyta ríkjunum með aðgerðum.

Flestar námskeiðin og ketilplöturnar hafa Redux þegar samþætt en þú getur notað React án þess (og þú gætir ekki þurft Redux í verkefninu þínu yfirleitt). Redux kynnir margbreytileika og ansi sterkar skorður í kóðanum þínum. Ef þú ert að læra React ættirðu að hugsa um að læra React áður en þú ferð til Redux. Þú ættir örugglega að lesa „Þú gætir ekki þurft Redux“ eftir Dan Abramov.

Sumir verktaki benda á notkun Mobx í stað Redux. Þú getur hugsað um það sem „sjálfvirkt Redux“, sem gerir hlutina miklu auðveldari í notkun og skilningi í upphafi. Ef þú vilt skoða skaltu byrja á kynningunni. Þú getur líka lesið þennan gagnlega samanburð á milli Redux & MobX eftir Robin. Sami höfundur býður einnig upp á upplýsingar um að flytja frá Redux til MobX. Þessi listi er gagnlegur ef þú vilt skoða önnur Flux bókasöfn. Og ef þú ert að koma frá MVC-heimi, þá viltu lesa greinina „Thinking in Redux (þegar allt sem þú hefur vitað er MVC)“ eftir Mikhail Levkovsky.

Vue getur nýtt sér Redux - en það býður Vuex sem sína eigin lausn.

Stór munur á React og Angular er ein leið vs tvíhliða binding. Tvíhliða bindingu Angular breytir líkaninu þegar UI-þátturinn (t.d. inntak notanda) er uppfærður. Viðbrögð fara aðeins á einn veg: það uppfærir líkanið fyrst og síðan gerir það HÍ frumefnið. Aðferð Angular er hreinni í kóðanum og auðveldara fyrir framkvæmdaraðila að innleiða. Leið React leiðir til betri gagna yfirsýn, vegna þess að gögnin renna aðeins í eina átt (þetta auðveldar kembiforrit).

Bæði hugtökin hafa þar kosti og galla. Þú verður að skilja hugtökin og ákvarða hvort þetta hefur áhrif á rammákvörðun þína. Greinin „Tvíhliða gagnabinding: Hyrnd 2 og bregðast við“ og þessi Stackoverflow spurning bjóða báðar fram góða skýringu. Hér getur þú fundið nokkur gagnvirk kóða (3 ára, aðeins fyrir hyrnd 1 & React). Síðast en ekki síst styður Vue bæði aðra leiðina og aðra leiðina (sjálfgefið).

Til er löng grein um mismunandi tegundir ríkja og stjórnun ríkisins í hyrndum forritum (eftir Victor Savkin) ef þú vilt lesa nánar.

2.6 Önnur forritunarhugtök

Hyrndur nær yfir innspýtingu í ósjálfstæði, mynstri þar sem einn hlutur afhendir ósjálfstæði (þjónustu) til annars hlutar (viðskiptavinur). Þetta leiðir til meiri sveigjanleika og hreinni kóða. Greinin „Að skilja inndælingu í ánauðar“ útskýrir þetta hugtak nánar.

MVC-kerfið skiptir verkefni í þrjá hluti: líkan, útsýni og stjórnandi. Hyrndur sem MVC-rammi er með MVC út úr kassanum. React hefur aðeins V - þú þarft að leysa M og C á eigin spýtur.

2.7 Sveigjanleiki og lækkun á örsöluþjónustu

Þú getur unnið með React eða Vue með því einfaldlega að bæta Javascript bókasafninu við frumkóðann. Þetta er ekki hægt með Angular vegna notkunar þess á TypeScript.

Við erum núna að fara meira í átt að örverum og örforritum. React og Vue veita þér meiri stjórn á að stækka forrit með því að velja aðeins það sem raunverulega er nauðsynlegt. Þau bjóða upp á meiri sveigjanleika til að skipta úr SPA yfir í smásjáþjónustu með því að nota hluta af fyrrum forriti. Hyrndur virkar best fyrir SPA, þar sem það er líklega of uppblásið til að nota í örsjá.

Eins og Cory House bendir á:

JavaScript hreyfist hratt og React gerir þér kleift að skipta út litlum stykki af umsókninni þinni fyrir betri bókasöfn í stað þess að bíða og vonast til að umgjörð þín nýjist. Hugmyndafræði lítilla, samsettra, eins tilgangs verkfæra fer aldrei úr stíl.

Sumir nota React fyrir vefsíður sem ekki eru SPA (t.d. fyrir flókin form eða galdramenn). Jafnvel Facebook notar React - ekki fyrir aðalsíðuna, heldur fyrir ákveðnar síður og eiginleika.

2.8 Stærð og frammistaða

Það er bakhlið við alla virkni: Hyrndar ramminn er alveg uppblásinn. Gzipped skráarstærðin er 143k, samanborið við 23K fyrir Vue og 43k fyrir React.

React og Vue hafa báðir Virtual DOM, sem er ætlað að bæta árangur. Ef þú hefur áhuga á þessu geturðu lesið um muninn á Virtual DOM & DOM, sem og raunverulegum ávinningi af Virtual DOM í react.js. Einnig svarar einn höfunda Virtual-DOM sjálfrar afkomutengdri spurningu um Stackoverflow.

Til að athuga árangur skoðaði ég hið frábæra js-framework-viðmið. Þú getur halað niður og keyrt það sjálfur, eða skoðað gagnvirka útkomutöfluna. Áður en þú skoðar niðurstöðurnar ættir þú að vita að umgjörðin er að svindla viðmið - slíka frammistöðuathugun ætti ekki að nota til að taka ákvarðanir.

Flutningur hyrndra, viðbragða og vueMinniúthlutun í MB

Til að draga saman: Vue hefur mikla frammistöðu og dýpstu minnisúthlutun, en öll þessi ramma eru í raun ansi nálægt hvort öðru samanborið við sérstaklega hægt eða hratt ramma (eins og Inferno). Enn og aftur: Afreksviðmiðin ættu aðeins að líta á sem hliðarmerki, ekki sem dóm.

2.9 Próf

Facebook notar Jest til að prófa React kóða sinn. Hér er samanburður á milli Jest og Mokka - og það er grein um hvernig á að nota ensím með Mokka. Ensím er JavaScript prófunarverkfæri notað á Airbnb (í tengslum við Jest, Karma og fleiri próf hlaupara). Ef þú vilt lesa meira eru nokkrar eldri greinar um prófanir í React (hér og hér).

Svo er Jasmine sem prófunarrammi í Angular 2. Það er gífuryrði í grein eftir Eric Elliott sem segir að Jasmine „leiði til milljóna leiða til að skrifa próf og fullyrðingar og þurfi að lesa vandlega hver og einn til að skilja hvað hann er að gera“. Útgangurinn er líka mjög uppblásinn og erfiður að lesa. Það eru nokkrar fræðandi greinar um samþættingu Angular 2 við Karma og Mokka. Hér er gamalt myndband (frá 2015) um prófunaraðferðirnar með Angular 2.

Vue skortir prófunarleiðbeiningar en Evan skrifaði í forsýningu sinni 2017 að liðið hyggst vinna að þessu. Þeir mæla með því að nota Karma. Vue vinnur ásamt Jest, og það er líka avoriaz sem prófunartæki.

2.10 Alhliða og innbyggð forrit

Alhliða forrit eru að kynna forrit á vefnum, á skjáborðið og í heim innfæddra forrita.

React og Angular styðja bæði innfæddan þroska. Angular er með NativeScript (studdur af Telerik) fyrir innfædd forrit og Ionic Framework fyrir blendingaforrit. Með React geturðu kíkt á viðbragðsflokka til að búa til iOS- og Android forrit á mismunandi svæðum eða svarað fyrir innfædd forrit. A einhver fjöldi af apps (þar á meðal Facebook; athuga Showcase fyrir meira) eru byggð með viðbragðsaðili.

Rammar frá Javascript birta síður á viðskiptavininn. Þetta er slæmt fyrir skynja árangur, heildarupplifun notenda og SEO. Forframútgáfa netþjónsins er plús. Öll þrjú ramma eru með bókasöfnum til að finna hjálp við það. Fyrir React er next.js, Vue hefur nuxt.js, og Angular hefur… .Angular Universal.

2.11 Námsferill

Það er örugglega brattur námsferill fyrir Angular. Það hefur yfirgripsmikil skjöl, en stundum gætir þú orðið svekktur yfir því vegna þess að hlutirnir eru erfiðari en þeir hljóma. Jafnvel þegar þú hefur djúpan skilning á Javascript þarftu að læra hvað er að gerast undir hattinum á rammanum. Uppsetningin er töfrandi í byrjun og hún býður upp á mikið af pakka og kóða sem fylgja með. Það má líta á þetta sem neikvætt vegna þess að það er stórt, fyrirliggjandi lífríki sem þú þarft að læra með tímanum. Hins vegar gæti það verið gott í tilteknum aðstæðum vegna þess að mikið af ákvörðunum hefur þegar verið tekið. Með React þarftu líklega að taka miklar ákvarðanir varðandi bókasöfn þriðja aðila. Það eru 16 mismunandi flæðipakkar fyrir stjórnun ríkisins að velja úr í React einum.

Vue er frekar auðvelt að læra. Fyrirtæki skipta yfir í Vue vegna þess að það virðist vera miklu auðveldara fyrir yngri forritara. Hérna getur þú lesið um einhvern sem lýsir flutningi liðsins frá Hyrndum yfir í Vue. Samkvæmt öðrum notanda var React forritið hjá fyrirtækinu hans svo flókið að nýr verktaki gat ekki fylgst með kóðanum. Með Vue minnkar bilið milli yngri og eldri þróunaraðila og þeir geta unnið saman auðveldara og með færri galla, vandamál og tíma til að þróast.

Sumir halda því fram að það sem þeir hafa gert í React hefði verið skrifað betur á Vue. Ef þú ert óreyndur Javascript verktaki - eða ef þú starfaðir aðallega með jQuery á síðasta áratug - ættirðu að hugsa um að nota Vue. Hugmyndaskiptingin er meira áberandi þegar farið er yfir í React. Vue lítur meira út eins og venjulegt Javascript en kynnir einnig nokkrar nýjar hugmyndir: íhluti, atburðsdrifið líkan og einstefnugagnaflæði. Það hefur einnig lítið fótspor.

Á meðan hafa Angular og React sína leið til að gera hlutina. Þeir geta komið á þinn hátt, vegna þess að þú þarft að laga venjur þínar til að láta hlutina vinna sig. Það getur verið skaðlegt vegna þess að þú ert minna sveigjanlegur og það er brattari námsferill. Það gæti líka verið ávinningur vegna þess að þú neyðist til að læra rétt hugtök meðan þú lærir tæknina. Með Vue geturðu gert hlutina á gamaldags hátt með Javascript. Þetta getur verið auðveldara í byrjun, en gæti orðið vandamál þegar til langs tíma er litið ef hlutirnir eru ekki gerðir rétt.

Þegar kemur að kembiforritum er það plús að React og Vue hafa minni töfra. Veiðin að pöddum er auðveldari vegna þess að það eru færri staðir til að skoða og staflamerkin skilja betur á milli þeirra eigin kóða og bókasafna. Fólk sem vinnur með React segir frá því að þeir þurfi aldrei að lesa kóðann á bókasafninu. Samt sem áður, þegar þú aflúsar Angular forritið þitt, þarftu oft að kemba innréttingar Angular til að skilja undirliggjandi líkan. Á björtu hliðinni eiga villuboðin að vera skýrari og fræðandi frá byrjun Angular 4.

2.12 Hyrndur, bregðast við og Vue undir hettunni

Viltu athuga frumkóðann sjálfan? Viltu sjá hvernig hlutunum líður?

Þú munt líklega vilja skoða Github geymslurnar fyrst: React (github.com/facebook/react), Angular (github.com/angular/angular) og Vue (github.com/vuejs/vue)

Hvernig lítur setningafræðin út? ValueCoders ber saman setningafræði fyrir hyrnd, bregðast og vue.

Það er líka gott að sjá hluti í framleiðslu - í tengslum við undirliggjandi frumkóða. TodoMVC listar heilmikið af sama Todo appinu, skrifað með mismunandi Javascript ramma - þú getur borið saman Hyrndar, Reactand Vue lausnirnar. RealWorld býr til raunheimsforrit (Medium klón) og þau hafa lausnir fyrir Angular (4+) og React (með Redux) tilbúnar. Vue er vinna í vinnslu.

Það eru líka nokkur raunveruleg forrit sem þú gætir skoðað. Hér eru lausnir fyrir React:

  • Gerðu (fallegt raunverulegt glósustjórnunarforrit smíðað með React & Redux)
  • hljóð-redux (Soundcloud viðskiptavinur smíðaður með React & Redux)
  • Brainfock (verkefni og teymisstjórnun lausn byggð með React)
  • react-hn & react-fréttir (Hacker frétt klón)
  • react-native-whatsapp-ui + einkatími (Whatsapp klón með react-native)
  • phoenix-trello (Trello klón)
  • slak klón + önnur kennsla (slak klón)

Það eru nokkur forrit fyrir Angular:

  • angular2-hn & hn-ng2 (Hacker News klón + fín einkatími um að búa til annan eftir Ashwin Sureshkumar)
  • Redux-og-hyrndur-2 (Twitter klón)

Það eru líka lausnir fyrir Vue:

  • vue-hackernews-2.0 & Loopa fréttir (Hacker News einrækt)
  • vue-soundcloud (a Soundcloud kynningu)

Niðurstaða

Ákveðið um ramma núna

React, Angular og Vue eru allir nokkuð flottir og enginn þeirra stendur greinilega ofar hinum. Treystu þörmum tilfinningu þinni. Þessi síðasti hluti af skemmtilegri tortryggni gæti hjálpað ákvörðun þinni:

Það skítuga leyndarmál er að flestar „nútíma JavaScript-þróanir“ hafa ekkert með það að gera að byggja upp vefsíður - það er að byggja upp pakka sem geta verið notaðir af fólki sem byggir bókasöfn sem hægt er að nota af fólki sem smíðar ramma sem fólk sem skrifar námskeið og kennir námskeið get kennt. Ég er ekki viss um að neinn byggi í raun eitthvað fyrir raunverulegan notanda til að hafa samskipti við.

Þetta er auðvitað ýkja, en það er líklega sannleikskorn. Já, það er mikið suð í Javascript vistkerfinu. Þú munt líklega finna fullt af öðrum aðlaðandi valmöguleikum meðan á leitinni stendur - reyndu ekki að láta blindast af nýjasta, skínandi ramma.

Hvað ætti ég að velja?

Ef þú vinnur hjá Google: Hyrndur

Ef þú elskar TypeScript: Angular (eða React)

Ef þú elskar hlutbundna forritun (OOP): Hyrndur

Ef þú þarft leiðsögn, uppbyggingu og hjálparhönd: Hyrndur

Ef þú vinnur á Facebook: React

Ef þér líkar vel við sveigjanleika: React

Ef þú elskar stór vistkerfi: React

Ef þér líkar vel við að velja á milli tuga pakka: React

Ef þú elskar JS & „allt-er-Javascript-nálgunin“: React

Ef þér líkar vel við hreinn kóða: Vue

Ef þú vilt hafa auðveldasta námsferilinn: Vue

Ef þú vilt hafa léttan ramma: Vue

Ef þú vilt aðgreina áhyggjur í einni skrá: Vue

Ef þú ert að vinna einn eða ert með lítið teymi: Vue (eða React)

Ef forritið þitt hefur tilhneigingu til að verða mjög stórt: Hyrnt (eða Bregðast við)

Ef þú vilt smíða forrit með innfæddur maður: React

Ef þú vilt hafa mikið af forriturum í lauginni: Hyrndur eða bregðast við

Ef þú vinnur með hönnuðum og þarft hreinar HTML skrár: Hyrndur eða Vue

Ef þér líkar vel við Vue en ert hræddur við takmarkað vistkerfi: React

Ef þú getur ekki ákveðið það, lærðu fyrst React, síðan Vue og síðan Angular.

https://pixxel.ml/angularjs-vs-reactjs-vs-vuejs-comparison/