logo

Průvodce upgradem na Polymer 1.0

Na nedávno skončeném Google IO 2015 vydala společnost Google tolik očekávanou verzi 1.0 Polymer a prohlásila ji za připravenou k výrobě. Pro ty z vás, kteří používali knihovnu Polymer, když byla ještě ve verzi pro vývojáře, bude tento článek sloužit jako průvodce migrací vaší stávající aplikace na nejnovější verzi Polymeru.

Několik důležitých věcí k poznámce o verzi 1.0:

  1. Není kompatibilní s verzí 0.5, předchozí verzí a dosud nejdelší verzí.
  2. Nová verze se zaměřuje na výkon a efektivitu a zároveň dramaticky snižuje celkovou velikost knihovny.
  3. Byl od základů kompletně přestavěn, aby vývojářům usnadnil a zrychlil navrhování vlastních prvků, které fungují spíše jako standardní prvky DOM.
  4. Interní srovnávací testy ukazují, že verze 1.0 je asi 3x rychlejší v prohlížeči Chrome a 4x rychlejší v prohlížeči Safari ve srovnání s předchozí verzí.

Kroky k instalaci nejnovější verze Polymeru zůstávají naprosto stejné, jak je popsáno v tomto článku. Chcete-li aktualizovat stávající instalaci Polymeru, přejděte do adresáře aplikace a spusťte ve svém terminálu následující příkaz:

$ bower update

Je důležité si uvědomit, že to jistě naruší vaši stávající aplikaci, protože, jak již bylo zmíněno, obě verze jsou nekompatibilní. Místo toho se doporučuje nainstalovat novou kopii do samostatné složky. Abychom ilustrovali změny od verze 0.5, použijeme vlastní prvek kreditní karty z jednoho z mých předchozích článků na webu SitePoint jako referenci pro srovnání obou verzí.

Prohlížeče, které nepodporují funkci Polyfilling

Nová verze Polymeru již nepotřebuje stínovou DOM polyfill obsaženou v webcomponents.js knihovna. Místo toho použijte mnohem menší webcomponents-lite.js knihovny pro polyfill starších prohlížečů.

Verze 0.5:

<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>

Verze 1.0:

<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>

„Lite“ verze nabízí nárůst velikosti přibližně 80kb oproti předchůdci, což může být významné, pokud je klíčovým faktorem výkon.

Definování vlastních prvků

<polymer-element> tag byl nahrazen tagem <dom-module> tag, který obsahuje definici vlastního prvku. Vlastní prvek je nyní identifikován id atributu <dom-module> štítek. Pravidla pro pojmenování vlastního prvku zůstávají stále stejná.

Verze 0.5:

<polymer-element name="credit-card">
  ...
</polymer-element>

Verze 1.0:

<dom-module id="credit-card">
  ...
</dom-module>

Registrace vlastních prvků

Dříve jsme mohli zaregistrovat vlastní prvek pouhým vyvoláním Polymer() konstruktér. Zadání názvu vlastního prvku bylo volitelné, pokud <script> tag byl uvnitř <polymer-element> štítek. V této verzi je nyní vlastní prvek registrován pomocí is vlastnost na prototypu.

Verze 0.5:

Polymer('credit-card', {});

Verze 1.0:

Polymer({
  is: 'credit-card'
});

Hodnota is vlastnost musí odpovídat id atributu <dom-module> tag vlastního prvku a na rozdíl od předchozí verze to není volitelné .

<script> tag může být uvnitř nebo vně <dom-module> prvek, ale před voláním konstruktoru Polymer musí být analyzována šablona prvku.

Vlastní atributy prvků

Jakýkoli atribut, který je součástí <polymer-element> tag by měl být nyní deklarován na properties objekt spolu s datovým typem.

Verze 0.5:

<polymer-element name='credit-card' attributes='amount'>

Verze 1.0:

Polymer({
  is: 'credit-card',
  properties: {
    amount: {
      type: Number
    }
  }

Vlastní styly prvků

Styly prvků jsou nyní definovány mimo <template> tag.

Verze 0.5:

<polymer-element name="credit-card" attributes="amount">
  <template>
    <style>
      ...
    </style>
  </template>
</polymer-element>

Verze 1.0:

<dom-module id="credit-card">
  <style>
    ...
  </style>

  <template>
    ...
  </template>
</dom-module>

Externí šablony stylů jsou podporovány pomocí importu HTML.

Vazba dat

Polymer 1.0 nabízí dva typy datových vazeb:

  • Hranaté závorky [[]] vytvořit jednosměrné vazby. Datový tok je sestupný, mezi hostitelem a potomkem a vazba nikdy nemění vlastnost hostitele.
  • Složené závorky {{}} vytvářet automatické vazby. Datový tok je jednosměrný nebo obousměrný v závislosti na tom, zda je cílová vlastnost nakonfigurována pro obousměrnou vazbu či nikoli.

V této verzi musí vazba nahradit celý textový obsah uzlu nebo celou hodnotu atributu. Takže zřetězení řetězců není podporováno. Pro hodnoty atributů se doporučuje použít vypočítané vazby místo zřetězení řetězců.

Verze 0.5:

<input type="submit" value="Donate {{amount}}">

Verze 1.0:

<template>
  <input type="submit" value="[[computeValue(amount)]]">
</template>
Polymer({
  is: "inline-compute",
  computeValue: function(amount) {
    return 'Donate ' + amount;
  }
});

Upozorňujeme, že to znamená, že uzel nemůže obsahovat žádné prázdné místo kolem poznámky vazby.

Nový stinný DOM

Polymer v0.5 použil stínový DOM k poskytnutí jednoduššího rozhraní prvků pro vývojáře a abstrahuje všechny složitosti skrytím podstromů za kořenem stínu. To tvoří základ zapouzdření, které dobře funguje v prohlížečích podporujících stínový DOM.

Pro prohlížeče, které zatím nepodporují stínový DOM, je implementace polyfill, který funguje přesně jako nativní stínový DOM, obtížná, často pomalejší než nativní implementace a vyžaduje hodně kódu. Z těchto důvodů se tým Polymer rozhodl odstranit stínový DOM polyfill a místo toho vytvořil mnohem lehčí verzi místního DOM, který nabízí zapouzdření podobné stínovému DOM.

Je důležité poznamenat, že stínový DOM a stínový DOM jsou vzájemně kompatibilní, což znamená, že stínové DOM API používá v prohlížečích nativní stínový DOM, pokud je k dispozici, a v nepodporujících prohlížečích se vrací ke stínovanému DOM.

Závěr

Upgrade vaší aplikace na Polymer v1.0 může být bolestivě pomalý proces v závislosti na složitosti vaší aplikace, ale nabízí velké výhody v podobě rychlejšího načítání a výrazně menšího užitečného zatížení. Oficiální průvodce migrací dostupný na webových stránkách projektu Polymer pokrývá spoustu dalších změn v interních API do větší hloubky, takže se na to určitě podívejte.

Chuck Horton navíc vytvořil úložiště Github nazvané Road to Polymer 1.0, které nabízí nástroj pro převod kódu pro aktualizaci vašeho kódu na verzi 1.0 z verze 0.5. To by mohlo sloužit jako výchozí bod pro vaši migraci, pokud nejste připraveni provést některé kosmetické změny ručně.