Dit artikel is peer-reviewed door Taulant Spahiu en Panayiotis Velisarakos. Dank aan alle peer reviewers van SitePoint voor het zo goed mogelijk maken van SitePoint-inhoud!
Afgelopen september heeft Google de Polymer Summit 2015 gehouden. Tijdens deze conferentie hebben ontwikkelaars veel input geleverd over nieuwe dingen die Polymer mogelijk maakt. Polymer 1.0 was eerder uitgebracht, wat bijdroeg aan de verwachting die zovelen hadden voor de conferentie van dit jaar. Onder de sprekers van dit jaar was Addy Osmani, een Google-ingenieur die bekend staat om zijn belangrijke bijdragen aan verschillende open source-projecten.
In zijn lezing heeft hij enkele nieuwe tools geïntroduceerd die zijn vrijgegeven voor de ontwikkeling van polymeren. Deze tools bieden alles wat een ontwikkelaar nodig heeft om te weten over polymeerontwikkeling, ongeacht eerdere ervaringen. Veel van de tools die ik ga beschrijven, moeten worden gedownload via npm , en kan vervolgens rechtstreeks in de opdrachtregel van uw computer worden gebruikt.
Voor degenen onder jullie die niet weten wat polymeer is en het onderwerp willen verdiepen voordat ze mijn artikel lezen, raad ik aan om deze bronnen te bekijken:
- Een inleiding tot webcomponenten en polymeren (zelfstudie)
- Een afbeeldingsgalerijcomponent bouwen met polymeer
- Een aangepast element voor creditcardformulieren bouwen met polymeer
- Een gids voor het upgraden naar Polymer 1.0
Polymeer Starter Kit
Met Polymer tarter kit 1.0 kunnen ontwikkelaars in een mum van tijd aan de slag. Het bevat een bouwsysteem aangedreven door Gulp. Als gevolg hiervan kunnen ontwikkelaars hun eigen code gaan schrijven en hun applicatie-update in de browser bekijken. Als we de repository voor dit project bekijken, kunnen we zien dat deze buitengewoon goed wordt onderhouden, aangezien de kerncommits bovenaan de pagina worden gemarkeerd. Het Polymer-team biedt ontwikkelaars alle documentatie die nodig is om nieuwe gebruikers van Polymer te helpen zich op hun gemak te voelen bij het gebruik ervan.
seed-element
Het seed-element-project biedt een boilerplate voor bouwelementen in Polymer. Daar blijft het echter niet bij! Seed-element zal Polymer-toepassingen schrapen en een volledige documentatieset produceren van de verschillende functies die het Polymer-element probeert te bereiken. De mogelijkheid om deze functionaliteit te bieden wordt gedaan met behulp van IronComponent.
Hieronder zien we een voorbeeld van een seed-element dat in de browser leeft. Bovendien zien we dat het seed-element-project ons in staat stelt om de weergave van de daadwerkelijke applicatie om te schakelen naar de API-documentatie die is gegenereerd met IronComponent element.
Als je de repository voor het seed-element-project wilt bekijken, kun je deze hier vinden. Dat gezegd hebbende, hoeven we alleen maar de volgende opdracht uit te voeren om het seed-element-project op onze computer te installeren.
git clone https://github.com/polymerelements/seed-element && cd seed-elementPolyserve
De volgende tool waar we naar gaan kijken is Polyserve. Zoals de naam al doet vermoeden, kan deze applicatie worden gebruikt om Polymer-componenten in de browser te bedienen. In de hierboven opgenomen GIF wordt de applicatie gebruikt om de seed-element-applicatie te bedienen. Om deze tool te installeren, kunnen we de volgende opdracht uitvoeren. Het moet bekend zijn dat we de vlag -g hieraan moeten toevoegen, omdat we er wereldwijd toegang toe moeten hebben.
npm install -g polyserve
Als we nu naar de map met seed-elementen gaan die we eerder hebben gekloond en het commando polyserve uitvoeren , zien we hetzelfde resultaat weergegeven in de GIF hierboven. Deze tool lijkt erg op de http-server npm-module. Zoals u kunt zien, maakt het het ongelooflijk eenvoudig om aan de slag te gaan met Polymer.
Polyup
Polyup is een zeer indrukwekkende tool die hielp verlichten wat Addy Osmani 'Element Schuld' noemt. Dit is het schuldgevoel dat ontstaat als je urenlang bezig bent met het bouwen van een element in Polymer-versie 0.5, gewoon om te beseffen dat het niet compatibel is met Polymer 1.0. Ongelooflijk genoeg automatiseert Polyup het proces van het "opwaarderen" van Polymer 0.5-code, zodat het compatibel is met 1.0. Polyup doorloopt uw bestanden en herschrijft elementen met de juiste syntaxis. Voor degenen onder u die geïnteresseerd zijn in het zien van een live voorbeeld van hoe Polyup werkt, raad ik aan om de PolymerLabs Github-pagina te bezoeken. Daarnaast kunnen we hieronder een screenshot van deze pagina zien.
Polyup kan worden geïnstalleerd door het volgende commando uit te voeren:
npm install -g polyup
Na installatie hebben ontwikkelaars toegang tot de opdrachtregeltool van Polyup. Door polyup <filename.html> . uit te voeren we kunnen zitten en kijken terwijl Polymer componenten upgradet zodat ze volledig compatibel zijn in versie 1.0. Toen hij over Polyup sprak, noemde Addy Osmani een codefragment dat ik hieronder zal opnemen. Door dit codeblok in een Polymer-project uit te voeren, doorzoekt Polyup elk bestand in een project met een .html extensie, en upgrade al deze bestanden naar versie 2.0!
find . -name "*.html" -execdir polyup --overwrite "{}" \;Web Component-tester
Alle ontwikkelaars weten dat testen een integraal onderdeel van ontwikkeling is. Het is dan ook geen verrassing dat recentelijk een Web Component Tester-tool is uitgerold, zodat ontwikkelaars Polymer-componenten eenvoudig kunnen testen. Het is gebouwd bovenop mokka en Chai, twee van de meer populaire testkaders die beschikbaar zijn voor gebruik. Als gevolg hiervan kunnen veel ontwikkelaars hun kennis van het testen van verschillende JavaScript-frameworks met deze testsuites gebruiken om tests voor Polymer-componenten te schrijven.
Net als Polyup en Polyserve kan deze tool worden gedownload via npm door het volgende commando uit te voeren:
npm install -g web-component-tester
Na installatie hebben ontwikkelaars toegang tot de wct opdrachtregel tool. Wanneer uitgevoerd binnen een Polymer-project, wordt dit commando uitgevoerd op alle bestanden binnen de test map. Als we de mappenstructuur uit de seed-element-repository bekijken, kunnen we zien dat deze testdirectory aanwezig is.
Conclusies
Het Polymer-team heeft het domein van webontwikkeling voorzien van alle middelen die nodig zijn om applicaties met het framework te gaan bouwen. Naast deze tools sprak Addy Osmani ook over een paar andere, zoals Vulcanize en Crisper, die enorm populair zijn onder de Polymer-gemeenschap. Als je zijn toespraak of een van de andere toespraken van de Polymer Summit wilt zien, kun je ze vinden op het YouTube-kanaal van de conferentie.