Nurk vs Vue.js - mugav võrdlusjuhend

Kaasaegne esiotsa arendus on viimase paarikümne aasta jooksul dramaatiliselt muutunud. Esiosa arendajana, kui ma mõtlen kaasaegsele esiotsa arendusele, tulevad mulle meelde kolm paljutõotavat tehnoloogiat, mida ma usun, et enamik teist suudab hõlpsasti ära arvata -

  1. Google'i nurk
  2. Facebooki reageerimine
  3. Vue.js

Mõlemal neist on oma tugevuste ja nõrkuste komplekt. Mida ma peaksin oma järgmise projekti jaoks kasutama, kui see peaks olema React või Angular või Vue.js, on väga levinud küsimus, mis kõigil esiotsa programmeerijatel kõigub.

Kirjutan oma kogemustele tuginedes seda blogi, et võrrelda kahte esiotsa arendusturu suurimat tegijat, st Angular (olles neist kolme hulgast vanim) ja Vue (olles antud kohordi seas kõige noorem) ning proovida et leida vastus, mida peaksite oma järgmises projektis kasutama. Kui soovite leida võrdlust reaalaja ja Vue.js vahel, leiate selle siin blogis.

Enne arutelu alustamist nende kahe plusside ja miinuste üle uurime mõnda Vue ja Angular ajalugu.

Nurgeline

Nurk on TypeScriptil põhinev JavaScripti raamistik. Google'i välja töötatud ja hooldatud Angular on ümberkirjutatud, AngularJS-i ühildamatu järeltulija. Kui AngularJS ilmus algselt 2010. aasta oktoobris ja Angular tutvustati 2016. aasta septembris versioonina 2.

Nurga kasutamisel veebi esiotsa arendamisel on mitmeid eeliseid -

  • See on kõik MVC

Model View Controlleri või MVC põhiidee on jagada rakendus kolmeks peamiseks loogiliseks komponendiks, nimelt. mudel, vaade ja kontroller, et isoleerida rakenduse loogika kasutajaliidese kihist.

  • Karbis olev TypeScripti tugi

TypeScript on JavaScripti pealmine komplekt, millel on tüübi turvalisuse ja tööriistade kujundamise aja tugi. Tüüpide saadavus muudab TypeScriptis kirjutatud koodi vastuvõtutähtajaks vigadele vähem vastuvõtlik.

  • Google'i omanduses

Toetab tehnoloogiahiiglane Google. Annab uue nurgaversiooni iga kuue kuu tagant.

  • Sõltuvused

AngularJS on varustatud sisseehitatud sõltuvuse sissepritse alamsüsteemiga, mis lihtsustab ühiku testimise protsessi.

Vue

Vue on ka JavaScripti raamistik, mille avaldas esmakordselt 2014. aasta veebruaris endine Google'i töötaja Evan You. Vue on kõige kiiremini kasvav JS raamistik, eriti ilma ühegi suurettevõtte toetuseta. Vue pärib suurema osa headest asjadest nii Reaktist kui ka Nurga alt ning seetõttu peavad mõned tehnikud seda Nurga ja Reaketi mitteametlikuks lapseks.

Vue kasutamisel veebi esiotsa arendamisel on mitmeid eeliseid -

  • See on väike suurus

Selle raamistiku suurus on 18–21 KB ning kasutaja allalaadimine ja kasutamine ei võta aega. See ei tähenda, et selle jõudlus oleks ohustatud - tegelikult ületab see kõiki mahukaid raamistikke nagu React.js, Angular.js ja Ember.js.

  • See on suhteliselt lihtne

Isiklikult olen suur Vue fänn. Seda on väga lihtne õppida - tegelikult suutsin Vue õppida ja kohandada igapäevastes arenguülesannetes vähem kui kahe nädala jooksul.

  • Vue dokumentatsioon on kiiduväärt

Ehkki seda ei toeta mitme miljardi dollarilised organisatsioonid, nagu Google või FB, on see siiski suutnud areneda väga lühikese aja jooksul ja on taganud, et värskendused pole nii keerulised, nagu mõnede juhtumite puhul. muudest turgu valitsevatest nimedest.

  • Pakub suurt paindlikkust

See annab kasutajatele õiguse kirjutada mall JavaScripti, HTML-faili ja puhta JavaScripti faili, kasutades virtuaalseid sõlme. See paindlikkus muudab ka React, Angular või mõne muu JS-i arendaja jaoks mõistmatuks.

Võrdlus

Siin on mõned peamised parameetrid, mille põhjal võrdleme nurga- ja vue-raamistikke -

  • Kui küpsed need raamistikud on?
  • Kui palju need ühilduvad erineva suurusega rakendustega?
  • Kuidas on kõigi nende raamistike õpikõveraga?
  • Kui palju arendajad / arendussõbralikud need raamistikud on?
  • Millist lavastust ootate rakendusest?
  • Kuidas saate alustada oma rakenduse struktureerimist valitud raamistikuga?
  • Kas see raamistik täidab tõenäoliselt teie projekti mastaapsuse?

Valmis, seatud, mine!

1. Ühiskond ja populaarsus

Kindlasti on nurgeline suurettevõtete seas populaarsem. Sellel on suur kogukond ja Google'i tugi.

Ka vue kasvab kiiresti ja on viimastel aastatel arendajatelt palju veojõudu saanud.

See on väike kogukond ja sellel pole suurettevõtte tuge

Statistikast rääkides-

Githubis on Angularil> 41 000 tähte ja 730 toetajat ning Vuel on peaaegu 114 000 tähte ja ainult 193 toetajat.

Github Starsi, Ajaloolise nurga, Reaktsiooni ja Vue ajaloo osas näib Vue trend olevat väga hea. Portaali bestof.js andmetel on Angular saanud keskmiselt 37 tähte ja Vue 135 tähte päevas.

Allikas: Keskmine

2. Süntaks ja koodipikkus

Mõlema raamistikuga töötades olen märganud, et Angular kasutab keerukamat süntaksi, samas kui Vue on süntaksi lihtsuse tõttu lihtne õppida. Aeg, mille olen kulunud Angularis lihtsate asjade tegemiseks, on rohkem. Mõnikord põhjustab selle keerukus sageli segadust.

Vue on lihtne õppida süntaksi lihtsuse tõttu. Siin on süntaks puhas ja puhas. Ja JavaScripti taustast lähtudes on mul Vue õppimine üsna lihtne. Kuna Angular kasutab TypeScripti (dekoraatorite ja injektorite kasutamine), peaksid olema põhiteadmised TypeScripti kohta või nad peaksid olema töötanud OOPS-i kontseptsiooni kallal.

3. Struktuur

Nurk on struktureeritum ja täpsem. See sunnib arendajat tegema kõike tavapärasel viisil. Peamiselt suurettevõtete projektid tuginevad nurgale oma etteantud struktuuri tõttu, mis tagab, et kõik arendajad järgivad sama arhitektuuri.

Vue on paindlikum ja see võimaldab arendajal struktureerida projekti soovitud viisil. See võimaldab kasutajal kirjutada oma malli HTML- või Javascript-faili. Võite kasutada nuppu Nurk, kui teie isiklikud eelistused on TypeScript ja OOPS. Lisaks pakub Vue ka projekti arendamiseks masinakirja, kuid selles pole palju raamatukogusid.

4. Koodi skaalautuvus

Kui teil on massiivne koodbaas, on Angular koodide skaleeritavuse osas hea, sest kuna see on täieõiguslik raamistik, siis see piirab arendajat arendama koodi konkreetses koodistruktuuris.

Teisest küljest puudub Vue.js-l parimate skaleerimise tavade loetelu. Vue.js-i kasutajatel pole spetsiaalset rakenduse struktuuri, mida järgida. See on väga oluline, kui teil on suur koodbaas.

5. Sisseehitatud raamatukogud

Kuna Vue on uus, on sellel vähem raamispetsiifilisi raamatukogusid, seega peate enamiku kolmandate osapoolte teegid selgesõnaliselt kaasama.

Anglical on nii palju raamistikuspetsiifilisi raamatukogusid ja ka enamik raamatukogusid on varem lisatud Angular-CLI projekti.

Näiteks - raamatukogu nagu RxJS on sisseehitatud nurga CLI projektidesse, kuid Vue'is peate selle toimimiseks installima selgesõnaliselt muud teegid, sealhulgas RxJS.

Ka Angular on sisse ehitanud API-spetsiifilised teegid, arendaja ei pea seda selgesõnaliselt installima. Vue ei kuulu API-spetsiifilise teegi juurde ja peab API-kõnede jaoks kasutama AXIOS-teeki.

6. Sooritus

Virtuaalse DOM-i kontseptsiooni kasutamine muudab Vue nurgelistega võrreldes performatiivsemaks.

Teisest küljest kasutab Angular andmete renderdamiseks jälgijaid.

Alustame virtuaalse DOM-iga. Oletame, et teil on d rida dünaamilist tabelit.

Nüüd muutub esimeses reas midagi. Enamik raamistikke teeb kogu loendi ümberehitamise ja uuesti renderdamise. See on n korda rohkem tööd kui vaja, kuna peame värskendama ainult esimest rida.

Ärgem heidame pilgu sellele, mida virtuaalne DOM selles olukorras teeb.

Enne mis tahes uuendamist loob see DOM-i koopia ja töötab selle koopiaga. Kui virtuaalset DOM-i on värskendatud, võrdleb see sama vanema versiooniga, mis on enne värskendust pildistatud, ja leiab elemente, mida tuleb värskendada. Pärast erinevuse kontrollimist värskendatakse DOM-is ainult neid osi, mida muudetakse.

7. Veebist kaugemale

Nurgaga on kaasas iooniline ja emakeelne skript mobiilirakenduste arendamiseks. Vue on parim valik arendajatele, kellele meeldib mobiilne arendus - Alibaba Weex ja Vue-Native -, kuid need on Ionicuga võrreldes üsna uued.

Kuid kumbki neist mobiiliraamistikest ei võimalda neil jõuda React Native'i tulemusteni.

Kokkuvõte

Vue.js on väga kerge ja hõlpsasti õpitav raamistik, mis võimaldab teil luua oma tegusaid rakendusi. See pole arendajate seas nii kuulus kui Angular (haldab Google), kuid kindlasti tekitab see suuri muutuste laineid. Te ei pruugi teada, kuid ka Laraveli kogukond on seda pidanud üheks oma eelistatud esiraamistikuks. Nurgeline on palju arenenud raamistik ja sellel on mitu tööriista kohe karbist välja. Võite valida, mida valida, järgmiste põhipunktide põhjal -

Kui te ikkagi ei suuda otsustada, õppige kõigepealt Vue, siis nurk.

Meil Systangos on ekspertide esi- ja täisversiooniarendajate kohord, kes kõik oskavad kõike klanitud ja teravat kujundada. Võimaldavate ja sujuvate veebikogemuste meisterdamiseks kasutame kõiki tipptasemel tehnoloogiaid, sealhulgas React, Angular ja Vue.js.

Arutage oma järgmist projekti - me tahaksime teid teist kuulda!

See artikkel avaldati algselt saidil Systango Technologies.