Nurk vs reageerimine vs vue - võrdlus

Veebirakenduse JavaScripti raamistiku üle otsustamine võib olla tohutu. Nurk ja reageerimine on tänapäeval väga populaarsed ning seal on tõus, mis on viimasel ajal palju veojõudu saavutanud: VueJS. Veelgi enam, need on vaid mõned üksikud uued lapsed.

Javascriptid 2017. aastal - tänapäeval pole asjad lihtsad!

Niisiis, kuidas me peaksime otsustama?

Enne kui alustame - SPA või mitte?

Esmalt peaksite tegema selge otsuse, kas vajate ühelehelist rakendust (SPA) või eelistaksite mitmelehelist lähenemist.

Täna stardid: Nurk, React ja Vue

Esiteks tahaksime arutada elutsüklit ja strateegilisi kaalutlusi. Seejärel liigume kolme javascripti raamistiku funktsioonide ja kontseptsioonide juurde. Lõpuks jõuame järeldusele.

Siin on küsimused, millele täna vastame:

  • Kui küpsed on raamistikud / raamatukogud?
  • Kas raamistikud on tõenäoliselt mõnda aega olemas?
  • Kui ulatuslikud ja abivalmis on nende vastavad kogukonnad?
  • Kui lihtne on leida igale raamistikule arendajaid?
  • Millised on raamide peamised programmeerimiskontseptsioonid?
  • Kui lihtne on raamistikke kasutada väikeste või suurte rakenduste jaoks?
  • Milline näeb välja õppimiskõver iga raamistiku jaoks?
  • Millist lavastust võite raamidest oodata?
  • Kus saab kapoti all lähemalt uurida?
  • Kuidas saaksite valitud raamistikuga arenema hakata?

1. Elutsükkel ja strateegilised kaalutlused

1.1 Mõni ajalugu

Nurk on TypeScriptil põhinev Javascripti raamistik. Google'i välja töötatud ja hooldatud seda kirjeldatakse kui "Superheroic JavaScripti MVWFramework". Nurk (ka “Nurk 2+”, “Nurk 2” või “ng2”) on ümberkirjutatud, enamasti ühildamatu AngularJS-i järeltulija (ka “Angular.js” või “AngularJS 1.x”). Kui AngularJS (vana) ilmus algselt 2010. aasta oktoobris, saab see endiselt veaparandusi jne - uus Angular (sans JS) toodi turule 2016. aasta septembris versioonina 2. Uusim suurem väljalase on versioon 4, kuna versioon 3 jäeti vahele. Nurgelisi kasutavad Google, Wix, weather.com, healthcare.gov ja Forbes (vastavalt madewithangular, stackshare ja libscore.com).

Reaktit kirjeldatakse kui „JavaScripti teeki kasutajaliideste loomiseks“. Esialgu välja antud 2013. aasta märtsis, Reacti arendas ja haldab Facebook, mis kasutab Reaxi komponente mitmel lehel (aga mitte üheleheliste rakendustena). Selle Chris Cordle'i artikli kohaselt kasutatakse Reaktit Facebookis palju rohkem kui Angular on Google'is. Reaktit kasutavad ka Airbnb, Uber, Netflix, Twitter, Pinterest, Reddit, Udemy, Wix, Paypal, Imgur, Feedly, Stripe, Tumblr, Walmart ja teised (Facebooki, stackshare ja libscore.com andmetel).

Facebook töötab välja React Fiberi väljaandmist. See muudab reaktori kapoti all - renderdamine peaks selle tulemusel olema palju kiirem -, kuid pärast muudatusi on asjad tagasi ühilduvad. Facebook rääkis muudatustest oma arendajakonverentsil 2017. aasta aprillis ning ilmus mitteametlik artikkel uue arhitektuuri kohta. React Fiber ilmus koos React 16-ga 2017. aasta septembris.

Vue on üks 2016. aastal kõige kiiremini kasvavaid JS-i raamistikke. Vue kirjeldab end kui „intuitiivset, kiiret ja komponeeritavat MVVM-i interaktiivsete liideste loomiseks.“ Selle andis esmakordselt välja 2014. aasta veebruaris endine Google'i töötaja Evan You (BTW: Evan kirjutas huvitava ajaveebi postituse turundustegevuste ja numbrite kohta sel nädalal esimesel nädalal). See on olnud üsna edukas, eriti kui arvestada, et Vue veab nii palju kui ühemehe show ilma suurettevõtte toetuseta. Evanil on praegu tosina põhiarendaja meeskond. 2016. aastal ilmus versioon 2. Vue kasutavad Alibaba, Baidu, Expedia, Nintendo, GitLab - väiksemate projektide loetelu leiate saidilt madewithvuejs.com.

Kõik kolm raamistikku on saadaval MIT-litsentsi alusel.

React tarniti spetsiaalse BSD3-litsentsifailiga kuni septembrini 2017. Patenditoimiku üle oli palju arutelusid. Kui olete selle ajaloost huvitatud, võite lugeda seda Githubi numbri arutelu, patendifaili tagamaid ja põhjuseid (Ex-Facebooki insener James Ide), Miks te ei peaks kartma (Dennis Walsh), hoiatus alustavate ettevõtete kasutamise eest (autor Raúl Kripalani) ja Facebooki endine avaldus sellel teemal: Reacti litsentsi selgitamine. Igatahes - kõigil ei tohiks enam olla tähtsust, kuna Facebook teatas lõpuks, et Reakt saab MIT-i litsentsi.

1.2 Tuuma arendamine

Nagu juba märgitud, toetavad ja kasutavad suurettevõtted nurka ja reaktorit. Facebook, Instagram ja Whatsapp kasutavad seda oma lehtede jaoks. Google kasutab seda paljudes projektides: näiteks rakendati uus Adwordsi kasutajaliides rakendusega Angular & Dart. Vue teostab jällegi grupp inimesi, kelle tööd toetatakse Patreoni ja muude sponsorlusvõimaluste kaudu. Võite ise otsustada, kas see on positiivne või negatiivne. Matthias Götzke leiab, et Vue väike meeskond on eeliseks, kuna see viib puhtama ja vähem üle kujundatud koodi / API-ni.

Vaatame mõnda statistikat: Nurk loetleb oma meeskonna lehel 36 inimest, Vue nimekirjas on 16 inimest ja Reaktyel pole meeskonna lehte. Githubis on Angularil> 25 000 tähte ja 463 panustajat, Reaktyl on> 70 000 tähte ja> 1000 toetajat ning Vuel on peaaegu 60 000 tähte ja ainult 120 toetajat. Samuti saate vaadata Githubi tähtede ajalugu nurga, reageerimise ja väärtuse osas. Veelkord näib, et Vue trendib väga hästi. Portaali bestof.js andmetel on nurk 2 saanud viimase kolme kuu jooksul keskmiselt 31 tähte, React 74 tähte ja Vue.JS 107 tähte päevas.

Githubi tähtede ajalugu nurga, reaalaja ja väärtuse jaoks (allikas)

Värskendus: Tänu Paul Henschelile npm trendide väljatoomise eest. Need näitavad antud npm pakettide allalaadimiste arvu ja on veelgi kasulikumad kui Githubi tähtede pilk:

Npm allalaadimisnumbrid antud npm pakettide jaoks viimase 2 aasta jooksul.

1.3 Turu elutsükkel

Erinevate nimede ja versioonide tõttu on nurga, reageerimise ja väärtuse võrdlemist Google Trendsis raske. Üks viis lähenemiseks võiks olla otsing kategoorias “Internet ja tehnoloogiad”. Siin on tulemus:

Oh, noh. Vue ei loodud enne 2014. aastat - seega on siin midagi valesti. La Vue on prantsuse keeles “vaade”, “nägemine” või “arvamus”. Võib-olla on see nii. Ka „VueJS” ja „Nurgeline” või „React” pole võrdlus õiglane, kuna VueJS-il pole teistega võrreldes peaaegu mingeid tulemusi.

Proovime siis midagi muud. ThoughtWorksi tehnoloogiaradar annab hea mulje, kuidas tehnoloogiad aja jooksul arenevad. Redux on vastuvõtmise staadiumis (võetakse vastu projektides!) Ja see on olnud hindamatu paljudes ThoughtWorksi projektides. Vue.js on prooviversioonis (proovige järele!). Seda kirjeldatakse kui kerget ja paindlikku alternatiivi madalama õppimiskõveraga nurgale. Nurk 2 on hindamisetapis - seda kasutavad ThoughtWorki meeskonnad edukalt, kuid see pole veel tugev soovitus.

Viimase Stackoverflow 2017 uuringu kohaselt armastab Reakt 67% küsitletud arendajatest ja AngularJS 52%. “Pole huvi arendust jätkata” registreerib AngularJS-i (48%) ja Reaktsiooni (33%) kõrgemaid numbreid. Vue pole mõlemal juhul esikümnes. Siis on seal statejs.com uuring, kus võrreldakse esiotsa raamistikke. Kõige huvitavamad faktid: React ja Angular on 100% teadlikud ning 23% -l küsitletud inimestest pole Vue teada. Rahulolu osas hindas React 92% „kasutaks uuesti”, Vue 89% ja Nurk 2 ainult 65%.

Aga teine ​​klientide rahulolu küsitlus? Eric Elliott alustas seda 2016. aasta oktoobris, et hinnata nurka 2 ja reageerida. Ainult 38% küsitletud inimestest kasutaks uuesti nurka 2, samal ajal kui 84% kasutaks jälle Reakti.

1.4 Pikaajaline tugi ja ränne

React API-d on üsna stabiilsed, nagu Facebook väidab oma kujundamispõhimõtetes. Samuti on mõned skriptid, mis aitavad teil praeguselt API-lt uuemale üle minna: vaadake react-codemod. Rändamine on üsna lihtne ja sellist asja (vaja) nagu pikaajalise toe versioon pole olemas. Selles Redditi postituses märgivad inimesed, et versiooniuuendused polnud kunagi probleem. Reacti meeskond kirjutas oma versiooniskeemist blogipostituse. Kui nad lisavad amortisatsioonihoiatuse, säilitavad nad selle ülejäänud praeguse väljalaskeversiooni jaoks enne, kui käitumist muudetakse järgmises suuremas versioonis. Uue suurema versiooni osas muudatusi ei kavandata - v14 ilmus oktoobris 2015, v15 ilmus aprillis 2016 ja v16-l pole veel väljalaskekuupäeva. Uuendamine ei tohiks olla probleem, nagu hiljuti märkis Reaxi südamiku arendaja.

Seoses nurgaga on ajaveebi versiooniga alustamise ja vabastamise ajaveebi postitus, mis algab v2 versiooniga. Iga kuue kuu tagant toimub üks suurem uuendus ja vähemalt kuuekuuline amortisatsiooniperiood (kaks suurt väljaandmist). Dokumentatsioonis on märgitud mõned eksperimentaalsed API-liidesed, millel on lühemad amortisatsiooniperioodid. Ametlikku teadaannet veel pole, kuid vastavalt sellele artiklile on Angular meeskond teatanud pikaajalise tugiversiooni versioonist, mis algab tähega Angular 4. Neid toetatakse vähemalt ühe aasta jooksul pärast järgmise suurema versiooni väljaandmist. See tähendab, et nurka 4 toetatakse veaparanduste ja oluliste plaastritega vähemalt 2018. aasta septembrini. Enamikul juhtudel on nurga värskendamine v2-lt v4-le sama lihtne kui nurgasõltuvuste värskendamine. Nurk pakub ka juhiseid teabe saamiseks selle kohta, kas edasisi muudatusi on vaja teha.

Vue 1.x kuni 2.0 värskendusprotsess peaks väikese rakenduse jaoks olema lihtne - arendajate meeskond on kinnitanud, et 90% API-dest jäi samaks. Konsoolil töötab kena versiooniuuenduse diagnostika migratsiooni-abistaja tööriist. Üks arendaja märkis, et värskendus v1-lt v2-le polnud suures rakenduses ikka lõbus. Kahjuks pole selget (avalikku) tegevuskava järgmise suurema versiooni kohta ega teavet LTS-i versioonide plaanide kohta.

Veel üks asi: nurgeline on täielik raamistik ja pakub palju asju, mis on komplekteeritud. React on paindlikum kui nurgeline ja tõenäoliselt lõpetate tegevuse iseseisvamate, seadistamata ja kiiresti liikuvate raamatukogude abil - see tähendab, et peate vastavate värskenduste ja migreerimise eest ise hoolitsema. See võib kahjustada ka seda, kui teatud pakette enam ei hooldata või kui mõni muu pakett muutub mingil hetkel de facto standardiks.

1.5 Inimressursid ja värbamine

Kui teil on ettevõttesiseseid HTML-i arendajaid, kes ei soovi Javascripti kohta rohkem teada saada, peate parem valima Nurga või Vue. Reakt tähendab rohkem Javascripti (sellest räägime hiljem).

Kas teil on disainerid, kes töötavad koodi lähedal? Kasutaja “pier25” märgib Redditi kohta, et Reakt on mõttekas, kui töötate Facebookis, kus kõik on superkangelaste arendajad. Päris maailmas ei leia te alati disainerit, kes saaks JSX-i muuta - sellisena on HTML-mallidega töötamine palju lihtsam.

Nurgaraamistiku hea külg on see, et teise ettevõtte uus Angular 2 arendaja tutvub kiiresti kõigi nõutavate tavadega. Reaktiivsed projektid on arhitektuuriliste otsuste osas erinevad ja arendajad peavad konkreetse projekti seadistusega tutvuma.

Nurk on hea ka siis, kui teil on objektorienteeritud taustaga arendajaid või kellele Javascript ei meeldi. Selle punkti koju juhtimiseks on siin Mahesh Chandi tsitaat:

Ma ei ole JavaScripti arendaja. Minu taust on suuremahuliste ettevõttesüsteemide ehitamine, kasutades “päris” tarkvaraplatvorme. Alustasin 1997. aastal C, C ++, Pascal, Ada ja Fortrani abil rakenduste loomist. (…) Võin selgelt öelda, et JavaScript on minu jaoks lihtsalt hiiglaslik. Olles Microsofti MVP ja asjatundja, on mul TypeScripti kohta hea arusaam. Samuti ei näe ma Facebooki tarkvaraarendusettevõttena. Kuid Google ja Microsoft on juba suurimad tarkvarauuendajad. Mul on mugavam töötada koos tootega, millel on tugev Google ja Microsofti toetus. Ka (…) oma taustaga tean, et Microsoftil on TypeScripti jaoks veelgi suuremad plaanid.

Noh, siis… Peaksin vist mainima, et Mahesh on Microsofti piirkonnajuht.

2. Reaktsiooni, nurga ja väärtuse võrdlus

2.1 Komponendid

Kõik kõnealused raamistikud on komponendipõhised. Komponent saab sisendi ja pärast teatud sisemist käitumist / andmetöötlust tagastab ta väljundina renderdatud kasutajaliidese malli (sisselogimise / väljalogimise ala või ülesandeloendi element). Määratletud komponente peaks olema hõlbus veebisaidil või muude komponentide sees uuesti kasutada. Näiteks võib teil olla ruudukomponent (koosneb päisekomponendist ja mitmest reakomponendist), millel on mitmesugused atribuudid (veerud, päiseteave, andmeridad jne), ja saaksite komponenti teisel lehel erinevate andmekogumitega uuesti kasutada. Siin on põhjalik artikkel komponentide kohta, juhuks, kui soovite selle kohta rohkem teada saada.

Mõlemad reageerivad ja Vue on hämarate komponentide käsitlemisel suurepärased: väikesed kodakondsuseta funktsioonid, mis saavad sisendina ja väljundina tagastatavaid elemente.

2.2 Masinakiri vs ES6 ja ES5

React keskendub Javascript ES6 kasutamisele. Vue kasutab Javascripti ES5 või ES6.

Nurk tugineb TypeScriptile. See pakub rohkem sidusust seotud näidetes ja avatud lähtekoodiga projektides (reaalsed näited leiate kas ES5 või ES6). See tutvustab ka mõisteid nagu dekoraatorid ja staatilised tüübid. Staatilised tüübid on kasulikud koodide luureriistade jaoks, nagu automaatne taasreaktor, definitsioonidele üleminek jne - need peaksid ka vähendama rakenduses esinevate vigade arvu. Ehkki selle teema osas pole kindlasti konsensust. Eric Elliott ei nõustu oma artiklis “Staatiliste tüüpide šokeeriv saladus”. Daniel C Wang ütleb, et staatiliste tüüpide kasutamise kulud ei kahjusta ning et on hea, kui kasutatakse nii testipõhist arendamist (TDD) kui ka staatilist tippimist.

Tõenäoliselt peaksite ka teadma, et saate kasutada voolu, et lubada tüübikontroll Reaktis. See on staatiline tüübikontroll, mille on välja töötanud Facebook JavaScripti jaoks. Voolu saab integreerida ka VueJS-i.

Kui kirjutate oma koodi TypeScriptis, ei kirjuta te enam standardset JavaScripti. Vaatamata sellele, et TypeScriptil kasvab, on kogu JavaScripti keelega võrreldes endiselt väike kasutajaskond. Üks oht võib olla, et liigute vales suunas, sest TypeScript võib - ehkki ebatõenäoline, et see ka on - aja jooksul ka kaduda. Lisaks lisab TypeScript projektidele palju (õppimis) lisakulusid - selle kohta saate rohkem lugeda Eric Elliotti võrdlusest nurgas 2 vs React.

2.3 Mallid - JSX või HTML

Reageerige pausidele pikaajaliste parimate tavadega. Aastakümneid üritasid arendajad eraldada kasutajaliidese malle ja lisada Javascripti loogikat, kuid JSX-iga segatakse need uuesti. See võib kõlada kohutavalt, kuid peaksite kuulama Peter Hunti juttu “Reageeri: parimate tavade ümbermõtestamine” (oktoober 2013). Ta juhib tähelepanu sellele, et mallide ja loogika eraldamine on lihtsalt tehnoloogiate, mitte mure eraldamine. Peaksite mallide asemel komponendid üles ehitama. Komponendid on korduvkasutatavad, kompostitavad ja ühtesobitavad.

JSX on valikuline eeltöötleja HTML-laadse süntaksi jaoks, mis hiljem Javascripti kompileeritakse. Sellel on veidraid külgi - näiteks peate klassi asemel kasutama klassiName, sest viimane on Javascriptis kaitstud nimi. JSX on arengu jaoks suur eelis, kuna teil on kõik ühes kohas ning koodide täitmine ja kompileerimise aja kontrollid töötavad paremini. Kui teete JSXis trükiviga, siis React ei kompileeri ja see prindib välja rea ​​numbri, kus trükiviga ilmnes. Nurk 2 ebaõnnestub töö ajal vaikselt (see argument on ilmselt kehtetu, kui kasutate AOT nurga all).

JSX tähendab, et kõik Reakt on Javascript - seda kasutatakse nii JSX-i mallide kui ka loogika jaoks. Cory House osutab sellele oma 2016. aasta jaanuari artiklis: “Nurk 2 jätkab JS-i HTML-i lisamist. Reakt paneb JS-i HTML-i. ”. See on hea asi, sest Javascript on HTML-ist võimsam.

Nurga malle täiustatakse HTML-iga spetsiaalse nurgakeelega (näiteks ngIf või ngFor). Kuigi React nõuab JavaScripti tundmist, sunnib Angular teid õppima nurgapõhist süntaksit.

Vue sisaldab “ühe faili komponente”. See näib murede lahutamise kompromissina - mallid, skriptid ja stiilid on ühes failis, kuid kolmes erinevas, järjestatud jaotises. See tähendab, et saate süntaksi esiletõstmise, CSS-i toe ja eeltöötlejate, nagu Jade või SCSS, hõlpsamat kasutamist. Olen teistes artiklites lugenud, et JSX-i on silumiseks kergem, kuna Vue ei näita halbu HTML-i süntaksivigu. See ei vasta tõele, kuna Vue teisendab HTML-i renderdamisfunktsioonideks - seega kuvatakse vead probleemideta (tänud Vinicius Reisile kommentaaride ja paranduste eest!).

Külgmärkus: Kui teile meeldib JSX-i idee ja soovite seda kasutada Vue'is, võite kasutada faili babel-plugin-transform-vue-jsx.

2.4 Raamistik vs raamatukogu

Nurgeline on pigem raamistik kui raamatukogu, kuna pakub tugevaid arvamusi selle kohta, kuidas teie rakendus peaks üles ehitama, ja sellel on ka rohkem funktsioone. Nurga all on tegemist "terviklahendusega" - kaasas on patareid ja need on teile meeldivaks käivitamiseks valmis. Te ei pea analüüsima raamatukogusid, marsruutimislahendusi vms - võite lihtsalt tööle asuda.

React ja Vue on seevastu universaalselt paindlikud. Nende raamatukogusid saab siduda igasuguste pakettidega (npm-il on Reacti jaoks üsna palju, kuid Vuel on vähem pakette, kuna see on endiselt üsna noor). Reaketi abil saate isegi raamatukogu ise vahetada API-ühilduvate alternatiivide vastu, näiteks Inferno. Suure paindlikkusega kaasneb aga suur vastutus - Reactiga pole mingeid reegleid ja piiratud juhiseid. Iga projekti jaoks on vaja otsustada oma arhitektuuri üle ja asjad võivad kergemini valesti minna.

Nurk, teiselt poolt, on segane pesa ehitustööriistu, katla, plaatide ja aeg-valamud tegeleda. See kehtib ka reaktori kohta, kui kasutatakse stardikomplekte või katlaplaate. Nad on loomulikult väga abivalmid, kuid React töötab välja ja ilmselt peaksite seda õppima. Mõnikord nimetatakse Javascripti keskkonnas töötamiseks vajalikke tööriistu mitmesuguseks kui Javascripti väsimust. Selle kohta on artikkel, mille autor on Eric Clemmons, kellel on see öelda:

Ikka on hunnik installitud tööriistu, millega te pole harjunud, alustades raamistikust. Need luuakse, kuid tõenäoliselt ei saa paljud arendajad aru, mis kapoti all toimub - või võtab nende tegemine palju aega.

Vue näib kolmest raamistikust puhtaim ja kergem. GitLabil on ajakohastatud veebisaidi Vue.js (oktoober 2016) kohta tehtud blogipostitus:

Vue.js on täiuslikult tasakaalus selle vahel, mida see teie jaoks teeb ja mida peate ise tegema. (…) Vue.js on alati käeulatuses, vastupidav, kuid paindlik turvavõrk, mis aitab teil hoida programmeerimist tõhusana ja teie DOM-i põhjustatud kannatused minimaalseks.

Neile meeldib lihtsus ja kasutusmugavus - lähtekood on väga loetav ning pole vaja dokumentatsiooni ega väliseid teeke. Kõik on väga sirgjooneline. Vue.js “ei tee ka suure osas kõige kohta suuri eeldusi”. GitLabi otsuse kohta on ka netisaade.

Veel üks ajaveebi postitus Vue poole liikumise kohta pärineb Pixeljetsilt. Reakt “oli JS-i maailmale riigiteadlikkuse osas suur samm edasi ja see näitas paljudele inimestele heal ja praktilisel viisil tõelist funktsionaalset programmeerimist”. React vs. Vue üks suuri miinuseid on JSX-i piirangute tõttu komponentide väiksemateks osadeks jagamise probleem. Siin on tsitaat artiklist:

Minu ja minu meeskonna jaoks on koodi loetavus oluline, kuid siiski on väga oluline, et koodi kirjutamine oleks lõbus. 6 komponendi loomine ei ole naljakas, kui rakendate tõesti lihtsat kalkulaatori vidinat. Paljudel juhtudel on see halb ka mõne vidina hooldamise, muutmise või visuaalse kapitaalremondi osas, kuna peate hüppama mitme faili / funktsiooni ümber ja kontrollima HTML-i iga väikest tükki eraldi. Jällegi, ma ei soovita kirjutada monoliite - soovitan kasutada igapäevaseks arendamiseks mikrokomponentide asemel komponente.

Hackeri uudiste ja Redditi ajaveebi postituse üle on huvitavad arutelud - leidub argumente nii teisitimõtlejatelt kui ka teistelt Vue toetajatelt.

2.5 Riigihaldus ja andmete sidumine

Kasutajaliideste loomine on keeruline, kuna kõikjal on olekud - aja jooksul muutuvad andmed on keerukad. Riigi määratletud töövood on suureks abiks rakenduste kasvades ja keerukamaks muutumisel. Piiratud rakenduste puhul on see ilmselt liiga suur ja piisab ka Vanilla JS-i taolisest.

Kuidas see töötab? Komponendid kirjeldavad kasutajaliidest igal ajahetkel. Andmete muutumisel muudab raamistik kogu kasutajaliidese komponendi - kuvatud andmed on alati ajakohased. Seda mõistet võime nimetada kasutajaliidese funktsiooniks.

React töötab sageli koos Reduxiga. Redux kirjeldab ennast kolmel põhiprintsiibil:

  • Üks tõeallikas
  • Olek on kirjutuskaitstud
  • Muudatused tehakse puhaste funktsioonidega

Teisisõnu: täieliku rakenduse olekut hoitakse ühe poe objektipuus. See aitab rakenduse silumist ja mõnda funktsionaalsust on lihtsam rakendada. Seisund on kirjutuskaitstud ja seda saab muuta ainult toimingute abil, et vältida võistlustingimusi (see aitab ka silumist). Reduktorid kirjutatakse täpsustamaks, kuidas olekuid toimingute abil saab muuta.

Enamikul õppematerjalidest ja katlamajadest on Redux juba integreeritud, kuid saate Reakti ilma selleta kasutada (ja te ei pruugi Reduxit oma projektis üldse vaja minna). Redux tutvustab teie koodis keerukust ja üsna tugevaid piiranguid. Kui te õpite reaalajas, peaksite enne Reduxi suunamist mõtlema tavalise reageerimise õppimisele. Kindlasti peaksite lugema Dan Abramovi “Võib-olla te ei vaja Reduxit”.

Mõned arendajad soovitavad Reduxi asemel kasutada Mobxi. Võite mõelda sellele kui „automaatsele Reduxile“, mis muudab asja kohe alguses hõlpsamaks kasutamiseks ja mõistmiseks. Kui soovite vaadata, peaksite alustama sissejuhatusest. Samuti saate lugeda seda kasulikku Robini võrdlust Reduxi ja MobXi vahel. Sama autor pakub teavet ka Reduxilt MobXile kolimise kohta. See loend on kasulik, kui soovite kontrollida teisi Fluxi teeke. Ja kui olete pärit MVC-maailmast, peate lugema Mihhail Levkovsky artiklit „Mõtlemine Reduxis (kui kõik, mida te olete teada saanud, on MVC)“.

Vue võib Reduxit kasutada - kuid see pakub Vuexi oma lahendusena.

Suur erinevus Reaketi ja nurga vahel on ühesuunaline ja kahesuunaline sidumine. Nurga kahesuunaline sidumine muudab mudeli olekut, kui kasutajaliidese elementi (nt kasutaja sisestust) värskendatakse. Reakt läheb ainult ühel viisil: see värskendab kõigepealt mudelit ja seejärel renderdab kasutajaliidese elemendi. Nurga meetod on koodis puhtam ja arendajal lihtsam seda rakendada. Reacti viisil saadakse parem ülevaade andmetest, kuna andmed voolavad ainult ühes suunas (see teeb silumise lihtsamaks).

Mõlemal kontseptsioonil on plusse ja miinuseid. Peate mõistma mõisteid ja otsustama, kas see mõjutab teie raamotsust. Artikkel „Kahesuunaline andmete sidumine: nurk 2 ja reageerimine“ ning see Stackoverflow küsimus pakuvad head selgitust. Siit leiate mõned interaktiivsed koodinäited (3-aastased, ainult nurga 1 ja reaalaja jaoks). Ja last but not least, Vue toetab nii ühesuunalist kui kahesuunalist köitmist (vaikimisi ühesuunaline).

Kui soovite lähemalt lugeda, on nurgeliste rakenduste eri tüüpi olekute ja osariigihalduse kohta pikk artikkel (autor Victor Savkin).

2.6 Muud programmeerimiskontseptsioonid

Nurk sisaldab sõltuvuse süstimist, mustrit, milles üks objekt tarnib sõltuvused (teenus) teisele objektile (kliendile). See toob kaasa suurema paindlikkuse ja puhtama koodi. Artikkel “Sõltuvuse süstimise mõistmine” selgitab seda mõistet detailsemalt.

Mudeli-vaate-kontrolleri muster (MVC) jagab projekti kolmeks komponendiks: mudel, vaade ja kontroller. Nurga all kui MVC-raamistik on MVC karbist väljas. Reagendil on ainult V - peate M ja C ise lahendama.

2.7 Paindlikkus ja mikroteenuste vähendamine

Saate töötada Reakti või Vue-ga, kui lisate lähtekoodile lihtsalt Javascripti teegi. See pole nurga korral Typecripti kasutamise tõttu võimalik.

Liigume nüüd rohkem mikroteenuste ja mikrorakenduste poole. Reaktsioon ja Vue võimaldavad teil rakenduse suurust rohkem kontrollida, valides ainult need asjad, mis on tõesti vajalikud. Need pakuvad suuremat paindlikkust SPA-lt mikroteenustele üleminekuks, kasutades endise rakenduse osi. Nurgakujundus sobib kõige paremini SPA jaoks, kuna see on mikroteenuste kasutamiseks tõenäoliselt liiga ülespuhutud.

Nagu Cory House märgib:

JavaScript liigub kiiresti ja React võimaldab teil oma rakenduse väikesed tükid paremate raamatukogude jaoks välja vahetada, selle asemel et oodata ja loota, et teie raamistik saab uuendusi. Väikeste, komposteeritavate ja üheotstarbeliste tööriistade filosoofia ei lähe kunagi stiilist välja.

Mõned inimesed kasutavad Reaktorit ka mitte-SPA-veebisaitide jaoks (nt keerukate vormide või võlurite jaoks). Isegi Facebook kasutab Reaktorit - mitte avalehe, vaid konkreetsete lehtede ja funktsioonide jaoks.

2.8 Suurus ja jõudlus

Kogu funktsionaalsusel on külg külg: nurgaraam on üsna ülespuhutud. Gzipitud faili suurus on 143 k, võrreldes 23 kB-ga Vue ja 43 kt-ga Reactiga.

Reakt ja Vue omavad mõlemad virtuaalset DOM-i, mis peaks jõudlust parandama. Kui olete sellest huvitatud, saate lugeda virtuaalse DOM-i ja DOM-i erinevuste ning virtuaalse DOM-i tegelike eeliste kohta saidil react.js. Ka üks Virtual-DOMi autoritest vastab ise jõudlusega seotud küsimusele Stackoverflow kohta.

Etenduse kontrollimiseks vaatasin läbi suurepärase js-framework-benchmarki. Saate selle ise alla laadida ja käivitada või vaadata interaktiivset tulemustabelit. Enne tulemuste kontrollimist peaksite teadma, et raamistikud petavad võrdlusaluseid - sellist toimivuskontrolli ei tohiks otsuste tegemisel kasutada.

Nurga, reageerimise ja väärtuse jõudlusMälu eraldamine MB-des

Kokkuvõtteks: Vue on suurepärase jõudlusega ja sügavaima mälumahuga, kuid võrreldes kõigi eriti aeglaste või kiirete raamidega (nagu Inferno), on need raamid üksteisega üsna lähedal. Veelkord: tulemuslikkuse võrdlusaluseid tuleks käsitleda ainult kõrvalmärkusena, mitte kohtuotsusena.

2.9 Testimine

Facebook kasutab Jestti oma React koodi testimiseks. Siin on Jesti ja Mocha võrdlus - ja seal on artikkel, kuidas kasutada ensüümi koos Mochaga. Ensüüm on JavaScripti testimise utiliit, mida kasutatakse Airbnb-l (koos Jesti, Karma ja teiste testjooksjatega). Kui soovite rohkem lugeda, on mõned vanemad artiklid testimise kohta Reaktis (siin ja siin).

Siis on nurgas 2 Jasmine kui testimisraamistik. Eric Elliotti artikkel on kõlanud. Jasmine ütleb, et testide ja väidete kirjutamiseks on vaja miljoneid viise, kuna neid tuleb hoolikalt lugeda, et aru saada, mida see teeb. Väljund on ka väga ülespuhutud ja vaevarikas lugeda. Nurga 2 integreerimisest Karma ja Mochaga on mõned informatiivsed artiklid. Siin on vana video (aastast 2015) testimisstrateegiate kohta nurga 2 abil.

Vuel puuduvad testimisjuhised, kuid Evan kirjutas oma 2017. aasta eelvaates, et meeskond plaanib selle kallal töötada. Nad soovitavad kasutada Karmat. Vue töötab koos Jestiga ja testi utiliidina on ka avoriaz.

2.10 Universaalsed ja looduslikud rakendused

Universaalsed rakendused tutvustavad rakendusi ka veebi, töölauale ja looduslike rakenduste maailma.

Mõlemad, nii reageerimine kui ka nurk, toetavad looduslikku arengut. Nurgal on NativeScript (taustaks Telerik) loomulike rakenduste jaoks ja Ionic Framework hübriidrakenduste jaoks. Reaketi abil saate vaadata react-native-renderdajat, et luua platvormidevahelisi iOS- ja Androidi-rakendusi, või reaalajas olevate rakenduste jaoks. Paljud rakendused (sealhulgas Facebook; lisateavet leiate Showcase-ist) on loodud reageeriva emakeelega.

Javascripti raamistikud renderdavad kliendi lehed. See mõjutab halvasti tajutavat jõudlust, üldist kasutajakogemust ja SEO-d. Serveripoolne eel Renderdamine on pluss. Kõigil kolmel raamistikul on raamatukogud, et selles abi leida. Reaketi jaoks on olemas järgmine.js, Vue-l on nuxt.js ja nurgel on… .Nurga universaalne.

2.11 Õppimiskõver

Nurga jaoks on kindlasti järsk õppimiskõver. Sellel on põhjalik dokumentatsioon, kuid mõnikord võite end sellest pettuda, sest asjad on keerulisemad kui nad kõlavad. Isegi kui teil on Javascripti sügav mõistmine, peate õppima, mis raamistiku kapoti all toimub. Seadistamine on alguses maagiline ning see pakub palju kaasatud pakette ja koodi. Seda võib pidada negatiivseks, kuna seal on olemas suur olemasolev ökosüsteem, mida peate aja jooksul õppima. Teisest küljest võib see antud olukorras hea olla, sest palju otsuseid on juba tehtud. Reaketiga peate tõenäoliselt tegema palju kolmandate osapoolte raamatukogudega seotud otsuseid. Riigihalduseks on 16 erinevat rämpspaketti, millest ainuüksi Reacti vahel valida.

Vue on üsna lihtne õppida. Ettevõtted lähevad üle Vue-le, kuna noorematele arendajatele näib see olevat palju lihtsam. Siit saate lugeda kellegi kohta, kes kirjeldab tema meeskonna liikumist nurga alt Vue poole. Teise kasutaja sõnul oli tema ettevõttes olev Reaxi rakendus nii keeruline, et uus arendaja ei suutnud koodiga sammu pidada. Vue abil kahaneb lõhe nooremate ja vanemate arendajate vahel ning nad saavad teha hõlpsamat koostööd ning vähem vigu, probleeme ja arenemisaega.

Mõned inimesed väidavad, et asjad, mida nad on Reaktis teinud, oleks parem kirjutatud Vees. Kui olete kogenematu Javascripti arendaja - või kui töötasite viimasel kümnendil peamiselt jQuery abil -, peaksite mõtlema Vue kasutamisele. Paradigma nihe on Reacti poole liikudes selgem. Vue näeb rohkem välja nagu tavaline Javascript, tutvustades samal ajal ka uusi ideid: komponente, sündmuspõhist mudelit ja ühesuunalist andmevoogu. Sellel on ka väike jalajälg.

Samal ajal on Nurgal ja Reaktil oma toimimisviis. Nad võivad teie poole pääseda, sest peate oma tava kohandama, et asjad toimiksid nende viisil. See võib olla kahjulik, kuna olete vähem paindlik ja õppimiskõver on järsem. Sellest võiks kasu olla ka seetõttu, et olete tehnoloogia õppimise ajal sunnitud õppima õigeid kontseptsioone. Vue abil saate teha asju vanas Javascripti moodi. See võib alguses olla lihtsam, kuid pikaajaliselt võib probleemiks muutuda, kui asju ei tehta korralikult.

Silumisel on pluss see, et Reakt ja Vue on vähem võluväel. Vigade jahtimine on lihtsam, kuna otsimiskohti on vähem ja pinujälgedel on parem eristada oma ja raamatukogu koodi. Reaketiga töötavad inimesed teatavad, et nad ei pea kunagi raamatukogu lähtekoodi lugema. Nurgarakenduse silumisel peate selle aluseks oleva mudeli mõistmiseks sageli siiski nurga sisemisi siluma. Heledamalt vaadates peaksid veateated olema selgemad ja informatiivsemad, alustades nurgaga 4.

2.12 Kapoti all nurk, reageerimine ja Vue

Kas soovite ise lähtekoodi kontrollida? Kas soovite näha, kuidas asjad tunnevad?

Tõenäoliselt soovite kõigepealt uurida Githubi hoidlaid: React (github.com/facebook/react), Angular (github.com/angular/angular) ja Vue (github.com/vuejs/vue)

Kuidas süntaks välja näeb? ValueCoders võrdleb nurkade, reageerimise ja väärtuse süntaksi.

Samuti on hea näha asju tootmises - koos aluseks oleva lähtekoodiga. TodoMVC loetleb kümmekond sama Todo rakendust, mis on kirjutatud erinevate Javascripti raamistikega - saate võrrelda nurga-, reaktand- ja vuelahendusi. RealWorld loob reaalmaailma rakenduse (keskmise klooni) ja neil on valmis lahendused nii nurga (4+) kui ka React (koos Reduxiga) jaoks. Vue on pooleliolev töö.

Leidub ka reaalainete rakendusi, mida võiksite vaadata. Siin on lahendused Reacti jaoks:

  • Tee (kena reaalainete märkmete haldamise rakendus, mis on loodud koos React & Reduxiga)
  • sound-redux (React & Reduxiga loodud Soundcloudi klient)
  • Brainfock (Reactiga loodud projekti- ja meeskonnahalduslahendus)
  • reageeri-hn ja reageeri-uudised (häkkerite uudiste kloonid)
  • react-native-whatsapp-ui + juhendaja (Whatsapp-kloon koos react-native-ga)
  • fööniks-trello (Trello kloon)
  • slack-kloon + veel üks õpetus (slack kloonid)

Nurga jaoks on mõned rakendused:

  • angular2-hn & hn-ng2 (Hacker Newsi kloonid + Ashwini Sureshkumari tore juhendamine uue loomise kohta)
  • Redux-and-angle-2 (Twitteri kloon)

Vue jaoks on olemas ka lahendused:

  • vue-hackernews-2.0 ja Loopa uudised (Hacker Newsi kloonid)
  • vue-soundcloud (Soundcloudi demo)

Järeldus

Otsustage nüüd raamistik

React, Angular ja Vue on kõik üsna lahedad ja ükski neist ei seisa teistest selgelt kõrgemal. Usaldage oma soolestiku tunnet. See viimane meelelahutuslik küünilisus võib teie otsust aidata:

Räpane väike saladus on see, et kõige kaasaegsem JavaScripti arendus pole midagi pistmist veebisaitide loomisega - see on ehituspakett, mida saavad kasutada inimesed, kes ehitavad raamatukogusid, mida saavad kasutada inimesed, kes loovad raamistikke, inimesed, kes kirjutavad õpetusi ja õpetavad kursusi saab õpetada. Ma pole kindel, kas keegi tegelikult midagi tegelikku loob, et kasutajad saaksid suhelda.

See on muidugi liialdus, kuid selles on ilmselt ka tõde. Jah, Javascripti ökosüsteemis on palju suminat. Otsingu ajal leiate tõenäoliselt palju muid atraktiivseid alternatiive - proovige end mitte pimestada uusimast, kõige säravamast raamistikust.

Mida ma peaksin valima?

Kui töötate Google'is: nurgeline

Kui teile meeldib TypeScript: Angular (või React)

Kui teile meeldib objektorienteeritud programmeerimine (OOP): Nurga all

Kui vajate juhendamist, ülesehitust ja abikätt: Nurga all

Kui töötate Facebookis: reageerige

Kui teile meeldib paindlikkus: reageerige

Kui teile meeldivad suured ökosüsteemid: reageerige

Kui teile meeldib valida kümnete pakendite hulgast: reageerige

Kui teile meeldib JS ja “kõik-on-Javascripti-lähenemine”: reageerige

Kui teile meeldib tõesti puhas kood: Vue

Kui soovite lihtsamat õppimiskõverat: Vue

Kui soovite kõige kergemat raamistikku: Vue

Kui soovite murede eraldamist ühes failis: Vue

Kui töötate üksi või kui teil on väike meeskond: Vue (või React)

Kui teie rakendus kipub muutuma tõesti suureks: nurgeline (või reageerige)

Kui soovite luua rakenduse, millel on pärismaatiline reageerimine: reageerige

Kui soovite, et basseinis oleks palju arendajaid: nurgeline või reageerige

Kui teete koostööd disaineritega ja vajate puhtaid HTML-faile: Nurgeline või Vue

Kui teile meeldib Vue, kuid kardate piiratud ökosüsteemi: reageerige

Kui te ei saa otsustada, õppige kõigepealt reageerima, siis Vue ja siis nurgeline.

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