Polymeren en webcomponenten zijn de laatste tijd erg actueel. Omdat dit ecosysteem zich razendsnel ontwikkelt, kan het voor ontwikkelaars lastig zijn om op de hoogte te blijven van alle laatste veranderingen.
Tijdens zijn lezing op de Chrome Dev Summit legde Matt McNulty, engineering manager voor het Polymer-team, uit wat Polymer is en schetste hij ook de roadmap voor Polymer 1.0.
Wat is een polymeer?
Maar wat is Polymer eigenlijk precies?
Polymer is een bibliotheek waarmee je elementen en apps kunt bouwen op basis van webcomponenten. Webcomponenten vormen een geavanceerde set nieuwe standaarden waarmee ontwikkelaars de HTML-vocabulaire kunnen uitbreiden met hun eigen aangepaste elementen.
Omdat webcomponenten zijn ontworpen als een nieuw primitief element voor de browser, zijn ze erg krachtig, maar ook erg eenvoudig. Om ermee te werken is er behoorlijk wat code nodig.
Polymer maakt het werken met webcomponenten eenvoudiger door de syntaxis te vereenvoudigen. Het vermindert de hoeveelheid boilerplate-code die u moet schrijven en voegt een declaratieve stijl toe, waardoor het maken van webcomponenten net zo eenvoudig is als het schrijven van HTML.
Het Polymeer Experiment
Polymer begon als een experiment om te kijken of we de standaarden voor webcomponenten konden polyfillen en feedback van ontwikkelaars konden krijgen voordat deze technologieën in alle browsers beschikbaar waren. Naarmate meer ontwikkelaars Polymer gingen gebruiken, veranderde het van alleen polyfills in een daadwerkelijke bibliotheek vol productiviteitsfuncties (databinding, attribuutwijzigingswatchers, automatische knooppuntdetectie, enz.). Maar alle experimenten leveren resultaten op, dus hoe hebben we het gedaan?
Hoewel veel ontwikkelaars aangaven dat ze de expressiviteit en productiviteitswinst van het werken met webcomponenten in Polymer waardeerden, uitten ze ook zorgen over de prestaties en de algehele complexiteit.
Het benadrukt een natuurlijke spanning die Polymer altijd al heeft gehad: het moet een experiment zijn om het webplatform vooruit te helpen, maar ook iets creëren dat productiewaardig is en waar ontwikkelaars op kunnen vertrouwen.
Aankomende wijzigingen
Het Polymer-team heeft alle functies van de bibliotheek grondig onder de loep genomen met als doel een slankere, productieklare versie te ontwikkelen die ontwikkelaars met vertrouwen kunnen gebruiken.
Lagen
Polymer is gerefactoriseerd in een reeks lagen. De kernfuncties zijn snel en slank, terwijl de meer geavanceerde functies optioneel beschikbaar zijn. Voor de meeste use cases zouden de kernfuncties moeten voldoen aan de behoeften van ontwikkelaars.
Vereenvoudigde gegevensbinding
Het databindingssysteem van Polymer is ook aanzienlijk geoptimaliseerd voor prestaties. Volgens de gelaagde aanpak is tweerichtingsbinding nu opt-in, terwijl eenrichtingsbinding standaard eenrichtingsbinding is. Ook zijn gepubliceerde eigenschapstypen expliciet gemaakt en activeert een eigenschapswijziging nu een gebeurtenis, zodat elementen uit verschillende bibliotheken gemakkelijker met elkaar kunnen communiceren.
Leaner Shadow DOM
De Shadow DOM-polyfill is een verbluffend staaltje techniek. Hij is ontworpen om volledig en specificatie-conform te zijn, wat belangrijk is voor het grondig testen van de platformprimitive, maar introduceert helaas een aantal prestatieknelpunten voor functies die Polymer niet gebruikt.
De volgende versie van Polymer zal een andere aanpak hanteren en een shim-stijllaag gebruiken die alleen opvult wat Polymer nodig heeft.
De bestaande polyfill blijft behouden voor generieke, niet-polymeer webcomponenten.
Verhuizen naar webcomponents.org
Over polyfills gesproken, die krijgen ook een nieuw onderkomen. Veel ontwikkelaars zijn momenteel in de war over de relatie tussen Polymer en Web Components. Sommigen denken dat je Polymer volledig moet gebruiken om Web Components te gebruiken, terwijl je in feite alleen de polyfills nodig hebt.
Om dit onderscheid duidelijker te maken, worden de polyfills verplaatst naar webcomponents.org en zijn ze hernoemd naar webcomponents.js .
Deze verandering is bedoeld om andere bibliotheekauteurs te helpen de polyfills zonder verwarring te benutten. Het Polymer-team blijft bijdragen aan de polyfills, maar de hoop is dat deze verandering ze meer tot een gedeelde bron voor de community maakt.
Resultaten
Wat zijn de resultaten van al deze veranderingen?
Snelheid
In Chrome is Polymer nu 5x sneller en in Safari is de snelheid zelfs 8x sneller .
Bestandsgrootte
De bestandsgrootte is ook met 87% verkleind, van 123 KB naar 15 KB (6 KB gecomprimeerd).
Routekaart
Er zullen enkele API-brekende wijzigingen in de volgende release zitten, zoals blijkt uit het nieuwe versienummer (0.8), maar het team wil duidelijk maken dat dit geen herschrijving is. Het overzetten van je huidige project van Polymer 0.5 naar 0.8 zou vrij eenvoudig moeten zijn.
Het Polymer-team heeft ook een routekaart opgesteld om ontwikkelaars meer duidelijkheid te geven over aankomende releases.
De 0.8 preview is nu beschikbaar als branch op GitHub (hoewel er nog steeds actief aan wordt gewerkt en de documentatie nog ontbreekt). De officiële bètaversie van 0.9 staat gepland voor het eerste kwartaal van 2015, en versie 1.0 zal ergens in het tweede kwartaal verschijnen.
Het experiment is voorbij
Met alle recente veranderingen in Polymer legt het team erachter de basis om webcomponenten een integraal onderdeel te laten worden van de stack van elke ontwikkelaar. Als je nieuw bent met webcomponenten, is dit een goed moment om deze transformatieve technologieën te bekijken en je ermee vertrouwd te maken. Als je al met componenten (en Polymer) werkt, ziet de toekomst er rooskleurig uit. Houd de Polymer-blog in de gaten voor de laatste updates en meld je aan voor de Polymer-mailinglijst voor vragen of opmerkingen. Veel plezier met hacken!