Webcomponenten gaan alles wat u denkt te weten over bouwen voor het web veranderen. Voor het eerst zal het web over API's op laag niveau beschikken, waardoor we niet alleen onze eigen HTML-tags kunnen maken, maar ook logica en CSS kunnen inkapselen. Geen globale stylesheet-soep of boilerplate-code meer! Het is een dappere nieuwe wereld waarin alles een element is.
In mijn lezing van DotJS loop ik door wat webcomponenten te bieden hebben en hoe je ze kunt bouwen met behulp van moderne tools. Ik zal je Yeoman laten zien, een workflow met tools om het maken van web-apps te stroomlijnen met behulp van Polymer , een bibliotheek met polyfills en suiker voor het ontwikkelen van apps met behulp van webcomponenten in moderne browsers van vandaag.
Maak aangepaste elementen en installeer elementen die door anderen zijn gemaakt
In dit gesprek leer je:
- Over de vier verschillende specificaties waaruit webcomponenten bestaan: aangepaste elementen , sjablonen , schaduw-DOM en HTML-import .
- Hoe u uw eigen aangepaste elementen definieert en elementen installeert die door anderen zijn gemaakt met Bower
- Besteed minder tijd aan het schrijven van JavaScript en meer tijd aan het bouwen van pagina's
- Gebruik moderne front-end tooling ( Yeoman ) om een applicatie te bouwen met behulp van Polymer met generator-polymeer
- Hoe Polymer super verandert bij het maken van webcomponenten.
Als u bijvoorbeeld Polymer's Web Component-polyfills en de bibliotheek zelf wilt installeren, kunt u deze one-liner uitvoeren:
bower install --save Polymer/platform Polymer/polymer
Hiermee wordt een map bower_components toegevoegd en worden de bovenstaande pakketten toegevoegd. --save voegt ze toe aan het bower.json-bestand van uw app.
Als je later het accordeonelement van Polymer wilt installeren, kun je het volgende uitvoeren:
bower install --save Polymer/polymer-ui-accordion
en importeer het vervolgens in uw toepassing:
<link rel="import" href="bower_components/polymer-ui-accordion/polymer-ui-accordion.html">
Om tijd te besparen, kunt u met Yeoman een nieuwe Polymer-app opzetten met alle afhankelijkheden die u nodig hebt, boilerplate-code en tools voor het optimaliseren van uw app met deze andere one-liner:
yo polymer
Bonus-walkthrough
Ik heb ook een bonuswalkthrough van 30 minuten opgenomen van de Polymer Jukebox-app die ik in de lezing laat zien.
Behandeld in de bonusvideo:
- Wat de mantra ‘alles is een element’ betekent
- Hoe Bower te gebruiken om Polymer's Platform-polyfills en -elementen te installeren
- Onze Jukebox-app ondersteunen met de Yeoman-generator en subgeneratoren
- Inzicht in de platformfuncties, uiteengezet via standaardtekst
- Hoe ik een Angular -app functioneel overzette naar Polymer.
We maken ook gebruik van Yeoman-subgeneratoren voor het steigeren van onze nieuwe polymeerelementen. om bijvoorbeeld de boilerplate voor een element foo te maken, voeren we het volgende uit:
yo polymer:element foo
wat ons zal vragen of we het element automatisch willen laten importeren, of een constructor nodig is en voor een paar andere voorkeuren.
De nieuwste bronnen voor de app die in beide gesprekken worden getoond, staan nu op GitHub . Ik heb het nog een beetje verder aangepast, zodat het overzichtelijker en gemakkelijker te lezen is.
Voorbeeld van de app:
Verder lezen
Samenvattend is Polymer een JavaScript-bibliotheek die webcomponenten nu in moderne webbrowsers mogelijk maakt, terwijl we wachten tot ze native worden geïmplementeerd. Moderne tools kunnen u helpen uw workflow te verbeteren door ze te gebruiken en u kunt Yeoman en Bower misschien wel uitproberen bij het ontwikkelen van uw eigen tags.
Nog een paar andere artikelen over dit onderwerp die de moeite waard zijn om te lezen: