Kulmikas vs. Vue.js - kätevä vertailuopas

Moderni käyttöliittymäkehitys on dramaattisesti muuttunut paljon viime vuosikymmeninä. Etukäteen kehittäjänä, aina kun ajattelen nykyaikaista käyttöliittymäkehitystä, mieleeni tulee kolme lupaavaa tekniikkaa, joiden uskon, että suurin osa teistä voi arvata helposti -

  1. Googlen kulmikas
  2. Facebookin reagointi
  3. Vue.js

Jokaisella näistä on omat vahvuutensa ja heikkoutensa. Mitä minun pitäisi käyttää seuraavassa projektissani, jos se on React tai Angular tai Vue.js, on erittäin yleinen kysymys, joka tärisee jokaisen etuohjelman ohjelmoijan mielessä.

Kirjoitan kokemukseni perusteella tätä blogia vertaillakseen kahta suurimmista toimijoista front-end-kehitysmarkkinoilla, nimittäin Angular (ollakseen vanhin kolmesta heistä) ja Vue (ollaan nuorempi annetun kohortin joukossa) ja yrittää saadaksesi selville vastauksen, jota sinun tulisi käyttää seuraavassa projektissasi. Jos haluat löytää vertailun Reactin ja Vue.js: n välillä, löydät sen täältä tässä blogissa.

Ennen kuin aloitat keskustelun näiden kahden eduista ja haitoista, tutkitaan jotakin Vue- ja Angular-historiaa.

kulmikas

Angular on TypeScript-pohjainen JavaScript-kehys. Googlen kehittämä ja ylläpitämä Angular on uudelleen kirjoitettu, yhteensopimaton AngularJS-seuraaja. AngularJS julkaistiin alun perin lokakuussa 2010 ja Angular esiteltiin syyskuussa 2016 version 2 muodossa.

Angularin käytöllä web-käyttöliittymien kehittämisessä on useita etuja -

  • Se on kaikki MVC

Model View Controllerin tai MVC: n perusajatuksena on erottaa sovellus kolmeen pääasialliseen loogiseen komponenttiin, nimittäin. malli, näkymä ja ohjain sovelluslogiikan eristämiseksi käyttöliittymäkerroksesta.

  • Valikoimaton TypeScript-tuki

TypeScript on JavaScriptin yläjoukko suunnittelutyötuella tyyppiturvallisuudelle ja työkaluille. Tyyppien saatavuus tekee TypeScriptiin kirjoitetusta koodista vähemmän alttiita ajonaikaisille virheille.

  • Googlen omistama

Teknologian jättiläinen Google tukee sitä. Antaa uuden kulman version kuuden kuukauden välein.

  • Riippuvuudet injektio

AngularJS: ssä on sisäänrakennettu riippuvuusinjektiojärjestelmä, joka yksinkertaistaa yksikkötestausta.

vue

Vue on myös JavaScript-kehys, jonka entinen Googlen työntekijä Evan You julkaisi helmikuussa 2014. Vue on nopeimmin kasvava JS-kehys, varsinkin ilman minkään suuren yrityksen tukea. Vue perii suurimman osan hyvistä asioista sekä Reaktista että kulmasta, ja siksi jotkut teknikot pitävät sitä epävirallisena kulma- ja reaaliaikaisena lapsena.

Vue-käytöllä web-käyttöliittymän kehittämisessä on useita etuja -

  • Se on pieni koko

Tämän kehyksen koko on 18–21 kt, eikä käyttäjän lataaminen ja käyttäminen vie aikaa. Tämä ei tarkoita, että sen suorituskyky olisi vaarantunut - itse asiassa se voittaa kaikki tilaa vievät kehykset, kuten React.js, Angular.js ja Ember.js.

  • Se on suhteellisen helppoa

Henkilökohtaisesti olen suuri Vue-fani. Se on erittäin helppo oppia - itse asiassa pystyin oppimaan ja mukauttamaan Vuea päivittäisiin kehitystyöhön alle kahdessa viikossa.

  • Laivan dokumentaatio on kiitettävää

Vaikka usean miljardin dollarin organisaatiot, kuten Google tai FB, eivät tue sitä, se on silti onnistunut kehittymään hyvin lyhyessä ajassa ja on varmistanut, että päivitykset eivät ole niin monimutkaisia ​​imeytyä kuin jotkut ovat olleet. muista markkinoilla hallitsevista nimistä.

  • Tarjoaa paljon joustavuutta

Se antaa käyttäjilleen mahdollisuuden kirjoittaa malli JavaScript-tiedostoon, HTML-tiedostoon ja puhtaaseen JavaScript-tiedostoon virtuaalisten solmujen avulla. Tämän joustavuuden ansiosta Reactin, Angularin tai muiden JS-kehittäjien ymmärtäminen on tarpeetonta.

Vertailu

Tässä on joitain tärkeitä parametreja, joiden perusteella vertaamme kulma- ja vuekehyksiä -

  • Kuinka kypsät nämä puitteet ovat?
  • Kuinka paljon ne ovat yhteensopivia eri kokoisten sovellusten kanssa?
  • Entä kunkin näiden puitteiden oppimiskäyrä?
  • Kuinka paljon kehittäjä / kehitysystävälliset nämä puitteet ovat?
  • Millaista suorituskykyä odotat sovellukselta?
  • Kuinka voit aloittaa hakemuksesi jäsentämisen valitulla kehyksellä?
  • Täyttääko tämä kehys todennäköisesti projektisi skaalautuvuuden?

Valmis, aseta, mene!

1. Yhteisöllisyys ja suosio

Ehdottomasti kulmikas on suositumpi suurten yritysten keskuudessa. Sillä on suuri yhteisö ja Googlen takatuki.

Myös vue kasvaa nopeasti ja on saanut kehittäjiltä paljon pitoa viime vuosina.

Se on pieni yhteisö, eikä sillä ole suurta tukea yritykselle

Puhutaan tilastoista-

Githubissa Angularilla on> 41 000 tähteä ja 730 avustajaa, ja Vuellä on lähes 114 000 tähteä ja vain 193 avustajaa.

Github Stars -sivustolla, Historia kulmalle, Reaktille ja Vuelle jälleen kerran Vue näyttää treenevän erittäin hyvin. Bestof.js: n mukaan Angular on saanut keskimäärin 37 tähteä ja Vue 135 tähteä päivässä.

Lähde: Medium

2. Syntaksi ja koodipituus

Työskennellessään molemmissa kehyksissä olen huomannut, että Angular käyttää monimutkaisempia syntaksia, kun taas Vue on helppo oppia syntaksin yksinkertaisuuden vuoksi. Aika, jonka olen kuluttanut yksinkertaisten asioiden tekemiseen Angularissa, on enemmän. Joskus sen monimutkaisuus johtaa usein sekaannukseen.

Vue on helppo oppia, koska sen syntaksi on yksinkertainen. Täällä syntaksi on siisti ja puhdas. Ja JavaScriptin taustasta johtuen minusta on melko helppo oppia Vue. Koska Kulmikas käyttää TypeScriptiä (koristeiden ja injektorien käyttö), siis ihmisillä tulisi olla perustiedot TypeScriptiä tai he ovat työskennelleet OOPS-konseptin parissa.

3. Rakenne

Kulma on jäsenneltympi ja yksityiskohtaisempi. Se pakottaa kehittäjän tekemään kaiken tavanomaisella tavalla. Lähinnä suurten yritysprojektien luottamus Angulariin on sen ennalta määritellyn rakenteen vuoksi, joka varmistaa, että jokainen kehittäjä noudattaa samaa arkkitehtuuria.

Vue on joustavampi ja antaa kehittäjälle mahdollisuuden rakentaa projekti haluamallasi tavalla. Sen avulla käyttäjä voi kirjoittaa mallinsa HTML- tai Javascript-tiedostoon. Voit käyttää Kulmaa, jos henkilökohtaiset mieltymyksesi ovat TypeScript ja OOPS. Lisäksi Vue tarjoaa myös kirjoituskoneen projektikehitykseen, mutta siinä ei ole paljon kirjastoja.

4. Koodin skaalautuvuus

Kun sinulla on massiivinen kooditietokanta, Angular on hyvä koodin skaalautuvuuden kannalta, koska koska se on täysimittainen kehys, se kehittää kehittäjää kehittämään koodia tietyssä koodirakenteessa.

Toisaalta Vue.js: lta puuttuu luettelo parhaista skaalaustavoista. Vue.js-sivuston käyttäjille ei ole määritetty erityistä sovellusrakennetta, joka on erittäin tärkeä, kun sinulla on suuri koodituki.

5. Sisäänrakennetut kirjastot

Koska Vue on uusi, siinä on vähemmän kehyskohtaisia ​​kirjastoja, joten joudut sisällyttämään suurimman osan kolmannen osapuolen kirjastoista nimenomaisesti.

Angularilla on niin monia kehyskohtaisia ​​kirjastoja ja myös suurin osa kirjastoista on sisällytetty aikaisemmin Angular-CLI-projektiin.

Esimerkiksi - RxJS: n kaltainen kirjasto on sisäänrakennettu nurkkaan CLI-projektiin, mutta Vuessa sinun on asennettava selvästi muut kirjastot, mukaan lukien RxJS, jotta se toimisi.

Myös Angularissa on sisäänrakennettu API-erityisiä kirjastoja, joiden kehittäjän ei tarvitse asentaa sitä nimenomaisesti. Vue ei tule sovellusliittymäkohtaisen kirjaston mukana, ja sen on käytettävä AXIOS-kirjastoa nimenomaisesti API-puheluihin.

6. Suorituskyky

Virtuaali-DOM-konseptin käyttö tekee Vuestä performatiivisemman verrattuna kulmaiseen.

Toisaalta Angular käyttää tarkkailijoita tietojen renderointiin.

Aloitetaan virtuaalisen DOM: n avulla. Oletetaan, että sinulla on dynaaminen taulukko n riviä.

Nyt jotain muuttuu ensimmäisellä rivillä. Se mitä useimmat puitteet tekevät, on koko luettelon uudelleenrakentaminen ja uudelleenmuodostaminen. Se on n kertaa enemmän kuin tarvitaan, koska meidän on päivitettävä vain ensimmäinen rivi.

Katsotaanpa, mitä virtuaalinen DOM aikoo tehdä tässä tilanteessa.

Ennen päivitystä se luo kopion DOM: sta ja toimii tämän kopion kanssa. Kun virtuaalinen DOM on päivitetty, se vertaa samaa vanhempaan versioon, joka on siepattu ennen päivitystä, ja löytää elementit, jotka on päivitettävä. Kun ero on tarkistettu, todellisessa DOM: ssa päivitetään vain ne osat, jotka muuttuvat.

7. Verkon ulkopuolella

Angular sisältää ionilaisten ja alkuperäisten komentosarjojen mobiilisovellusten kehittämistä varten. Vue on paras valinta kehittäjille, jotka nauttivat alkuperäisestä mobiilikehityksestä, käyttävät Alibaba Weexiä ja Vue-Nativea, mutta kaikki nämä ovat melko uusia verrattuna Ioniciin.

Mutta kumpikaan näistä matkapuhelinkehyksistä ei salli heidän saavuttaa React Native -suorituskykyä.

Yhteenveto

Vue.js on erittäin kevyt ja helppo oppia -kehys, jonka avulla voit luoda upeita sovelluksia haluamallasi tavalla. Se ei ole niin kuuluisa kuin Angular (ylläpitää Google) kehittäjien keskuudessa, mutta varmasti aiheuttaa merkittäviä muutosaaltoja. Et ehkä tiedä, mutta Laravel-yhteisö on myös pitänyt sitä yhtenä suosituimmista käyttöliittymäkehyksistä. Kulmikas on paljon kehittynyt kehys ja siinä on useita työkaluja heti laatikosta. Voit päättää, mitä valita, seuraavien avainkohtien perusteella-

Jos et edelleenkään pysty päättämään, oppia ensin Vue, sitten Kulmikas.

Meillä Systangossa on joukko asiantuntevia etu- ja koko pinon kehittäjiä, jotka kaikki osaavat suunnitella kaiken tyylikkään ja terävän. Käytämme kaikkia huipputeknologioita, mukaan lukien React, Angular ja Vue.js, voimalaitteiden luomiseen ja saumattomiin verkkokokemuksiin.

Keskustele seuraavasta projektistasi - haluaisimme kuulla sinusta!

Tämä artikkeli on alun perin julkaistu Systango Technologies -sivustolla.