Leņķiskais un reaģējošais vs. Vue - salīdzinājums

Lemjot par JavaScript sistēmu jūsu tīmekļa lietojumprogrammai, var būt milzīgi. Leņķiskais un Reaktīvais ir ļoti populārs šajās dienās, un ir notikusi augšupeja, kas pēdējā laikā ir guvusi daudz vilces: VueJS. Turklāt šie ir tikai daži no jaunajiem bērniem blokā.

Javascripts 2017. gadā - šajās dienās viss nav viegli!

Tātad, kā mums vajadzētu izlemt?

Pirms mēs sākam - SPA, vai ne?

Vispirms jums vajadzētu pieņemt skaidru lēmumu par to, vai jums ir nepieciešama vienas lapas lietojumprogramma (SPA), vai arī jūs drīzāk izvēlaties vairāku lapu pieeju.

Starteri šodien: leņķiskais, reaģējošais un Vue

Pirmkārt, mēs vēlētos apspriest dzīves ciklu un stratēģiskos apsvērumus. Pēc tam mēs pāriesim pie trīs javascript ietvaru funkcijām un koncepcijām. Visbeidzot, mēs nonāksim pie secinājuma.

Šie ir jautājumi, kurus šodien risināsim:

  • Cik nobrieduši ir ietvari / bibliotēkas?
  • Vai ietvari, iespējams, kādu laiku būs apkārt?
  • Cik plašas un izpalīdzīgas ir viņu atbilstošās kopienas?
  • Cik viegli ir atrast izstrādātājus katram no ietvariem?
  • Kādas ir pamatprogrammu programmēšanas pamatjēdzieni?
  • Cik viegli ir izmantot rāmjus maziem vai lieliem lietojumiem?
  • Kā katrai sistēmai izskatās mācīšanās līkne?
  • Kādu izrādi jūs varat sagaidīt no ietvariem?
  • Kur jūs varat tuvāk apskatīt zem pārsega?
  • Kā jūs varat sākt attīstīties ar izvēlēto ietvaru?

1. Dzīves cikls un stratēģiskie apsvērumi

1.1. Daži vēsture

Leņķiskais ir uz Javascript balstītais TypeScript pamats. Google izstrādāts un uzturēts, tas tiek aprakstīts kā “supervaronisks Java MVWFramework”. Leņķiskais (arī “Leņķis 2+”, “Leņķis 2” vai “ng2”) ir pārrakstīts, lielākoties nesaderīgs AngularJS pēctecis (arī “Angular.js” vai “AngularJS 1.x”). Kamēr AngularJS (vecais) sākotnēji tika izlaists 2010. gada oktobrī, tas joprojām saņem kļūdu labojumus utt. - jaunais Angular (sans JS) tika ieviests 2016. gada septembrī kā 2. versija. Jaunākais lielais izlaidums ir 4. versija, jo 3. versija tika izlaista. Leņķisko izmanto Google, Wix, weather.com, healthcare.gov un Forbes (saskaņā ar madewithangular, stackshare un libscore.com).

Reakcija tiek aprakstīta kā “JavaScript bibliotēka lietotāja saskarņu veidošanai”. Sākotnēji tika izlaists 2013. gada martā, React izstrādāja un uztur Facebook, kas vairākās lapās izmanto React komponentus (tomēr nevis kā vienas lapas lietojumprogrammu). Saskaņā ar šo Chris Cordle rakstu, React Facebook tiek izmantots daudz vairāk nekā Angular ir Google. React izmanto arī Airbnb, Uber, Netflix, Twitter, Pinterest, Reddit, Udemy, Wix, Paypal, Imgur, Feedly, Stripe, Tumblr, Walmart un citi (saskaņā ar Facebook, stackshare un libscore.com).

Facebook strādā pie React Fiber izlaišanas. Tas mainīs reaģēšanu zem pārsega - tā rezultātā renderēšana ir jāveic daudz ātrāk - bet pēc izmaiņām lietas būs savietojamas ar atpakaļejošu datumu. Facebook runāja par izmaiņām savā izstrādātāju konferencē 2017. gada aprīlī, un tika izlaists neoficiāls raksts par jauno arhitektūru. React Fiber tika izlaists kopā ar React 16 2017. gada septembrī.

Vue ir viens no visstraujāk augošajiem JS ietvariem 2016. gadā. Vue sevi raksturo kā “intuitīvu, ātru un kompozītu MVVM interaktīvu saskarņu veidošanai.” To pirmo reizi izlaida 2014. gada februārī bijušais Google darbinieks Evan You (BTW: Evan uzrakstīja interesantu emuāra ierakstu par mārketinga aktivitātēm un numuriem pirmās nedēļas laikā toreiz). Tas ir bijis diezgan veiksmīgs, it īpaši ņemot vērā to, ka Vue sagādā tik lielu vilci kā viena cilvēka šovs bez lielas kompānijas atbalsta. Evanam šobrīd ir duci galveno izstrādātāju komanda. 2016. gadā tika izlaista 2. versija. Vue izmanto Alibaba, Baidu, Expedia, Nintendo, GitLab - mazāku projektu sarakstu var atrast vietnē madewithvuejs.com.

Visi trīs ietvari ir pieejami ar MIT licenci.

Līdz 2017. gada septembrim uzņēmums React tika piegādāts ar speciālu BSD3 licences failu. Par patenta lietu bija daudz diskusiju. Ja jums ir interese par tā vēsturi, varat izlasīt šo Github numura diskusiju, patenta faila iemeslus un vēsturi (autors ir bijušā Facebook inženieris Džeimss Ide), Kāpēc jums nevajadzētu nobīties (autors Deniss Valšs), brīdinājums par izmantošanu jaunizveidotiem uzņēmumiem (autors Raúl Kripalani) un bijušais Facebook paziņojums par šo tēmu: React licences skaidrojums. Jebkurā gadījumā - tam vairs nav nozīmes, jo Facebook beidzot paziņoja, ka React saņems MIT licenci.

1.2. Galveno attīstību

Kā jau tika atzīmēts, lielie uzņēmumi atbalsta un izmanto sistēmu Angular un React. Facebook, Instagram un Whatsapp to izmanto savās lapās. Google to izmanto daudzos projektos: piemēram, jaunā Adwords lietotāja saskarne tika ieviesta, izmantojot Angular & Dart. Vēlu atkal realizē personu grupa, kuras darbs tiek atbalstīts ar Patreon un citu sponsorēšanas līdzekļu palīdzību. Jūs pats varat izlemt, vai tas ir pozitīvs vai negatīvs. Matiass Götzke uzskata, ka Vue mazā komanda ir ieguvums, jo tas rada tīrāku un mazāk pārdomātu kodu / API.

Apskatīsim dažus statistikas datus: Leņķis savas komandas lapā norāda 36 cilvēkus, Vue - 16 cilvēkus, bet React nav komandas lapas. Githubā Angular ir> 25 000 zvaigžņu un 463 līdzdalībnieki, React ir> 70 000 zvaigžņu un> 1000 līdzdalībnieku, un Vue ir gandrīz 60 000 zvaigžņu un tikai 120 līdzdalībnieki. Varat arī pārbaudīt Github Stars vēsturi leņķa, reaģēšanas un vērtības ziņā. Vēlreiz šķiet, ka Vue ļoti labi turpina tendences. Saskaņā ar bestof.js, pēdējos trīs mēnešos leņķis 2 ir sasniedzis vidēji 31 ​​zvaigzni dienā, React 74 zvaigznes un Vue.JS 107 zvaigznes dienā.

Github Stars vēsture leņķa, reaģēšanas un vērtībai (avots)

Atjauninājums: Paldies Paulam Henshelam par npm tendenču norādīšanu. Tie parāda lejupielāžu skaitu dotajām npm pakotnēm un ir vēl noderīgāki, tikai apskatot Github zvaigznes:

Dpm lejupielādēto numuru skaits pēdējos 2 gados dotajām npm pakotnēm.

1.3. Tirgus dzīves cikls

Google Trends ir grūti salīdzināt leņķisko, reaģējošo un vērtīgo, jo ir dažādi nosaukumi un versijas. Viens tuvināšanas veids varētu būt meklēšana kategorijā “Internets un tehnoloģijas”. Rezultāts:

Nu labi. Vue netika izveidota pirms 2014. gada - tāpēc šeit kaut kas nav pareizi. La Vue ir franču valoda attiecībā uz “skatu”, “redzi” vai “viedokli”. Varbūt tas ir tas. Arī “VueJS” un “Leņķa” vai “React” salīdzinājums nav taisnīgs, jo salīdzinājumā ar citiem VueJS nav gandrīz nekādu rezultātu.

Pēc tam izmēģināsim kaut ko citu. ThoughtWorks tehnoloģiju radars rada labu iespaidu par to, kā laika gaitā attīstās tehnoloģijas. Redux ir pieņemšanas stadijā (jāpieņem projektos!), Un tas ir bijis nenovērtējams daudzos ThoughtWorks projektos. Vue.js atrodas izmēģinājuma stadijā (izmēģiniet!). To raksturo kā vieglu un elastīgu alternatīvu leņķim ar zemāku mācīšanās līkni. 2. leņķis ir novērtēšanas stadijā - to veiksmīgi izmanto ThoughtWork komandas, taču tas vēl nav spēcīgs ieteikums.

Saskaņā ar pēdējo Stackoverflow 2017 aptauju, React mīl 67% aptaujāto izstrādātāju, bet AngularJS - 52%. “Nav intereses turpināt attīstību” reģistrē lielākus AngularJS (48%) rādītājus salīdzinājumā ar React (33%). Vue nevienā gadījumā nav iekļuvis labāko desmitniekā. Pēc tam ir Statejs.com aptauja, kurā salīdzināti “priekšējās daļas ietvari”. Interesantākie fakti: React un Angular ir 100% informēti, un 23% aptaujāto cilvēku Vue nav zināms. Runājot par apmierinātību, React ieguva 92%, lai “lietotu atkal”, Vue 89% un 2. leņķa tikai 65%.

Kā ir ar citu klientu apmierinātības aptauju? Ēriks Elliots sāka vienu 2016. gada oktobrī, lai novērtētu leņķi 2 un reaģētu. Tikai 38% no aptaujātajiem cilvēkiem atkārtoti izmantotu 2. leņķi, savukārt 84% - atkārtoti.

1.4 Ilgtermiņa atbalsts un migrācija

React API ir diezgan stabilas, kā to projektēšanas principos norāda Facebook. Ir arī daži skripti, kas palīdzēs pāriet no pašreizējās API uz jaunāku: pārbaudiet react-codemod. Migrācija ir diezgan vienkārša, un nav tādas lietas (vajadzīgas) kā ilgtermiņa atbalsta versija. Šajā Reddit rakstā cilvēki atzīmē, ka jaunināšana nekad nav bijusi problēma. React komanda rakstīja emuāra ziņu par viņu versiju shēmu. Kad viņi pievieno brīdinājumu par novecošanos, viņi to saglabā pārējā pašreizējā laidiena versijā, pirms uzvedība tiek mainīta nākamajā galvenajā versijā. Jaunā lielākajā versijā nav plānotas izmaiņas - v14 tika izlaists 2015. gada oktobrī, v15 tika publicēts 2016. gada aprīlī, un v16 vēl nav izdošanas datuma. Jaunināšanai nevajadzētu būt problēmai, kā nesen atzīmēja React galvenā izstrādātājs.

Par leņķisko ir emuāra ieraksts par versijas izveidošanu un izlaišanuAngular, sākot ar v2 izlaidumu. Katru sešu mēnešu laikā tiks veikts viens būtisks atjauninājums, un vismaz sešus mēnešus ilgs novecošanās periods (divi galvenie laidieni). Dokumentācijā ir iezīmētas dažas eksperimentālās API ar īsākiem novecošanās periodiem. Pagaidām oficiāla paziņojuma nav, taču saskaņā ar šo rakstu Angļu komanda ir paziņojusi par ilgtermiņa atbalsta versijām, kas sākas ar Angļu 4. Tās tiks atbalstītas vismaz vienu gadu pēc nākamās lielās versijas izlaišanas. Tas nozīmē, ka leņķis 4 tiks atbalstīts vismaz līdz 2018. gada septembrim ar kļūdu novēršanu un svarīgiem labojumiem. Vairumā gadījumu leņķa atjaunināšana no v2 uz v4 ir tikpat vienkārša kā leņķisko atkarību atjaunināšana. Leņķis piedāvā arī ceļvedi ar informāciju par to, vai ir vajadzīgas papildu izmaiņas.

Vue 1.x līdz 2.0 atjaunināšanas procesam jābūt vienkāršam mazai lietotnei - izstrādātāju komanda ir apstiprinājusi, ka 90% no API paliek nemainīgi. Pultī darbojas jauks jaunināšanas-diagnostikas migrācijas palīga rīks. Viens izstrādātājs atzīmēja, ka atjaunināšana no v1 uz v2 joprojām nebija izklaidējoša lielajā lietotnē. Diemžēl nav skaidra (publiska) ceļa plāna par nākamo galveno versiju vai informācijas par LTS versiju plāniem.

Vēl viena lieta: leņķiskais ir pilnīgs ietvars un piedāvā daudzas lietas, kas savienotas kopā. React ir elastīgāks nekā leņķiskais, un jūs, iespējams, likvidēsit, izmantojot neatkarīgākas, neatrisinātas un ātri pārvietojas bibliotēkas - tas nozīmē, ka jums pašiem ir jārūpējas par atbilstošajiem atjauninājumiem un migrēšanu. Tas varētu kaitēt arī tad, ja atsevišķi iepakojumi vairs netiek uzturēti vai kāds cits iepakojums kādā brīdī kļūst par de facto standartu.

1.5. Cilvēkresursi un personāla atlase

Ja jums ir iekšēji HTML izstrādātāji, kuri nevēlas uzzināt vairāk Javascript, labāk izvēlēties Leņķa vai Vue. Reaģēšana nozīmē vairāk Javascript (par to mēs runāsim vēlāk).

Vai jums ir dizaineri, kas strādā tuvu šim kodam? Lietotājs “pier25” vietnē Reddit atzīmē, ka React ir jēga, ja strādājat Facebook, kur visi ir supervaroņu izstrādātāji. Reālajā pasaulē jūs ne vienmēr atradīsit dizaineru, kurš var modificēt JSX - kā tāds darbs ar HTML veidnēm būs daudz vienkāršāks.

Labā lieta par leņķisko karkasu ir tā, ka jauns izstrādājums no leņķa 2 no cita uzņēmuma ātri iepazīsies ar visām nepieciešamajām konvencijām. Reaktivitātes projekti arhitektūras lēmumu ziņā ir atšķirīgi, un izstrādātājiem ir jāiepazīstas ar konkrētā projekta iestatīšanu.

Leņķiskais ir labs arī tad, ja jums ir izstrādātāji, kuriem ir uz objektu orientēts fons vai kuriem nepatīk Javascript. Lai vadītu šo punktu mājās, šeit ir Mahesh Chand citāts:

Es neesmu JavaScript izstrādātājs. Mana pieredze ir liela mēroga uzņēmumu sistēmu veidošana, izmantojot “reālas” programmatūras platformas. Es 1997. gadā sāku veidot lietojumprogrammas, izmantojot C, C ++, Pascal, Ada un Fortran. (…) Es varu skaidri pateikt, ka JavaScript man ir tikai juceklis. Būdams Microsoft MVP un eksperts, man ir laba izpratne par TypeScript. Es neredzu arī Facebook kā programmatūras izstrādes uzņēmumu. Tomēr Google un Microsoft jau ir lielākie programmatūras novatori. Es jūtos ērtāk, strādājot ar produktu, kuru spēcīgi atbalsta Google un Microsoft. Arī (..) ņemot vērā manu pieredzi, es zinu, ka Microsoft ir vēl lielāki plāni par TypeScript.

Nu, tad… Man droši vien jāpiemin, ka Mahesh ir Microsoft reģionālais direktors.

2. Reakcijas, leņķa un vērtības salīdzinājums

2.1 Sastāvdaļas

Visi attiecīgie ietvari ir balstīti uz komponentiem. Komponents iegūst ievadi, un pēc noteiktas iekšējas darbības / skaitļošanas tas atgriež atveidoto UI veidni (pierakstīšanās / izrakstīšanās apgabals vai uzdevumu saraksta vienums). Definētajiem komponentiem jābūt viegli izmantojamiem atkārtoti vietnē vai citu komponentu ietvaros. Piemēram, jums varētu būt režģa komponents (kas sastāv no galvenes komponenta un vairākiem rindu komponentiem) ar dažādām īpašībām (kolonnas, galvenes informācija, datu rindas utt.) Un jūs varētu atkārtoti izmantot komponentu ar dažādām datu kopām citā lapā. Šeit ir visaptverošs raksts par komponentiem, ja vēlaties uzzināt vairāk par to.

Gan React, gan Vue lieliski darbojas, rīkojoties ar nejēdzīgiem komponentiem: mazas, bezvalstniecības funkcijas, kas saņem izejas un atgriešanās elementus.

2.2. Rakstraksts vs ES6 un ES5

React koncentrējas uz Javascript ES6 izmantošanu. Vue izmanto Javascript ES5 vai ES6.

Leņķis ir atkarīgs no TypeScript. Tas nodrošina lielāku konsekvenci saistītajos piemēros un atvērtā pirmkoda projektos (Reaktīvie piemēri ir atrodami ES5 vai ES6). Tas arī ievieš tādus jēdzienus kā dekoratori un statiskie tipi. Statiskie tipi ir noderīgi koda izlūkošanas rīkos, piemēram, automātiskā reaģēšana, pāriešana uz definīcijām utt. - domājams, ka tie arī samazina lietojumprogrammā pieļauto kļūdu skaitu, lai gan par šo tēmu noteikti nav vienprātības. Ēriks Elliots savā rakstā “Šokējošais noslēpums par statiskajiem tipiem” nepiekrīt. Daniels Vangs saka, ka statisko tipu izmantošanas izmaksas nekaitē un ka ir labi, ja ir gan uz testiem balstīta izstrāde (TDD), gan statiskā rakstīšana.

Jums droši vien vajadzētu arī zināt, ka varat izmantot plūsmu, lai React iespējotu tipa pārbaudi. Tas ir statisks tipa pārbaudītājs, kuru Facebook izstrādājis JavaScript. Plūsmu var integrēt arī VueJS.

Ja jūs rakstāt savu kodu mašīnrakstā, jūs vairs nerakstāt parasto JavaScript. Lai arī TypeScript aug, tai joprojām ir niecīga lietotāju bāze, salīdzinot ar visu JavaScript valodu. Viens no riskiem varētu būt tas, ka jūs pārvietojaties nepareizā virzienā, jo TypeScript var - lai arī cik maz ticams, ka tas ir - laika gaitā arī pazūd. Turklāt TypeScript projektiem pieliek daudz (mācīšanās) pieskaitāmās izmaksas - par to vairāk varat izlasīt Ērika Elliota salīdzinājumā ar Angular 2 vs React.

2.3 Veidnes - JSX vai HTML

Reaģējiet pārtraukumos ar sen zināmu labāko praksi. Gadu desmitiem izstrādātāji mēģināja atdalīt lietotāja interfeisa veidnes un iestrādāt Javascript loģiku, taču ar JSX tie atkal tiek sajaukti. Tas var likties briesmīgi, taču jums vajadzētu klausīties Pētera Hunta runu “Reaģēt: labākās prakses pārdomāšana” (no 2013. gada oktobra). Viņš norāda, ka veidņu un loģikas nodalīšana ir tikai tehnoloģiju, nevis problēmu atdalīšana. Veidņu vietā vajadzētu veidot komponentus. Sastāvdaļas ir atkārtoti lietojamas, saliekamas un testējamas ar vienību.

JSX ir izvēles priekšprocesors HTML veida sintaksei, kas vēlāk tiks apkopota Javascript. Tam ir daži quirks - piemēram, klases vietā ir jāizmanto className, jo pēdējais ir Javascript aizsargāts nosaukums. JSX ir liela attīstības priekšrocība, jo jums viss ir vienuviet, un koda pabeigšana un kompilācijas laika pārbaude darbojas labāk. Veicot drukas kļūdu JSX, React netiks sastādīts, un tas izdrukās rindas numuru, kurā radusies kļūda. 2. leņķis izpildes laikā mierīgi neizdodas (šis arguments, iespējams, nav derīgs, ja jūs izmantojat AOT ar leņķisko).

JSX nozīmē, ka viss React ir Javascript - tas tiek izmantots gan JSX veidnēm, gan loģikai. Cory House to norāda savā rakstā no 2016. gada janvāra: “Leņķis 2 turpina ievietot“ JS ”HTML. Reaktīvs ievieto HTML HTML. ”. Tā ir laba lieta, jo Javascript ir jaudīgāks nekā HTML.

Leņķiskās veidnes ir uzlabotas HTML ar īpašu leņķisko valodu (tādas lietas kā ngIf vai ngFor). Kamēr Reaktīvam ir vajadzīgas zināšanas par JavaScript, leņķis liek jums apgūt leņķim raksturīgo sintakse.

Vue ir “viena faila komponenti”. Šķiet, ka tas ir kompromiss attiecībā uz problēmu nodalīšanu - veidnes, skripti un stili ir vienā failā, bet trīs dažādās, sakārtotās sadaļās. Tas nozīmē, ka jūs saņemat sintakse izcelšanu, CSS atbalstu un vieglāk izmantojat tādus priekšprocesorus kā Jade vai SCSS. Citos rakstos esmu lasījis, ka JSX ir vieglāk atkļūdot, jo Vue neuzrādīs sliktas HTML sintakse kļūdas. Tas nav taisnība, jo Vue konvertē HTML uz renderēšanas funkcijām - tāpēc kļūdas tiek parādītas bez problēmām (Paldies Vinicius Reis par komentāriem un labojumiem!).

Sānu piezīme: Ja jums patīk JSX ideja un vēlaties to izmantot Vue, varat izmantot babel-plugin-transform-vue-jsx.

2.4. Ietvars vs bibliotēka

Leņķiskais ir ietvars, nevis bibliotēka, jo tas sniedz pārliecinošu viedokli par to, kā jūsu lietojumprogrammai jābūt strukturētai, un tai ir arī lielāka funkcionalitāte. Leņķiskais ir “pilnīgs risinājums” - iekļautas baterijas un gatavas, lai sniegtu jums patīkamu sākumu. Jums nav jāanalizē bibliotēkas, maršrutēšanas risinājumi vai tamlīdzīgi - varat vienkārši sākt strādāt.

No otras puses, React un Vue ir vispārēji elastīgi. Viņu bibliotēkas var savienot pārī ar visu veidu pakotnēm (Repm ir diezgan daudz npm, taču Vue ir mazāk paku, jo tā joprojām ir diezgan jauna). Izmantojot React, jūs pat varat apmainīt pašu bibliotēku pret API saderīgām alternatīvām, piemēram, Inferno. Tomēr ar lielu elastīgumu ir jāuzņemas liela atbildība - React nav noteikumu un ierobežotu norādījumu. Katram projektam ir jāpieņem lēmums par tā arhitektūru, un viss var noiet greizi.

No otras puses, leņķim ir neskaidra celtniecības instrumentu, katlu plākšņu, starpliku un laika izlietņu ligzda. Tas pats attiecas uz React, ja tiek izmantoti sākuma komplekti vai katlu plāksnes. Viņi, protams, ir ļoti noderīgi, taču React darbojas ārpus tā, un tas, iespējams, ir tas, kas jums to vajadzētu iemācīties. Dažreiz dažādus instrumentus, kas nepieciešami darbam Javascript vidē, sauc par “Javascript nogurumu”. Par to ir rakstījis Ēriks Clemmons, kuram ir šāds teikums:

Joprojām ir daudz instalētu rīku, jūs neesat pieraduši, kad sākat ar ietvaru. Tie tiek ģenerēti, bet, iespējams, daudzi izstrādātāji nesaprot, kas notiek zem pārsega - vai arī tas prasa daudz laika.

Vue, šķiet, ir tīrākais un vieglākais no trim ietvariem. GitLab ir bloga ieraksts par savu lēmumu attiecībā uz Vue.js (2016. gada oktobris):

Vietnei Vue.js ir ideāls līdzsvars starp to, ko tā darīs jūsu labā un kas jums jādara pašam. (…) Vue.js vienmēr ir pieejams, izturīgs, bet elastīgs drošības tīkls, kas ir gatavs palīdzēt jūsu programmēšanai un jūsu DOM radītās ciešanas līdz minimumam.

Viņiem patīk vienkāršība un ērta lietošana - avota kods ir ļoti labi salasāms, un nav nepieciešama dokumentācija vai ārējas bibliotēkas. Viss ir ļoti vienkārši. Vue.js “arī neizdara lielus pieņēmumus par kaut ko daudz”. Ir arī aplāde par GitLab lēmumu.

Cits emuārs par pāreju uz Vue nāk no Pixeljets. Reaģēt “bija liels solis uz priekšu JS pasaulei attiecībā uz izpratni par valsti, un tas daudziem cilvēkiem parādīja īstu funkcionālu programmēšanu labā, praktiskā veidā”. Viens no lielākajiem React un Vue mīnusiem ir JSX ierobežojumu dēļ sastāvdaļu sadalīšanas mazākās sastāvdaļās problēma. Šeit ir raksta citāts:

Man un manai komandai ir svarīga koda lasāmība, taču joprojām ir ļoti svarīgi, lai koda rakstīšana būtu jautra. Nav smieklīgi izveidot 6 komponentus, kad ieviešat patiešām vienkāršu kalkulatora logrīku. Daudzos gadījumos tas ir slikti arī attiecībā uz uzturēšanu, modificēšanu vai kāda logrīka vizuālu kapitālo remontu, jo jums ir jāpārvietojas pa vairākiem failiem / funkcijām un jāpārbauda katrs mazais HTML fragments. Es atkal neierosinu rakstīt monolītus - es ikdienas lietošanai izstrādāju mikrokomponentu vietā komponentus.

Par Hacker jaunumiem un Reddit tiek ievietotas interesantas diskusijas par emuāra ziņu - ir gan disidentu, gan arī citu Vue atbalstītāju argumenti.

2.5. Valsts pārvaldība un saistošie dati

UI veidošana ir grūta, jo visur ir stāvokļi - datu mainīšana laika gaitā rada sarežģītību. Noteiktas valsts darbplūsmas ir liels palīgs, kad lietotnes aug un kļūst sarežģītākas. Ierobežotiem lietojumiem tas, iespējams, ir pārāk liels, un pietiktu ar kaut ko līdzīgu Vanilla JS.

Kā tas darbojas? Komponenti jebkurā brīdī apraksta lietotāja saskarni. Kad dati mainās, ietvars atkārto visu lietotāja saskarnes komponentu - parādītie dati vienmēr ir atjaunināti. Šo jēdzienu mēs varam nosaukt par “lietotāja saskarni kā funkciju”.

React bieži darbojas kopā ar Redux. Redux apraksta sevi trīs pamatprincipos:

  • Viens patiesības avots
  • Stāvoklis ir tikai lasāms
  • Izmaiņas tiek veiktas, izmantojot tikai funkcijas

Citiem vārdiem sakot: pilnīgas lietojumprogrammas statuss tiek saglabāts objekta kokā vienā veikalā. Tas palīdz ar lietojumprogrammas atkļūdošanu, un dažas funkcijas ir vieglāk ieviest. Stāvoklis ir tikai lasāms, un to var mainīt tikai ar darbībām, lai izvairītos no sacensību apstākļiem (tas palīdz arī atkļūdošanai). Reduktori ir rakstīti, lai precizētu, kā stāvokļus var pārveidot ar darbībām.

Lielākajā daļā apmācību un katlu plākšņu Redux jau ir integrēts, taču jūs varat izmantot Reaktīvu bez tā (un jums, iespējams, nemaz nevajadzēs Redux jūsu projektā). Redux jūsu kodā ievieš sarežģītību un diezgan spēcīgus ierobežojumus. Ja jūs mācāties reaģēt, pirms pāriet uz Redux, jums vajadzētu padomāt par vienkārša reaģēšanas mācīšanos. Jums noteikti vajadzētu izlasīt Dan Abramov “Jums varētu nebūt vajadzīgs Redux”.

Daži izstrādātāji iesaka izmantot Mobx, nevis Redux. Jūs to varat uzskatīt par “automātisko Redux”, kas padara lietas daudz vieglāk lietojamas un saprotamas jau pašā sākumā. Ja vēlaties paskatīties, jums jāsāk ar ievadu. Varat arī izlasīt šo noderīgo Robina salīdzinājumu starp Redux un MobX. Tas pats autors piedāvā arī informāciju par pāreju no Redux uz MobX. Šis saraksts ir noderīgs, ja vēlaties pārbaudīt citas Flux bibliotēkas. Un, ja jūs ieradāties no MVC pasaules, jūs vēlaties izlasīt Mihaila Levkovska rakstu “Domāšana Redux (kad viss, ko jūs esat zinājis, ir MVC)”.

Vue var izmantot Redux, bet tas piedāvā Vuex kā savu risinājumu.

Liela atšķirība starp React un Leņķisko ir vienvirziena un divvirzienu iesiešana. Leņķa divvirzienu iesiešana maina modeļa stāvokli, kad tiek atjaunināts lietotāja saskarnes elements (piemēram, lietotāja ievade). Reaģēt var tikai vienā virzienā: vispirms tiek atjaunināts modelis un pēc tam tas tiek parādīts lietotāja saskarnes elements. Leņķa metode kodā ir tīrāka, un izstrādātājam to ir vieglāk ieviest. React veids nodrošina labāku datu pārskatu, jo dati plūst tikai vienā virzienā (tas atvieglo atkļūdošanu).

Abiem jēdzieniem ir plusi un mīnusi. Jums jāsaprot jēdzieni un jānosaka, vai tas ietekmē jūsu pamatlēmumu. Raksts “Divvirzienu datu iesiešana: 2. leņķis un reaģēt” un šis Stackoverflow jautājums abi sniedz labu skaidrojumu. Šeit jūs varat atrast dažus interaktīvu kodu piemērus (3 gadus veci, tikai leņķim 1 un reaģēt). Visbeidzot, Vue atbalsta gan vienvirziena iesiešanu, gan divvirzienu iesiešanu (pēc noklusējuma vienvirziena).

Ja vēlaties lasīt tālāk, ir garš raksts par dažādiem štatiem un stāvokļa pārvaldību leņķiskajās lietojumprogrammās (Viktors Savkins).

2.6 Citas programmēšanas koncepcijas

Leņķis ietver atkarības injekciju, shēmu, kurā viens objekts piegādā atkarības (pakalpojums) citam objektam (klientam). Tas rada lielāku elastību un tīrāku kodu. Raksts “Izpratne par atkarības injekciju” šo jēdzienu izskaidro sīkāk.

Modeļa skata kontroliera modelis (MVC) sadala projektu trīs komponentos: modelis, skats un kontrolieris. Leņķa kā MVC karkasa gadījumā MVC nav pieejams. Reaģēt ir tikai V - jums pašiem jāatrisina M un C.

2.7. Elastība un samazināšana līdz mikropakalpojumiem

Jūs varat strādāt ar React vai Vue, vienkārši pievienojot Javascript bibliotēku avota kodam. Izmantojot Leņķisko, tas nav iespējams, jo tajā tiek izmantots TypeScript.

Tagad mēs vairāk virzāmies uz mikropakalpojumiem un mikroaplikācijām. Reaģēt un Vue dod jums lielāku kontroli pār lietojumprogrammas izmēru, izvēloties tikai tās lietas, kas patiešām ir vajadzīgas. Tie piedāvā lielāku elastību, pārejot no SPA uz mikropakalpojumiem, izmantojot iepriekšējās lietojumprogrammas daļas. Leņķiskais darbs vislabāk piemērots SPA, jo tas, iespējams, ir pārāk uzpūsts, lai to izmantotu mikropakalpojumos.

Kā atzīmē Korija māja:

JavaScript strauji virzās uz priekšu, un React ļauj jums nomainīt mazus lietojumprogrammas gabalus uz labākām bibliotēkām, nevis gaidīt un cerēt, ka jūsu sistēma ieviesīs jauninājumus. Mazu, saliekamu, viena mērķa instrumentu filozofija nekad neiziet no stila.

Daži cilvēki izmanto React arī vietnēs, kas nav SPA vietnes (piemēram, sarežģītām formām vai burvjiem). Pat Facebook izmanto React - nevis galvenajai lapai, bet gan konkrētām lapām un funkcijām.

2.8 Izmērs un veiktspēja

Visai funkcionalitātei ir raksturīga puse: leņķiskais ietvars ir diezgan uzpūsts. Gzipēta faila lielums ir 143k, salīdzinot ar 23K Vue un 43k React.

Gan React, gan Vue ir izveidots virtuāls DOM, kam vajadzētu uzlabot veiktspēju. Ja jūs tas interesē, vietnē react.js varat izlasīt par atšķirībām starp virtuālo DOM un DOM, kā arī par virtuālā DOM patiesajām priekšrocībām. Arī viens no Virtual-DOM autoriem atbild uz ar veiktspēju saistītu jautājumu par Stackoverflow.

Lai pārbaudītu sniegumu, man bija jāskatās uz lielisko js-framework-benchmark. Varat to lejupielādēt un palaist pats, vai arī apskatīt interaktīvo rezultātu tabulu. Pirms rezultātu pārbaudes jums jāzina, ka ietvari krāpjas ar etaloniem - šādu darbības pārbaudi nevajadzētu izmantot lēmumu pieņemšanai.

Leņķiskās, reaģējošās un vērtības izmaiņasAtmiņas iedalīšana MB

Rezumējot: Vue ir lieliska veiktspēja un visdziļākā atmiņas iedalīšana, taču visi šie ietvari tiešām ir diezgan tuvu viens otram, salīdzinot ar īpaši lēniem vai ātriem ietvariem (piemēram, Inferno). Vēlreiz: izpildes rādītāji būtu jāuzskata tikai par blakus piezīmēm, nevis kā spriedumu.

2.9 Pārbaude

Facebook izmanto Jest, lai pārbaudītu savu React kodu. Šeit ir Jest un Mocha salīdzinājums - un tur ir raksts par to, kā enzīmu lietot kopā ar Mocha. Ferments ir JavaScript testēšanas utilīta, ko izmanto Airbnb (kopā ar Jest, Karma un citiem testa skrējējiem). Ja vēlaties lasīt vairāk, ir daži vecāki raksti par testēšanu React (šeit un šeit).

Pēc tam leņķī 2 ir Jasmīns kā testēšanas ietvars. Šeit ir dzirdams Ērika Elliota raksts, kurā teikts, ka Jasmīns “rada miljoniem veidu, kā rakstīt testus un apgalvojumus, un tas ir rūpīgi jāizlasa katrs, lai saprastu, ko tas dara”. Iznākums ir arī ļoti uzpūsts un darbietilpīgs lasīšanai. Ir daži informatīvi raksti par leņķa 2 integrāciju ar Karmu un Moku. Šeit ir vecs video (no 2015. gada) par testēšanas stratēģijām ar Angular 2.

Vjū trūkst testēšanas norāžu, taču Evans savā 2017. gada priekšskatījumā rakstīja, ka komanda plāno pie tā strādāt. Viņi iesaka lietot Karma. Vue darbojas kopā ar Jest, un ir arī avoriaz kā testa lietderība.

2.10. Universālās un vietējās lietotnes

Universālās lietotnes ievieš lietotnes arī tīmeklī, uz darbvirsmas un vietējo lietotņu pasaulē.

Gan reaģēt, gan leņķiski tiek atbalstīta vietējā attīstība. Leņķim ir NativeScript (ko atbalsta Telerik) vietējām lietotnēm un Ionic Framework hibrīda lietotnēm. Izmantojot React, jūs varat pārbaudīt reaģēšanas vietņu atveidotāju, lai izveidotu iOS un Android lietotnes plattform formātā vai vietējām lietotnēm reaģēt dzimtā vietā. Daudzas lietotnes (ieskaitot Facebook; vairāk skatiet vitrīnu) ir veidotas, izmantojot vietni reaģēt.

Javascript ietvari klientam atveido lapas. Tas nelabvēlīgi ietekmē uztverto veiktspēju, vispārējo lietotāja pieredzi un SEO. Iepriekšēja renderēšana servera pusē ir plus. Visiem trim ietvariem ir bibliotēkas, lai atrastu palīdzību šajā jautājumā. Reaktīvam ir nākamais.js, Vue ir nuxt.js, bet leņķiskajam ir… .Angular Universal.

2.11 Mācīšanās līkne

Leņķim noteikti ir stāva mācīšanās līkne. Tam ir visaptveroša dokumentācija, taču dažreiz jūs varētu justies neapmierināts ar to, jo lietas ir grūtāk, nekā izklausās. Pat ja jums ir dziļa izpratne par Javascript, jums jāapgūst, kas notiek zem ietvara pārsega. Iestatīšana sākumā ir maģiska, un tā piedāvā daudz iekļautu pakešu un kodu. To var uzskatīt par negatīvu, jo ir liela, jau eksistējoša ekosistēma, kas laika gaitā jums jāiemācās. No otras puses, tas varētu būt labs konkrētajā situācijā, jo daudz lēmumu jau ir pieņemts. Izmantojot React, jums, iespējams, būs jāpieņem daudz lēmumu uzspiežot attiecībā uz trešo personu bibliotēkām. Valsts pārvaldībai ir 16 dažādas plūsmas paketes, no kurām izvēlēties tikai React.

Vue ir diezgan viegli iemācīties. Uzņēmumi pāriet uz Vue, jo šķiet, ka jaunākajiem izstrādātājiem tā ir daudz vienkāršāka. Šeit jūs varat izlasīt par kādu, kas apraksta savas komandas pāreju no leņķa uz Vue. Pēc cita lietotāja domām, viņa uzņēmuma lietotne React bija tik sarežģīta, ka jauns izstrādātājs nevarēja sekot līdzi šim kodam. Izmantojot Vue, plaisa starp jaunākajiem un vecākajiem izstrādātājiem samazinās, un viņi var sadarboties vieglāk un ar mazāk kļūdu, problēmu un laika, lai izstrādātu.

Daži cilvēki apgalvo, ka lietas, ko viņi ir izdarījuši Reaktā, būtu labāk uzrakstījuši Vue. Ja esat nepieredzējis Javascript izstrādātājs vai ja pēdējā desmitgadē strādājāt galvenokārt ar jQuery, jums vajadzētu padomāt par Vue izmantošanu. Paradigmas maiņa ir izteiktāka, pārejot uz Reaktīvu. Vue izskatās vairāk kā vienkāršs Javascript, vienlaikus ieviešot arī dažas jaunas idejas: komponentus, uz notikumiem balstītu modeli un vienvirziena datu plūsmu. Tam ir arī mazs nospiedums.

Tikmēr Leņķim un Reaktīvam ir savs veids, kā rīkoties. Viņi var nonākt jūsu ceļā, jo jums jāpielāgo sava prakse, lai lietas darbotos pēc savas gaitas. Tas var kaitēt, jo jūs neesat tik elastīgs un pastāv stingrāka mācīšanās līkne. Tas varētu būt arī ieguvums, jo, apgūstot tehnoloģiju, jūs esat spiesti apgūt pareizās koncepcijas. Izmantojot Vue, jūs varat darīt lietas, kas veidotas pēc Javascript modeļa. Sākumā tas var būt vienkāršāk, bet ilgtermiņā tas var kļūt par problēmu, ja lietas netiek kārtotas pareizi.

Runājot par atkļūdošanu, tas ir arī plus, ka Reaktīvam un Vue ir mazāk burvju. Kļūdu meklēšana ir vienkāršāka, jo ir mazāk vietu, kur meklēt, un kaudzīšu pēdas labāk atšķir atšķirīgu kodu un bibliotēku kodu. Cilvēki, kas strādā ar React, ziņo, ka viņiem nekad nav jāizlasa bibliotēkas avota kods. Tomēr, atkļūdot savu leņķisko lietojumprogrammu, jums bieži ir jāatspējo leņķa iekšējie elementi, lai saprastu pamata modeli. Raugoties uz gaišo pusi, domājams, ka kļūdu ziņojumi ir skaidrāki un informatīvāki, sākot ar 4. leņķi.

2.12. Leņķiskais, reaģējošais un laukums zem pārsega

Vai vēlaties pats pārbaudīt avota kodu? Vai vēlaties redzēt, kā jūtas lietas?

Jūs, iespējams, vispirms vēlēsities izpētīt Github krātuves: React (github.com/facebook/react), Leņķa (github.com/angular/angular) un Vue (github.com/vuejs/vue)

Kā izskatās sintakse? ValueCoders salīdzina leņķa, reaģēšanas un vue sintakse.

Ir arī labi redzēt lietas ražošanā kopā ar pamata avota kodu. TodoMVC ir uzskaitīti desmitiem vienas un tās pašas Todo lietotnes, kas uzrakstīta ar dažādiem Javascript ietvariem - jūs varat salīdzināt leņķisko, Reactand Vue risinājumus. RealWorld izveido reālās pasaules lietojumprogrammu (vidējs klons), un viņiem ir sagatavoti risinājumi gan leņķa (4+), gan reaģēšanai (ar Redux). Vue ir nepabeigts darbs.

Ir arī dažas reālās pasaules lietotnes, kuras jūs varētu apskatīt. Šeit ir React risinājumi:

  • Dariet (jauka reālās pasaules piezīmju pārvaldības lietojumprogramma, kas izveidota ar React & Redux)
  • sound-redux (Soundcloud klients, kas izveidots ar React & Redux)
  • Brainfock (projekta un komandas vadības risinājums, kas izveidots ar React)
  • reaģēt-hn un reaģēt-ziņas (hakeru ziņu kloni)
  • react-native-whatsapp-ui + apmācība (Whatsapp klons ar react-native)
  • fēnikss-trelo (Trello klons)
  • ļengans klons + vēl viena apmācība (klusie kloni)

Ir dažas lietotnes Leņķis:

  • angular2-hn & hn-ng2 (Hacker News kloni + jauka Ashwin Sureshkumar apmācība par vēl viena izveidi)
  • Reduks un leņķis-2 (Twitter klons)

Ir arī risinājumi Vue:

  • vue-hackernews-2.0 un Loopa ziņas (Hacker News kloni)
  • vue-soundcloud (Soundcloud demonstrācija)

Secinājums

Izlemiet par ietvaru tagad

Reaģēt, Leņķis un Vue visi ir diezgan forši, un neviens no tiem neizceļas skaidri virs citiem. Uzticieties savai zarnu sajūtai. Šis pēdējais izklaidējošais cinisms var palīdzēt jūsu lēmumam:

Netīrais, mazais noslēpums ir tas, ka lielākajai daļai “mūsdienu JavaScript attīstības” nav nekā kopīga ar vietņu izveidi - tās ir paketes, kuras var izmantot cilvēki, kuri veido bibliotēkas, un kurus var izmantot cilvēki, kuri veido ietvarus, cilvēki, kas raksta konsultācijas un pasniedz kursus var mācīt.Es neesmu pārliecināts, vai kāds kaut ko būvē, lai lietotāji varētu mijiedarboties.

Tas, protams, ir pārspīlējums, bet, iespējams, tajā ir patiesības grauds. Jā, Javascript ekosistēmā ir daudz rosības. Jūsu meklēšanas laikā, iespējams, atradīsit daudz citu pievilcīgu alternatīvu - mēģiniet nebūt aklam ar jaunāko un visgludāko ietvaru.

Kas man jāizvēlas?

Ja strādājat Google: leņķiskais

Ja jums patīk TypeScript: Leņķa (vai Reaģēt)

Ja jums patīk uz objektu orientēta programmēšana (OOP): leņķa

Ja jums ir nepieciešami norādījumi, struktūra un palīdzīga roka: leņķa

Ja strādājat Facebook: reaģējiet

Ja jums patīk elastīgums: reaģējiet

Ja jums patīk lielas ekosistēmas: reaģējiet

Ja vēlaties izvēlēties starp desmitiem paku: reaģējiet

Ja jums patīk JS un “viss-ir-Javascript pieeja”: reaģējiet

Ja jums patīk patiešām tīrs kods: Vue

Ja vēlaties vieglāko mācīšanās līkni: Vue

Ja vēlaties pēc iespējas vieglāku ietvaru: Vue

Ja vēlaties bažas sadalīt vienā failā: Vue

Ja strādājat viens pats vai jums ir neliela komanda: Vue (vai React)

Ja jūsu lietotne mēdz kļūt patiešām liela: leņķiska (vai reaģējoša)

Ja vēlaties izveidot lietotni ar vietni reaģēt: reaģējiet

Ja vēlaties, lai baseinā būtu daudz izstrādātāju: Leņķa vai Reaģējiet

Ja jūs strādājat ar dizaineriem un jums ir nepieciešami tīri HTML faili: Leņķa vai Vue

Ja jums patīk Vue, bet baidāties no ierobežotās ekosistēmas: reaģējiet

Ja nevarat izlemt, vispirms iemācieties reaģēt, tad Vue, pēc tam leņķiskais.

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