Kampas vs reagavimas vs vue - palyginimas

Sprendimas dėl „JavaScript“ programos jūsų internetinei programai gali būti nepaprastas. „Kampinis“ ir „Reaktyvusis“ yra labai populiarūs šiomis dienomis, ir pastaruoju metu vyksta didelis sukibimas: „VueJS“. Be to, tai tik keli nauji vaikai bloke.

„Java“ scenarijai 2017 m. - šiais laikais viskas nėra lengva!

Taigi, kaip mes turime nuspręsti?

Prieš pradedant - SPA, ar ne?

Pirmiausia turėtumėte aiškiai nuspręsti, ar jums reikia vieno puslapio taikymo (SPA), ar verčiau pasirinkti kelių puslapių metodą.

Šiandien startuoliai: „Angular“, „React“ ir „Vue“

Pirmiausia norėtume aptarti gyvenimo ciklą ir strateginius aspektus. Tada pereisime prie trijų „javascript“ struktūrų funkcijų ir koncepcijų. Galiausiai padarysime išvadą.

Štai šie klausimai, į kuriuos šiandien kreipsimės:

  • Ar brandaus yra rėmai / bibliotekos?
  • Ar rėmai gali būti tam tikrą laiką?
  • Kiek daug ir naudingų yra jų atitinkamos bendruomenės?
  • Ar lengva rasti kiekvieno rėmelio kūrėjus?
  • Kokios yra pagrindinės programų programavimo sąvokos?
  • Ar lengva naudoti rėmus mažoms ar didelėms programoms?
  • Kaip atrodo mokymosi kreivė kiekvienai sistemai?
  • Kokio spektaklio galite tikėtis iš rėmų?
  • Kur galėtumėte atidžiau pažvelgti po gaubtu?
  • Kaip galite pradėti kurti pagal pasirinktą sistemą?

1. Gyvenimo ciklas ir strateginiai aspektai

1.1 Šiek tiek istorijos

„Angular“ yra „TypeScript“ pagrindu sukurta „Javascript“ sistema. Sukurtas ir prižiūrimas „Google“, jis apibūdinamas kaip „superherojiškas„ Java MVWFramework “. „Angular“ (taip pat „Angular 2+“, „Angular 2“ arba „ng2“) yra perrašytas, dažniausiai nesuderinamas „AngularJS“ įpėdinis (taip pat „Angular.js“ arba „AngularJS 1.x“). Nors „AngularJS“ (senoji) iš pradžių buvo išleista 2010 m. Spalio mėn., Ji vis dar gauna taisymus ir kt. - naujasis „Angular“ („sans JS“) buvo pristatytas 2016 m. Rugsėjo mėn. Kaip 2 versija. Naujausias pagrindinis leidimas yra 4 versija, nes 3 versija buvo praleista. Kampinį naudoja „Google“, „Wix“, „Weather.com“, „health.gov“ ir „Forbes“ (pagal „madewithangular“, „stackshare“ ir „libscore.com“).

Reakcija apibūdinama kaip „JavaScript“ biblioteka vartotojo sąsajų kūrimui “. Iš pradžių išleista 2013 m. Kovo mėn., „React“ buvo sukurta ir prižiūrima „Facebook“, kuri naudoja „React“ komponentus keliuose puslapiuose (vis dėlto ne kaip vieno puslapio programa). Remiantis šiuo Chriso Cordle'o straipsniu, „React“ naudojama daug daugiau „Facebook“, o „Angular“ yra „Google“. „React“ taip pat naudoja „Airbnb“, „Uber“, „Netflix“, „Twitter“, „Pinterest“, „Reddit“, „Udemy“, „Wix“, „Paypal“, „Imgur“, „Feedly“, „Stripe“, „Tumblr“, „Walmart“ ir kiti („Facebook“, „stackshare“ ir libscore.com duomenimis).

„Facebook“ dirba prie „React Fiber“ išleidimo. Tai pakeis reagavimą po gaubtu - dėl to greičiausiai pateikimas bus daug greitesnis, tačiau po pakeitimų viskas bus suderinama atgal. „Facebook“ kalbėjo apie pokyčius savo kūrėjų konferencijoje 2017 m. Balandžio mėn., O buvo paskelbtas neoficialus straipsnis apie naująją architektūrą. „React Fiber“ buvo išleistas kartu su „React 16“ 2017 m. Rugsėjo mėn.

„Vue“ yra viena iš sparčiausiai augančių JS struktūrų 2016 m. „Vue“ save apibūdina kaip „intuityvų, greitą ir kompozicinį MVVM, skirtą kurti interaktyvias sąsajas.“ Pirmą kartą ją išleido 2014 m. Vasario mėn. Buvęs „Google“ darbuotojas Evanas You (BTW: Evan tada parašė įdomų tinklaraščio įrašą apie rinkodaros veiklą ir skaičius per pirmąją savaitę). Tai buvo gana sėkminga, ypač turint omenyje, kad „Vue“ pritraukia tiek daug žmonių, kiek rodo vienas žmogus, be didelės kompanijos palaikymo. Šiuo metu Evanas turi keliolikos pagrindinių kūrėjų komandą. 2016 metais buvo išleista 2 versija. Vue naudoja „Alibaba“, „Baidu“, „Expedia“, „Nintendo“, „GitLab“ - mažesnių projektų sąrašą galite rasti tinklalapyje madewithvuejs.com.

Visus tris rėmus galima įsigyti pagal MIT licenciją.

„React“ buvo išsiųstas su specialia BSD3 licencijos byla iki 2017 m. Rugsėjo mėn. Dėl patentų bylos buvo daug diskusijų. Jei jus domina šios istorijos istorija, galite perskaityti šią „Github“ leidimo diskusiją, priežastis ir patentų bylos istoriją (autorius - „Ex-Facebook“ inžinierius Jamesas Ideas), kodėl neturėtumėte bijoti (Dennisas Walshas), įspėjimas nenaudoti pradedantiesiems (autorius Raúl Kripalani) ir buvęs „Facebook“ pranešimas šia tema: „React“ licencijos paaiškinimas. Šiaip ar taip - viskas neturėtų būti svarbu, nes „Facebook“ pagaliau paskelbė, kad „React“ gaus MIT licenciją.

1.2 Pagrindinės sistemos plėtra

Kaip jau minėta, „Angular“ ir „React“ palaiko ir naudoja didžiosios įmonės. „Facebook“, „Instagram“ ir „Whatsapp“ tai naudoja savo puslapiuose. „Google“ ją naudoja daugelyje projektų: pavyzdžiui, naujoji „Adwords“ vartotojo sąsaja buvo įdiegta naudojant „Angular & Dart“. Vėlgi, „Vue“ realizuoja grupė asmenų, kurių darbas remiamas naudojantis „Patreon“ ir kitomis rėmimo priemonėmis. Galite patys nuspręsti, ar tai teigiama, ar neigiama. Matthias Götzke mano, kad maža „Vue“ komanda yra privalumas, nes ji sukuria švaresnį ir mažiau perprogramuotą kodą / API.

Pažvelkime į kai kuriuos statistinius duomenis: „Kampinis“ savo komandos puslapyje nurodo 36 žmones, „Vue“ - 16 žmonių, o „React“ neturi komandos puslapio. „Github“ svetainėje „Angular“ turi> 25 000 žvaigždžių ir 463 pagalbininkus, „React“ turi> 70 000 žvaigždžių ir> 1 000 bendraautorių, o Vue turi beveik 60 000 žvaigždžių ir tik 120 pagalbininkų. Taip pat galite patikrinti „Github Stars“ istoriją, ar nėra kampinių, reaguojančių ir reikšmingų. Vėl atrodo, kad Vue labai gerai mąsto. Remiantis bestof.js, per pastaruosius tris mėnesius „Angular 2“ per dieną vidutiniškai gauna 31 žvaigždę, „React“ - 74 ir „Vue.JS“ - 107.

„Github“ žvaigždžių kampinių, reagavimo ir vertybių istorija (šaltinis)

Atnaujinimas: Ačiū Paului Henscheliui, kad jis atkreipė dėmesį į ppm tendencijas. Jie rodo tam tikrų npm paketų atsisiuntimų skaičių ir yra dar naudingesni vien tik pažvelgus į „Github“ žvaigždes:

Nurodytų npm paketų per pastaruosius 2 metus atsisiuntimų skaičius ppm.

1.3 Rinkos gyvavimo ciklas

Dėl skirtingų pavadinimų ir versijų „Google Trends“ sunku palyginti kampą, reagavimą ir vertę. Vienas iš būdų suderinti gali būti paieška kategorijoje „Internetas ir technologijos“. Štai rezultatas:

O, gerai. Vue nebuvo sukurta iki 2014 m. - čia kažkas negerai. „La Vue“ prancūzų kalba reiškia „vaizdas“, „žvilgsnis“ arba „nuomonė“. Galbūt taip yra. „VueJS“ ir „Kampinis“ arba „Reaguoti“ palyginimas taip pat nėra teisingas, nes, palyginti su kitais, VueJS beveik neturi rezultatų.

Pabandykime tada dar ką nors. „ThoughtWorks“ technologijos radaras suteikia gerą įspūdį apie tai, kaip laikui bėgant vystosi technologijos. „Redux“ yra priėmimo stadijoje (turi būti patvirtinta projektuose!), Ir ji buvo neįkainojama daugelyje „ThoughtWorks“ projektų. Vue.js yra bandomojoje stadijoje (išbandykite!). Jis apibūdinamas kaip lengva ir lanksti alternatyva kampiniam, kurio mokymosi kreivė yra mažesnė. 2 kampas yra vertinimo stadijoje - jį sėkmingai naudoja „ThoughtWork“ komandos, tačiau dar nėra griežtos rekomendacijos.

Remiantis paskutine „Stackoverflow 2017“ apklausa, „React“ mėgsta 67% apklaustų kūrėjų, o „AngularJS“ - 52%. „Nėra intereso toliau kurti“ registruoja didesnius „AngularJS“ (48%) ir „reaguoti“ (33%) skaičius. „Vue“ nepatenka į geriausiųjų dešimtuką. Tada yra „statejs.com“ apklausa, kurioje lyginamos „priekinės programos“. Įdomiausi faktai: „Re reaguoti“ ir „Kampiniai“ žino 100 proc., O „Vue“ nežinoma 23 proc. Apklaustų žmonių. Kalbant apie pasitenkinimą, „React“ įvertino 92% už tai, kad „vėl naudotųsi“, 89% Vue ir 2 kampą tik 65%.

O kaip kita klientų pasitenkinimo apklausa? Erikas Elliotas pradėjo vieną 2016 m. Spalio mėn., Norėdamas įvertinti kampą 2 ir reaguoti. Tik 38% apklaustų žmonių vėl naudotųsi kampu 2, o 84% - dar kartą.

1.4 Ilgalaikė parama ir migracijos

„React“ API yra gana stabilios, kaip „Facebook“ nurodo savo projektavimo principuose. Taip pat yra keletas scenarijų, padėsiančių pereiti iš dabartinės API į naujesnę: patikrinkite react-codemod. Perkėlimas yra gana lengvas ir nėra tokio dalyko (reikia), kaip ilgalaikio palaikymo versija. Šiame „Reddit“ įraše žmonės pažymi, kad atnaujinimai niekada nebuvo problema. „React“ komanda parašė tinklaraščio įrašą apie jų versijų schemą. Pridėję perspėjimo dėl nusidėvėjimo funkciją, jie saugo jį likusiai dabartinės versijos versijai, prieš pakeisdami elgesį kitoje pagrindinėje versijoje. Naujos pagrindinės versijos neplanuojama keisti - „v14“ buvo išleista 2015 m. Spalio mėn., „V15“ buvo paskelbta 2016 m. Balandžio mėn., O „v16“ dar neturi išleidimo datos. Kaip neseniai pažymėjo „React“ pagrindinis kūrėjas, atnaujinimas neturėtų sukelti problemų.

Kalbant apie „Angular“, yra tinklaraščio įrašas apie „Versija“ ir „Išleidimas“, pradedant „v2“. Bus atliekamas vienas svarbus atnaujinimas kas šešis mėnesius, o ne trumpesnis kaip šešių mėnesių amortizacijos laikotarpis (du pagrindiniai leidimai). Dokumentacijoje pažymėtos kelios eksperimentinės API su trumpesniais nusidėvėjimo laikotarpiais. Kol kas nėra jokio oficialaus pranešimo, tačiau pagal šį straipsnį „Angular“ komanda paskelbė ilgalaikio palaikymo versijas, prasidedančias nuo „Angular 4.“. Jos bus palaikomos mažiausiai vienerius metus po kitos pagrindinės versijos išleidimo. Tai reiškia, kad 4 kampas bus palaikomas bent jau iki 2018 m. Rugsėjo mėn. Su klaidų pataisomis ir svarbiais pataisomis. Daugeliu atvejų atnaujinti kampinį iš v2 į v4 yra taip paprasta, kaip atnaujinti kampines priklausomybes. „Kampinis“ taip pat pateikia vadovą su informacija apie tai, ar reikia papildomų pakeitimų.

Mažos programos „Vue 1.x“ iki 2.0 atnaujinimo procesas turėtų būti lengvas - kūrėjų komanda tvirtino, kad 90% API liko ta pati. Konsolėje veikia puikus įrankis, skirtas patobulinti diagnostinę migracijos pagalbinę priemonę. Vienas kūrėjas pažymėjo, kad naujinimas iš v1 į v2 vis dar nebuvo įdomus didelėje programoje. Deja, nėra aiškaus (viešo) gairių apie kitą pagrindinę versiją ar informacijos apie LTS versijų planus.

Dar vienas dalykas: kampinis yra visas rėmas ir siūlo daugybę dalykų, sujungtų kartu. „Re reaguoti“ yra lanksčiau nei kampinis, ir greičiausiai baigsitės naudodamiesi savarankiškesnėmis, nenustatytais, greitai judančiomis bibliotekomis - tai reiškia, kad patys turite pasirūpinti atitinkamais atnaujinimais ir perkėlimu. Tai taip pat gali pakenkti, jei tam tikros pakuotės nebeatliekamos arba kai kuri nors kita pakuotė tam tikru momentu tampa de facto standartu.

1.5. Žmogiškieji ištekliai ir įdarbinimas

Jei turite vidinių HTML kūrėjų, kurie nenori sužinoti daugiau „Javascript“, geriau pasirinkti „Kampinis“ arba „Vue“. Reaguoti reikia daugiau „Javascript“ (apie tai kalbėsime vėliau).

Ar turite dizainerių, dirbančių pagal kodą? Vartotojas „pier25“ „Reddit“ pažymi, kad „React“ turi prasmę, jei dirbate „Facebook“, kur visi yra superherojų kūrėjai. Realiame pasaulyje ne visada rasite dizainerį, kuris galėtų modifikuoti JSX - iš esmės dirbti su HTML šablonais bus daug lengviau.

Geras dalykas, susijęs su „Angular“ karkasu, yra tas, kad naujas „Angular 2“ kūrėjas iš kitos įmonės greitai susipažins su visomis būtinomis taisyklėmis. Reakciniai projektai skiriasi architektūriniais sprendimais, todėl kūrėjai turi susipažinti su konkrečia projekto sąranka.

Kampas tinka ir tuo atveju, jei turite kūrėjų, orientuotų į objektą arba kurie nepatinka „Javascript“. Norėdami nuvažiuoti tą tašką namo, čia yra Mahesh Chand citata:

Aš nesu „JavaScript“ kūrėjas. Mano pagrindas yra stambių įmonių sistemų kūrimas naudojant „tikras“ programinės įrangos platformas. 1997 m. Pradėjau kurti C, C ++, Pascal, Ada ir Fortran. (…) Aš galiu aiškiai pasakyti, kad „JavaScript“ man yra tik žvilgsnis. Būdamas „Microsoft MVP“ ir ekspertas, aš gerai suprantu „TypeScript“. Aš taip pat nematau „Facebook“ kaip programinės įrangos kūrimo įmonės. Tačiau „Google“ ir „Microsoft“ jau yra didžiausi programinės įrangos novatoriai. Jaučiuosi patogesnis dirbdamas su produktu, kurį labai palaiko „Google“ ir „Microsoft“. Be to, žinau, kad „Microsoft“ turi dar didesnius „TypeScript“ planus, turėdamas savo išsilavinimą.

Na, tada ... Turbūt turėčiau paminėti, kad Maheshas yra „Microsoft“ regiono direktorius.

2. Reakcijos, kampo ir įvesties palyginimas

2.1 Komponentai

Visos aptariamos sistemos yra pagrįstos komponentais. Komponentas gauna įvestį, o po tam tikro vidinio elgesio / skaičiavimo grąžina pateiktą vartotojo sąsajos šabloną (prisijungimo / atsijungimo sritį arba darbų sąrašą) kaip išvestį. Apibrėžtus komponentus turėtų būti lengva pakartotinai naudoti tinklalapyje ar kituose komponentuose. Pvz., Jūs galite turėti tinklelio komponentą (susidedantį iš antraštės komponento ir kelių eilutės komponentų) su įvairiomis savybėmis (stulpeliai, antraštės informacija, duomenų eilutės ir kt.) Ir sugebėti komponentą pakartotinai naudoti su skirtingais duomenų rinkiniais kitame puslapyje. Čia yra išsamus straipsnis apie komponentus, jei norite sužinoti daugiau apie tai.

Tiek „React“, tiek „Vue“ yra puikūs tvarkant kvailus komponentus: mažos funkcijos be pilietybės, kurios priima įvesties ir grąžinimo elementus kaip išvestį.

2.2 Rašomasis raštas palyginti su ES6 ir ES5

„React“ daugiausia dėmesio skiria „Javascript ES6“ naudojimui. „Vue“ naudojamas „Javascript ES5“ arba „ES6“.

Kampas priklauso nuo „TypeScript“. Tai suteikia daugiau nuoseklumo susijusiuose pavyzdžiuose ir atvirojo kodo projektuose (Reaktyvius pavyzdžius galite rasti ES5 arba ES6). Čia taip pat pristatomos tokios sąvokos kaip dekoratoriai ir statiniai tipai. Statiniai tipai yra naudingi kodų žvalgybos priemonėms, tokioms kaip automatinis reaktorių atkūrimas, perėjimas prie apibrėžimų ir pan., Jos taip pat turėtų sumažinti programoje esančių klaidų skaičių., Nors šia tema tikrai nėra sutarimo. Erikas Elliotas nesutinka savo straipsnyje „Šokiruojanti statiškų tipų paslaptis“. Danielis C Wangas sako, kad statinių tipų naudojimo išlaidos nedaro jokios žalos ir kad būtų gerai, jei būtų ir bandymų valdomas tobulinimas (TDD), ir statinis spausdinimas.

Taip pat turėtumėte žinoti, kad galite naudoti „Flow“, kad įgalintumėte tipo tikrinimą „React“. Tai yra statinis tipo tikrintuvas, kurį „Facebook“ sukūrė „JavaScript“. Srautą taip pat galima integruoti į „VueJS“.

Jei rašote kodą „TypeScript“, neberašote standartinio „JavaScript“. Nors „TypeScript“ auga, vis dar yra maža vartotojų bazė, palyginti su visa „JavaScript“ kalba. Viena rizika gali būti, kad judate neteisinga linkme, nes laikui bėgant „TypeScript“, kad ir kaip būtų mažai tikėtina, taip pat išnyks. Be to, „TypeScript“ prie projekto prideda daug (mokymosi) pridėtinių išlaidų - daugiau apie tai galite perskaityti Eric Elliott palyginime „Angular 2 vs React“.

2.3 Šablonai - JSX arba HTML

Reaguokite į pertraukas, remdamiesi ilgamete patirtimi. Dešimtmečius kūrėjai bandė atskirti UI šablonus ir įterpti „Javascript“ logiką, tačiau su JSX jie vėl yra maišomi. Tai gali atrodyti baisiai, tačiau turėtumėte klausytis Peterio Hunto pokalbio „Reaguoti: permąstyti geriausią praktiką“ (nuo 2013 m. Spalio mėn.). Jis pabrėžia, kad šablonų ir logikos atskyrimas yra tik technologijų, o ne rūpesčių atskyrimas. Vietoj šablonų turėtumėte sukurti komponentus. Komponentai yra daugkartinio naudojimo, kompoziciniai ir patikrinti.

JSX yra pasirenkamas HTML tipo sintaksės pirminis procesorius, kuris vėliau bus kompiliuotas „Javascript“. Jame yra keletas keiksmažodžių - pavyzdžiui, vietoj klasės turite naudoti „className“, nes pastarasis yra „Javascript“ saugomas vardas. „JSX“ yra didelis plėtros pranašumas, nes viską turite vienoje vietoje, o kodo pildymas ir kompiliavimo laiko patikrinimai veikia geriau. Kai darote klaidą JSX, „React“ nebus kompiliuotas ir išspausdins eilutės numerį, kuriame įvyko klaida. 2 kampas žlunga tyliai vykdant (šis argumentas greičiausiai netinkamas, jei naudojate AOT su kampiniu).

JSX reiškia, kad viskas „React“ yra „Javascript“ - ji naudojama ir JSX šablonams, ir logikai. „Cory House“ tai pabrėžia savo 2016 m. Sausio mėn. Straipsnyje: „Angular 2 ir toliau įterpia„ JS “į HTML. Reaguoti į HTML įveda „HTML“. “. Tai yra geras dalykas, nes „Javascript“ yra galingesnis nei HTML.

Kampiniai šablonai yra patobulinti HTML, naudojant specialią kampinę kalbą (tokie dalykai kaip ngIf ar ngFor). Nors „Re reaguoti“ reikia žinoti apie „JavaScript“, tačiau kampas verčia jus išmokti kampui būdingą sintaksę.

Vue yra „vieno failo komponentai“. Tai atrodo kaip kompromisas, susijęs su rūpesčių atskyrimu - šablonai, scenarijai ir stiliai yra vienoje byloje, bet trijose skirtingose, užsakytose dalyse. Tai reiškia, kad gausite sintaksės paryškinimą, CSS palaikymą ir lengvesnį tokių procesorių, kaip Jade ar SCSS, naudojimą. Aš perskaičiau kituose straipsniuose, kad JSX lengviau derinti, nes „Vue“ nerodys blogų HTML sintaksės klaidų. Tai netiesa, nes Vue konvertuoja HTML į renderio funkcijas - taigi klaidos rodomos be problemų (Ačiū Viniciui Reisui už komentarus ir taisymą!).

Šoninė pastaba: Jei jums patinka JSX idėja ir norite ją naudoti „Vue“, galite naudoti „babel-plugin-transform-vue-jsx“.

2.4 Karkasas ir biblioteka

„Kampinis“ yra sistema, o ne biblioteka, nes ji pateikia tvirtą nuomonę apie tai, kaip jūsų programa turėtų būti struktūruota, taip pat turi daugiau funkcijų. Kampas yra „pilnas sprendimas“ - į jį įtrauktos baterijos, paruoštos maloniam darbui. Jums nereikia analizuoti bibliotekų, maršruto parinkimo sprendimų ar pan. - galite tiesiog pradėti dirbti.

Kita vertus, „React“ ir „Vue“ yra universalūs. Jų bibliotekas galima suporuoti su visų rūšių pakuotėmis („React“ yra gana daug „npm“, tačiau „Vue“ turi mažiau paketų, nes ji vis dar gana jauna). Naudodamiesi „Re reaguoti“, galite net pačią biblioteką pakeisti į API suderinamas alternatyvas, tokias kaip „Inferno“. Tačiau už didelį lankstumą kyla didžiulė atsakomybė - „React“ nėra taisyklių ir ribotų nurodymų. Kiekvienam projektui reikia priimti sprendimą dėl jo architektūros ir viskas gali suklysti lengviau.

Kita vertus, kampinis yra painus statybinių įrankių, katilo plokščių, kaladėlių ir laiko kriauklių lizdas. Tai pasakytina ir apie „React“, jei naudojami pradiniai rinkiniai ar katilinės. Jie, be abejo, yra labai naudingi, tačiau „Re reaguoti“ neveikia ir tikriausiai taip turėtumėte išmokti. Kartais įvairios priemonės, reikalingos darbui „Javascript“ aplinkoje, yra vadinamos „Javascript nuovargiu“. Apie tai yra Ericas Clemmonsas, turintis tai pasakyti:

Dar yra krūva įdiegtų įrankių, prie kurių nesate įpratęs, kai pradedate nuo sistemos. Jie yra sugeneruoti, bet tikriausiai daugelis kūrėjų nesupranta, kas vyksta po gaubtu - ar jiems tai užima daug laiko.

Vue atrodo švariausia ir lengviausia iš trijų rėmų. „GitLab“ turi tinklaraščio įrašą apie savo sprendimą dėl „Vue.js“ (2016 m. Spalio mėn.):

„Vue.js“ yra tobula pusiausvyra tarp to, ką jis padarys už jus ir ką jums reikia padaryti patiems. (…) „Vue.js“ visada pasiekiamas, tvirtas, bet lankstus saugos tinklas, padedantis užtikrinti jūsų efektyvų programavimą. jūsų DOM patirtos kančios iki minimumo.

Jiems patinka paprastumas ir patogumas naudotis - šaltinio kodas yra labai lengvai skaitomas, nereikia jokių dokumentų ar išorinių bibliotekų. Viskas labai nesudėtinga. Vue.js „taip pat nedaro didelių prielaidų apie daug ką“. Taip pat yra internetinė transliacija apie „GitLab“ sprendimą.

Kitas tinklaraščio įrašas apie poslinkį link „Vue“ yra „Pixeljets“. Reakcija „buvo didelis žingsnis į priekį JS pasauliui, kalbant apie valstybės sąmoningumą, ir tai daugeliui žmonių parodė gerą funkcinį programavimą geru, praktišku būdu“. Vienas didžiausių „React“ ir „Vue“ minusų yra problemų suskaidymas į mažesnius komponentus dėl „JSX“ apribojimų. Čia yra straipsnio citata:

Man ir mano komandai svarbu kodo skaitomumas, tačiau vis tiek labai svarbu, kad kodo rašymas būtų įdomus. Nejuokinga kurti 6 komponentus, kai diegiate tikrai paprastą skaičiuoklės valdiklį. Daugeliu atvejų tai taip pat blogai dėl kai kurių valdiklių priežiūros, modifikavimo ar vizualaus kapitalinio remonto, nes reikia peršokti kelis failus / funkcijas ir patikrinti kiekvieną mažą HTML fragmentą atskirai. Vėlgi, aš nesiūlau rašyti monolitų - aš siūlau naudoti komponentus, o ne mikrokomponentus kasdieniam vystymuisi.

Yra įdomių diskusijų apie tinklaraščio įrašą apie „Hacker“ naujienas ir „Reddit“ - yra ir disidentų, ir kitų „Vue“ rėmėjų argumentų.

2.5 Valstybės valdymas ir duomenų įpareigojimas

UI kurti yra sunku, nes visur yra būsenos - duomenys keičiasi laikui bėgant ir tampa sudėtingesni. Apibrėžtos valstybės darbo procedūros yra didelė pagalba, kai programos tobulėja ir tampa sudėtingesnės. Ribotų programų atveju tai greičiausiai yra per daug sudėtinga ir pakaktų kažko panašaus į „Vanilla JS“.

Kaip tai veikia? Komponentai bet kuriuo metu apibūdina vartotojo sąsają. Kai keičiasi duomenys, sistema iš naujo pateikia visą vartotojo sąsajos komponentą - rodomi duomenys visada yra atnaujinami. Šią sąvoką galime vadinti „vartotojo sąsaja kaip funkcija“.

„React“ dažnai dirba kartu su „Redux“. Redux apibūdina save trimis pagrindiniais principais:

  • Vienintelis tiesos šaltinis
  • Valstybė yra tik skaitoma
  • Pakeitimai atliekami naudojant grynas funkcijas

Kitaip tariant: visos programos būsena saugoma objekto medyje vienoje parduotuvėje. Tai padeda derinti programą, o kai kurias funkcijas lengviau įgyvendinti. Būsena yra tik skaitoma ir ją galima pakeisti tik atliekant veiksmus, kad būtų išvengta lenktynių sąlygų (tai taip pat padeda derinant). Reduktoriai yra parašyti tam, kad nurodytų, kaip būsenas galima pakeisti veiksmais.

Daugelyje vadovėlių ir katilinių „Redux“ jau yra integruotas, tačiau jūs galite naudoti „Re reaguoti“ be jo (ir „Redux“ gali būti nereikalingas jūsų projekte). „Redux“ įveda jūsų kodo sudėtingumą ir gana stiprius suvaržymus. Jei mokotės reaguoti, prieš pradėdami mokytis Redux, turėtumėte pagalvoti apie paprasto reagavimo mokymąsi. Jūs tikrai turėtumėte perskaityti Dano Abramovo „Jums gali nereikėti Redux“.

Kai kurie kūrėjai siūlo naudoti „Mobx“, o ne „Redux“. Galite galvoti apie tai kaip „automatinį„ Redux ““, kuris palengvina naudojimąsi ir supratimą. Jei norite pasižvalgyti, turėtumėte pradėti nuo įžangos. Taip pat galite perskaityti šį naudingą „Robin“ „Redux“ ir „MobX“ palyginimą. Tas pats autorius taip pat siūlo informacijos apie perkėlimą iš „Redux“ į „MobX“. Šis sąrašas yra naudingas, jei norite patikrinti kitas „Flux“ bibliotekas. Ir jei jūs esate kilęs iš MVC pasaulio, norėsite perskaityti Michailo Levkovskio straipsnį „Mąstymas Redux (kai viskas, ką žinojai yra MVC)“.

„Vue“ gali naudoti „Redux“, tačiau ji siūlo „Vuex“ kaip savo sprendimą.

Didelis skirtumas tarp „Re reaguoti“ ir „Kampiniai“ yra vienpusis ir dvipusis įrišimas. Kampo dvipusis įrišimas keičia modelio būseną, kai atnaujinamas UI elementas (pvz., Vartotojo įvestis). Reaguoti gali tik viena kryptimi: pirmiausia atnaujina modelį, o po to pateikia UI elementą. Kampinis metodas yra švaresnis kode ir yra lengviau pritaikomas kūrėjui. Reaktyvus būdas suteikia geresnę duomenų apžvalgą, nes duomenys teka tik viena kryptimi (tai palengvina derinimo procesą).

Abi sąvokos turi privalumų ir trūkumų. Turite suprasti sąvokas ir nuspręsti, ar tai daro įtaką jūsų pamatiniam sprendimui. Straipsnis „Du krypčių duomenų įrišimas: 2 kampas ir reaguok“ bei šis „Stackoverflow“ klausimas pateikia gerą paaiškinimą. Čia galite rasti keletą interaktyvių kodų pavyzdžių (3 metų, tik 1 kampui ir reaguoti). Paskutinis, bet ne mažiau svarbus dalykas yra tai, kad „Vue“ palaiko ir į abi puses, ir į abi puses (pagal nutylėjimą).

Jei norite skaityti toliau, „Kampinėse programose“ yra ilgas straipsnis apie įvairių tipų būsenas ir jų valdymą (Viktoras Savkinas).

2.6 Kitos programavimo sąvokos

Kampas apima priklausomybės injekciją, modelį, kuriame vienas objektas tiekia priklausomybes (paslaugą) kitam objektui (klientui). Tai suteikia daugiau lankstumo ir švaresnių kodų. Straipsnyje „Kaip suprasti priklausomybės injekciją“ ši koncepcija paaiškinta išsamiau.

Modelio rodinio valdiklio modelis (MVC) padalija projektą į tris komponentus: modelį, rodinį ir valdiklį. Kampinis, kaip MVC karkasas, neturi MVC. Reaguoti turi tik V - jums reikia patiems išspręsti M ir C.

2.7. Lankstumas ir mažinimas mikroservisų srityje

Galite dirbti su „React“ arba „Vue“ tiesiog pridėdami „Javascript“ biblioteką prie šaltinio kodo. Tai neįmanoma naudojant „Angular“, nes jis naudoja „TypeScript“.

Dabar daugiau judame mikro paslaugų ir mikroprogramų link. Reaguokite ir Vue suteikia jums daugiau galimybių valdyti programos dydį, pasirinkdami tik tuos dalykus, kurie yra tikrai būtini. Jie suteikia daugiau lankstumo pereinant nuo SPA prie mikro paslaugų, naudojant ankstesnės programos dalis. Kampinis darbas geriausiai tinka SPA, nes jis tikriausiai yra per daug išsipūtęs, kad būtų naudojamas mikropaslaugoms.

Kaip pažymi „Cory House“:

„JavaScript“ juda greitai, o „Re reaguoti“ leidžia pakeisti mažus aplikacijų rinkinius į geresnes bibliotekas, užuot laukus ir tikintis, kad jūsų sistema atsinaujins. Mažų, kompozicinių, vienos paskirties įrankių filosofija niekada neišeina iš stiliaus.

Kai kurie žmonės „React“ taip pat naudoja ne SPA svetainėse (pvz., Sudėtingoms formoms ar vedliams). Net „Facebook“ naudoja „React“ - ne pagrindiniam puslapiui, o tam tikriems puslapiams ir funkcijoms.

2.8 Dydis ir našumas

Visos funkcijos yra labai geros pusės: kampinis rėmas yra gana išsipūtęs. „Gzip“ failo dydis yra 143 000, palyginti su 23 000 „Vue“ ir 43 000 „React“.

Reakcija ir Vue abu turi virtualų DOM, kuris turėtų pagerinti našumą. Jei jus tai domina, galite perskaityti apie virtualiojo DOM ir DOM skirtumus bei realius virtualiojo DOM pranašumus tinklalapyje react.js. Be to, vienas iš „Virtual-DOM“ autorių atsako į su rezultatais susijusį klausimą apie „Stackoverflow“.

Norėdami patikrinti spektaklį, aš pasižiūrėjau į puikų „js-framework-benchmark“. Galite atsisiųsti ir paleisti patys arba pažiūrėti interaktyvią rezultatų lentelę. Prieš tikrindami rezultatus turėtumėte žinoti, kad sistemos apgaudinėja etalonus - toks efektyvumo patikrinimas neturėtų būti naudojamas priimant sprendimus.

Kampinės, reaguojančios ir reikšmingos savybėsAtminties paskirstymas MB

Apibendrinant: „Vue“ turi puikų našumą ir giliausią atminties paskirstymą, tačiau visi šie rėmai yra tikrai gana arti vienas kito, palyginti su ypač lėtais ar greitais kadrais (pavyzdžiui, „Inferno“). Dar kartą: atlikimo kriterijai turėtų būti laikomi tik šalutine pastaba, o ne verdiktu.

2.9 Testavimas

„Facebook“ naudoja „Jest“ bandydamas savo „React“ kodą. Čia yra Jest ir Mocha palyginimas. Čia yra straipsnis, kaip naudoti fermentą su Mocha. Fermentas yra „JavaScript“ tikrinimo priemonė, naudojama „Airbnb“ (kartu su „Jest“, „Karma“ ir kitais bandymo bėgikais). Jei norite skaityti daugiau, yra keletas senesnių straipsnių apie bandymus „React“ (čia ir čia).

Čia yra „Jasmine“ kaip testavimo sistema „Angular 2“. Tai yra Erico Elliotto straipsnis, kuriame sakoma, kad „Jasmine“ sukuria milijonus būdų, kaip rašyti testus ir tvirtinimus, kuriuos reikia atidžiai perskaityti kiekvienam, kad suprastum, ką jis daro. Išvada taip pat yra labai išsipūtusi ir daug pastangų skaitanti. Yra keletas informatyvių straipsnių apie kampo 2 integraciją su Karma ir Mocha. Čia yra senas vaizdo įrašas (nuo 2015 m.) Apie bandymo strategijas naudojant „Angular 2“.

Vue trūksta bandymo nurodymų, tačiau Evanas savo 2017 m. Apžvalgoje rašė, kad komanda planuoja dirbti šiuo klausimu. Jie rekomenduoja naudoti „Karma“. „Vue“ veikia kartu su „Jest“, taip pat yra „Avoriaz“ kaip bandymo priemonė.

2.10 Universaliosios ir vietinės programos

Universalios programos taip pat pristato programas žiniatinklyje, darbalaukyje ir vietinių programų pasaulyje.

Reakcija ir kampas palaiko prigimtinį vystymąsi. Kampinis turi „NativeScript“ (paremtą „Telerik“) vietinėms programoms ir „Ionic Framework“ - hibridinėms programoms. Naudodami „React“ galite patikrinti „react-native-render“, kad sukurtumėte „iOS“ ir „Android“ programas, skirtus plattformėms, arba „vietines reakcijas“, skirtas vietinėms programoms. Daugybė programų (įskaitant „Facebook“; daugiau patikrinkite „Showcase“) yra sukurtos naudojant „react-native".

„Javascript“ sistemos atveria kliento puslapius. Tai neigiamai veikia suvoktą našumą, bendrą vartotojo patirtį ir SEO. Išankstinis serverio pateikimas yra pliusas. Visose trijose sistemose yra bibliotekos, kurios padės rasti pagalbą. „React“ yra next.js, „Vue“ turi nuxt.js, o kampinis turi… .Angular Universal.

2.11 Mokymosi kreivė

Neabejotinai yra stati kampo mokymosi kreivė. Joje yra išsami dokumentacija, tačiau kartais galite jaustis nusivylę, nes viskas yra sunkiau, nei atrodo. Net kai gerai suprantate „Javascript“, turite išmokti, kas vyksta po sistemos gaubtu. Iš pradžių sąranka yra stebuklinga ir siūlo daugybę įtrauktų paketų ir kodą. Tai gali būti vertinama kaip neigiama, nes yra didelė, egzistuojanti ekosistema, kurios jums reikia išmokti bėgant laikui. Kita vertus, tam tikroje situacijoje tai gali būti gerai, nes jau buvo priimta daugybė sprendimų. Naudodamiesi „React“, jums tikriausiai reikės priimti daug įpareigojančių sprendimų dėl trečiųjų šalių bibliotekų. Vien tik „React“ yra 16 skirtingų valstybės valdymo srautų paketų.

Vue yra gana lengva išmokti. Įmonės pereina prie „Vue“, nes atrodo, kad jaunesniems kūrėjams tai yra daug lengviau. Čia galite perskaityti apie ką nors, apibūdinantį jo komandos perėjimą iš kampinio į Vue. Anot kito vartotojo, „React“ programa jo įmonėje buvo tokia sudėtinga, kad naujasis kūrėjas negalėjo suspėti su kodu. Naudojant „Vue“, atotrūkis tarp jaunesniųjų ir vyresniųjų kūrėjų mažėja ir jie gali lengviau bendradarbiauti, turėdami mažiau klaidų, problemų ir laiko kurti.

Kai kurie žmonės tvirtina, kad dalykai, kuriuos jie padarė „React“, būtų buvę geriau užrašyti „Vue“. Jei esate nepatyręs „Javascript“ kūrėjas arba jei pastarąjį dešimtmetį daugiausia dirbote su „jQuery“, turėtumėte pagalvoti apie „Vue“ naudojimą. Paradigmos poslinkis yra ryškesnis pereinant į Reaktyvą. „Vue“ atrodo labiau kaip paprastas „Javascript“, kartu pateikdamas keletą naujų idėjų: komponentus, į įvykį orientuotą modelį ir vienpusį duomenų srautą. Tai taip pat turi nedidelį pėdsaką.

Tuo tarpu kampinis ir reaguoti turi savo būdą, kaip elgtis. Jie gali kliudyti, nes jums reikia pakoreguoti savo praktiką, kad viskas vyktų savaip. Tai gali pakenkti, nes esate mažiau lankstūs, o mokymosi kreivė yra griežtesnė. Tai taip pat galėtų būti naudinga, nes esate priversti išmokti teisingų koncepcijų, mokydamiesi technologijos. Naudodamiesi „Vue“, jūs galite atlikti tuos dalykus, kurie buvo pritaikyti senam „Javascript“ modeliui. Iš pradžių tai gali būti lengviau, tačiau ilgainiui tai gali tapti problema, jei viskas nebus padaryta tinkamai.

Kai reikia derinti, pliusas yra tas, kad „React“ ir „Vue“ turi mažiau magijos. Klaidų medžioklė yra lengvesnė, nes ten yra mažiau vietų, kur ieškoti, o rietuvių pėdsakai geriau atskiria savo ir bibliotekų kodus. Žmonės, dirbantys su „React“, praneša, kad niekada neturi skaityti bibliotekos išeities kodų. Tačiau derindami „Kampinę“ programą, norėdami suprasti pagrindinį modelį, dažnai turite derinti vidinio kampo programą. Ryškioje pusėje klaidų pranešimai turėtų būti aiškesni ir informatyvesni, pradedant nuo „Angular 4“.

2.12 Kampas, Reaguoti ir Vue po gaubtu

Ar norite patys patikrinti šaltinio kodą? Ar norite pamatyti, kaip viskas jaučiasi?

Turbūt pirmiausia norėsite patikrinti „Github“ saugyklas: „React“ (github.com/facebook/react), „Angular“ (github.com/angular/angular) ir „Vue“ (github.com/vuejs/vue).

Kaip atrodo sintaksė? „ValueCoders“ lygina „Angular“, „React“ ir „Vue“ sintaksę.

Taip pat gerai matyti dalykus gamyboje - kartu su pagrindiniu išeities kodu. „TodoMVC“ pateikia dešimtys tos pačios „Todo“ programos, parašytos su skirtingais „Javascript“ rėmais - galite palyginti „Angular“, „Reactand Vue“ sprendimus. „RealWorld“ sukuria realaus pasaulio programą (vidutinio klono) ir turi paruoštus sprendimus kampiniam (4+) ir reaguoti (su „Redux“). Vue yra nebaigtas darbas.

Taip pat yra keletas realaus pasaulio programų, kurias galėtumėte pažvelgti. Čia yra „React“ sprendimai:

  • Atlikite (puiki realaus pasaulio užrašų tvarkymo programa, sukurta naudojant „React & Redux“)
  • „sound-redux“ („Soundcloud“ klientas, sukurtas naudojant „React & Redux“)
  • „Brainfock“ (projekto ir komandos valdymo sprendimas, sukurtas kartu su „React“)
  • reaguoti-hn ir reaguoti-naujienos („Hacker“ naujienų klonai)
  • reaguoti-gimtoji-„whatsapp-ui“ + vadovėlis („Whatsapp“ klonas su reaguoti-gimtoji)
  • phoenix-trello (Trello klonas)
  • „klijuotas klonas“ + dar viena mokymo programa (silpni klonai)

Yra keletas „Kampinių“ programų:

  • „angular2-hn“ ir „hn-ng2“ („Hacker News“ klonai + Ashwino Sureshkumaro graži pamoka apie dar vieno kūrimą)
  • Raudonasis ir kampinis-2 („Twitter“ klonas)

Taip pat yra „Vue“ sprendimų:

  • „vue-hackernews-2.0“ ir „Loopa“ naujienos („Hacker News“ klonai)
  • „vue-soundcloud“ („Soundcloud“ demonstracinė versija)

Išvada

Nuspręskite dėl sistemos dabar

Reaguoti, kampinis ir Vue yra gana kietas, ir nė vienas iš jų nėra aiškiai virš kitų. Pasitikėkite savo žarnyno jausmu. Šis paskutinis linksmas cinizmas gali padėti apsispręsti:

Nešvari maža paslaptis yra tai, kad dauguma „šiuolaikinių„ JavaScript “kūrimo būdų neturi nieko bendra su realiu internetinių svetainių kūrimu - tai kūrimo paketai, kuriuos gali naudoti žmonės, kuriantys bibliotekas, kurie gali būti naudojami žmonėms, kuriantiems rėmus, žmonėms, rašantiems vadovus ir dėstantiems kursus. galiu išmokyti. Aš nesu tikras, kad kas nors ką nors sukuria, kad faktiniai vartotojai galėtų su jais bendrauti.

Tai, be abejo, yra perdėtas dalykas, tačiau jame tikriausiai yra grūdas tiesos. Taip, „Javascript“ ekosistemoje labai daug šurmulio. Paieškos metu tikriausiai rasite daug kitų patrauklių alternatyvų - stenkitės, kad jūsų netemdytų naujausias ir gražiausias rėmas.

Ką turėčiau pasirinkti?

Jei dirbate „Google“: kampinis

Jei jums patinka „TypeScript“: kampinis (arba „reaguokite“)

Jei jums patinka į objektą orientuotas programavimas (OOP): kampinis

Jei jums reikia patarimų, struktūros ir pagalbos rankos: Kampas

Jei dirbate „Facebook“: reaguokite

Jei jums patinka lankstumas: reaguokite

Jei jums patinka didelės ekosistemos: reaguokite

Jei jums patinka pasirinkti iš kelių dešimčių pakuočių: reaguokite

Jei jums patinka JS ir „viskas, kas yra Javascript“ požiūris: reaguokite

Jei jums patinka tikrai švarus kodas: Vue

Jei norite lengviausios mokymosi kreivės: Vue

Jei norite lengviausio rėmo: Vue

Jei norite atskirti rūpesčius vienoje byloje: Vue

Jei dirbate vienas arba turite nedidelę komandą: „Vue“ (arba „React“)

Jei jūsų programa linkusi tapti tikrai didelė: kampinė (arba reaguojanti)

Jei norite sukurti programą su reaguojančiąja kalba: reaguokite

Jei norite, kad baseine būtų daug kūrėjų: kampinis arba reaguokite

Jei dirbate su dizaineriais ir jums reikia švarių HTML failų: kampinis arba Vue

Jei tau patinka Vue, bet bijai ribotos ekosistemos: reaguok

Jei negalite nuspręsti, pirmiausia išmokite reaguoti, tada Vue, tada kampinis.

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