Vinkel 2,0 vs polymer

Hej fyre! Før jeg begynder at sammenligne disse to javascript-rammer / biblioteker, er det vigtigt at forstå, hvordan måden til webudvikling ændrer sig, og hvordan de nye rammer forsøger at lette den ændring.

Den nye måde at udvikle web på

komponenter

  • Modulær design og udvikling er populære principper blandt udviklere. I webudviklingsverdenen har komponenter baseret udvikling udviklet sig efter princippet om modularitet.
  • Modulkode er let at vedligeholde og genbruge. Der er mindre sandsynlighed for fejl på grund af den mindre, isolerede, mere testbare codebase.
  • Rammer som Angular, Ember, React, Backbone og andre har leveret deres egne løsninger til komponentisering på nettet.

Webkomponenter

  • Webkomponenter har bragt konceptet med komponenter til browsere indfødt. Selvom vi stadig kan bruge komponentløsningerne, der leveres af rammer, bringer native webkomponenter en vis grad af genanvendelighed, som andre rammer ikke kan opnå.
  • Webkomponenter indkapsler funktionalitetsmoduler i den mest basale enhed af HTML, et DOM-element. Med de fremskridt, der er gjort på webkomponenter, er de blevet vejen til at gå efter modulær kode på nettet.
  • Webkomponent-specifikationer er ikke fuldt implementeret af alle browsere endnu. Men browserudbydere implementerer aktivt de forskellige dele af specifikationen, hvilket betyder, at support til webkomponenter kun bliver bedre.

Broen til webkomponenter

Vinkel 2,0

  • Angular er en af ​​de mest populære javascript-rammer blandt udviklerne. Den seneste version af Angular (Angular 2) fungerer også på konceptet af komponenter.
  • Angular 2 er en komplet javascript-ramme, der ikke kun giver dig mulighed for at opbygge komponenterne, men også hjælper med at styre forskellige aspekter af webapplikationer som routing og tilstandshåndtering.
  • Angular 2 kan også konfigureres til at generere webkomponenter.

Polymer

  • Polymer-biblioteket er et let sukkerlag oven på Web Components API'er. Polymer er et bibliotek, der hjælper os med at udnytte det fulde potentiale ved webkomponenter.
  • I modsætning til en typisk javascript-ramme, er Polymer designet til at udnytte funktioner, der er bagt i selve webplatformen, så du kan bygge komponenter.
  • #UseThePlatform er navnet Polymer give for at repræsentere browsernes ønske om at gøre alt det tunge løft uden biblioteker.

Hvordan sammenligner de

Størrelse:

Størrelsen på en webapplikation har en direkte indvirkning på belastningstiden ydeevne. Bortset fra applikationskode og aktiver, tilføjer eksterne rammer og biblioteker også applikationens størrelse. Så det ønskes, at bidraget fra eksterne biblioteker skal være så lille som muligt.

Vinkel 2,0: 566 KB - 766 KB. Størrelsen på den minificerede Angular 2-pakke er 566K. Angular 2 er afhængig af det observerbare mønster leveret af Rxjs-biblioteket. Størrelse på Angular 2 med Rxjs-bibliotek er 766K.

Polymer: 127 KB - 168 KB. Størrelse på minificeret polymer 1.6 er 127 KB. Det kræver også en polyfil kaldet webcomponents.js til browsere, hvor webkomponenter ikke understøttes oprindeligt. Størrelse på webcomponents-lite.js er 41 KB

Genbruge:

Mønsteret med komponenter bringer meget plads til genanvendelighed. Komponenter er små og isolerede kodestykker, der kan bruges flere steder i den samme applikation eller på tværs af applikationer.

Angular 2.0: Understøtter komponenter og genbrug. Angular 2-komponenter kan kun bruges i Angular2-applikationer

Polymer: Understøtter komponenter og genanvendes. Polymerkomponenter kan ideelt genanvendes i enhver webapplikation. Ikke-polymerpåføring ville være nødvendigt at importere polymerbibliotek for at kunne genbruge polymerkomponenter.

Ansøgningsstruktur:

I store applikationer er det vigtigt at have en struktur på koden. Rammer er med til at give koden struktur og mønster.

Angular 2.0: Angiver kodestruktur. Angular 2 er en fuldgyldig ramme. Det giver en måde at strukturere applikationen på. Det leveres med indbygget applikationsruting, tilstandsstyring og datakommunikation

Polymer: Ingen sige i struktur. Polymer letter kun oprettelse af komponenter. Imidlertid har polymerteam skabt få komponenter, der kan bruges til routing. Et separat bibliotek kan bruges til at styre datakommunikation. for eksempel. Redux eller ethvert andet Flux-baseret bibliotek.

Holdbarhed:

Når du vælger teknologibunken, er det vigtigt at overveje levetiden for rammer / biblioteker. En ramme, der meget snart kan blive forældet eller stagneret, er et forkert valg til applikationsopbygning.

Angular 2.0: Angular's version af opgradering fra 1.x til 2 var en komplet modernisering og vil praktisk talt medføre en komplet omskrivning til applikationer. Angular leverede en opgraderingssti fra 1.4–1.5–2. Men indsatsen efter at følge opgraderingsstien kunne have været ækvivalent med omskrivning.

Polymer: Polymer agter at være lettere med udviklingen af ​​webplatform. Polymer 2-preview-version er ude. Polymer har en hybridtilstand, hvor 1 & 2 kan køre sammen. Da polymer ikke er rammetung, bør opgraderinger være lettere.

At lære:

Angular 2.0: Typescript er et nyt sprog, og dens 'dekoratør' måde at skrive kode er heller ikke velkendt for javascript-udviklere. Selvom kommende versioner af javascript har begrebet dekoratører. Udvikler skal lære både rammerne og sproget.

Polymer: Polymerkomponenter kan / skrives normalt i ES5 / ES6 javascript. Udviklere bliver nødt til at vænne sig til konceptet med komponenter (også med Angular 2). Polymer giver minimal syntaktisk sukker over webkomponenter api, som ikke indebærer en stejl indlæringskurve.

Server sides rendering:

Gengivelse af serversiden er vigtig, når det kommer til SEO-venlighed, forhåndsvisning af sociale medier og hurtig 'visningsevne' på siden. Der er imidlertid mange teknikker til at opnå hurtig første gengivelse, selv med klientsides gengivelse. Google kan også indeksere websteder, der er gengivet af klientsiden, men andre søgemaskiner kan have problemer med at gøre det.

Angular 2.0: Angular team arbejder med Angular Universal, som kan bruges sammen med Angular 2 for at tillade rendering af serversiden.

Polymer: Polymer har endnu ikke support til serversides gengivelse.

Anbefalet stak

Baseret på ovenstående sammenligning, hvis jeg skal vælge en frontend stack i dag, ville jeg vælge dette:

  • Polymerbibliotek er lettere end Angular 2-rammebibliotek.
  • Polymerkomponenter kan genanvendes i enhver anvendelse, mens Angular 2-komponenter kun kan bruges til Angular 2-applikationer
  • Polymer agter at blive slankere med udviklingen af ​​webplatform, dvs. når browsere forbedrer deres understøttelse af specifikationer for webkomponenter, vil Polymer være i stand til at reducere dens størrelse
  • Redux er baseret på Flux-mønster. Det giver retningslinjer for styring af datastrømmen inde i appen. Dette hjælper med at skabe forudsigelige og skalerbare applikationer.

Tak!! Hav det sjovt!

En lidt detaljeret version af denne nedskrivning er i min blog http://dotjsfile.blogspot.in/2017/04/angular2-vs-polymer.html