Speaker: Patrick Hillert Event: W-JAX 03.11.2015 weitere Vorträge von inovex: https://www.inovex.de/de/content-pool/vortraege/ Seit gut vier Jahren wird der Begriff „Web Components“ verwendet, um einen der größten Meilensteine in aktuellen Browser-Engines zu beschreiben. Seither hat sich viel getan, die Hersteller haben die Spezifikationen implementiert und in Ihre Browser integriert. Es gibt viele brauchbare Komponenten, dennoch trauen sich nur wenige, diese Technik heute einzusetzen, obwohl mit Polymer 1.0 eine Bibliothek zur Verfügung steht, die den produktiven Einsatz von hochqualitativen Komponenten ermöglicht. In dieser Session zeige ich, welche Vorteile sich aus der Verwendung von Polymer und Co. ergeben und wie die Qualität von Webanwendungen durch das zur Verfügung stehende Web-Components-Ökosystem sehr einfach und effizient gesteigert werden kann.

1. Focus on Quality
Bessere Webfrontends durch Web Components
Patrick Hillert, 03. November 2015

2. Patrick Hillert
M.Sc. (Informatik)
Web-Softwareentwickler
Modern Web
Neue Web APIs + Tools
“Full-Stack”
@silentHoo
/silentHoo

3. https://www.flickr.com/photos/hades2k/7520172586/
“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.
Agenda
</> Überblick
</> Web Components und Polymer
</> Ökosystem
</> Fazit

4. https://commons.wikimedia.org/wiki/File:Old_timer_structural_worker.jpg
“Old-timer, keeping up with the boys…”, licensed under Public Domain. Photo taken by Lewis Hine.

5. Entwicklungen im Web heute
Spec-
Developers
Comm-
unities
Web-
Developers
HTML
Web-APIs
CSS
JavaScript
jQuery
AngularJS
EmberJS
Bootstrap
Freelancer
Companies

6. https://dribbble.com/meidenberg/projects/6336-Me-Dark-UI-kit
Designs in 2015
sollten für das Web einfach umzusetzen sein
Mikael Eidenberg
@meidenberg

7. “It’s super-easy with Bootstrap”
Modaler Dialog
http://getbootstrap.com/javascript/#modals

8. “Just copy this simple html …”
http://getbootstrap.com/javascript/#modals

9. “... and this little script.”
“Isn’t that easy?”
http://getbootstrap.com/javascript/#modals

10. https://www.flickr.com/photos/122127718@N08/13579450523/
“84 Rusty Color Metal texture - 4”, licensed under CC BY-SA 2.0. Copyright by texturepalace.
Problem #1:
Boilerplate-Code

11. Kendo UI
Plain HTML
JavaScript

12. YUI
Template
JavaScript

13. AngularJS
JavaScript
Template

14. https://www.flickr.com/photos/122127718@N08/13579450523/
“84 Rusty Color Metal texture - 4”, licensed under CC BY-SA 2.0. Copyright by texturepalace.
Problem #2:
Unterschiedliche Frameworks,
unterschiedliche Lösungswege

15. Welches Framework? Mischen möglich?

16. https://www.flickr.com/photos/122127718@N08/13579450523/
“84 Rusty Color Metal texture - 4”, licensed under CC BY-SA 2.0. Copyright by texturepalace.
Problem #3:
“Lock-In” vs. Komplexität

17. Anforderungen an einen Webentwickler

18. https://www.flickr.com/photos/122127718@N08/13579450523/
“84 Rusty Color Metal texture - 4”, licensed under CC BY-SA 2.0. Copyright by texturepalace.
Problem #4:
Frontends sind komplex

19. https://www.flickr.com/photos/122127718@N08/13579450523/
“84 Rusty Color Metal texture - 4”, licensed under CC BY-SA 2.0. Copyright by texturepalace.
Problem #4:
Frontends sind komplex
sehr komplex

20. https://www.flickr.com/photos/122127718@N08/13579450523/
“84 Rusty Color Metal texture - 4”, licensed under CC BY-SA 2.0. Copyright by texturepalace.
Problem #4:
Frontends sind komplex
sehr komplex
richtig komplex

22. https://www.flickr.com/photos/krossbow/4026537359/
“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.
Wird es mit
Web Components
einfacher?

24. <google-map latitude="49.0135165" longitude="8.4022463"></google-map>

27. <google-map latitude="49.0135165" longitude="8.4022463">
<google-map-marker
latitude="49.0135165" longitude="8.4022463">
</google-map-marker>
</google-map>

29. <google-map
map="{{map}}" latitude="49.0135165" longitude="8.4022463">
<google-map-marker
latitude="49.0135165" longitude="8.4022463">
</google-map-marker>
</google-map>
<google-map-directions
map="{{map}}" start-address="Karlsruhe" end-address="München">
</google-map-directions>

30. <google-map
map="{{map}}" latitude="49.0135165" longitude="8.4022463">
<google-map-marker
latitude="49.0135165" longitude="8.4022463">
</google-map-marker>
</google-map>
<google-map-directions
map="{{map}}" start-address="Karlsruhe" end-address="München">
</google-map-directions>
http://jsfiddle.net/mprej0j4/67/

31. https://www.flickr.com/photos/krossbow/4026537359/
“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.
“keep it simple”

32. https://www.flickr.com/photos/krossbow/4026537359/
“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.
“divide & conquer”
“keep it simple”

33. https://www.flickr.com/photos/krossbow/4026537359/
“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.
“think local”
“divide & conquer”
“keep it simple”

34. Historie

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

37. Custom Elements
● Semantische Information
● “Klassen für das Web”
● Wiederverwendbar
Neue Browser-API:

38. HTML Imports

39. HTML Templates
● Beschreibt DOM
● Bleibt inaktiv, bis clone()
● Leichtgewichtig

40. Shadow DOM
bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen

41. Shadow DOM
bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen

42. Shadow DOM
bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen

43. Shadow DOM
bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
Durch Browser
eingefügt

44. Shadow DOM
bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
Durch Browser
eingefügt

45. https://www.flickr.com/photos/hades2k/7520172586/
“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.
“Ich möchte einen
Videoplayer mit einer
Playlist”

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

47. https://www.flickr.com/photos/krossbow/4026537359/
“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.
Ohne Verwendung von
Shadow DOM

48. Ohne Verwendung von Shadow DOM
div

49. Ohne Verwendung von Shadow DOM
Container für
Video + Playlistdiv

50. Ohne Verwendung von Shadow DOM
video
div

51. Ohne Verwendung von Shadow DOM
div
div
video

52. Ohne Verwendung von Shadow DOM
divdiv
div
video div

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

54. https://www.flickr.com/photos/krossbow/4026537359/
“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.
Mit Verwendung von
Shadow DOM

55. Mit Verwendung von Shadow DOM
div

56. Mit Verwendung von Shadow DOM
video
div

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:

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

64. Shadow DOM
● Kein Ersatz zu <iframe>
● Kein separater JavaScript-Kontext
● Gekapseltes Styling
Einfacher Markup,
kein Boilerplate-Code

65. Shadow DOM
● Kein Ersatz zu <iframe>
● Kein separater JavaScript-Kontext
● Gekapseltes Styling
“Ripple-Effekt” +
Animationen
Einfacher Markup,
kein Boilerplate-Code

66. https://www.flickr.com/photos/hades2k/7520172586/
“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.
Und Polymer?

67. https://www.flickr.com/photos/krossbow/4026537359/
“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.
“The Polymer library is a
lightweight sugaring layer on
top of the web components
APIs [...]”
https://github.com/Polymer/polymer

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, ...

71. 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, ...
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, ...
ODER
ODER

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, ...
ODER
ODER
“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, ...
ODER
ODER
“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, ...
ODER
ODER
“All in”: Für UI-zentrische
Komponenten
Für Elemente mit
wenig UI-Interaktion
Für Elemente ohne UI-
Anteile, rein funktionale
Komponenten

77. Dateistruktur eines “Polymer-Elements”
<HTML-Imports>
<script>
<dom-module>
<dom-module id=”my-element”>
<template>
<style>

78. Dateistruktur eines “Polymer-Elements”
<dom-module id=”my-element”>
<HTML-Imports>
<template>
<style>
<script>
<dom-module>
Ist selbst ein Custom-
Element, das die Polymer-
Library mitbringt

79. https://www.polymer-project.org/1.0/docs/devguide/feature-overview.html

80. https://www.flickr.com/photos/krossbow/4026537359/
“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.
Styling

81. Styling von “außen” / Theming

82. Styling von “außen” / Theming
Polymer liefert Shim
für diesen Draft

83. Styling von “außen” / Theming
::shadow

84. Styling von “außen” / Theming
::shadow

85. Styling von “außen” / Theming
::shadow Färbt nur die Textfarbe
der s von my-
element in rot.

86. Styling von “außen” / Theming
/deep/

87. Styling von “außen” / Theming
/deep/

88. Styling von “außen” / Theming
/deep/
Färbt alle s des
gesamten Dokuments in rot.

89. Styling von “außen” / Theming
/deep/::shadow

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

96. https://www.flickr.com/photos/krossbow/4026537359/
“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.
Tooling Ökosystem

97. ● App-Stub
● Element- inkl. Test-Stubs
● GitHub-Pages für Dokumentation
Generatoren
https://github.com/yeoman/generator-polymer

98. ● App-Stub
● Element- inkl. Test-Stubs
● GitHub-Pages für Dokumentation
Generatoren
basiert auf Polymer-
Starter-Kit
https://github.com/yeoman/generator-polymer

99. ● App-Stub
● Element- inkl. Test-Stubs
● GitHub-Pages für Dokumentation
Generatoren
basiert auf Polymer-
Starter-Kit
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
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
Mocha
Chai
Lodash
Async
Sinon
Web Component Tester

104. https://github.com/Polymer/web-component-tester
● Black-Box-Tests sind möglich
● BDD ( ) + TDD ( )
● Komponente wird “als Ganzes” getestet
Web Component Tester

105. https://www.flickr.com/photos/krossbow/4026537359/
“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.
Weitere Tools

106. Weitere Tools
PolyBuild
PolyLint
PolyGit.org
PolyDev Chrome Extension

107. Weitere Tools
PolyBuild
PolyLint
PolyGit.org
PolyDev Chrome Extension
HTML-Imports
kombinieren, JavaScript
minifizieren

108. Weitere Tools
PolyBuild
PolyLint
PolyGit.org
PolyDev Chrome Extension
HTML-Imports
kombinieren, JavaScript
minifizieren
Linter für Polymer

109. Weitere Tools
PolyBuild
PolyLint
PolyGit.org
PolyDev Chrome Extension
HTML-Imports
kombinieren, JavaScript
minifizieren
Linter für Polymer
cdn.rawgit.com-Proxy,
HTML-Imports mit
Versionierung

110. Weitere Tools
PolyBuild
PolyLint
PolyGit.org
PolyDev Chrome Extension
HTML-Imports
kombinieren, JavaScript
minifizieren
Linter für Polymer
cdn.rawgit.com-Proxy,
HTML-Imports mit
Versionierung

111. https://www.flickr.com/photos/hades2k/7520172586/
“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.
“Wie groß sollte eine
Komponente sein?”

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?

118. https://www.flickr.com/photos/hades2k/7520172586/
“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.
“Wie kann ich damit die
Qualität verbessern?”

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

120. https://www.flickr.com/photos/hades2k/7520172586/
“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.
“Wo finde ich
Komponenten?”

121. http://elements.polymer-project.org

122. http://customelements.io

123. https://www.flickr.com/photos/hades2k/7520172586/
“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.
“Wie kann ich eine
Komponente verwenden?”

124. 1 Find/
Install

125. 1 Find/
Install

126. 1 Find/
Install

127. 1
2
Find/
Install
Import

128. <head>
<link rel=”import” href=”components/paper-button/paper-button.html”>
</head>
1
2
Find/
Install
Import

129. <head>
<link rel=”import” href=”components/paper-button/paper-button.html”>
</head>
1
3
2
Find/
Install
Import
Use

130. <body>
<div>
<paper-button raised>BUTTON</paper-button>
</div>
</body>
<head>
<link rel=”import” href=”components/paper-button/paper-button.html”>
</head>
1
3
2
Find/
Install
Import
Use

131. <body>
<div>
<paper-button raised>BUTTON</paper-button>
</div>
</body>
<head>
<link rel=”import” href=”components/paper-button/paper-button.html”>
</head>
1
3
2
Find/
Install
Import
Use

132. https://www.flickr.com/photos/krossbow/4026537359/
“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.
Browsersupport

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

137. Kontakt
Patrick Hillert
patrick.hillert@inovex.de
github.com/silentHoo
twitter.com/silentHoo
slideshare.net/PatrickHillert

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