This talk is a introduction into Web Components and Polymer. I'll show what Web Components are and what Polymer is and give an overview of the existing tooling ecosystem. The talk was held in Munich at the W-JAX on Nov. 03, 2015. The language is german.
35. “Web Components”
umfassen mehrere einzelne Spezifikationen
Web Components
Decorators
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
36. Custom Elements
● Semantische Information
● “Klassen für das Web”
● Wiederverwendbar
<paper-slider
pin snaps max="10" step="1"
value="5" class="orange">
</paper-slider>
37. 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’, /* options */);
39. HTML Templates
● Beschreibt DOM
● Bleibt inaktiv, bis clone()
● Leichtgewichtig
<template>
<div class="profile">
<img src="/profile-pic.jpg">
</div>
<script></script>
</template>
40. Shadow DOM
bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
<video
src="foo.webm" controls>
</video>
41. Shadow DOM
bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
<video
src="foo.webm" controls>
</video>
42. Shadow DOM
bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
<video
src="foo.webm" controls>
</video>
43. Shadow DOM
bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
<video
src="foo.webm" controls>
</video>
Durch Browser
eingefügt
44. Shadow DOM
bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
<video
src="foo.webm" controls>
</video>
Durch Browser
eingefügt
46. Videoplayer mit Playlist
Der Pate
Lorem ipsum dolor sit amet, ipsum
sit orem aleta
Pulp Fiction
Lorem ipsum dolor sit amet, ipsum
sit orem aleta
The Dark Knight
Lorem ipsum dolor sit amet, ipsum
sit orem aleta
53. Ohne Verwendung von Shadow DOM
.. ..
..
.. ..
Der Pate
Lorem ipsum dolor sit amet,
ipsum sit orem aleta
Pulp Fiction
Lorem ipsum dolor sit amet,
ipsum sit orem aleta
The Dark KnightLorem ipsum dolor sit amet,
ipsum sit orem aleta
div
video div
divdiv
57. Mit Verwendung von Shadow DOM
div
my-playlistvideo
Der Pate
Lorem ipsum dolor sit amet,
ipsum sit orem aleta
Pulp Fiction
Lorem ipsum dolor sit amet,
ipsum sit orem aleta
The Dark KnightLorem ipsum dolor sit amet,
ipsum sit orem aleta
58. Mit Verwendung von Shadow DOM
div
my-playlistvideo
Der Pate
Lorem ipsum dolor sit amet,
ipsum sit orem aleta
Pulp Fiction
Lorem ipsum dolor sit amet,
ipsum sit orem aleta
The Dark KnightLorem ipsum dolor sit amet,
ipsum sit orem aleta
..
.. ..
divdiv
ShadowRoot
ShadowDOMTree
59. Mit Verwendung von Shadow DOM
div
my-playlistvideo
Der Pate
Lorem ipsum dolor sit amet,
ipsum sit orem aleta
Pulp Fiction
Lorem ipsum dolor sit amet,
ipsum sit orem aleta
The Dark KnightLorem ipsum dolor sit amet,
ipsum sit orem aleta
..
.. ..
divdiv
ShadowRoot
ShadowDOMTree
Neue Browser-API:
var shadowRoot = $(‘my-playlist’).createShadowRoot();
shadowRoot.appendChild($(‘template’).content);
60. Mit Verwendung von Shadow DOM
div
my-playlistvideo
Der Pate
Lorem ipsum dolor sit amet,
ipsum sit orem aleta
Pulp Fiction
Lorem ipsum dolor sit amet,
ipsum sit orem aleta
The Dark KnightLorem ipsum dolor sit amet,
ipsum sit orem aleta
..
.. ..
divdiv
ShadowRoot
ShadowDOMTree
Max. 1 Shadow-Tree
pro Element
61. Mit Verwendung von Shadow DOM
div
my-playlistvideo
Der Pate
Lorem ipsum dolor sit amet,
ipsum sit orem aleta
Pulp Fiction
Lorem ipsum dolor sit amet,
ipsum sit orem aleta
The Dark KnightLorem ipsum dolor sit amet,
ipsum sit orem aleta
..
.. ..
divdiv
ShadowRoot
ShadowDOMTree
Max. 1 Shadow-Tree
pro Element
Stylesheet wirkt sich
nur innerhalb dieses
Sub-Trees aus
62. Mit Verwendung von Shadow DOM
div
my-playlistvideo
Der Pate
Lorem ipsum dolor sit amet,
ipsum sit orem aleta
Pulp Fiction
Lorem ipsum dolor sit amet,
ipsum sit orem aleta
The Dark KnightLorem ipsum dolor sit amet,
ipsum sit orem aleta
..
.. ..
divdiv
ShadowRoot
ShadowDOMTree
Max. 1 Shadow-Tree
pro Element
Stylesheet wirkt sich
nur innerhalb dieses
Sub-Trees aus
Events in
Shadow Tree
“wie gehabt”
63. Shadow DOM
● Kein Ersatz zu <iframe>
● Kein separater JavaScript-Kontext
● Gekapseltes Styling
<paper-tabs selected="0">
<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab>
</paper-tabs>
64. Shadow DOM
● Kein Ersatz zu <iframe>
● Kein separater JavaScript-Kontext
● Gekapseltes Styling
<paper-tabs selected="0">
<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab>
</paper-tabs>
Einfacher Markup,
kein Boilerplate-Code
65. Shadow DOM
● Kein Ersatz zu <iframe>
● Kein separater JavaScript-Kontext
● Gekapseltes Styling
<paper-tabs selected="0">
<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab>
</paper-tabs>
“Ripple-Effekt” +
Animationen
Einfacher Markup,
kein Boilerplate-Code
68. Polymer: Fakten
● Maintainer: Google
● Start der Entwicklung: Oktober 2012, aktuelle Version: 1.2
● Ziele:
○ Mobile + Modern Browsers First
○ Mehr deklarativ, weniger imperativ
○ Tooling Eco-System
○ Interoperabilität
69. Produkte, die Polymer verwenden
YouTube Gaming:
http://gaming.youtube.com
Chrome Platform Status:
http://chromestatus.com
Google Zeitgeist 2013:
http://zeitgeist-globe.appspot.com
Chrome Dev Editor:
https://goo.gl/1ixIkA
70. Polymer: Schichten-Aufbau
Standard (polymer.html)
Annotations, Data-Binding, Gesture-Events, Scoped
Styling, Helper-Funktionen
Mini (polymer-mini.html)
HTML-Template, Callbacks, Shadow DOM,
Shady DOM
Polymer “Core” (Basis)
Micro (polymer-micro.html)
Behaviours, Konstruktor, Vererbung,
Attributes, Properties, ...
72. Polymer: Schichten-Aufbau
Standard (polymer.html)
Annotations, Data-Binding, Gesture-Events, Scoped
Styling, Helper-Funktionen
Mini (polymer-mini.html)
HTML-Template, Callbacks, Shadow DOM,
Shady DOM
Polymer “Core” (Basis)
Micro (polymer-micro.html)
Behaviours, Konstruktor, Vererbung,
Attributes, Properties, ...
<link rel="import" href=".../polymer.html">
<link rel="import" href=".../polymer-mini.html">
ODER
73. Polymer: Schichten-Aufbau
Standard (polymer.html)
Annotations, Data-Binding, Gesture-Events, Scoped
Styling, Helper-Funktionen
Mini (polymer-mini.html)
HTML-Template, Callbacks, Shadow DOM,
Shady DOM
Polymer “Core” (Basis)
Micro (polymer-micro.html)
Behaviours, Konstruktor, Vererbung,
Attributes, Properties, ...
<link rel="import" href=".../polymer.html">
<link rel="import" href=".../polymer-mini.html">
ODER
ODER
<link rel="import" href=".../polymer-micro.html">
74. Polymer: Schichten-Aufbau
Standard (polymer.html)
Annotations, Data-Binding, Gesture-Events, Scoped
Styling, Helper-Funktionen
Mini (polymer-mini.html)
HTML-Template, Callbacks, Shadow DOM,
Shady DOM
Polymer “Core” (Basis)
Micro (polymer-micro.html)
Behaviours, Konstruktor, Vererbung,
Attributes, Properties, ...
<link rel="import" href=".../polymer.html">
<link rel="import" href=".../polymer-mini.html">
ODER
ODER
<link rel="import" href=".../polymer-micro.html">
“All in”: Für UI-zentrische
Komponenten
75. Polymer: Schichten-Aufbau
Standard (polymer.html)
Annotations, Data-Binding, Gesture-Events, Scoped
Styling, Helper-Funktionen
Mini (polymer-mini.html)
HTML-Template, Callbacks, Shadow DOM,
Shady DOM
Polymer “Core” (Basis)
Micro (polymer-micro.html)
Behaviours, Konstruktor, Vererbung,
Attributes, Properties, ...
<link rel="import" href=".../polymer.html">
<link rel="import" href=".../polymer-mini.html">
ODER
ODER
<link rel="import" href=".../polymer-micro.html">
“All in”: Für UI-zentrische
Komponenten
Für Elemente mit
wenig UI-Interaktion
76. Polymer: Schichten-Aufbau
Standard (polymer.html)
Annotations, Data-Binding, Gesture-Events, Scoped
Styling, Helper-Funktionen
Mini (polymer-mini.html)
HTML-Template, Callbacks, Shadow DOM,
Shady DOM
Polymer “Core” (Basis)
Micro (polymer-micro.html)
Behaviours, Konstruktor, Vererbung,
Attributes, Properties, ...
<link rel="import" href=".../polymer.html">
<link rel="import" href=".../polymer-mini.html">
ODER
ODER
<link rel="import" href=".../polymer-micro.html">
“All in”: Für UI-zentrische
Komponenten
Für Elemente mit
wenig UI-Interaktion
Für Elemente ohne UI-
Anteile, rein funktionale
Komponenten
90. Styling von “außen” / Theming
/deep/::shadow
● “Consumer” muss interne Details der Komponenten kennen
91. Styling von “außen” / Theming
/deep/::shadow
● “Consumer” muss interne Details der Komponenten kennen
Bei Änderungen an der
Komponente, kann die CSS-
Regel evtl. nicht mehr
greifen!
92. Styling von “außen” / Theming
/deep/::shadow
● “Consumer” muss interne Details der Komponenten kennen
● Schlechte Performance
Bei Änderungen an der
Komponente, kann die CSS-
Regel evtl. nicht mehr
greifen!
93. Styling von “außen” / Theming
/deep/::shadow
● “Consumer” muss interne Details der Komponenten kennen
● Schlechte Performance
CSS-Regeln sind nicht mehr nur
auf den Sub-Tree beschränkt
Bei Änderungen an der
Komponente, kann die CSS-
Regel evtl. nicht mehr
greifen!
94. Styling von “außen” / Theming
/deep/::shadow
https://www.polymer-project.org/1.0/docs/devguide/styling.html
95. Styling von “außen” / Theming
<dom-module id=”my-notification”>
<template>
<style>
:host {
--my-message-title-color: black;
}
.error {
--my-message-title-color: red;
}
.success {
--my-message-title-color: green;
}
</style>
</template>
<my-message title=”This title is black.” />
<my-message class=”error” title=”This title is red.” />
<my-message class=”success” title=”This title is green.” />
</dom-module>
<dom-module id=”my-message”>
<template>
<style>
.title {
color: var(--my-message-title-color);
}
</style>
</template>
<span class=”title”>{{title}}</span>
</dom-module>
98. ● App-Stub
● Element- inkl. Test-Stubs
● GitHub-Pages für Dokumentation
Generatoren
basiert auf Polymer-
Starter-Kit
# install yeoman polymer generator
npm install -g generator-polymer
# init your app
yo polymer
https://github.com/yeoman/generator-polymer
99. ● App-Stub
● Element- inkl. Test-Stubs
● GitHub-Pages für Dokumentation
Generatoren
basiert auf Polymer-
Starter-Kit
# install yeoman polymer generator
npm install -g generator-polymer
# init your app
yo polymer
# add a reusable element
yo polymer:seed
https://github.com/yeoman/generator-polymer
100. 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
101. Web Component Tester
Others
LOCAL TESTINGREMOTE TESTING
WCT
Automated Cross-Browser Testing
https://github.com/Polymer/web-component-tester
102. Others
LOCAL TESTINGREMOTE TESTING
Automated Cross-Browser Testing
https://github.com/Polymer/web-component-tester
Mocha
Chai
Lodash
Async
Sinon
includes
WCT
Web Component Tester
103. Others
LOCAL TESTINGREMOTE TESTING
includes
WCT
Automated Cross-Browser Testing
https://github.com/Polymer/web-component-tester
# install web components tester
npm install -g web-component-tester
# run all tests on all installed browsers
wct
Mocha
Chai
Lodash
Async
Sinon
Web Component Tester
112. Auf die Größe kommt es an
● Nicht nur auf Komponenten setzen
113. Auf die Größe kommt es an
● Nicht nur auf Komponenten setzen
Frameworks
sinnvoll nutzen
114. Auf die Größe kommt es an
● Nicht nur auf Komponenten setzen
● Keine zu großen Komponenten
Frameworks
sinnvoll nutzen
115. Auf die Größe kommt es an
● Nicht nur auf Komponenten setzen
● Keine zu großen Komponenten
Frameworks
sinnvoll nutzen
Dann nicht mehr
wiederverwendbar
116. Auf die Größe kommt es an
● Nicht nur auf Komponenten setzen
● Keine zu großen Komponenten
● Neue Komponenten aus vorhandenen aufbauen
Frameworks
sinnvoll nutzen
Dann nicht mehr
wiederverwendbar
117. Auf die Größe kommt es an
● Nicht nur auf Komponenten setzen
● Keine zu großen Komponenten
● Neue Komponenten aus vorhandenen aufbauen
Frameworks
sinnvoll nutzen
Dann nicht mehr
wiederverwendbar
Gibt’s hierfür bereits ein
brauchbares Element?
119. ● z.B. für Kundenprojekte
○ dadurch inkrementelle Verbesserung der Qualität
○ ständig getestet
○ zentral verwaltet
○ Import in das aktuelle Projekt
Eigener Pool an Komponenten
133. MOBILE / TABLETDESKTOP
HTML Templates
HTML Imports
Custom Elements
Shadow DOM
32+ 36+ 45+
4.4+7.1+26+22+ 8+
23+ 45+
29+ 35+
33+
45+
*
* Chrome for Android / Android Browser
Browser-Support (nativ)
Herbst 2015
13+
Quelle: caniuse.com
134. MOBILE / TABLETDESKTOP
HTML Templates
HTML Imports
Custom Elements
Shadow DOM
*
* Chrome for Android / Android Browser
10+ 10+7+7+
Browser-Support (polyfilled)
Herbst 2015
Quelle: caniuse.com
135. https://www.flickr.com/photos/hades2k/7520172586/
“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.
● Standard / nativ implementiert
● Sehr viele Tools
● Komplexität + Styling wird gekapselt
● Interoperabilität mit anderen Frameworks
● Einfach testbar
Zusammenfassung
136. Weitere Ressourcen
Polymer Summit 2015 CodeLab Tutorials
http://www.code-labs.io/polymer-summit
Web Components “Gold Standard” alias “Best Practices”
https://github.com/webcomponents/gold-standard/wiki
Polycasts
https://www.youtube.com/playlist?list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN
Polymer Summit 2015
https://www.youtube.com/playlist?list=PLNYkxOF6rcICdISJclfQhj2S8QZGjXV8J
138. 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