Focus on Quality Bessere Webfrontends durch Web Components
Patrick Hillert, 03. November 2015
Patrick Hillert
Web-Softwareentwickler
M.Sc. (Informatik) @silentHoo /silentHoo
Modern Web Neue Web APIs + Tools “Full-Stack”
Agenda
Überblick Web Components und Polymer Ökosystem Fazit
https://www.flickr.com/photos/hades2k/7520172586/ “Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.
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.
Entwicklungen im Web heute
SpecDevelopers
HTML Web-APIs CSS JavaScript
Communities
jQuery AngularJS EmberJS Bootstrap
WebDevelopers
Freelancer Companies
Designs in 2015 sollten für das Web einfach umzusetzen sein
Mikael Eidenberg @meidenberg
https://dribbble.com/meidenberg/projects/6336-Me-Dark-UI-kit
“It’s super-easy with Bootstrap”
Modaler Dialog
http://getbootstrap.com/javascript/#modals
“Just copy this simple html …”
http://getbootstrap.com/javascript/#modals
“... and this little script.”
“Isn’t that easy?”
http://getbootstrap.com/javascript/#modals
Problem #1: Boilerplate-Code https://www.flickr.com/photos/122127718@N08/13579450523/ “84 Rusty Color Metal texture - 4”, licensed under CC BY-SA 2.0. Copyright by texturepalace.
Kendo UI Plain HTML
JavaScript
YUI Template
JavaScript
AngularJS
JavaScript
Template
Problem #2: Unterschiedliche Frameworks, unterschiedliche Lösungswege https://www.flickr.com/photos/122127718@N08/13579450523/ “84 Rusty Color Metal texture - 4”, licensed under CC BY-SA 2.0. Copyright by texturepalace.
Welches Framework? Mischen möglich?
Problem #3: “Lock-In” vs. Komplexität https://www.flickr.com/photos/122127718@N08/13579450523/ “84 Rusty Color Metal texture - 4”, licensed under CC BY-SA 2.0. Copyright by texturepalace.
Anforderungen an einen Webentwickler
Problem #4: Frontends sind komplex
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 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 https://www.flickr.com/photos/122127718@N08/13579450523/ “84 Rusty Color Metal texture - 4”, licensed under CC BY-SA 2.0. Copyright by texturepalace.
Wird es mit Web Components einfacher? https://www.flickr.com/photos/krossbow/4026537359/ “Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.
http://jsfiddle.net/mprej0j4/67/
“keep it simple” 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” 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” “think local” https://www.flickr.com/photos/krossbow/4026537359/ “Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.
Historie
“Web Components” umfassen mehrere einzelne Spezifikationen HTML5
Web Components moved to HTML5
Decorators
Custom Elements
Shadow DOM
HTML Imports
HTML Templates
W3C Recomm. Track Process Maturity Levels W3C Working Draft (WD) No Specification
W3C Candidate Recommendation (CR)
W3C Note
W3C Proposed Recommendation (PR)
W3C Editor’s Draft
W3C Recommendation (REC)
Custom Elements ● Semantische Information ● “Klassen für das Web” ● Wiederverwendbar
Custom Elements Neue Browser-API:
● Semantische Information ● “Klassen für das Web” ● Wiederverwendbar
HTML Imports
HTML Templates ● Beschreibt DOM ● Bleibt inaktiv, bis clone() ● Leichtgewichtig
Shadow DOM bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
Shadow DOM bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
Shadow DOM bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
Shadow DOM bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
Durch Browser eingefügt
Shadow DOM bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
Durch Browser eingefügt
“Ich möchte einen Videoplayer mit einer Playlist” https://www.flickr.com/photos/hades2k/7520172586/ “Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.
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
Ohne Verwendung von Shadow DOM 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 div
Ohne Verwendung von Shadow DOM div
Container für Video + Playlist
Ohne Verwendung von Shadow DOM div
video
Ohne Verwendung von Shadow DOM div
video
div
Ohne Verwendung von Shadow DOM div
div
video
div
div
Ohne Verwendung von Shadow DOM Der Pate Lorem ipsum dolor sit amet, ipsum sit orem aleta
div
Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta
div
video
div
..
..
div
..
Mit Verwendung von Shadow DOM 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 div
Mit Verwendung von Shadow DOM div
video
Mit Verwendung von Shadow DOM Der Pate Lorem ipsum dolor sit amet, ipsum sit orem aleta
div
Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta
video
my-playlist
The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta
Mit Verwendung von Shadow DOM Der Pate Lorem ipsum dolor sit amet, ipsum sit orem aleta
div
Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta
my-playlist
video
div
..
..
div
..
Shadow DOM Tree
ShadowRoot
Mit Verwendung von Shadow DOM Der Pate Lorem ipsum dolor sit amet, ipsum sit orem aleta
div
Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta
my-playlist
ShadowRoot
div
..
..
div
..
Neue Browser-API: Shadow DOM Tree
video
Mit Verwendung von Shadow DOM Der Pate Lorem ipsum dolor sit amet, ipsum sit orem aleta
div
Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta
my-playlist
video
div
..
..
div
..
Shadow DOM Tree
ShadowRoot
Max. 1 Shadow-Tree pro Element
Mit Verwendung von Shadow DOM Der Pate Lorem ipsum dolor sit amet, ipsum sit orem aleta
div
Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta
my-playlist
video
div
..
..
div
..
Shadow DOM Tree
ShadowRoot
Max. 1 Shadow-Tree pro Element Stylesheet wirkt sich nur innerhalb dieses Sub-Trees aus
Mit Verwendung von Shadow DOM Der Pate Lorem ipsum dolor sit amet, ipsum sit orem aleta
div
Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta
my-playlist
video
ShadowRoot
div
..
..
div
..
Shadow DOM Tree
Events in Shadow Tree “wie gehabt”
The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta
Max. 1 Shadow-Tree pro Element Stylesheet wirkt sich nur innerhalb dieses Sub-Trees aus
Shadow DOM ● Kein Ersatz zu ● Kein separater JavaScript-Kontext ● Gekapseltes Styling
Shadow DOM ● Kein Ersatz zu
Einfacher Markup, kein Boilerplate-Code
● Kein separater JavaScript-Kontext ● Gekapseltes Styling
Shadow DOM ● Kein Ersatz zu
Einfacher Markup, kein Boilerplate-Code
● Kein separater JavaScript-Kontext ● Gekapseltes Styling “Ripple-Effekt” + Animationen
Und Polymer? https://www.flickr.com/photos/hades2k/7520172586/ “Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.
“The Polymer library is a lightweight sugaring layer on top of the web components APIs [...]” https://github.com/Polymer/polymer https://www.flickr.com/photos/krossbow/4026537359/ “Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.
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
Produkte, die Polymer verwenden Chrome Dev Editor: https://goo.gl/1ixIkA
Google Zeitgeist 2013: http://zeitgeist-globe.appspot.com
Chrome Platform Status: http://chromestatus.com
YouTube Gaming: http://gaming.youtube.com
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
Micro (polymer-micro.html) Behaviours, Konstruktor, Vererbung, Attributes, Properties, ...
Polymer “Core” (Basis)
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
Micro (polymer-micro.html) Behaviours, Konstruktor, Vererbung, Attributes, Properties, ...
Polymer “Core” (Basis)
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
Micro (polymer-micro.html) Behaviours, Konstruktor, Vererbung, Attributes, Properties, ...
Polymer “Core” (Basis)
ODER
Polymer: Schichten-Aufbau Standard (polymer.html) Annotations, Data-Binding, Gesture-Events, Scoped Styling, Helper-Funktionen
Mini (polymer-mini.html)
ODER
HTML-Template, Callbacks, Shadow DOM, Shady DOM
ODER Micro (polymer-micro.html) Behaviours, Konstruktor, Vererbung, Attributes, Properties, ...
Polymer “Core” (Basis)
Polymer: Schichten-Aufbau Standard (polymer.html)
“All in”: Für UI-zentrische Komponenten
Annotations, Data-Binding, Gesture-Events, Scoped Styling, Helper-Funktionen
Mini (polymer-mini.html)
ODER
HTML-Template, Callbacks, Shadow DOM, Shady DOM
ODER Micro (polymer-micro.html) Behaviours, Konstruktor, Vererbung, Attributes, Properties, ...
Polymer “Core” (Basis)
Polymer: Schichten-Aufbau Standard (polymer.html)
“All in”: Für UI-zentrische Komponenten
Annotations, Data-Binding, Gesture-Events, Scoped Styling, Helper-Funktionen
Mini (polymer-mini.html) HTML-Template, Callbacks, Shadow DOM, Shady DOM
Für Elemente mit ODER wenig UI-Interaktion ODER
Micro (polymer-micro.html) Behaviours, Konstruktor, Vererbung, Attributes, Properties, ...
Polymer “Core” (Basis)
Polymer: Schichten-Aufbau Standard (polymer.html)
“All in”: Für UI-zentrische Komponenten
Annotations, Data-Binding, Gesture-Events, Scoped Styling, Helper-Funktionen
Mini (polymer-mini.html) HTML-Template, Callbacks, Shadow DOM, Shady DOM
Für Elemente mit ODER wenig UI-Interaktion ODER
Micro (polymer-micro.html) Behaviours, Konstruktor, Vererbung, Attributes, Properties, ...
Polymer “Core” (Basis)
Für Elemente ohne UIAnteile, rein funktionale Komponenten
Dateistruktur eines “Polymer-Elements”
Dateistruktur eines “Polymer-Elements”
Ist selbst ein CustomElement, das die PolymerLibrary mitbringt
https://www.polymer-project.org/1.0/docs/devguide/feature-overview.html
Styling https://www.flickr.com/photos/krossbow/4026537359/ “Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.
Styling von “außen” / Theming
Styling von “außen” / Theming Polymer liefert Shim für diesen Draft
Styling von “außen” / Theming
::shadow
Styling von “außen” / Theming
::shadow
Styling von “außen” / Theming
::shadow
Färbt nur die Textfarbe der s von myelement in rot.
Styling von “außen” / Theming
/deep/
Styling von “außen” / Theming
/deep/
Styling von “außen” / Theming
/deep/ Färbt alle s des gesamten Dokuments in rot.
Styling von “außen” / Theming
::shadow
/deep/
Styling von “außen” / Theming
::shadow ●
/deep/
“Consumer” muss interne Details der Komponenten kennen
Styling von “außen” / Theming
::shadow ●
/deep/
“Consumer” muss interne Details der Komponenten kennen Bei Änderungen an der Komponente, kann die CSSRegel evtl. nicht mehr greifen!
Styling von “außen” / Theming
::shadow
/deep/
●
“Consumer” muss interne Details der Komponenten kennen
●
Schlechte Performance Bei Änderungen an der Komponente, kann die CSSRegel evtl. nicht mehr greifen!
Styling von “außen” / Theming
::shadow
/deep/
●
“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 CSSRegel evtl. nicht mehr greifen!
Styling von “außen” / Theming
::shadow
/deep/
https://www.polymer-project.org/1.0/docs/devguide/styling.html
Styling von “außen” / Theming
Tooling Ökosystem https://www.flickr.com/photos/krossbow/4026537359/ “Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.
Generatoren
● App-Stub ● Element- inkl. Test-Stubs ● GitHub-Pages für Dokumentation
https://github.com/yeoman/generator-polymer
Generatoren
● App-Stub
basiert auf PolymerStarter-Kit
● Element- inkl. Test-Stubs ● GitHub-Pages für Dokumentation
https://github.com/yeoman/generator-polymer
Generatoren
● App-Stub
basiert auf PolymerStarter-Kit
● Element- inkl. Test-Stubs ● GitHub-Pages für Dokumentation
https://github.com/yeoman/generator-polymer
Generatoren
● App-Stub
basiert auf PolymerStarter-Kit
● Element- inkl. Test-Stubs
Erzeugt statische Doku auf .github.io
● GitHub-Pages für Dokumentation
https://github.com/yeoman/generator-polymer
Web Component Tester
WCT
Others
Automated Cross-Browser Testing
REMOTE TESTING
LOCAL TESTING https://github.com/Polymer/web-component-tester
Web Component Tester
Async
Chai
Lodash
Mocha
des
lu inc
Sinon
WCT
Others
Automated Cross-Browser Testing
REMOTE TESTING
LOCAL TESTING https://github.com/Polymer/web-component-tester
Web Component Tester
Async
Chai
Lodash
Mocha
des
lu inc
Sinon
WCT
Others
Automated Cross-Browser Testing
REMOTE TESTING
LOCAL TESTING https://github.com/Polymer/web-component-tester
Web Component Tester ● Black-Box-Tests sind möglich ● BDD (
) + TDD (
)
● Komponente wird “als Ganzes” getestet
https://github.com/Polymer/web-component-tester
Weitere Tools https://www.flickr.com/photos/krossbow/4026537359/ “Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.
Weitere Tools PolyBuild PolyLint PolyGit.org PolyDev Chrome Extension
Weitere Tools PolyBuild
HTML-Imports kombinieren, JavaScript minifizieren
PolyLint PolyGit.org PolyDev Chrome Extension
Weitere Tools PolyBuild
HTML-Imports kombinieren, JavaScript minifizieren Linter für Polymer
PolyLint PolyGit.org PolyDev Chrome Extension
Weitere Tools PolyBuild
HTML-Imports kombinieren, JavaScript minifizieren Linter für Polymer
PolyLint PolyGit.org
cdn.rawgit.com-Proxy, HTML-Imports mit Versionierung
PolyDev Chrome Extension
Weitere Tools PolyBuild
HTML-Imports kombinieren, JavaScript minifizieren Linter für Polymer
PolyLint PolyGit.org
cdn.rawgit.com-Proxy, HTML-Imports mit Versionierung
PolyDev Chrome Extension
“Wie groß sollte eine Komponente sein?” https://www.flickr.com/photos/hades2k/7520172586/ “Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.
Auf die Größe kommt es an ● Nicht nur auf Komponenten setzen
Auf die Größe kommt es an ● Nicht nur auf Komponenten setzen
Frameworks sinnvoll nutzen
Auf die Größe kommt es an ● Nicht nur auf Komponenten setzen ● Keine zu großen Komponenten
Frameworks sinnvoll nutzen
Auf die Größe kommt es an ● Nicht nur auf Komponenten setzen ● Keine zu großen Komponenten
Frameworks sinnvoll nutzen Dann nicht mehr wiederverwendbar
Auf die Größe kommt es an ● Nicht nur auf Komponenten setzen ● Keine zu großen Komponenten
Frameworks sinnvoll nutzen Dann nicht mehr wiederverwendbar
● Neue Komponenten aus vorhandenen aufbauen
Auf die Größe kommt es an ● Nicht nur auf Komponenten setzen ● Keine zu großen Komponenten
Frameworks sinnvoll nutzen Dann nicht mehr wiederverwendbar
● Neue Komponenten aus vorhandenen aufbauen Gibt’s hierfür bereits ein brauchbares Element?
“Wie kann ich damit die Qualität verbessern?” https://www.flickr.com/photos/hades2k/7520172586/ “Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.
Eigener Pool an Komponenten ● z.B. für Kundenprojekte ○ dadurch inkrementelle Verbesserung der Qualität ○ ständig getestet ○ zentral verwaltet ○ Import in das aktuelle Projekt
“Wo finde ich Komponenten?” https://www.flickr.com/photos/hades2k/7520172586/ “Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.
http://elements.polymer-project.org
http://customelements.io
“Wie kann ich eine Komponente verwenden?” https://www.flickr.com/photos/hades2k/7520172586/ “Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.
1
Find/ Install
1
Find/ Install
1
Find/ Install
1
Import
Find/ Install
2
1
Import
Find/ Install
2
1
Find/ Install
Import
3
2
Use
1
Find/ Install
Import
3
2
Use
BUTTON
1
Find/ Install
Import
3
2
Use
BUTTON
Browsersupport https://www.flickr.com/photos/krossbow/4026537359/ “Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.
Browser-Support (nativ) Herbst 2015
DESKTOP
MOBILE / TABLET
* HTML Templates 13+
7.1+
22+
26+
32+
36+
45+
23+
33+
45+
29+
35+
45+
4.4+
8+
HTML Imports
Custom Elements
Shadow DOM Quelle: caniuse.com
* Chrome for Android / Android Browser
Browser-Support (polyfilled) Herbst 2015
DESKTOP
MOBILE / TABLET
* 10+
7+
7+
10+
HTML Templates
HTML Imports
Custom Elements
Shadow DOM Quelle: caniuse.com
* Chrome for Android / Android Browser
Zusammenfassung ● Standard / nativ implementiert ● Sehr viele Tools ● Komplexität + Styling wird gekapselt ● Interoperabilität mit anderen Frameworks ● Einfach testbar https://www.flickr.com/photos/hades2k/7520172586/ “Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.
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
Kontakt Patrick Hillert
[email protected] github.com/silentHoo twitter.com/silentHoo slideshare.net/PatrickHillert
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