logo

Een gids voor het upgraden naar polymeer 1.0

Op de onlangs afgesloten Google IO 2015 heeft Google de langverwachte 1.0-versie van Polymer uitgebracht en productieklaar verklaard. Voor degenen onder u die de Polymer-bibliotheek hebben gebruikt terwijl deze zich nog in de ontwikkelaarspreview bevond, zal dit artikel dienen als een gids om uw bestaande applicatie te migreren naar de nieuwste versie van Polymer.

Een paar belangrijke dingen om op te merken over v1.0:

  1. Het is incompatibel met versie 0.5, de vorige versie en de langst bestaande tot nu toe.
  2. De nieuwe release is gericht op prestaties en efficiëntie, terwijl de totale omvang van de bibliotheek drastisch wordt verkleind.
  3. Het is volledig opnieuw opgebouwd om het voor ontwikkelaars gemakkelijker en sneller te maken om aangepaste elementen te ontwerpen die meer werken als standaard DOM-elementen.
  4. Uit interne benchmarktests blijkt dat v1.0 ongeveer 3x sneller is in Chrome en 4x sneller in Safari in vergelijking met de vorige versie.

De stappen om de nieuwste versie van Polymer te installeren blijven exact hetzelfde als beschreven in dit artikel. Om een ​​bestaande installatie van Polymer bij te werken, navigeert u naar de app-map en voert u de volgende opdracht uit in uw terminal:

$ bower update

Het is belangrijk om te weten dat dit je bestaande app zeker zal breken, aangezien, zoals gezegd, de twee versies niet compatibel zijn. Daarom wordt aanbevolen om in plaats daarvan een nieuwe kopie in een aparte map te installeren. Om de wijzigingen sinds v0.5 te illustreren, gebruiken we het aangepaste creditcard-element uit een van mijn eerdere artikelen op SitePoint als referentie om vergelijkingen te maken tussen de twee versies.

Polyfilling niet-ondersteunde browsers

De nieuwe versie van Polymer heeft niet langer de schaduw DOM polyfill nodig die is opgenomen in de webcomponents.js bibliotheek. Gebruik in plaats daarvan de veel kleinere webcomponents-lite.js bibliotheek om oudere browsers te polyfillen.

Versie 0.5:

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

Versie 1.0:

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

De "lite"-versie biedt een groottewinst van ongeveer 80kb ten opzichte van zijn voorganger, wat aanzienlijk kan zijn wanneer prestaties een sleutelfactor zijn.

Aangepaste elementen definiëren

De <polymer-element> tag is vervangen door de <dom-module> tag die de definitie van een aangepast element bevat. Het aangepaste element wordt nu geïdentificeerd door de id attribuut van de <dom-module> label. De regels om het aangepaste element een naam te geven blijven hetzelfde.

Versie 0.5:

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

Versie 1.0:

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

Aangepaste elementen registreren

Voorheen konden we het aangepaste element registreren door simpelweg de Polymer() . aan te roepen aannemer. Het opgeven van de naam van het aangepaste element was optioneel als de <script> tag zat in de <polymer-element> label. In deze release wordt het aangepaste element nu geregistreerd met behulp van de is eigenschap op het prototype.

Versie 0.5:

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

Versie 1.0:

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

De waarde van de is eigenschap moet overeenkomen met de id attribuut van de <dom-module> tag van het aangepaste element en, in tegenstelling tot de vorige release, is dit niet optioneel .

De <script> tag kan binnen of buiten de <dom-module> . zijn element, maar de sjabloon van het element moet worden geparseerd vóór de aanroep van de Polymer-constructor.

Aangepaste elementkenmerken

Elk attribuut dat deel uitmaakt van de <polymer-element> tag moet nu worden gedeclareerd op de properties object samen met het gegevenstype.

Versie 0.5:

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

Versie 1.0:

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

Aangepaste elementstijlen

De elementstijlen zijn nu gedefinieerd buiten de <template> tag.

Versie 0.5:

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

Versie 1.0:

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

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

Externe stylesheets worden ondersteund met HTML Imports.

Gegevensbinding

Polymer 1.0 biedt twee soorten gegevensbindingen:

  • Vierkante haakjes [[]] maak eenrichtingsbindingen. De gegevensstroom is neerwaarts, host-to-child, en de binding wijzigt nooit de host-eigenschap.
  • Krulhaken {{}} automatische bindingen maken. De gegevensstroom is eenrichtingsverkeer of tweerichtingsverkeer, afhankelijk van of de doeleigenschap is geconfigureerd voor binding in twee richtingen of niet.

In deze release moet een binding de volledige tekstinhoud van een knooppunt of de volledige waarde van een attribuut vervangen. Aaneenschakeling van tekenreeksen wordt dus niet ondersteund. Voor attribuutwaarden wordt aanbevolen om berekende bindingen te gebruiken in plaats van aaneenschakeling van tekenreeksen.

Versie 0.5:

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

Versie 1.0:

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

Houd er rekening mee dat dit betekent dat een knooppunt geen witruimte rond de bindingsannotatie kan bevatten.

De nieuwe schaduwrijke DOM

Polymer v0.5 gebruikte schaduw-DOM om de ontwikkelaar een eenvoudigere elementinterface te bieden en abstraheert alle complexiteiten door de subbomen achter een schaduwwortel te verbergen. Dit vormt de basis van inkapseling, wat goed werkt in browsers die schaduw DOM ondersteunen.

Voor browsers die schaduw-DOM nog niet ondersteunen, is het implementeren van een polyfill die precies werkt als native shadow DOM moeilijk, vaak langzamer dan de native implementatie, en er is veel code voor nodig. Om deze redenen heeft het Polymer-team besloten om de schaduw-DOM-polyfill af te schaffen en in plaats daarvan een veel lichtere versie van de lokale DOM te bouwen die inkapseling biedt die vergelijkbaar is met schaduw-DOM.

Het is belangrijk op te merken dat schaduwrijke DOM en schaduw-DOM compatibel zijn met elkaar, wat betekent dat de schaduwrijke DOM-API de oorspronkelijke schaduw-DOM gebruikt in browsers wanneer deze beschikbaar is en terugvalt naar de schaduwrijke DOM in niet-ondersteunende browsers.

Conclusie

Het upgraden van uw app naar Polymer v1.0 kan een pijnlijk langzaam proces zijn, afhankelijk van de complexiteit van uw app, maar biedt grote voordelen in termen van snellere laadtijd en aanzienlijk kleinere payload. De officiële migratiegids die beschikbaar is op de Polymer-projectwebsite behandelt een aantal andere wijzigingen aan de interne API's in meer detail, dus zorg ervoor dat u die bekijkt.

Daarnaast heeft Chuck Horton een Github-repository opgezet met de naam Road to Polymer 1.0 die een codeconversietool biedt om uw code bij te werken naar v1.0 vanaf v0.5. Dit kan als startpunt voor uw migratie dienen als u niet in staat bent om enkele cosmetische wijzigingen handmatig aan te brengen.