Studyx - Professional web training

BECOME A WEB EXPERT

Polymer

Meerdere frameworks hadden al langer de mogelijkheid om veelgebruikte delen van je webpagina te verkorten zodat je minder onderhoud hebt. Dit is bijvoorbeeld elk onderdeel dat je hergebruikt opsplitsen in template in je framework, zoals de bij Twig (Symfony) of Blade (Laravel). Dit lukt echter niet enkel bij frameworks: een tijdje geleden zijn templates ook aan HTML toegevoegd met de <template> tag. Deze template tags worden niet standaard getoond maar ze moeten via javascript op de juiste plaats in de pagina’s toegevoegd worden. Er is wel verbetering onderweg onder de vorm van Web Components die het mogelijk maken deze elementen makkelijker binnen een pagina te gebruiken zonder enige vorm van javascript of dergelijke te gebruiken, maar deze is nog experimenteel en wordt nog niet door elke browser goed ondersteund.

Ik zou dit natuurlijk niet vertellen als hier niet opnieuw een oplossing voor was: Google heeft een library gemaakt om deze Web Components te kunnen gebruiken op browsers die deze nog niet goed ondersteunen. Deze library noemt Polymer en werd al bij Google I/O 2014 aangekondigd. Deze band met Google zorgt dat we ook toegang krijgen tot een paar andere leuke dingen van Google zoals de Material Design die Google sinds versie 5 op Android gebruikt.

Zonder Web Components:

<div id="slider">
	<input checked="" type="radio" name="slider" id="slide1" selected="false">
	<input type="radio" name="slider" id="slide2" selected="false">
	<input type="radio" name="slider" id="slide3" selected="false">
	<input type="radio" name="slider" id="slide4" selected="false">
	<div id="slides">
		<div id="overflow">
			<div class="inner">
				<img src="images//rock.jpg">
				<img src="images/grooves.jpg">
				<img src="images/arch.jpg">
				<img src="images/sunset.jpg">
			</div>
		</div>
	</div>
	<label for="slide1"></label>
	<label for="slide2"></label>
	<label for="slide3"></label>
	<label for="slide4"></label>
</div>

Hoe we het zouden kunnen maken met Web Components:

<img-slider>
	<img src="images/sunset.jpg" alt="a dramatic sunset">
	<img src="images/arch.jpg" alt="a rock arch">
	<img src="images/grooves.jpg" alt="some neat grooves">
	<img src="images/rock.jpg" alt="an interesting rock">
</img-slider>

Ik vind dit tweede voorbeeld veel duidelijker en mooier in mijn HTML en kan zo direct zien waarvoor het dient.

Eigenlijk zitten er al een hele tijd enkele elementen in onze webpagina’s die dezelfde principes als Web Components volgen. Denk maar aan de video tag die een slider, play button enzovoort omvat. De reden waarom je hier waarschijnlijk niet aan dacht is omdat de browsermakers deze proberen te verbergen omdat ze willen dat deze er altijd consistent goed uitzien ongeacht de CSS op de pagina. De plaats waarop ze deze verbergen is de Shadow DOM en deze Shadow DOM is dus ook de plaats waar onze eigen tags aan toegevoegd zullen worden.

Basic Polymer element

<link rel="import"
      href="bower_components/polymer/polymer.html">
<dom-module id="hello-world">

  <template>
    Hello World User!
  </template>

  <script>
    Polymer({
      is: "hello-world"
    });
  </script>

</dom-module>

We kunnen hier echter ook verder in gaan, kijk maar naar het volgende. Polymer maakt een collectie aan van alle items die een id hebben om deze makkelijker aan te kunnen spreken zonder handmatig hun data op te moeten vragen. Deze feature wordt Automatic node finding genoemd en hiermee kunnen we elk elemen met een id aanspreken door in onze javascript de this.$.<id> variable te gebruiken.

<dom-module id="hello-world">
  <template>
    Hello World <span id="name">User</span>!
  </template>

  <script>

    Polymer({

      is: 'hello-world',

      ready: function() {
        this.$.name.textContent = this.tagName;
      }

    });

  </script>

</dom-module>

Als je elementen wil doorgeven aan je nieuw gedefinieerd element, kan je de <content></content> tag gebruiken. Hier kan je ook een attribuut “select” aan meegeven om aan te geven wat voor type elementen doorgegeven mogen worden. Zo geeft .filteredContent aan dat enkel elementen met de klasse .filteredContent meergegeven mogen worden, div geeft aan dat enkel div-elementen mogen meegegeven worden, …

Elementen doorgeven naar ons Polymer element: hier en hier.

<content></content>

Voorbeeldje voor onze slider zoals hoger:

<link rel="import"
      href="bower_components/polymer/polymer.html">
<dom-module id="img-slider">

  <template>
    <div id="slider">
	<input checked="" type="radio" name="slider" id="slide1" selected="false">
	<input type="radio" name="slider" id="slide2" selected="false">
	<input type="radio" name="slider" id="slide3" selected="false">
	<input type="radio" name="slider" id="slide4" selected="false">
	<div id="slides">
		<div id="overflow">
			<div class="inner">
				<content></content>
			</div>
		</div>
	</div>
	<label for="slide1"></label>
	<label for="slide2"></label>
	<label for="slide3"></label>
	<label for="slide4"></label>
    </div>
  </template>

  <script>
    Polymer({
      is: "img-slider"
    });
  </script>

</dom-module>

Data binding

Een andere handige feature bij Polymer is de databinding. Zo kan je de waarde die getoond wordt makkelijk synchroniseren met een waarde die je in javascript opslaat en je kan hier ook limiteringen op plaatsen. Zo kan je bijvoorbeeld instellen dat wijzigingen in de HTML-weergave (in een invoerelement) een wijziging aan de javascriptwaarde veroorzaken terwijl wijzigingen aan de javascriptwaarde ook een verandering van de waarde van het invoerelement veroorzaken. Deze data binding is zeer simpel te gebruiken:

Dubbele vierkante haakjes [[ ]] dienen om 1-way binding in te stellen. Hier gaat de waarde van de javascript naar de HTML maar niet omgekeerd.

Dubbele accolades {{ }} dienen om automatische binding in te stellen. Deze kan zowel voor 1-way als 2-way binding ingesteld worden afhankelijk van hoe de variabele ingesteld is. Bij 2-way binding worden de waardes in je HTML en je javascript gesynchroniseerd, als 1 van de 2 aangepast wordt, wordt de ander dit ook.

De 3 belangrijke manieren om aan databinding te doen zijn:

  • 2-way binding: bij het definiëren van je property geef je mee dat notify op “true” moet staan en mag de readOnly property niet op “true” staan. Om deze waarde dan goed in het HTML-gedeelte te plaatsen gebruik je de curly brackets (accolade) syntax.
  • 1-way binding (downward): deze is praktisch dezelfde als de 2-way binding maar je gebruikt de square brackets (vierkante haakjes) syntax in je HTML.
  • 1-way binding (upward): hetzelfde als 2-way binding maar met readOnly op “true”.

Als je naar de documentatie kijkt van de iron-input van Polymer, specifiek bedoeld voor deze data binding, zie je hier hoe je het bind-value attribuut kan gebruiken. Er zijn echter nog enkele elementen bij Polymer die dit ook kunnen waarbij het attribuut niet vermeld staat in de documentatie. Eén voorbeeld hiervan is het paper-input element, dat eigenlijk gewoon een iron-input overneemt en een beetje stylet. Voorbeeldje:

<link rel="import"
      href="bower_components/polymer/polymer.html">
<dom-module id="img-slider">

  <template>
    <div id="slider">
	<input checked="" type="radio" name="slider" id="slide1" selected="false">
	<input type="radio" name="slider" id="slide2" selected="false">
	<input type="radio" name="slider" id="slide3" selected="false">
	<input type="radio" name="slider" id="slide4" selected="false">
	<div id="slides">
		<div id="overflow">
			<div class="inner">
				<content></content>
			</div>
		</div>
	</div>
	<label for="slide1"></label>
	<label for="slide2"></label>
	<label for="slide3"></label>
	<label for="slide4"></label>
    </div>
  </template>

  <script>
    Polymer({
      is: "img-slider"
    });
  </script>

</dom-module>

Hiernaast kan je nog veel meer dingen doen met Polymer, zoals makkelijk kort een herhaaldelijke actie (dom-repeat) in je template steken, zelfs dynamisch sorteren en filteren, etc. De mogelijkheden met Polymer zijn groot.

Nog niet alles is ideaal bij Web Components. Zo is bijvoorbeeld niet echt bekend hoe goed SEO crawlers omgaan met deze custom tags en Polymer. We weten wel dat de Google crawlers eerst javascript op de pagina’s uitvoeren waardoor deze de nieuwe tags wel goed kunnen interpreteren maar het zijn vooral de andere zoekmachines zoals Bing waarvan de ondersteuning voor de nieuwe tags onbekend is. Data binding kan lastig worden voor crawlers om goed in te lezen maar als er veel statische content (zonder data-binding dus) in je custom tags zit zou het wel goed moeten zijn.

Ik vind Web Components een mooie stap in de modulaire richting en zal deze standaard zeker verder in de gaten houden. Ik zou ook nog even willen verwijzen naar X-Tag hier, dat een alternatief is voor Polymer maar gemaakt werd door Mozilla.

Share on FacebookShare on LinkedInTweet about this on TwitterShare on Google+Email this to someonePrint this page
09/12/15

0 Reacties opPolymer"

Laat een bericht na