Kulma vs. reagointi vs. vue - vertailu

Verkkosovelluksesi JavaScript-kehyksen valinta voi olla hienoa. Kulma ja reagointi ovat erittäin suosittuja näinä päivinä, ja siellä on nousu, joka on saanut paljon pitoa viime aikoina: VueJS. Lisäksi nämä ovat vain muutamia ryhmän uusista lapsista.

Javascripts in 2017 - asiat eivät ole helppoa nykyään!

Joten miten meidän pitäisi päättää?

Ennen kuin aloitamme - SPA vai ei?

Sinun on ensin tehtävä selkeä päätös siitä, tarvitsetko yhden sivun sovellusta (SPA) vai haluatko mieluummin käyttää monisivuista lähestymistapaa.

Aloittelijat tänään: Kulma, React ja Vue

Ensinnäkin haluamme keskustella elinkaaren ja strategisista näkökohdista. Sitten siirrymme kolmen javascript-kehyksen ominaisuuksiin ja käsitteisiin. Lopuksi teemme lopputuloksen.

Tässä on kysymyksiä, joihin vastaamme tänään:

  • Kuinka kypsät ovat puitteet / kirjastot?
  • Ovatko kehykset todennäköisesti olemassa jonkin aikaa?
  • Kuinka laaja ja avulias ovat heidän vastaavat yhteisöt?
  • Kuinka helppoa on löytää kehittäjät jokaiselle kehykselle?
  • Mitkä ovat kehysten perusohjelmointikäsitteet?
  • Kuinka helppoa on käyttää puitteita pieniin tai suuriin sovelluksiin?
  • Miltä oppimiskäyrä näyttää jokaiselta kehykseltä?
  • Millaista esitystä voit odottaa kehyksistä?
  • Missä voit tutustua tarkemmin konepellin alle?
  • Kuinka voit aloittaa kehittämisen valitulla kehyksellä?

1. Elinkaari ja strategiset näkökohdat

1.1 Jotkut historiasta

Angular on TypeScript-pohjainen Javascript-kehys. Googlen kehittämä ja ylläpitämä kuvataan nimellä "Superheroic JavaScript MVWFramework". Kulmikas (myös ”Angular 2+”, “Angular 2” tai “ng2”) on uudelleen kirjoitettu, enimmäkseen yhteensopimaton AngularJS-seuraaja (myös “Angular.js” tai “AngularJS 1.x”). Vaikka AngularJS (vanha) julkaistiin alun perin lokakuussa 2010, se on edelleen saamassa virhekorjauksia jne. - uusi Angular (sans JS) esiteltiin syyskuussa 2016 versiona 2. Uusin pääjulkaisu on versio 4, kuten versio 3 ohitettiin. Kulmaa käyttävät Google, Wix, weather.com, healthcare.gov ja Forbes (madewithangular, stackshare ja libscore.com mukaan).

Reaktia kuvataan ”JavaScript-kirjastoksi käyttöliittymien rakentamiseksi”. Alun perin maaliskuussa 2013 julkaistu React kehitettiin ja sitä ylläpitää Facebook, joka käyttää React-komponentteja useilla sivuilla (ei kuitenkaan yhden sivun sovellus). Chris Cordlen tämän artikkelin mukaan Reaktia käytetään paljon enemmän Facebookissa kuin Angulara Googlessa. Reaktia käyttävät myös Airbnb, Uber, Netflix, Twitter, Pinterest, Reddit, Udemy, Wix, Paypal, Imgur, Feedly, Stripe, Tumblr, Walmart ja muut (Facebookin, stackshare ja libscore.com mukaan).

Facebook työskentelee React Fiberin julkaisun parissa. Se muuttaa reagointia konepellin alla - renderöinnin odotetaan olevan paljon nopeampaa seurauksena - mutta asiat ovat taaksepäin yhteensopivia muutosten jälkeen. Facebook puhui muutoksista huhtikuussa 2017 pidetyssä kehittäjäkonferenssissa, ja julkaistiin epävirallinen artikkeli uudesta arkkitehtuurista. React Fiber julkaistiin React 16: n mukana syyskuussa 2017.

Vue on yksi nopeimmin kasvavista JS-kehyksistä vuonna 2016. Vue kuvaa itseään "intuitiiviseksi, nopeaksi ja kompostoitavaksi MVVM: ksi interaktiivisten rajapintojen rakentamiseksi." Sen julkaisi ensimmäisen kerran helmikuussa 2014 entinen Googlen työntekijä Evan You (BTW: Evan kirjoitti mielenkiintoisen blogitekstin markkinointitoiminnoista ja numeroista ensimmäisen viikon aikana tuolloin). Se on ollut menestys, varsinkin kun Vue saa niin paljon pitoa kuin yhden miehen näyttely ilman suuryrityksen tukea. Evanilla on tällä hetkellä kymmenkunta ydinkehittäjää. Vuonna 2016 julkaistiin versio 2. Vue-ohjelmaa käyttävät Alibaba, Baidu, Expedia, Nintendo, GitLab - luettelo pienemmistä projekteista löytyy madewithvuejs.com-sivustosta.

Kaikki kolme kehystä ovat saatavana MIT-lisenssillä.

React toimitetaan erityisellä BSD3-lisenssitiedostolla syyskuuhun 2017 saakka. Patenttitiedostosta keskusteltiin paljon. Jos olet kiinnostunut tämän historiasta, voit lukea tämän Github-lehden keskustelun, patenttitiedoston syyt ja historian (ex-Facebook-insinööri James Ide). Miksi sinun ei pitäisi pelätä (Dennis Walsh), varoitus käytön aloittamiseen (kirjoittanut Raúl Kripalani) ja Facebookin entinen lausunto tästä aiheesta: Selitetään Reaktin lisenssi. Joka tapauksessa - kaikilla ei pitäisi olla enää merkitystä, koska Facebook lopulta ilmoitti, että React saa MIT-lisenssin.

1.2 Ydinkehitys

Kuten jo todettiin, suuret yritykset tukevat ja käyttävät Angular- ja React-järjestelmiä. Facebook, Instagram ja Whatsapp käyttävät sitä sivuilleen. Google käyttää sitä monissa projekteissa: esimerkiksi uusi Adwords-käyttöliittymä otettiin käyttöön Angular & Dart -sovelluksella. Vue toteutetaan jälleen ryhmässä henkilöitä, joiden työtä tuetaan Patreonin ja muiden sponsorointimenetelmien kautta. Voit päättää itse, onko tämä positiivinen vai negatiivinen. Matthias Götzke uskoo, että Vue: n pieni joukkue on hyöty, koska se johtaa puhtaampaan ja vähemmän ylimitoitettuun koodiin / sovellusliittymään.

Katsotaanpa joitain tilastoja: Kulmiluettelo sisältää 36 ihmistä joukkueissivulla, Vue luetteloi 16 henkilöä ja Reaktilla ei ole joukkuesivua. Githubissa Angularilla on> 25 000 tähteä ja 463 avustajaa, Reaktalla on> 70 000 tähteä ja> 1 000 avustajaa, ja Vueella on melkein 60 000 tähteä ja vain 120 avustajaa. Voit myös tarkistaa Github Stars -historiassa kulman, reagoinnin ja arvon. Jälleen kerran, Vue näyttää treenevän erittäin hyvin. Bestof.js: n mukaan kulma 3 on viimeisen kolmen kuukauden aikana saanut keskimäärin 31 tähteä päivässä, React 74 tähteä ja Vue.JS 107 tähteä päivässä.

Github-tähtien historia kulmalle, reagoinnille ja arvolle (lähde)

Päivitys: Kiitos Paul Henschelille, joka osoitti npm-trendit. Ne osoittavat annettujen npm-pakettien latausten lukumäärän ja ovat vielä hyödyllisempiä pelkkänä katsauksena Github-tähtiin:

Npm-latausnumerot tietyille npm-paketeille viimeisen kahden vuoden aikana.

1.3 Markkinoiden elinkaari

Google Trends -sovelluksen kulma-, reagointi- ja arvotavoitteita on vaikea verrata eri nimien ja versioiden vuoksi. Yksi tapa arvioida voisi olla haku kategoriasta “Internet ja tekniikat”. Tässä on tulos:

Noh. Vue ei luotu ennen vuotta 2014 - joten jotain on väärin. La Vue on ranskaksi ilmaisu ”näkymä”, “näky” tai “mielipide”. Ehkä se on se. Myöskään “VueJS”: n ja “Angular”: n tai “React” -vertailun vertailu ei ole oikeudenmukaista, koska VueJS: llä on tuskin tuloksia muihin verrattuna.

Kokeillaan sitten jotain muuta. ThoughtWorksin teknologiatutka antaa hyvän kuvan siitä, kuinka tekniikka kehittyy ajan myötä. Redux on hyväksymisvaiheessa (otetaan käyttöön hankkeissa!), Ja se on ollut korvaamaton useissa ThoughtWorks-projekteissa. Vue.js on kokeiluvaiheessa (kokeile!). Sitä kuvataan kevyeksi ja joustavaksi vaihtoehdoksi kulmalle, jolla on alempi oppimiskäyrä. Kulma 2 on arviointivaiheessa - ThoughtWork-joukkueet käyttävät sitä onnistuneesti, mutta ei vielä vahvaa suositusta.

Viimeisen Stackoverflow 2017 -tutkimuksen mukaan 67% tutkituista kehittäjistä rakastaa Reaktia ja 52% AngularJS: ää. ”Ei kiinnostusta jatkaa kehittämistä” rekisteröi korkeammat luvut AngularJS: lle (48%) vs. Reaktille (33%). Vue ei ole kymmenessä parhaassa. Sitten on statejs.com-tutkimus, jossa verrataan ”käyttöliittymäkehyksiä”. Mielenkiintoisimmat tosiasiat: React ja Angular ovat 100% tietoisia, ja Vue ei ole tiedossa 23%: lle tutkituista. Tyytyväisyyden suhteen React sai 92%: sta “käyttäisi uudelleen”, Vue 89% ja Kulma 2 vain 65%.

Entä toinen asiakastyytyväisyyskysely? Eric Elliott aloitti yhden lokakuussa 2016 arvioimaan kulma 2 ja reagoida. Vain 38% tutkituista ihmisistä käyttäisi uudelleen kulma 2: ta, kun taas 84% ​​käyttäisi taas Reaktiota.

1.4 Pitkäaikainen tuki ja muuttoliikkeet

React-sovellusliittymät ovat melko vakaita, kuten Facebook toteaa suunnitteluperiaatteissaan. On myös joitain komentosarjoja, joiden avulla voit siirtyä nykyiseltä sovellusliittymältä uudempaan: tarkista react-codemod. Siirtyminen on melko helppoa, eikä sellaista asiaa (tarvita) kuin pitkäaikaisen tuen versio ole. Tässä Reddit-viestissä ihmiset huomauttavat, että päivitykset eivät koskaan olleet ongelma. React-tiimi kirjoitti blogiviestin heidän versiointisuunnitelmastaan. Kun he lisäävät poistovaroituksen, he säilyttävät sen jäljellä olevan nykyisen julkaisuversion ennen käyttäytymisen muuttamista seuraavassa pääversiossa. Uuteen pääversioon ei ole suunniteltu muutosta - v14 julkaistiin lokakuussa 2015, v15 julkaistiin huhtikuussa 2016, ja v16: lla ei ole vielä julkaisupäivää. Päivitys ei saisi olla ongelma, kuten React-ydinkehittäjä äskettäin huomautti.

Angularista on blogin viesti version muuttamisesta ja julkaisemisesta alkaen v2-julkaisusta. Siellä on yksi merkittävä päivitys kuuden kuukauden välein, ja vähintään kuuden kuukauden poistoaika on (kaksi suurta julkaisua). Dokumentaatioon on merkitty joitain kokeellisia sovellusliittymiä, joilla on lyhyemmät poistoajat. Virallista ilmoitusta ei ole vielä julkaistu, mutta tämän artikkelin mukaan Angular-joukkue on ilmoittanut pitkän aikavälin tukiversiot, jotka alkavat Angular 4: llä. Niitä tuetaan vähintään yhden vuoden ajan seuraavan tärkeimmän version julkaisun jälkeen. Tämä tarkoittaa, että kulmaa 4 tuetaan ainakin syyskuuhun 2018 saakka virhekorjauksilla ja tärkeillä korjauksilla. Useimmissa tapauksissa kulman päivittäminen v2: sta v4: een on yhtä helppoa kuin kulma-riippuvuuksien päivittäminen. Kulma tarjoaa myös oppaan, joka sisältää tietoja siitä, tarvitaanko lisämuutoksia.

Vue 1.x -version 2.0 päivitysprosessin pitäisi olla helppoa pienelle sovellukselle - kehittäjätiimi on todennut, että 90% sovellusliittymistä pysyi samana. Konsolissa on hieno päivitysdiagnostiikka, siirto-apuväline. Yksi kehittäjä huomautti, että päivitys v1: stä v2: een ei ollut silti hauskaa isossa sovelluksessa. Valitettavasti seuraavasta pääversiosta tai LTS-versioiden suunnitelmista ei ole selkeää (julkista) etenemissuunnitelmaa.

Vielä yksi asia: kulmikas on täysi kehys ja tarjoaa paljon asioita, jotka on niputettu. React on joustavampi kuin kulma, ja lopetat todennäköisesti käyttämällä itsenäisempiä, asettumattomia, nopeasti liikkuvia kirjastoja - tämä tarkoittaa, että sinun on huolehdittava vastaavista päivityksistä ja siirroista omillasi. Se voi myös olla haittaa, jos tiettyjä paketteja ei enää ylläpidetä tai jos jostakin muusta paketista tulee jossain vaiheessa tosiasiallinen standardi.

1.5 Henkilöstö ja rekrytointi

Jos sinulla on sisäisiä HTML-kehittäjiä, jotka eivät halua oppia lisää Javascriptiä, sinun on parempi valita Kulmainen tai Vue. React edellyttää lisää Javascriptiä (puhumme tästä myöhemmin).

Onko sinulla suunnittelijoita työskentelemässä lähellä koodia? Käyttäjä “pier25” toteaa Redditissä, että React on järkevä, jos työskentelet Facebookissa, jossa kaikki ovat supersankarien kehittäjiä. Todellisessa maailmassa et aina löydä suunnittelijaa, joka voi muokata JSX: tä - sinällään HTML-malleilla työskenteleminen on paljon helpompaa.

Hyvä asia kulmakehyksessä on se, että toisen yrityksen uusi Angular 2 -kehittäjä tutustuu nopeasti kaikkiin tarvittaviin käytäntöihin. React-projektit ovat kumpikin erilaisia ​​arkkitehtonisten päätösten suhteen, ja kehittäjien on tutustua tiettyyn projektin asennukseen.

Kulma on hyvä myös, jos sinulla on kehittäjiä, joilla on oliopohjainen tausta tai jotka eivät pidä Javascriptista. Ajotaksesi tämän pisteen kotiin, tässä on Mahesh Chandin tarjous:

En ole JavaScriptin kehittäjä. Taustani on rakentaa laaja-alaisia ​​yritysjärjestelmiä käyttämällä "oikeita" ohjelmistoalustoja. Aloitin vuonna 1997 rakennussovellusten käytön C, C ++, Pascal, Ada ja Fortran. (…) Voin sanoa selvästi, että JavaScript on minulle vain ahne. Microsoft MVP: nä ja asiantuntijana minulla on hyvä ymmärrys TypeScriptistä. En myöskään näe Facebookia ohjelmistokehitysyrityksenä. Google ja Microsoft ovat kuitenkin jo suurimpia ohjelmistoinnovaatioita. Mielestäni on mukavampaa työskennellä tuotteen kanssa, jolla on vahva tuki Googlelta ja Microsoftilta. Lisäksi (…) taustani kanssa tiedän, että Microsoftilla on vieläkin suurempia suunnitelmia TypeScriptiä varten.

No, sitten… Minun pitäisi todennäköisesti mainita, että Mahesh on Microsoftin aluejohtaja.

2. Reaktion, kulman ja arvon vertailu

2.1 Komponentit

Kyseiset kehykset ovat kaikki komponenttipohjaisia. Komponentti saa syötteen ja jonkin sisäisen käyttäytymisen / laskennan jälkeen se palauttaa renderoidun käyttöliittymämallin (kirjautumis- / uloskirjautumisalue tai tehtäväluettelon kohde) tulosteena. Määritettyjen komponenttien tulisi olla helppo käyttää uudelleen verkkosivulla tai muissa komponenteissa. Esimerkiksi, sinulla voi olla ruudukkomponentti (joka koostuu otsikkokomponentista ja useista rivikomponenteista), jolla on erilaisia ​​ominaisuuksia (sarakkeet, otsikkotiedot, tietorivit jne.) Ja pystyt käyttämään komponenttia uudelleen erilaisilla tietojoukkoilla toisella sivulla. Tässä on kattava artikkeli komponenteista, jos haluat lisätietoja tästä.

React ja Vue molemmat ovat erinomaisia ​​käsitellessään tyhmäjä komponentteja: pienet, valtiottomat toiminnot, jotka vastaanottavat tulo- ja palautuselementit tulosteena.

2.2 Typescript vs. ES6 vs. ES5

React keskittyy Javascript ES6: n käyttöön. Vue käyttää Javascript ES5 tai ES6.

Kulma luottaa TypeScriptiin. Tämä tarjoaa enemmän johdonmukaisuutta liittyvissä esimerkeissä ja avoimen lähdekoodin projekteissa (Reaktit esimerkit löytyvät joko ES5: stä tai ES6: sta). Tämä esittelee myös käsitteitä kuten sisustajia ja staattisia tyyppejä. Staattiset tyypit ovat hyödyllisiä koodintiedostustyökaluille, kuten automaattinen uudelleenkehittäminen, määritelmiin siirtyminen jne. - Niiden on myös tarkoitus vähentää sovelluksen virheiden määrää, vaikka tästä aiheesta ei varmasti ole yksimielisyyttä. Eric Elliott on eri mieltä artikkelissaan ”Staattisten tyyppien järkyttävä salaisuus”. Daniel C Wang sanoo, että staattisten tyyppien käytön kustannukset eivät ole haitallisia ja että on hyvä olla sekä testivetoista kehitystä (TDD) että staattista kirjoittamista.

Sinun pitäisi myös todennäköisesti tietää, että voit käyttää Flowa tyyppitarkistuksen käyttöönottoon Reaktorissa. Se on staattinen tyyppitarkitsija, jonka Facebook on kehittänyt JavaScriptiä varten. Flow voidaan myös integroida VueJS: ään.

Jos kirjoitat koodiasi TypeScriptillä, et kirjoita enää normaalia JavaScriptiä. Vaikka TypeScripti kasvaa, sillä on silti pieni käyttäjäkunta verrattuna koko JavaScript-kieleen. Yksi riski voi olla, että siirryt väärään suuntaan, koska TypeScript saattaa - vaikka epätodennäköistä onkin - myös kadota ajan myötä. Lisäksi TypeScript lisää projektiin paljon (oppimista) - voit lukea lisää tästä Eric Elliottin vertailussa Angular 2 vs. React -vertailusta.

2.3 Mallit - JSX tai HTML

Reagoi taukoja pitkäaikaisten parhaiden käytäntöjen avulla. Vuosikymmenien ajan kehittäjät yrittivät erottaa käyttöliittymämallit ja sisällyttää Javascript-logiikan, mutta JSX: n kanssa nämä sekoitetaan uudelleen. Tämä saattaa kuulostaa kauhealta, mutta sinun pitäisi kuunnella Peter Huntin puhetta ”Reagoi: parhaiden käytäntöjen uudelleenarviointi” (lokakuusta 2013). Hän huomauttaa, että mallien ja logiikan erottaminen on vain tekniikoiden, ei huolenaiheiden erottamista. Sinun tulisi rakentaa komponentteja mallien sijasta. Komponentit ovat uudelleenkäytettäviä, kompostoitavia ja yksikkötestattavissa.

JSX on valinnainen esikäsittelylaite HTML-tyyppiselle syntaksille, joka kootaan myöhemmin Javascriptiin. Siinä on joitain omituisuuksia - esimerkiksi sinun on käytettävä luokan sijasta className, koska viimeksi mainittu on Javascriptin suojattu nimi. JSX on suuri etu kehitykselle, koska sinulla on kaikki yhdessä paikassa, ja koodin suorittaminen ja käännösajan tarkistukset toimivat paremmin. Kun teet kirjoitusvirheen JSX: ssä, Reakty ei kokoa, ja se tulostaa rivinumeron, jossa kirjoitusvirhe tapahtui. Kulma 2 epäonnistuu hiljaa ajon aikana (tämä argumentti ei todennäköisesti kelpaa, jos käytät AOT: ta kulma-asennon kanssa).

JSX tarkoittaa, että kaikki Reaktissa on Javascriptiä - sitä käytetään sekä JSX-malleissa että logiikassa. Cory House huomauttaa tästä tammikuussa 2016 julkaistussa artikkelissa: “Kulma 2 jatkaa 'JS: n' lisäämistä HTML-muotoon. React asettaa HTML: n JS: ään. " Tämä on hyvä asia, koska Javascript on tehokkaampi kuin HTML.

Kulmamalleja parannetaan HTML: llä erityisellä kulmakielellä (esimerkiksi ngIf tai ngFor). Vaikka React vaatii JavaScriptin tuntemusta, Angular pakottaa sinut oppimaan kulmaspesifisen syntaksin.

Vue sisältää ”yhden tiedoston komponentit”. Tämä näyttää kompromissilta huolenaiheiden erottamisessa - mallit, skriptit ja tyylit ovat yhdessä tiedostossa, mutta kolmessa eri järjestyksessä. Tämä tarkoittaa, että saat syntaksikorostuksen, CSS-tuen ja helpompaa käyttää esikäsittelyohjelmia, kuten Jade tai SCSS. Olen lukenut muista artikkeleista, että JSX on helpompi korjata, koska Vue ei näytä huonoja HTML-syntaksivirheitä. Tämä ei ole totta, koska Vue muuntaa HTML: n renderöintitoiminnoiksi - joten virheet näytetään ilman ongelmia (Kiitos Vinicius Reisille kommentista ja korjauksesta!).

Sivuhuomautus: Jos pidät JSX-ideasta ja haluat käyttää sitä Vuessa, voit käyttää babel-plugin-transform-vue-jsx.

2.4 Kehys vs. kirjasto

Kulmikas on pikemminkin kehys kuin kirjasto, koska se antaa vahvoja mielipiteitä siitä, kuinka sovelluksesi tulisi rakentaa, ja sillä on myös enemmän toimintoja. Angular on "täydellinen ratkaisu" - paristot mukana ja valmiina tarjoamaan sinulle miellyttävän käynnistyksen. Sinun ei tarvitse analysoida kirjastoja, reititysratkaisuja tai vastaavia - voit vain aloittaa työskentelyn.

Toisaalta React ja Vue ovat joustavia. Heidän kirjastot voidaan yhdistää kaikenlaisiin paketteihin (Reaktin on melko paljon npm: llä, mutta Vue-paketteja on vähemmän, koska se on vielä melko nuori). Reaktin avulla voit jopa vaihtaa kirjaston itse API-yhteensopiviin vaihtoehtoihin, kuten Inferno. Suurella joustavuudella on kuitenkin suuri vastuu - Reaktin kanssa ei ole sääntöjä ja rajoitettu ohjeistus. Jokainen projekti vaatii päätöksen arkkitehtuuristaan ​​ja asiat voivat mennä pieleen helpommin.

Kulma, toisaalta, mukana on hämmentävä pesä rakennustyökaluja, kattilalevyä, vuorauksia ja aika-nieluja käsiteltäväksi. Tämä pätee myös Reaktoriin, jos käytetään aloituspaketteja tai kattiloita. Ne ovat luonnostaan ​​erittäin hyödyllisiä, mutta React toimii tyhjästä, ja se on todennäköisesti tapa, jolla sinun pitäisi oppia se. Joskus Javascript-ympäristössä työskentelyyn tarvittaviin työkaluihin viitataan nimellä “Javascript-väsymys”. Eric Clemmons on kirjoittanut siitä artikkelin, jolla on tämä sanottava:

Asennettuja työkaluja on edelleen joukko, ettet ole tottuneet, kun aloitat kehyksen kanssa. Ne luodaan, mutta luultavasti monet kehittäjät eivät ymmärrä, mitä kotelon alla tapahtuu - tai niiden tekeminen vie paljon aikaa.

Vue näyttää olevan puhtain ja kevyin kolmesta kehyksestä. GitLabilla on blogikirjoitus päätöksestään, joka koskee Vue.js: tä (lokakuu 2016):

Vue.js sisältää täydellisen tasapainon siitä, mitä se tekee sinulle ja mitä sinun täytyy tehdä itse. (…) Vue.js on aina käden ulottuvilla, tukeva, mutta joustava turvaverkko, joka auttaa sinua pitämään ohjelmoinnin tehokkaana ja DOM: n aiheuttama kärsimys minimiin.

He pitävät helppokäyttöisyydestä ja helppokäyttöisyydestä - lähdekoodi on erittäin luettavissa eikä dokumentaatiota tai ulkoisia kirjastoja tarvita. Kaikki on hyvin suoraviivaista. Vue.js "ei myöskään tee suuria oletuksia suuresta osasta mitään". GitLabin päätöksestä on myös podcast.

Toinen blogiviesti siirtymisestä kohti Vuea tulee Pixeljetsiltä. Reakty "oli suuri askel eteenpäin JS-maailmalle valtion tietoisuuden suhteen, ja se osoitti monille ihmisille todellisen toiminnallisen ohjelmoinnin hyvällä, käytännöllisellä tavalla". Yksi Reactin ja Vue: n suurista haitoista on ongelma osien jakamisessa pienemmiksi komponenteiksi JSX-rajoitusten takia. Tässä on lainaus artikkeliin:

Koodin luettavuus on tärkeä minulle ja joukkueelleni, mutta on silti erittäin tärkeää, että koodin kirjoittaminen on hauskaa. Ei ole hauskaa luoda 6 komponenttia, kun käytät todella yksinkertaista laskin-widgettiä. Monissa tapauksissa se on huono myös ylläpidon, muutosten tai visuaalisen kunnostuksen soveltamisen suhteen joihinkin widgetteihin, koska sinun on siirryttävä useiden tiedostojen / toimintojen ympäri ja tarkistettava jokainen pieni HTML-kappale. En taaskään ehdota monoliittien kirjoittamista - ehdotan käyttää komponentteja mikrokomponenttien sijaan päivittäiseen kehitykseen.

Hacker-uutisten ja Reddit-blogin viesteistä käydään mielenkiintoisia keskusteluja - toisinajattelijat ja muut Vue-tukijat väittävät.

2.5 Valtionhallinta ja tietojen sitovuus

Käyttöliittymien rakentaminen on vaikeaa, koska valtioita on kaikkialla - ajan myötä muuttuvat tiedot aiheuttavat monimutkaisuutta. Valtion määrittelemät työnkulut ovat suureksi avuksi, kun sovellukset kasvavat ja monimutkaistuvat. Rajoitettuihin sovelluksiin tämä on todennäköisesti ylikilpailu ja jotain Vanilla JS: n kaltaista riittää.

Kuinka se toimii? Komponentit kuvaavat käyttöliittymää milloin tahansa. Kun tiedot muuttuvat, kehys toistaa koko käyttöliittymäkomponentin - näytetyt tiedot ovat aina ajan tasalla. Tätä käsitettä voidaan kutsua ”käyttöliittymäksi funktiona”.

React toimii usein yhdessä Reduxin kanssa. Redux kuvaa itseään kolmella perusperiaatteella:

  • Yksi totuuden lähde
  • Tila on vain luku
  • Muutokset tehdään puhtailla toiminnoilla

Toisin sanoen: Koko sovelluksen tila tallennetaan objektipuussa yhden myymälän sisällä. Tämä auttaa sovelluksen virheenkorjauksessa, ja joitain toimintoja on helpompi toteuttaa. Tila on vain luku ja sitä voidaan muuttaa vain toimien avulla, jotta vältetään kilpailuolosuhteet (se auttaa myös virheenkorjauksessa). Pelkistimet on kirjoitettu määrittelemään kuinka tilat voidaan muuttaa toimilla.

Suurimmassa osassa oppaita ja kattiloita on Redux jo integroitu, mutta voit käyttää Reaktia ilman sitä (ja et ehkä tarvitse Reduxia projektissa ollenkaan). Redux tuo koodiin monimutkaisuuden ja melko vahvat rajoitukset. Jos opit reagoimaan, sinun tulisi miettiä reagoinnin oppimista ennen kuin siirryt Reduxiin. Sinun tulisi ehdottomasti lukea Dan Abramovin ”Et ehkä tarvitse Reduxia”.

Jotkut kehittäjät suosittelevat Mobxin käyttöä Reduxin sijasta. Voit ajatella sitä "automaattisena Reduxina", joka tekee asioiden käytöstä ja ymmärtämisestä huomattavasti heti. Jos haluat katsoa, ​​sinun tulee aloittaa johdannosta. Voit myös lukea tämän hyödyllisen vertailun Reduxin ja MobX: n välillä Robinilta. Sama kirjoittaja tarjoaa myös tietoja siirtymisestä Reduxista MobX: iin. Tämä luettelo on hyödyllinen, jos haluat tarkistaa muita Flux-kirjastoja. Ja jos olet tulossa MVC-maailmasta, sinun kannattaa lukea Mihhail Levkovskyn artikkeli “Ajattelu Reduxissa (kun kaikki tunnet olevan MVC)”.

Vue voi käyttää Reduxia - mutta se tarjoaa Vuexin omana ratkaisunaan.

Suuri ero Reaktin ja kulman välillä on yksisuuntainen ja kaksisuuntainen sitominen. Anglin kaksisuuntainen sitominen muuttaa mallitilaa, kun käyttöliittymäelementti (esimerkiksi käyttäjän syöttö) päivitetään. React menee vain yhteen suuntaan: se päivittää mallin ensin ja sitten näyttää käyttöliittymäelementin. Kulman menetelmä on puhtaampi koodissa ja kehittäjän helpompi toteuttaa. Reaktin tapa johtaa parempaan datan yleiskuvaan, koska tiedot virtaavat vain yhteen suuntaan (tämä tekee virheenkorjauksesta helpompaa).

Molemmilla käsitteillä on etuja ja haittoja. Sinun on ymmärrettävä käsitteet ja määritettävä, vaikuttaako tämä puitepäätökseesi. Artikkeli ”Kaksisuuntainen tiedonsiirto: kulma 2 ja reagoi” ja tämä Stackoverflow-kysymys tarjoavat molemmat hyvän selityksen. Täältä löydät interaktiivisia koodiesimerkkejä (3-vuotiaita, vain kulmille 1 ja reagoida). Viimeisenä, mutta ei vähäisimpänä, Vue tukee sekä yksisuuntaista että kaksisuuntaista sitomista (oletusarvoisesti yksisuuntainen).

Kulma-sovelluksissa on pitkä artikkeli erityyppisistä tiloista ja valtionhallinnasta (kirjoittanut Victor Savkin), jos haluat lukea lisää.

2.6 Muut ohjelmointikäsitteet

Kulma sisältää riippuvuusinjektion, kuvion, jossa yksi esine toimittaa riippuvuudet (palvelu) toiselle kohteelle (asiakas). Tämä lisää joustavuutta ja puhtaampaa koodia. Artikkelissa ”Riippuvuusinjektion ymmärtäminen” selitetään tätä käsitettä yksityiskohtaisemmin.

Malli-näkymä-ohjainmalli (MVC) jakaa projektin kolmeen osaan: malli, näkymä ja ohjain. Kulmainen kuin MVC-kehys, MVC on ulkona. Reaktilla on vain V - sinun on ratkaistava M ja C yksin.

2.7 Joustavuus ja pienennys mikropalveluihin

Voit työskennellä Reaktin tai Vue: n kanssa lisäämällä Javascript-kirjaston lähdekoodiin. Tämä ei ole mahdollista kulmikkaassa, koska se käyttää TypeScriptiä.

Olemme siirtymässä enemmän kohti mikropalveluita ja mikrosovelluksia. React ja Vue antavat sinulle paremman hallinnan sovelluksen koon valinnassa valitsemalla vain asiat, jotka ovat todella tarpeellisia. Ne tarjoavat enemmän joustavuutta siirtyäkseen SPA: sta mikropalveluihin entisen sovelluksen osien avulla. Kulma toimii parhaiten SPA: lle, koska se on todennäköisesti liian turvonnut käyttääkseen sitä mikropalveluissa.

Kuten Cory House toteaa:

JavaScript liikkuu nopeasti, ja React antaa sinun vaihtaa pienet sovelluspalat paremmiksi kirjastoiksi sen sijaan, että odottaisit ja toivoisit kehysteesi innovaatioita. Pienten, kompostoitavien, yksikäyttöisten työkalujen filosofia ei koskaan mene tyylistä.

Jotkut ihmiset käyttävät Reaktia myös muissa kuin SPA-verkkosivustoissa (esim. Monimutkaisissa lomakkeissa tai velhoissa). Jopa Facebook käyttää Reaktia - ei pääsivulle, vaan tietyille sivuille ja ominaisuuksille.

2.8 Koko ja suorituskyky

Kaikille toiminnallisuuksille on kääntöpuoli: kulmakehys on melko paisunut. Gzipatun tiedoston koko on 143 kt, verrattuna 23 kt Vue ja 43 kt Reakt.

Reactilla ja Vuellä on molemmilla virtuaalinen DOM, jonka on tarkoitus parantaa suorituskykyä. Jos olet kiinnostunut tästä, voit lukea virtuaalisen DOM: n ja DOM: n välisistä eroista sekä virtuaalisen DOM: n todellisista eduista osoitteessa react.js. Myös yksi Virtual-DOM: n kirjoittajista vastaa itse suorituskykyyn liittyvään kysymykseen Stackoverflowsta.

Suorituksen tarkistamiseksi katselin hienoa js-framework-benchmarkia. Voit ladata ja suorittaa sen itse tai tutustua interaktiiviseen tulostaulukkoon. Ennen kuin tarkistat tulokset, sinun pitäisi tietää, että kehykset huijaavat vertailuarvoja - tällaista suoritustarkistusta ei tule käyttää päätöksentekoon.

Kulman, reagoinnin ja arvon suorituskykyMuistin allokointi MB: na

Yhteenvetona: Vuella on erinomainen suorituskyky ja syvin muistinjako, mutta kaikki nämä kehykset ovat todella melko lähellä toisiaan verrattuna erityisen hitaisiin tai nopeisiin kehyksiin (kuten Inferno). Jälleen kerran: Suorituskyvyn vertailuarvoja tulisi pitää vain sivuhuomautuksena, ei tuomiona.

2.9 Testaus

Facebook testaa Jestin avulla React-koodinsa. Tässä on vertailu Jestin ja Mochan välillä - ja on artikkeli kuinka käyttää entsyymiä Mochan kanssa. Entsyymi on JavaScriptin testausapuohjelma, jota käytetään Airbnb: llä (yhdessä Jestin, Karman ja muiden testijuoksijoiden kanssa). Jos haluat lukea lisää, on joitain vanhempia artikkeleita testauksesta Reaktissa (täällä ja täällä).

Sitten on Jasmine testauskehyksenä nurkassa 2. Siellä tehdään Eric Elliottin artikkeli, jonka mukaan Jasmine "johtaa miljooniin tapoihin kirjoittaa testejä ja väitteitä, joille on luettava jokainen huolellisesti ymmärtää mitä se tekee". Tulos on myös erittäin paisunut ja työläs lukea. Angular 2: n integroinnista Karmaan ja Mochaan on joitain informatiivisia artikkeleita. Tässä on vanha video (vuodesta 2015) testausstrategioista Angular 2: n kanssa.

Vuelta puuttuu testausohjeet, mutta Evan kirjoitti vuoden 2017 esikatselussaan, että joukkue aikoo työskennellä tämän parissa. He suosittelevat Karman käyttöä. Vue toimii yhdessä Jestin kanssa, ja Avoriaz on myös testiapuohjelma.

2.10 Universal & natiivisovellukset

Universal-sovellukset tuovat sovelluksia käyttöön myös verkossa, työpöydällä ja natiivissovellusten maailmassa.

Reaktio ja kulma tukevat kumpikin alkuperäistä kehitystä. Angular -sovelluksessa on NativeScript (tukena Telerik) natiivisovelluksille ja Ionic Framework hybridisovelluksille. Reaktin avulla voit tarkistaa react-native-renderer -sovelluksen rakentaaksesi plattform-iOS- ja Android-sovelluksia tai reagoidaksesi native -sovelluksiin. Monet sovellukset (mukaan lukien Facebook; katso lisää Showcase-sovelluksesta) on rakennettu reaktinatiivisilla.

Javascript-kehykset tekevät sivut asiakkaalle. Tämä on huono havaitulle suorituskyvylle, yleiselle käyttäjäkokemukselle ja hakukoneoptimoinnille. Palvelinpuolen esi-renderointi on plus. Kaikilla kolmella kehyksellä on kirjastoja, joista löytyy apua. Reaktin kohdalla on seuraava.js, Vue-sivustossa on nuxt.js, ja kulmikkaassa on… .Angular Universal.

2.11 Oppimiskäyrä

Kulmalle on ehdottomasti jyrkkä oppimiskäyrä. Sillä on kattava dokumentaatio, mutta joskus saatat olla turhautunut siihen, koska asiat ovat vaikeampia kuin miltä ne kuulostavat. Jopa kun sinulla on syvä ymmärrys Javascriptista, sinun on opittava, mitä tapahtuu kehyksen alla. Asennus on maaginen alussa, ja se tarjoaa paljon mukana olevia paketteja ja koodia. Tätä voidaan pitää negatiivisena, koska on olemassa suuri olemassa oleva ekosysteemi, joka sinun on opittava ajan myötä. Toisaalta se voi olla hyvä tietyssä tilanteessa, koska paljon päätöksiä on jo tehty. Reaktin kanssa sinun on todennäköisesti tehtävä paljon määrääviä päätöksiä kolmansien osapuolien kirjastojen suhteen. Valtionhallinnassa on 16 erilaista flux-pakettia, joista voi valita pelkästään Reaktin avulla.

Vue on melko helppo oppia. Yritykset vaihtavat Vueen, koska se näyttää olevan paljon helpompaa nuoremmille kehittäjille. Täältä voit lukea jostain henkilöstä, joka kuvaa ryhmänsä siirtymistä kulmasta Vueen. Toisen käyttäjän mukaan React-sovellus hänen yrityksessään oli niin monimutkainen, että uusi kehittäjä ei voinut pysyä koodin kanssa. Vue: n kanssa nuorten ja vanhempien kehittäjien välinen kuilu pienenee, ja he voivat tehdä yhteistyötä helpommin ja vähemmän vikoja, ongelmia ja aikaa kehitykseen.

Jotkut ihmiset väittävät, että asiat, jotka he ovat tehneet Reaktissa, olisivat paremmin kirjoitettu versiossa. Jos olet kokematon Javascript-kehittäjä - tai jos työskentelit viimeksi kuluneen vuosikymmenen aikana pääasiassa jQueryn kanssa -, sinun tulisi harkita Vue-sovelluksen käyttöä. Paradigman muutos on selvempi muutettaessa Reaktoriin. Vue näyttää enemmän kuin tavallinen Javascript, samalla kun esitellään myös joitain uusia ideoita: komponentit, tapahtumapohjainen malli ja yksisuuntainen tiedonkulku. Sillä on myös pieni jalanjälki.

Sillä välin, kulmilla ja reagoilla on oma tapa tehdä asioita. Ne saattavat tulla tiellesi, koska sinun on mukautettava käytäntöjäsi saadaksesi asiat toimimaan omalla tavallaan. Se voi olla haittaa, koska olet vähemmän joustava ja oppimiskäyrä on jyrkempi. Siitä voisi olla hyötyä myös siksi, että pakotat oppimaan oikeat konseptit samalla kun opiskelet tekniikkaa. Vue -sovelluksella voit tehdä asioita vanhan Javascriptin mukaisella tavalla. Tämä voi olla alussa helpompaa, mutta siitä voi tulla pitkällä tähtäimellä ongelmia, jos asioita ei tehdä oikein.

Virheenkorjauksen kannalta on plussa, että Reaktissa ja Vuessa on vähemmän taikuutta. Virheiden etsintä on helpompaa, koska etsittäviä paikkoja on vähemmän ja pinojäljillä on parempi ero oman koodin ja kirjastojen koodin välillä. Reaktin kanssa työskentelevät ilmoittavat, että heidän ei koskaan tarvitse lukea kirjaston lähdekoodia. Kuitenkin, kun debugroit kulmasovellusta, joudut usein virheenkorjaamaan kulma-alueen sisäosat ymmärtääksesi perustana olevan mallin. Valoisalta puolelta virheilmoitusten on tarkoitus olla selkeämpiä ja informatiivisempia, alkaen Angular 4.

2.12 Kulma, reagoi ja vue konepellin alla

Haluatko tarkistaa lähdekoodin itse? Haluatko nähdä miten asiat tuntuvat?

Haluat todennäköisesti tarkistaa ensin Github-arkistot: React (github.com/facebook/react), Angular (github.com/angular/angular) ja Vue (github.com/vuejs/vue).

Kuinka syntaksi näyttää? ValueCoders vertaa kulma-, reagointi- ja vue-syntaksia.

On myös hyvä nähdä asiat tuotannossa - yhdessä taustalla olevan lähdekoodin kanssa. TodoMVC luettelee kymmeniä samaa Todo-sovellusta, joka on kirjoitettu eri Javascript-kehyksillä - voit vertailla Angular-, Reactand Vue -ratkaisuja. RealWorld luo reaalimaailman sovelluksen (keskikokoinen klooni), ja heillä on valmiit ratkaisut kulmalle (4+) ja reagoida (Reduxin kanssa). Vue on keskeneräinen työ.

On myös joitain reaalimaailman sovelluksia, joita voit katsoa. Tässä on ratkaisuja Reakttiin:

  • Tee (hieno reaalimaailman muistiinpanojen hallintasovellus, joka on rakennettu React & Reduxin kanssa)
  • sound-redux (Soundacloud-asiakas, joka on rakennettu Reaktin ja Reduxin kanssa)
  • Brainfock (projekti- ja tiiminhallintaratkaisu, joka on rakennettu Reaktin kanssa)
  • react-hn & react-news (Hacker-uutiskloonit)
  • react-native-whatsapp-ui + opetusohjelma (Whatsapp-klooni, jolla on react-native)
  • phoenix-trello (Trello-klooni)
  • slack-clone + toinen opetusohjelma (Slack clones)

Angular-sovellukselle on joitain sovelluksia:

  • angular2-hn & hn-ng2 (Hacker News-kloonit + hieno opetusohjelma uuden luomisesta, kirjoittanut Ashwin Sureshkumar)
  • Redux-and-angle-2 (Twitter-klooni)

Vue: lle on myös ratkaisuja:

  • vue-hackernews-2.0 & Loopa-uutiset (Hacker News-kloonit)
  • vue-soundcloud (Soundcloud-demo)

johtopäätös

Päätä puitteista nyt

React, Angular ja Vue ovat kaikki aika viileitä, eikä yksikään niistä ole selvästi muiden yläpuolella. Luota suolistasi. Tämä viimeinen viihdyttävä kyynisyys voi auttaa päätöksessäsi:

Likainen pieni salaisuus on, että useimmalla ”nykyaikaisella JavaScriptin kehityksellä” ei ole mitään tekemistä verkkosivustojen todellisen rakentamisen kanssa - se on rakennuspaketteja, joita voivat käyttää kirjastot rakentavat ihmiset, joita voivat käyttää ihmiset, jotka rakentavat puitteita, ihmisiä, jotka kirjoittavat oppaita ja opettavat kursseja voin opettaa.En ole varma, että kukaan tosiasiallisesti rakentaa jotain todellisten käyttäjien kanssa vuorovaikutuksessa.

Tämä on tietenkin liioittelua, mutta siinä on todennäköisesti jyrkkä totuus. Kyllä, Javascript-ekosysteemissä on paljon surinaa. Löydät todennäköisesti paljon muita houkuttelevia vaihtoehtoja haun aikana - yritä olla sokeamattomin uusimmasta, loistavimmasta kehyksestä.

Mitä minun pitäisi valita?

Jos työskentelet Googlessa: Kulma

Jos rakastat TypeScriptiä: kulmikas (tai reagoi)

Jos rakastat olio-ohjelmointia (OOP): Kulma

Jos tarvitset ohjausta, rakennetta ja auttavaa kättä: Kulma

Jos työskentelet Facebookissa: reagoi

Jos pidät joustavuudesta: reagoi

Jos rakastat suuria ekosysteemejä: reagoi

Jos haluat valita kymmenien pakettien joukosta: reagoi

Jos rakastat JS: ää ja "kaikki-on-Javascript-lähestymistapaa": Reagoi

Jos pidät todella puhtaasta koodista: Vue

Jos haluat helpoimman oppimiskäyrän: Vue

Jos haluat kevyimmän kehyksen: Vue

Jos haluat erottaa huolet yhdestä tiedostosta: Vue

Jos työskentelet yksin tai sinulla on pieni joukkue: Vue (tai React)

Jos sovelluksesi yleensä kasvaa todella suureksi: kulmikas (tai reagoiva)

Jos haluat rakentaa sovelluksen, jolla on reaaliaikainen: reagoi

Jos haluat, että uima-altaassa on paljon kehittäjiä: Kulma tai Reaktio

Jos työskentelet suunnittelijoiden kanssa ja tarvitset puhtaita HTML-tiedostoja: Kulmainen tai Vue

Jos pidät Vuestä, mutta pelkäät rajoitettua ekosysteemiä: reagoi

Jos et voi päättää, oppia ensin reagoimaan, sitten Vue ja sitten Kulmikas.

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