„Software is eating the world“ und das moderne Web hat sicherlich einen sehr großen Anteil daran. Wie könnte aber die nächste Evolutionsstufe im Web aussehen? Ein Kandidat sind hier die Web Components, die einen sehr einfachen Einstieg in die komponentenbasierte Strukturierung von Webanwendungen bieten. Hierbei können auch einzelne Komponenten in bestehende Anwendungen integriert und nachgerüstet werden, ohne dabei das Entwickler-Know-how im konkreten Framework zu verlieren. In diesem Vortrag wird zunächst ein Überblick über den aktuellen Status quo von Web Components gegeben und anschließend beispielhaft gezeigt, wie sich Komponenten in eine bestehende AngularJS-Anwendung integrieren lassen. Ein Ausblick auf Tooling und kommende Features rundet den Vortrag ab.
Event: JAX 2016, 21.04.2016
Speaker: Patrick Hillert, inovex GmbH
Mehr Tech-Vorträge: https://www.inovex.de/de/content-pool/vortraege/
29. Teile und Herrsche
Komplexität in kleine Häppchen aufteilen
20162006 2009 2011 2013
2
W3C Standard1.5: “module.component”
30. Teile und Herrsche
Komplexität in kleine Häppchen aufteilen
20162006 2009 2011 2013
2
W3C Standard1.5: “module.component”
+ Trennung der Verantwortlichkeit
+ Eine Einheit -> Besser testbar
+ (Wiederverwendbar)
34. “Web Components”
Web Components
Custom
Elements
Shadow DOM HTML Imports HTML Templates
HTML5
W3C Editor’s Draft
W3C Recomm. Track Process Maturity Levels
W3C Working Draft (WD)
W3C Candidate Recommendation (CR)
W3C Proposed Recommendation (PR)
W3C Recommendation (REC)
W3C Note
No Specification
moved to HTML5
38. MOBILE / TABLETDESKTOP
HTML Templates
HTML Imports
Custom Elements
Shadow DOM
*
* Chrome for Android / Android Browser
10+ 10+7+7+
Browser-Support (polyfilled)
Frühjahr 2016
Quelle: polymer-project.org
40. Custom Elements
● Semantische Information
● “Klassen für das Web”
● Wiederverwendbar
<paper-slider
pin snaps max="10" step="1"
value="5" class="orange">
</paper-slider>
41. Custom Elements
● Semantische Information
● “Klassen für das Web”
● Wiederverwendbar
<paper-slider
pin snaps max="10" step="1"
value="5" class="orange">
</paper-slider>
Neue Browser-API:
document.registerElement(‘paper-slider’, /* proto */);
42. Custom Elements
● Semantische Information
● “Klassen für das Web”
● Wiederverwendbar
<paper-slider
pin snaps max="10" step="1"
value="5" class="orange">
</paper-slider>
Neue Browser-API:
document.registerElement(‘paper-slider’, /* proto */);
NATIVERCODE*
*: Wollen wir nicht von Hand schreiben, Polymer
übernimmt das für uns!
46. HTML Templates
● Beschreibt DOM
● Bilder, Skripte bleiben inaktiv bis
clone()
● Leichtgewichtig
<template id="myTemplate">
<div class="profile">
<img src="/profile-pic.jpg">
</div>
<script>
// ...
</script>
</template>
47. HTML Templates
<template id="myTemplate">
<div class="profile">
<img src="/profile-pic.jpg">
</div>
<script>
// ...
</script>
</template>
Aktivierung durch clone() in JavaScript:
var t = document.querySelector(‘#myTemplate’);
var clone = document.importNode(t.content, true);
document.body.appendChild(clone);
● Beschreibt DOM
● Bilder, Skripte bleiben inaktiv bis
clone()
● Leichtgewichtig
48. HTML Templates
<template id="myTemplate">
<div class="profile">
<img src="/profile-pic.jpg">
</div>
<script>
// ...
</script>
</template>
Aktivierung durch clone() in JavaScript:
var t = document.querySelector(‘#myTemplate’);
var clone = document.importNode(t.content, true);
document.body.appendChild(clone);
NATIVERCODE*
● Beschreibt DOM
● Bilder, Skripte bleiben inaktiv bis
clone()
● Leichtgewichtig
*: Wollen wir nicht von Hand schreiben, Polymer
übernimmt das für uns!
50. Shadow DOM
bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
<video
src="foo.webm" controls>
</video>
51. Shadow DOM
bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
<video
src="foo.webm" controls>
</video>
52. Shadow DOM
bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
<video
src="foo.webm" controls>
</video>
53. Shadow DOM
bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
<video
src="foo.webm" controls>
</video>
Durch Browser
eingefügt
54. Shadow DOM
bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
<video
src="foo.webm" controls>
</video>
Durch Browser
eingefügt
● Kein Ersatz zu <iframe>
● Kein separater JavaScript-Kontext
● Gekapseltes Styling / Markup
55. Shadow DOM
bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
<video
src="foo.webm" controls>
</video>
Durch Browser
eingefügt
● Kein Ersatz zu <iframe>
● Kein separater JavaScript-Kontext
● Gekapseltes Styling / Markup
Neue Browser-API:
var shadow = document.querySelector(‘#myId’).createShadowRoot();
var template = document.querySelector(‘#myIdTemplate’);
var clone = document.importNode(template.content, true);
shadow.appendChild(clone);
56. Shadow DOM
bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
<video
src="foo.webm" controls>
</video>
Durch Browser
eingefügt
● Kein Ersatz zu <iframe>
● Kein separater JavaScript-Kontext
● Gekapseltes Styling / Markup
Neue Browser-API:
var shadow = document.querySelector(‘#myId’).createShadowRoot();
var template = document.querySelector(‘#myIdTemplate’);
var clone = document.importNode(template.content, true);
shadow.appendChild(clone);
NATIVERCODE*
*: Wollen wir nicht von Hand schreiben, Polymer
übernimmt das für uns!
72. Und wie sieht die UI aus?
Flexbox
https://github.com/silentHoo/todomvc-ngpoly
73. Problem #1: ngModel funktioniert nicht
● Komponente sendet Event “value-changed”
● Nur mit Eventlistener ist Zugriff möglich:
● Lösung: Direktive, die diese Art der Events handelt und im Model setzt.
addEventListener(‘value-changed’, function() { … })
https://github.com/silentHoo/todomvc-ngpoly
91. Fazit: Abwägen
● Gibt es eine ausreichende Lösung für das Framework?
○ Lösung bevorzugen, wenn Sie den Funktionsumfang bietet, den man
benötigt. Bessere Integration in Framework.
● Es gibt keine Lösung für Framework aber eine Komponente?
○ Komponente verwenden statt neu entwickeln. Aufwand für
Wrapping/Integration in Framework lohnt sich in jedem Fall.
94. I. Generatoren
● App-Stub
○ Element- inkl. Test-Stubs
● GitHub-Pages für Dokumentation
basiert auf Polymer-
Starter-Kit
Erzeugt statische Doku
auf <user.>.github.io
# install yeoman polymer generator
npm install -g generator-polymer
# init your app
yo polymer
# add a reusable element
yo polymer:seed
# publish on github
yo polymer:gh
https://github.com/yeoman/generator-polymer
95. II. Web Component Tester
Others
LOCAL TESTINGREMOTE TESTING
WCT
Automated Cross-Browser Testing
https://github.com/Polymer/web-component-tester
100. Quellenverzeichnis / Rechtliches
Die Quellen finden sich jeweils direkt an der entsprechenden Stelle des zitierten Werkes. / All sources
are given appropriate credit at the place of their corresponding place on slide.
Die verwendeten Logos sind Eigentum der jeweiligen Inhaber. / All logos and trademarks are the
property of their respective owners. If you are the owner and don’t want to show, please let me know.
Copyright by Last Call Media Inc., Free for Commercial Use, https://www.iconfinder.
com/icons/296208/axe_configuration_gear_mining_pick_pickaxe_tool_tools_work_icon#size=128
Copyright by the gnome.org project, licensed under GPL, https://www.iconfinder.com/icons/55596/accept_check_ok_tick_icon#size=64
Copyright by Ionicicons.com, licensed under MIT, https://www.iconfinder.com/icons/211746/flag_outline_icon#size=64