Kulmainen 2.0 vs. polymeeri

Hei kaverit! Ennen kuin aloitan näiden kahden javascript-kehyksen / kirjaston vertailun, on tärkeää ymmärtää, kuinka web-kehityksen tapa muuttuu ja kuinka uudet kehykset yrittävät helpottaa muutosta.

Uusi tapa kehittää verkkoa

komponentit

  • Modulaarinen suunnittelu ja kehitys ovat suosittuja periaatteita kehittäjien keskuudessa. Verkkokehitysmaailmassa komponenttipohjainen kehitys on kehittynyt modulaarisuuden periaatteella.
  • Modulaarista koodia on helppo ylläpitää ja käyttää uudelleen. Pienemmistä, eristetyistä, testattavimmista koodeista johtuen virheiden todennäköisyys on pienempi.
  • Kehykset, kuten Angular, Ember, React, Backbone ja muut, ovat tarjonneet omat ratkaisunsa verkkojen komponentointiin.

Web-komponentit

  • Web-komponentit ovat tuoneet komponenttien käsitteen selaimiin natiivisti. Vaikka voimme silti käyttää kehysten tarjoamia komponenttiratkaisuja, natiivit web-komponentit tuovat käyttöön tietyn määrän uudelleenkäytettävyyttä, jota muut kehykset eivät pysty saavuttamaan.
  • Web-komponentit kapseloivat toiminnallisuusmoduulit HTML: n perusyksikköön, DOM-elementtiin. Verkkokomponenttien edistymisen myötä niistä on tullut tapa siirtyä modulaarisiin koodeihin verkossa.
  • Kaikki selaimet eivät ole vielä täysin toteuttaneet Web-komponenttien määrityksiä. Mutta selaimen myyjät toteuttavat aktiivisesti eritelmien eri osia, mikä tarkoittaa, että Web-komponenttien tuki paranee vain.

Silta web-komponentteihin

Kulma 2.0

  • Angular on yksi suosituimmista javascript-puitteista kehittäjien keskuudessa. Uusin Angular (Angular 2) -versio toimii myös komponenttien käsitteellä.
  • Angular 2 on täysivaltainen javascript-kehys, jonka avulla komponenttien rakentamisen lisäksi myös hallitaan verkkosovellusten erilaisia ​​näkökohtia, kuten reititystä ja tilankäsittelyä.
  • Kulma 2 voidaan myös konfiguroida tuottamaan web-komponentteja.

Polymeeri

  • Polymeerikirjasto on kevyt sokerikerros Web Components -sovellusliittymien päällä. Polymeeri on kirjasto, joka auttaa meitä hyödyntämään web-komponenttien täyden potentiaalin.
  • Toisin kuin tyypillinen javascript-kehys, Polymer on suunniteltu hyödyntämään itse verkkoalustaan ​​leivottuja ominaisuuksia, jotta voit rakentaa komponentteja.
  • #UseThePlatform on nimi, jonka Polymer antaa edustaa selaimen halua suorittaa kaikki raskas nosto ilman kirjastoja.

Kuinka niitä verrataan

Koko:

Verkkosovelluksen koko vaikuttaa suoraan latausajan suorituskykyyn. Sovelluskoodin ja omaisuuserien lisäksi ulkoiset kehykset ja kirjastot lisäävät sovelluksen kokoa. Joten on toivottavaa, että ulkoisten kirjastojen osuus on mahdollisimman pieni.

Kulmainen 2.0: 566 KB - 766 KB. Minified Angular 2 -pakkauksen koko on 566K. Kulma 2 perustuu Rxjs-kirjaston toimittamiin havaittaviin kuvioihin. Kulman 2 koko Rxjs-kirjastolla on 766K.

Polymeeri: 127 KB - 168 KB. Minimoidun polymeerin 1.6 koko on 127 kt. Se vaatii myös webcomponents.js -nimisen polyfill-täytön selaimille, joissa Web-komponentteja ei tueta natiivisti. Webcomponents-lite.js on 41 kt

Käyttää uudelleen:

Komponenttikuvio tuo paljon tilaa uudelleenkäyttöön. Komponentit ovat pieniä ja eristettyjä koodipalasia, joita voidaan käyttää saman sovelluksen useissa paikoissa tai sovellusten välillä.

Kulmainen 2.0: Tukee komponentteja ja uudelleenkäyttöä. Kulma 2 -komponentteja voidaan käyttää vain Angular2-sovelluksissa

Polymeeri: Tukee komponentteja ja uudelleenkäyttöä. Polymeerikomponentit voidaan ihanteellisesti käyttää uudelleen missä tahansa verkkosovelluksessa. Ei-polymeerisovellusten olisi tuotava polymeerikirjasto voidakseen käyttää uudelleen polymeerikomponentteja.

Sovelluksen rakenne:

Suurissa sovelluksissa on tärkeää, että koodilla on rakenne. Kehykset auttavat tarjoamaan koodin rakenteen ja kuvion.

Kulmainen 2.0: Sanoo koodin rakenteen. Kulma 2 on täysimittainen kehys. Se tarjoaa tavan rakentaa sovellus. Sen mukana tulee sisäänrakennettu sovellusten reititys, valtionhallinta ja tietoliikenne

Polymeeri: Ei sanoa rakenteessa. Polymeeri helpottaa vain komponenttien luomista. Polymeeritiimi on kuitenkin luonut muutamia komponentteja, joita voidaan käyttää reititykseen. Tietoliikenteen hallintaan voidaan käyttää erillistä kirjastoa. esim. Redux tai mikä tahansa muu Flux-pohjainen kirjasto.

Pitkäikäisyys:

Teknologiapinoa valittaessa on tärkeää ottaa huomioon kehysten / kirjastojen pitkäikäisyys. Kehys, joka voi vanhentua tai pysähtyä hyvin pian, on väärä valinta sovellusrakennukseen.

Kulmainen 2.0: Kulman version päivitys 1.x: stä 2: een oli täydellinen uudistus ja aiheuttaa käytännössä täydellisen uudelleenkirjoituksen sovelluksille. Kulma tarjosi päivityspolun välillä 1.4–1.5–2. Mutta päivityspolun seuraaminen olisi voinut olla sama kuin uudelleenkirjoitus.

Polymeeri: Polymeeri aikoo olla kevyempi web-alustan kehityksen myötä. Polymer 2 esikatseluversio on loppunut. Polymeerillä on hybridi-tila, jossa 1 ja 2 voivat toimia yhdessä. Koska polymeeri ei ole kehystä raskas, päivitysten tulisi olla helpompaa.

Learning:

Kulmainen 2.0: Typescript on uusi kieli, ja sen "sisustaja" tapa kirjoittaa koodia ei myöskään tunne JavaScriptin kehittäjiä. Uusilla javascriptin versioilla on kuitenkin koristeiden käsite. Kehittäjän on opittava puitteet ja kieli.

Polymeeri: Polymeerikomponentit voidaan kirjoittaa / yleensä kirjoitetaan ES5 / ES6 javascriptinä. Kehittäjien on tottuttava komponenttien käsitteeseen (totta myös Angular 2: lla). Polymeeri tarjoaa minimaalisen syntaktisen sokerin verkon komponenttien api-verran, mikä ei aseta jyrkkää oppimiskäyrää.

Palvelinpuolen renderointi:

Palvelinpuolen renderointi on tärkeää, kun kyse on SEO-ystävällisyydestä, sosiaalisen median esikatselusta ja nopeasta sivun katselukyvystä. On kuitenkin olemassa monia tekniikoita nopeaan ensin tekemiseen jopa asiakaspuolen renderoinnilla. Google voi myös indeksoida asiakaspuolen renderoituja verkkosivustoja, mutta muilla hakukoneilla voi olla ongelmia tämän tekemisessä.

Angular 2.0: Angular team työskentelee Angular Universal -sovelluksen kanssa, jota voidaan käyttää Angular 2: n kanssa palvelinpuolen renderoinnin sallimiseksi.

Polymeeri: Polymeerillä ei ole vielä tukea palvelinpuolen renderointiin.

Suositeltava pino

Yllä olevan vertailun perusteella, jos minun on valittava etuosan pino tänään, valitsen tämän:

  • Polymeerikirjasto on kevyempi kuin Angular 2 -kehyskirjasto.
  • Polymeerikomponentteja voidaan käyttää uudelleen missä tahansa sovelluksessa, kun taas Angular 2 -komponentteja voidaan käyttää vain Angular 2 -sovelluksissa
  • Polymeeri aikoo saada kevyemmäksi verkkoalustan kehityksen kanssa, ts. Kun selaimet parantavat tukeaan verkkokomponenttien eritelmille, polymeeri pystyy pienentämään kokoaan
  • Redux perustuu flux-malliin. Se antaa ohjeita tiedonkulun hallitsemiseksi sovelluksen sisällä. Tämä auttaa luomaan ennustettavissa olevia ja skaalautuvia sovelluksia.

Kiitos!! Pidä hauskaa!

Hieman yksityiskohtainen versio tästä kirjoituksesta on blogissani http://dotjsfile.blogspot.in/2017/04/angular2-vs-polymer.html