Focus on Quality
Bessere Webfrontends durch Web Components
Patrick Hillert, 03. November 2015
Patrick Hillert
M.Sc. (Informatik)
Web-Softwareentwickler
Modern Web
Neue Web APIs + Tools
“Full-Stack”
@silentHoo
/silent...
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 u...
Entwicklungen im Web heute
Spec-
Developers
Comm-
unities
Web-
Developers
HTML
Web-APIs
CSS
JavaScript
jQuery
AngularJS
Em...
https://dribbble.com/meidenberg/projects/6336-Me-Dark-UI-kit
Designs in 2015
sollten für das Web einfach umzusetzen sein
M...
“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
https://www.flickr.com/photos/122127718@N08/13579450523/
“84 Rusty Color Metal texture - 4”, licensed under CC BY-SA 2.0. ...
Kendo UI
Plain HTML
JavaScript
YUI
Template
JavaScript
AngularJS
JavaScript
Template
https://www.flickr.com/photos/122127718@N08/13579450523/
“84 Rusty Color Metal texture - 4”, licensed under CC BY-SA 2.0. ...
Welches Framework? Mischen möglich?
https://www.flickr.com/photos/122127718@N08/13579450523/
“84 Rusty Color Metal texture - 4”, licensed under CC BY-SA 2.0. ...
Anforderungen an einen Webentwickler
https://www.flickr.com/photos/122127718@N08/13579450523/
“84 Rusty Color Metal texture - 4”, licensed under CC BY-SA 2.0. ...
https://www.flickr.com/photos/122127718@N08/13579450523/
“84 Rusty Color Metal texture - 4”, licensed under CC BY-SA 2.0. ...
https://www.flickr.com/photos/122127718@N08/13579450523/
“84 Rusty Color Metal texture - 4”, licensed under CC BY-SA 2.0. ...
https://www.flickr.com/photos/krossbow/4026537359/
“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright...
<google-map latitude="49.0135165" longitude="8.4022463"></google-map>
<google-map latitude="49.0135165" longitude="8.4022463">
<google-map-marker
latitude="49.0135165" longitude="8.4022463">
<...
<google-map
map="{{map}}" latitude="49.0135165" longitude="8.4022463">
<google-map-marker
latitude="49.0135165" longitude=...
<google-map
map="{{map}}" latitude="49.0135165" longitude="8.4022463">
<google-map-marker
latitude="49.0135165" longitude=...
https://www.flickr.com/photos/krossbow/4026537359/
“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright...
https://www.flickr.com/photos/krossbow/4026537359/
“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright...
https://www.flickr.com/photos/krossbow/4026537359/
“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright...
Historie
“Web Components”
umfassen mehrere einzelne Spezifikationen
Web Components
Decorators
Custom
Elements
Shadow DOM HTML Impor...
Custom Elements
● Semantische Information
● “Klassen für das Web”
● Wiederverwendbar
<paper-slider
pin snaps max="10" step...
Custom Elements
● Semantische Information
● “Klassen für das Web”
● Wiederverwendbar
<paper-slider
pin snaps max="10" step...
HTML Imports
<link rel="stylesheet" href=".../css/bootstrap.min.css">
<link rel="stylesheet" href=".../css/bootstrap-theme...
HTML Templates
● Beschreibt DOM
● Bleibt inaktiv, bis clone()
● Leichtgewichtig
<template>
<div class="profile">
<img src=...
Shadow DOM
bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
<video
src="foo.webm" control...
Shadow DOM
bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
<video
src="foo.webm" control...
Shadow DOM
bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
<video
src="foo.webm" control...
Shadow DOM
bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
<video
src="foo.webm" control...
Shadow DOM
bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
<video
src="foo.webm" control...
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...
https://www.flickr.com/photos/krossbow/4026537359/
“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright...
Ohne Verwendung von Shadow DOM
div
Ohne Verwendung von Shadow DOM
Container für
Video + Playlistdiv
Ohne Verwendung von Shadow DOM
video
div
Ohne Verwendung von Shadow DOM
div
div
video
Ohne Verwendung von Shadow DOM
divdiv
div
video div
Ohne Verwendung von Shadow DOM
.. ..
..
.. ..
Der Pate
Lorem ipsum dolor sit amet,
ipsum sit orem aleta
Pulp Fiction
Lorem...
https://www.flickr.com/photos/krossbow/4026537359/
“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright...
Mit Verwendung von Shadow DOM
div
Mit Verwendung von Shadow DOM
video
div
Mit Verwendung von Shadow DOM
div
my-playlistvideo
Der Pate
Lorem ipsum dolor sit amet,
ipsum sit orem aleta
Pulp Fiction
...
Mit Verwendung von Shadow DOM
div
my-playlistvideo
Der Pate
Lorem ipsum dolor sit amet,
ipsum sit orem aleta
Pulp Fiction
...
Mit Verwendung von Shadow DOM
div
my-playlistvideo
Der Pate
Lorem ipsum dolor sit amet,
ipsum sit orem aleta
Pulp Fiction
...
Mit Verwendung von Shadow DOM
div
my-playlistvideo
Der Pate
Lorem ipsum dolor sit amet,
ipsum sit orem aleta
Pulp Fiction
...
Mit Verwendung von Shadow DOM
div
my-playlistvideo
Der Pate
Lorem ipsum dolor sit amet,
ipsum sit orem aleta
Pulp Fiction
...
Mit Verwendung von Shadow DOM
div
my-playlistvideo
Der Pate
Lorem ipsum dolor sit amet,
ipsum sit orem aleta
Pulp Fiction
...
Shadow DOM
● Kein Ersatz zu <iframe>
● Kein separater JavaScript-Kontext
● Gekapseltes Styling
<paper-tabs selected="0">
<...
Shadow DOM
● Kein Ersatz zu <iframe>
● Kein separater JavaScript-Kontext
● Gekapseltes Styling
<paper-tabs selected="0">
<...
Shadow DOM
● Kein Ersatz zu <iframe>
● Kein separater JavaScript-Kontext
● Gekapseltes Styling
<paper-tabs selected="0">
<...
https://www.flickr.com/photos/hades2k/7520172586/
“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k...
https://www.flickr.com/photos/krossbow/4026537359/
“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright...
Polymer: Fakten
● Maintainer: Google
● Start der Entwicklung: Oktober 2012, aktuelle Version: 1.2
● Ziele:
○ Mobile + Mode...
Produkte, die Polymer verwenden
YouTube Gaming:
http://gaming.youtube.com
Chrome Platform Status:
http://chromestatus.com
...
Polymer: Schichten-Aufbau
Standard (polymer.html)
Annotations, Data-Binding, Gesture-Events, Scoped
Styling, Helper-Funkti...
Polymer: Schichten-Aufbau
Standard (polymer.html)
Annotations, Data-Binding, Gesture-Events, Scoped
Styling, Helper-Funkti...
Polymer: Schichten-Aufbau
Standard (polymer.html)
Annotations, Data-Binding, Gesture-Events, Scoped
Styling, Helper-Funkti...
Polymer: Schichten-Aufbau
Standard (polymer.html)
Annotations, Data-Binding, Gesture-Events, Scoped
Styling, Helper-Funkti...
Polymer: Schichten-Aufbau
Standard (polymer.html)
Annotations, Data-Binding, Gesture-Events, Scoped
Styling, Helper-Funkti...
Polymer: Schichten-Aufbau
Standard (polymer.html)
Annotations, Data-Binding, Gesture-Events, Scoped
Styling, Helper-Funkti...
Polymer: Schichten-Aufbau
Standard (polymer.html)
Annotations, Data-Binding, Gesture-Events, Scoped
Styling, Helper-Funkti...
Dateistruktur eines “Polymer-Elements”
<HTML-Imports>
<script>
<dom-module>
<dom-module id=”my-element”>
<template>
<style>
Dateistruktur eines “Polymer-Elements”
<dom-module id=”my-element”>
<HTML-Imports>
<template>
<style>
<script>
<dom-module...
https://www.polymer-project.org/1.0/docs/devguide/feature-overview.html
https://www.flickr.com/photos/krossbow/4026537359/
“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright...
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
my-element::shadow span {
color: red;
}
Styling von “außen” / Theming
::shadow
my-element::shadow span {
color: red;
}
Färbt nur die Textfarbe
der <span>s von my-...
Styling von “außen” / Theming
/deep/
Styling von “außen” / Theming
/deep/
html /deep/ span {
color: red;
}
Styling von “außen” / Theming
/deep/
html /deep/ span {
color: red;
}
Färbt alle <span>s des
gesamten Dokuments in rot.
Styling von “außen” / Theming
/deep/::shadow
Styling von “außen” / Theming
/deep/::shadow
● “Consumer” muss interne Details der Komponenten kennen
Styling von “außen” / Theming
/deep/::shadow
● “Consumer” muss interne Details der Komponenten kennen
Bei Änderungen an de...
Styling von “außen” / Theming
/deep/::shadow
● “Consumer” muss interne Details der Komponenten kennen
● Schlechte Performa...
Styling von “außen” / Theming
/deep/::shadow
● “Consumer” muss interne Details der Komponenten kennen
● Schlechte Performa...
Styling von “außen” / Theming
/deep/::shadow
https://www.polymer-project.org/1.0/docs/devguide/styling.html
Styling von “außen” / Theming
<dom-module id=”my-notification”>
<template>
<style>
:host {
--my-message-title-color: black...
https://www.flickr.com/photos/krossbow/4026537359/
“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright...
● App-Stub
● Element- inkl. Test-Stubs
● GitHub-Pages für Dokumentation
Generatoren
https://github.com/yeoman/generator-po...
● App-Stub
● Element- inkl. Test-Stubs
● GitHub-Pages für Dokumentation
Generatoren
basiert auf Polymer-
Starter-Kit
# ins...
● App-Stub
● Element- inkl. Test-Stubs
● GitHub-Pages für Dokumentation
Generatoren
basiert auf Polymer-
Starter-Kit
# ins...
Generatoren
● App-Stub
● Element- inkl. Test-Stubs
● GitHub-Pages für Dokumentation
basiert auf Polymer-
Starter-Kit
Erzeu...
Web Component Tester
Others
LOCAL TESTINGREMOTE TESTING
WCT
Automated Cross-Browser Testing
https://github.com/Polymer/web...
Others
LOCAL TESTINGREMOTE TESTING
Automated Cross-Browser Testing
https://github.com/Polymer/web-component-tester
Mocha
C...
Others
LOCAL TESTINGREMOTE TESTING
includes
WCT
Automated Cross-Browser Testing
https://github.com/Polymer/web-component-t...
https://github.com/Polymer/web-component-tester
● Black-Box-Tests sind möglich
● BDD (suite/test) + TDD (describe/it)
● Ko...
https://www.flickr.com/photos/krossbow/4026537359/
“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright...
Weitere Tools
PolyBuild
PolyLint
PolyGit.org
PolyDev Chrome Extension
Weitere Tools
PolyBuild
PolyLint
PolyGit.org
PolyDev Chrome Extension
HTML-Imports
kombinieren, JavaScript
minifizieren
Weitere Tools
PolyBuild
PolyLint
PolyGit.org
PolyDev Chrome Extension
HTML-Imports
kombinieren, JavaScript
minifizieren
Li...
Weitere Tools
PolyBuild
PolyLint
PolyGit.org
PolyDev Chrome Extension
HTML-Imports
kombinieren, JavaScript
minifizieren
Li...
Weitere Tools
PolyBuild
PolyLint
PolyGit.org
PolyDev Chrome Extension
HTML-Imports
kombinieren, JavaScript
minifizieren
Li...
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...
Auf die Größe kommt es an
● Nicht nur auf Komponenten setzen
● Keine zu großen Komponenten
● Neue Komponenten aus vorhande...
Auf die Größe kommt es an
● Nicht nur auf Komponenten setzen
● Keine zu großen Komponenten
● Neue Komponenten aus vorhande...
https://www.flickr.com/photos/hades2k/7520172586/
“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k...
● z.B. für Kundenprojekte
○ dadurch inkrementelle Verbesserung der Qualität
○ ständig getestet
○ zentral verwaltet
○ Impor...
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
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
bower install Polymer/paper-button
1 Find/
Install
bower install Polymer/paper-button
1
2
Find/
Install
Import
<head>
<link rel=”import” href=”components/paper-button/paper-button.html”>
</head>
bower install Polymer/paper-button
1
2...
<head>
<link rel=”import” href=”components/paper-button/paper-button.html”>
</head>
bower install Polymer/paper-button
1
3...
<body>
<div>
<paper-button raised>BUTTON</paper-button>
</div>
</body>
<head>
<link rel=”import” href=”components/paper-bu...
<body>
<div>
<paper-button raised>BUTTON</paper-button>
</div>
</body>
<head>
<link rel=”import” href=”components/paper-bu...
https://www.flickr.com/photos/krossbow/4026537359/
“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright...
MOBILE / TABLETDESKTOP
HTML Templates
HTML Imports
Custom Elements
Shadow DOM
32+ 36+ 45+
4.4+7.1+26+22+ 8+
23+ 45+
29+ 35...
MOBILE / TABLETDESKTOP
HTML Templates
HTML Imports
Custom Elements
Shadow DOM
*
* Chrome for Android / Android Browser
10+...
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 Stand...
Kontakt
Patrick Hillert
patrick.hillert@inovex.de
github.com/silentHoo
twitter.com/silentHoo
slideshare.net/PatrickHillert
Quellenverzeichnis / Rechtliches
Die Quellen finden sich jeweils direkt an der entsprechenden Stelle des zitierten Werkes....
Focus on Quality - Bessere Webfrontends durch Web Components
Focus on Quality - Bessere Webfrontends durch Web Components
Focus on Quality - Bessere Webfrontends durch Web Components
Focus on Quality - Bessere Webfrontends durch Web Components
Focus on Quality - Bessere Webfrontends durch Web Components
Nächste SlideShare
Wird geladen in …5
×

Focus on Quality - Bessere Webfrontends durch Web Components

175 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
175
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
5
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Focus on Quality - Bessere Webfrontends durch Web Components

  1. 1. Focus on Quality Bessere Webfrontends durch Web Components Patrick Hillert, 03. November 2015
  2. 2. Patrick Hillert M.Sc. (Informatik) Web-Softwareentwickler Modern Web Neue Web APIs + Tools “Full-Stack” @silentHoo /silentHoo
  3. 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. 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. 5. Entwicklungen im Web heute Spec- Developers Comm- unities Web- Developers HTML Web-APIs CSS JavaScript jQuery AngularJS EmberJS Bootstrap Freelancer Companies
  6. 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. 7. “It’s super-easy with Bootstrap” Modaler Dialog http://getbootstrap.com/javascript/#modals
  8. 8. “Just copy this simple html …” http://getbootstrap.com/javascript/#modals
  9. 9. “... and this little script.” “Isn’t that easy?” http://getbootstrap.com/javascript/#modals
  10. 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. 11. Kendo UI Plain HTML JavaScript
  12. 12. YUI Template JavaScript
  13. 13. AngularJS JavaScript Template
  14. 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. 15. Welches Framework? Mischen möglich?
  16. 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. 17. Anforderungen an einen Webentwickler
  18. 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. 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. 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
  21. 21. 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?
  22. 22. <google-map latitude="49.0135165" longitude="8.4022463"></google-map>
  23. 23. <google-map latitude="49.0135165" longitude="8.4022463"> <google-map-marker latitude="49.0135165" longitude="8.4022463"> </google-map-marker> </google-map>
  24. 24. <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>
  25. 25. <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/
  26. 26. https://www.flickr.com/photos/krossbow/4026537359/ “Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal. “keep it simple”
  27. 27. 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”
  28. 28. 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”
  29. 29. Historie
  30. 30. “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
  31. 31. Custom Elements ● Semantische Information ● “Klassen für das Web” ● Wiederverwendbar <paper-slider pin snaps max="10" step="1" value="5" class="orange"> </paper-slider>
  32. 32. 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 */);
  33. 33. HTML Imports <link rel="stylesheet" href=".../css/bootstrap.min.css"> <link rel="stylesheet" href=".../css/bootstrap-theme.min.css"> <script src=".../jquery.min.js"></script> <script src=".../js/bootstrap.min.js"></script> <link rel="import" href=".../bootstrap.html">
  34. 34. HTML Templates ● Beschreibt DOM ● Bleibt inaktiv, bis clone() ● Leichtgewichtig <template> <div class="profile"> <img src="/profile-pic.jpg"> </div> <script></script> </template>
  35. 35. Shadow DOM bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen <video src="foo.webm" controls> </video>
  36. 36. Shadow DOM bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen <video src="foo.webm" controls> </video>
  37. 37. Shadow DOM bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen <video src="foo.webm" controls> </video>
  38. 38. Shadow DOM bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen <video src="foo.webm" controls> </video> Durch Browser eingefügt
  39. 39. Shadow DOM bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen <video src="foo.webm" controls> </video> Durch Browser eingefügt
  40. 40. 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”
  41. 41. 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
  42. 42. 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
  43. 43. Ohne Verwendung von Shadow DOM div
  44. 44. Ohne Verwendung von Shadow DOM Container für Video + Playlistdiv
  45. 45. Ohne Verwendung von Shadow DOM video div
  46. 46. Ohne Verwendung von Shadow DOM div div video
  47. 47. Ohne Verwendung von Shadow DOM divdiv div video div
  48. 48. 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
  49. 49. 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
  50. 50. Mit Verwendung von Shadow DOM div
  51. 51. Mit Verwendung von Shadow DOM video div
  52. 52. 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
  53. 53. 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
  54. 54. 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);
  55. 55. 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
  56. 56. 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
  57. 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 .. .. .. divdiv ShadowRoot ShadowDOMTree Max. 1 Shadow-Tree pro Element Stylesheet wirkt sich nur innerhalb dieses Sub-Trees aus Events in Shadow Tree “wie gehabt”
  58. 58. 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>
  59. 59. 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
  60. 60. 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
  61. 61. https://www.flickr.com/photos/hades2k/7520172586/ “Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k. Und Polymer?
  62. 62. 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
  63. 63. 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
  64. 64. 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
  65. 65. 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, ...
  66. 66. 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">
  67. 67. 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
  68. 68. 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">
  69. 69. 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
  70. 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, ... <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
  71. 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, ... <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
  72. 72. Dateistruktur eines “Polymer-Elements” <HTML-Imports> <script> <dom-module> <dom-module id=”my-element”> <template> <style>
  73. 73. 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
  74. 74. https://www.polymer-project.org/1.0/docs/devguide/feature-overview.html
  75. 75. https://www.flickr.com/photos/krossbow/4026537359/ “Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal. Styling
  76. 76. Styling von “außen” / Theming
  77. 77. Styling von “außen” / Theming Polymer liefert Shim für diesen Draft
  78. 78. Styling von “außen” / Theming ::shadow
  79. 79. Styling von “außen” / Theming ::shadow my-element::shadow span { color: red; }
  80. 80. Styling von “außen” / Theming ::shadow my-element::shadow span { color: red; } Färbt nur die Textfarbe der <span>s von my- element in rot.
  81. 81. Styling von “außen” / Theming /deep/
  82. 82. Styling von “außen” / Theming /deep/ html /deep/ span { color: red; }
  83. 83. Styling von “außen” / Theming /deep/ html /deep/ span { color: red; } Färbt alle <span>s des gesamten Dokuments in rot.
  84. 84. Styling von “außen” / Theming /deep/::shadow
  85. 85. Styling von “außen” / Theming /deep/::shadow ● “Consumer” muss interne Details der Komponenten kennen
  86. 86. 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!
  87. 87. 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!
  88. 88. 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!
  89. 89. Styling von “außen” / Theming /deep/::shadow https://www.polymer-project.org/1.0/docs/devguide/styling.html
  90. 90. 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>
  91. 91. https://www.flickr.com/photos/krossbow/4026537359/ “Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal. Tooling Ökosystem
  92. 92. ● App-Stub ● Element- inkl. Test-Stubs ● GitHub-Pages für Dokumentation Generatoren https://github.com/yeoman/generator-polymer
  93. 93. ● 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
  94. 94. ● 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
  95. 95. 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
  96. 96. Web Component Tester Others LOCAL TESTINGREMOTE TESTING WCT Automated Cross-Browser Testing https://github.com/Polymer/web-component-tester
  97. 97. 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
  98. 98. 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
  99. 99. https://github.com/Polymer/web-component-tester ● Black-Box-Tests sind möglich ● BDD (suite/test) + TDD (describe/it) ● Komponente wird “als Ganzes” getestet Web Component Tester
  100. 100. https://www.flickr.com/photos/krossbow/4026537359/ “Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal. Weitere Tools
  101. 101. Weitere Tools PolyBuild PolyLint PolyGit.org PolyDev Chrome Extension
  102. 102. Weitere Tools PolyBuild PolyLint PolyGit.org PolyDev Chrome Extension HTML-Imports kombinieren, JavaScript minifizieren
  103. 103. Weitere Tools PolyBuild PolyLint PolyGit.org PolyDev Chrome Extension HTML-Imports kombinieren, JavaScript minifizieren Linter für Polymer
  104. 104. 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
  105. 105. 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
  106. 106. 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?”
  107. 107. Auf die Größe kommt es an ● Nicht nur auf Komponenten setzen
  108. 108. Auf die Größe kommt es an ● Nicht nur auf Komponenten setzen Frameworks sinnvoll nutzen
  109. 109. Auf die Größe kommt es an ● Nicht nur auf Komponenten setzen ● Keine zu großen Komponenten Frameworks sinnvoll nutzen
  110. 110. Auf die Größe kommt es an ● Nicht nur auf Komponenten setzen ● Keine zu großen Komponenten Frameworks sinnvoll nutzen Dann nicht mehr wiederverwendbar
  111. 111. 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
  112. 112. 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?
  113. 113. 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?”
  114. 114. ● 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
  115. 115. https://www.flickr.com/photos/hades2k/7520172586/ “Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k. “Wo finde ich Komponenten?”
  116. 116. http://elements.polymer-project.org
  117. 117. http://customelements.io
  118. 118. 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?”
  119. 119. 1 Find/ Install
  120. 120. 1 Find/ Install
  121. 121. bower install Polymer/paper-button 1 Find/ Install
  122. 122. bower install Polymer/paper-button 1 2 Find/ Install Import
  123. 123. <head> <link rel=”import” href=”components/paper-button/paper-button.html”> </head> bower install Polymer/paper-button 1 2 Find/ Install Import
  124. 124. <head> <link rel=”import” href=”components/paper-button/paper-button.html”> </head> bower install Polymer/paper-button 1 3 2 Find/ Install Import Use
  125. 125. <body> <div> <paper-button raised>BUTTON</paper-button> </div> </body> <head> <link rel=”import” href=”components/paper-button/paper-button.html”> </head> bower install Polymer/paper-button 1 3 2 Find/ Install Import Use
  126. 126. <body> <div> <paper-button raised>BUTTON</paper-button> </div> </body> <head> <link rel=”import” href=”components/paper-button/paper-button.html”> </head> bower install Polymer/paper-button 1 3 2 Find/ Install Import Use
  127. 127. https://www.flickr.com/photos/krossbow/4026537359/ “Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal. Browsersupport
  128. 128. 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
  129. 129. 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
  130. 130. 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
  131. 131. 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
  132. 132. Kontakt Patrick Hillert patrick.hillert@inovex.de github.com/silentHoo twitter.com/silentHoo slideshare.net/PatrickHillert
  133. 133. 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

×