Úhlový 2,0 proti polymeru

Ahoj kluci! Než začnu porovnávat tyto dva rámce / knihovny javascript, je důležité pochopit, jak se mění způsob vývoje webu a jak se nové rámce snaží tuto změnu usnadnit.

Nový způsob vývoje webu

Komponenty

  • Modulární design a vývoj jsou populární principy mezi vývojáři. Ve světě vývoje webových aplikací se vývoj založený na komponentách vyvíjel na principu modularity.
  • Modulární kód se snadno udržuje a znovu používá. V důsledku menší, izolované a testovatelnější kódové základny je pravděpodobnost chyb menší.
  • Rámce jako Angular, Ember, React, Backbone a další poskytly svá vlastní řešení pro komponentizaci na webu.

Webové komponenty

  • Web Components přinesly koncept komponent do prohlížečů nativně. I když stále můžeme používat řešení komponent poskytovaných rámci, nativní webové komponenty přinášejí určitou míru opětovného použití, čehož jiné rámce nemohou dosáhnout.
  • Webové komponenty zapouzdřují moduly funkcionality do nejzákladnější jednotky HTML, elementu DOM. Díky pokroku na webových komponentách se staly cestou, jak jít po modulárním kódu na webu.
  • Specifikace webových komponent nejsou dosud plně implementovány všemi prohlížeči. Prodejci prohlížečů však aktivně implementují různé části specifikace, což znamená, že podpora webových komponent se pouze zlepší.

Most k webovým komponentám

Úhlová 2.0

  • Úhlová je jedním z nejpopulárnějších javascriptových rámců mezi vývojáři. Nejnovější verze Angular (Angular 2) také pracuje na koncepci komponent.
  • Angular 2 je plnohodnotný javascriptový rámec, který nejen umožňuje vytvářet komponenty, ale také pomáhá při správě různých aspektů webových aplikací, jako je směrování a zpracování stavu.
  • Úhel 2 může být také konfigurován pro generování webových komponent.

Polymer

  • Knihovna polymerů je lehká cukrová vrstva na rozhraní API webových komponent. Polymer je knihovna, která nám pomáhá vytěžit celý potenciál webových komponent.
  • Na rozdíl od typické struktury JavaScriptu je Polymer navržen tak, aby využíval funkce pečené do samotné webové platformy a umožnil vám vytvářet komponenty.
  • #UseThePlatform je název, který polymer dává, aby představoval, že prohlížeč chce provádět všechny zvedání bez knihoven.

Jak se porovnávají

Velikost:

Velikost webové aplikace má přímý dopad na výkon doby načítání. Kromě aplikačního kódu a prostředků se k velikosti aplikace také přidávají externí rámce a knihovny. Je tedy žádoucí, aby příspěvek z externích knihoven byl co nejmenší.

Úhlová 2,0: 566 KB - 766 KB. Velikost zmenšeného balíčku Angular 2 je 566 kB. Úhel 2 se spoléhá na pozorovatelný vzor dodávaný knihovnou Rxjs. Velikost Angular 2 s knihovnou Rxjs je 766K.

Polymer: 127 KB - 168 KB. Velikost ztuženého polymeru 1.6 je 127 kB. Vyžaduje také polyfill s názvem webcomponents.js pro prohlížeče, kde webové komponenty nejsou nativně podporovány. Velikost webcomponent-lite.js je 41 KB

Opětovné použití:

Vzorek komponent přináší velký prostor pro opětovné použití. Komponenty jsou malé a izolované kusy kódu, které lze použít na více místech stejné aplikace nebo napříč aplikacemi.

Úhel 2.0: Podporuje komponenty a opětovné použití. Komponenty Angular 2 lze použít pouze v aplikacích Angular2

Polymer: Podporuje komponenty a opětovné použití. Polymerní komponenty lze ideálně znovu použít v jakékoli webové aplikaci. Nepolymerní aplikace by musela importovat knihovnu polymerů, aby bylo možné znovu použít polymerní komponenty.

Struktura aplikace:

Ve velkých aplikacích je důležité mít strukturu kódu. Rámce pomáhají poskytnout struktuře a vzoru kódu.

Úhel 2.0: Určuje strukturu kódu. Úhel 2 je plnohodnotný rámec. Poskytuje způsob strukturování aplikace. Dodává se s vestavěným směrováním aplikací, správou stavu a datovou komunikací

Polymer: Neřekni strukturu. Polymer usnadňuje vytváření pouze součástí. Polymerní tým však vytvořil několik komponent, které lze použít pro směrování. Pro správu datové komunikace lze použít samostatnou knihovnu. např. Redux nebo jakákoli jiná knihovna založená na toku.

Dlouhověkost:

Při výběru technologického zásobníku je důležité vzít v úvahu životnost rámců / knihoven. Rámec, který může být zastaralý nebo stagnován velmi brzy, je nesprávnou volbou pro vytváření aplikací.

Úhel 2.0: Aktualizace verze Angular z 1.x na 2 byla úplnou revizí a prakticky způsobí úplné přepsání aplikací. Angular poskytl cestu pro upgrade z 1.4–1.5-2. Úsilí o následující cestu k upgradu však mohlo být stejné jako přepsání.

Polymer: Polymer má v úmyslu být lehčí s vývojem webové platformy. Verze náhledu polymeru 2 není k dispozici. Polymer má hybridní režim, kde 1 a 2 mohou běžet společně. Vzhledem k tomu, že polymer není složitý, měly by být aktualizace snadnější.

Učení se:

Úhel 2.0: Strojopis je nový jazyk a jeho způsob psaní kódu „dekoratér“ také není dobře znám vývojářům javascriptu. Nadcházející verze javascriptu však mají koncept dekoratérů. Vývojář se bude muset naučit rámec i jazyk.

Polymer: Polymerové komponenty mohou být / obvykle psány v javascriptu ES5 / ES6. Vývojáři si budou muset zvyknout na koncept komponent (stejně jako u Angular 2). Polymer poskytuje minimální syntaktický cukr přes webové komponenty api, což neukládá strmou křivku učení.

Vykreslování na straně serveru:

Vykreslování na straně serveru je důležité, pokud jde o SEO přívětivost, náhledy sociálních médií a rychlé „zobrazení“ stránky. Existuje však řada technik, jak dosáhnout rychlého prvního vykreslení, a to i při vykreslování na straně klienta. Google může také indexovat webové stránky poskytované na straně klienta, ale jiné vyhledávací nástroje mohou mít problém.

Angular 2.0: Angular team pracuje na Angular Universal, který lze použít s Angular 2, aby umožnil renderování na straně serveru.

Polymer: Polymer zatím nemá podporu pro renderování na straně serveru.

Doporučený zásobník

Na základě výše uvedeného srovnání, pokud si dnes musím vybrat front front stack, vybral bych toto:

  • Knihovna polymerů je lehčí než rámcová knihovna Angular 2.
  • Polymerní komponenty lze znovu použít v jakékoli aplikaci, zatímco komponenty Angular 2 lze použít pouze v aplikacích Angular 2
  • Polymer má v úmyslu být štíhlejší s vývojem webové platformy, tj. Jak prohlížeče zlepšují svou podporu specifikací webových komponent. Polymer bude moci snížit svou velikost
  • Redux je založen na Flux vzoru. Poskytuje pokyny pro řízení toku dat uvnitř aplikace. To pomáhá při vytváření předvídatelných a škálovatelných aplikací.

Dík!! Bavte se!

Trochu podrobná verze tohoto zápisu je v mém blogu http://dotjsfile.blogspot.in/2017/04/angular2-vs-polymer.html