Web Components
mit Polymer und AngularJS 1.x
Patrick Hillert, 21. April 2016
+
Patrick Hillert
M.Sc. (Informatik)
Web-Softwareentwickler
Modern Web
Neue Web APIs + Tools@silentHoo
/silentHoo
/PatrickHi...
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...
https://dribbble.com/meidenberg/projects/6336-Me-Dark-UI-kit
Designs in 2016
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. ...
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/hades2k/7520172586/
“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k...
<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/hades2k/7520172586/
“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k...
Teile und Herrsche
Komplexität in kleine Häppchen aufteilen
20162006 2009 2013
2
Teile und Herrsche
Komplexität in kleine Häppchen aufteilen
20162006 2009 2013
2
Plugins
Teile und Herrsche
Komplexität in kleine Häppchen aufteilen
20162006 2009 2013
2
Plugins
Direktiven, ...
Teile und Herrsche
Komplexität in kleine Häppchen aufteilen
20162006 2009 2013
2
Plugins
Direktiven, ...
“Stateful View Co...
Teile und Herrsche
Komplexität in kleine Häppchen aufteilen
20162006 2009 2013
2
Plugins
Direktiven, ...
“Stateful View Co...
Teile und Herrsche
Komplexität in kleine Häppchen aufteilen
20162006 2009 2011 2013
2
W3C Standard
Teile und Herrsche
Komplexität in kleine Häppchen aufteilen
20162006 2009 2011 2013
2
W3C Standard1.5: “module.component”
Teile und Herrsche
Komplexität in kleine Häppchen aufteilen
20162006 2009 2011 2013
2
W3C Standard1.5: “module.component”
...
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/hades2k/7520172586/
“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k...
“Web Components”
Web Components
Custom
Elements
Shadow DOM HTML Imports HTML Templates
HTML5
W3C Editor’s Draft
W3C Recomm...
https://www.flickr.com/photos/krossbow/4026537359/
“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright...
https://www.flickr.com/photos/hades2k/7520172586/
“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k...
Browser-Support (nativ)
Frühjahr 2016
seit Version 36+
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...
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...
Custom Elements
● Semantische Information
● “Klassen für das Web”
● Wiederverwendbar
<paper-slider
pin snaps max="10" step...
https://www.flickr.com/photos/hades2k/7520172586/
“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k...
HTML Imports
<link rel="stylesheet" href=".../css/bootstrap.min.css">
<link rel="stylesheet" href=".../css/bootstrap-theme...
https://www.flickr.com/photos/hades2k/7520172586/
“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k...
HTML Templates
● Beschreibt DOM
● Bilder, Skripte bleiben inaktiv bis
clone()
● Leichtgewichtig
<template id="myTemplate">...
HTML Templates
<template id="myTemplate">
<div class="profile">
<img src="/profile-pic.jpg">
</div>
<script>
// ...
</scri...
HTML Templates
<template id="myTemplate">
<div class="profile">
<img src="/profile-pic.jpg">
</div>
<script>
// ...
</scri...
https://www.flickr.com/photos/hades2k/7520172586/
“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k...
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...
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...
Polymer
ShadowDOM/ShadyDOM HTML-Template
“Putting it all together”
HTML-Markup
Scripts + Styling
Public Attributes
(Markup...
<paper-tabs selected="0">
<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab...
<paper-tabs selected="0">
<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab...
<paper-tabs selected="0">
<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab...
https://www.flickr.com/photos/hades2k/7520172586/
“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k...
http://todomvc.com/examples/angularjs
Demo
Nur 3 Use Cases
● Hinzufügen
Nur 3 Use Cases
● Hinzufügen
● Bearbeiten
Nur 3 Use Cases
● Hinzufügen
● Bearbeiten
● Abhaken
Los geht’s!
$ git clone git@github.com:tastejs/todomvc.git
copy examples/angularjs → examples/angularjs-polymer
https://www.flickr.com/photos/hades2k/7520172586/
“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k...
Download + Import
https://customelements.io/vaadin/vaadin-date-picker/
$ bower install --save vaadin-date-picker
<link rel...
Ausgangsbasis
<html>
<head>
<!-- ... -->
</head>
<body ng-app=”todomvc”>
<form>
<input placeholder=”What needs to be done?...
<html>
<head>
<link rel=”import” href=”bower_components/vaadin-date-picker/vaadin-date-picker.html”>
</head>
<body ng-app=...
Und wie sieht die UI aus?
Flexbox
https://github.com/silentHoo/todomvc-ngpoly
Problem #1: ngModel funktioniert nicht
● Komponente sendet Event “value-changed”
● Nur mit Eventlistener ist Zugriff mögli...
Lösung: Direktive “polyBind”
/examples/angularjs-polymer/js/directives/polybind.js
https://github.com/silentHoo/todomvc-ng...
<html>
<head>
<link rel=”import” href=”bower_components/vaadin-date-picker/vaadin-date-picker.html”>
</head>
<body ng-app=...
Fälligkeit initial auf “heute” setzen
<html>
<head>
<link rel=”import” href=”bower_components/vaadin-date-picker/vaadin-da...
https://www.flickr.com/photos/hades2k/7520172586/
“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k...
<li ng-repeat=”todo in todos” …>
<div>
<input type=”checkbox” ng-model=”todo.completed” ng-change=”toggleCompleted(todo)”>...
UI mit sichtbarer Deadline
https://github.com/silentHoo/todomvc-ngpoly
https://www.flickr.com/photos/hades2k/7520172586/
“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k...
Download + Import
$ bower install --save PolymerElements/paper-tooltip
<link rel=”import” href=”bow.../paper-tooltip.html”...
Download + Import
$ bower install --save PolymerElements/paper-tooltip
<link rel=”import” href=”bow.../paper-tooltip.html”...
...
<li ng-repeat=”todo in todos … track by $index” …>
...
<div>
<label ng-dblclick=”editTodo(todo)”>{{todo.title}}</label...
...
<li ng-repeat=”todo in todos … track by $index” …>
...
<div>
<label ng-dblclick=”editTodo(todo)”>{{todo.title}}</label...
Lösung: ng-attr-*
...
<li ng-repeat=”todo in todos … track by $index” …>
...
<div>
<label ng-dblclick=”editTodo(todo)”>{{t...
UI um Tooltip erweitert
https://github.com/silentHoo/todomvc-ngpoly
https://www.flickr.com/photos/hades2k/7520172586/
“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k...
Verwenden der Objekt-API
https://vaadin.com/docs/-/part/elements/vaadin-date-picker/vaadin-date-picker-features.html
...
<vaadin-date-picker id=”todo-datepicker” ng-model=”newDeadline” value=”2016-04-21” label=”Deadline”>
...
/examples/ang...
https://www.flickr.com/photos/hades2k/7520172586/
“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k...
Fazit: Abwägen
● Gibt es eine ausreichende Lösung für das Framework?
○ Lösung bevorzugen, wenn Sie den Funktionsumfang bie...
https://www.flickr.com/photos/hades2k/7520172586/
“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k...
● CLI-Generatoren
● Web Component Tester (Unit Tests)
Tooling
https://github.com/yeoman/generator-polymer
I. Generatoren
● App-Stub
○ Element- inkl. Test-Stubs
● GitHub-Pages für Dokumentation
basiert auf Polymer-
Starter-Kit
Er...
II. Web Component Tester
Others
LOCAL TESTINGREMOTE TESTING
WCT
Automated Cross-Browser Testing
https://github.com/Polymer...
https://blog.polymer-project.org
Roadmap 2016
2016
Publish Philosophie
Routing
Lazy-loading elements
l10n/i18n
Gute “Community-Elemente” promoten
100% mehr...
Weitere Ressourcen
Polymer Summit 2015 CodeLab Tutorials
http://www.code-labs.io/polymer-summit
Web Components “Gold Stand...
Kontakt
inovex GmbH
Ludwig-Erhard-Allee 6
76131 Karlsruhe
Patrick Hillert
patrick.hillert@inovex.de
@silentHoo
/silentHoo
...
Quellenverzeichnis / Rechtliches
Die Quellen finden sich jeweils direkt an der entsprechenden Stelle des zitierten Werkes....
Web Components mit Polymer und AngularJS 1.x
Web Components mit Polymer und AngularJS 1.x
Web Components mit Polymer und AngularJS 1.x
Web Components mit Polymer und AngularJS 1.x
Web Components mit Polymer und AngularJS 1.x
Nächste SlideShare
Wird geladen in …5
×

Web Components mit Polymer und AngularJS 1.x

338 Aufrufe

Veröffentlicht am

„Software is eating the world“ und das moderne Web hat sicherlich einen sehr großen Anteil daran. Wie könnte aber die nächste Evolutionsstufe im Web aussehen? Ein Kandidat sind hier die Web Components, die einen sehr einfachen Einstieg in die komponentenbasierte Strukturierung von Webanwendungen bieten. Hierbei können auch einzelne Komponenten in bestehende Anwendungen integriert und nachgerüstet werden, ohne dabei das Entwickler-Know-how im konkreten Framework zu verlieren. In diesem Vortrag wird zunächst ein Überblick über den aktuellen Status quo von Web Components gegeben und anschließend beispielhaft gezeigt, wie sich Komponenten in eine bestehende AngularJS-Anwendung integrieren lassen. Ein Ausblick auf Tooling und kommende Features rundet den Vortrag ab.

Event: JAX 2016, 21.04.2016
Speaker: Patrick Hillert, inovex GmbH

Mehr Tech-Vorträge: https://www.inovex.de/de/content-pool/vortraege/

Veröffentlicht in: Software
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
338
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
16
Aktionen
Geteilt
0
Downloads
2
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Web Components mit Polymer und AngularJS 1.x

  1. 1. Web Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +
  2. 2. Patrick Hillert M.Sc. (Informatik) Web-Softwareentwickler Modern Web Neue Web APIs + Tools@silentHoo /silentHoo /PatrickHillert
  3. 3. https://www.flickr.com/photos/hades2k/7520172586/ “Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k. Agenda </> Probleme der Webentwicklung </> Web Components und Polymer </> Demo: AngularJS trifft auf Web Components </> Tooling + Roadmap
  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. https://dribbble.com/meidenberg/projects/6336-Me-Dark-UI-kit Designs in 2016 sollten für das Web einfach umzusetzen sein Mikael Eidenberg @meidenberg
  6. 6. “It’s super-easy with Bootstrap” Modaler Dialog http://getbootstrap.com/javascript/#modals
  7. 7. “Just copy this simple html …” http://getbootstrap.com/javascript/#modals
  8. 8. “... and this little script.” “Isn’t that easy?” http://getbootstrap.com/javascript/#modals
  9. 9. 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
  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 #2: Interne Implementierung- details sind sichtbar
  11. 11. 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: Frontends sind komplex
  12. 12. https://www.flickr.com/photos/hades2k/7520172586/ “Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k. Wird es durch Web Components einfacher?
  13. 13. <google-map latitude="49.0135165" longitude="8.4022463"></google-map>
  14. 14. <google-map latitude="49.0135165" longitude="8.4022463"> <google-map-marker latitude="49.0135165" longitude="8.4022463"> </google-map-marker> </google-map>
  15. 15. <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>
  16. 16. <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/
  17. 17. https://www.flickr.com/photos/hades2k/7520172586/ “Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k. Sind Komponenten die Lösung?
  18. 18. Teile und Herrsche Komplexität in kleine Häppchen aufteilen 20162006 2009 2013 2
  19. 19. Teile und Herrsche Komplexität in kleine Häppchen aufteilen 20162006 2009 2013 2 Plugins
  20. 20. Teile und Herrsche Komplexität in kleine Häppchen aufteilen 20162006 2009 2013 2 Plugins Direktiven, ...
  21. 21. Teile und Herrsche Komplexität in kleine Häppchen aufteilen 20162006 2009 2013 2 Plugins Direktiven, ... “Stateful View Components”
  22. 22. Teile und Herrsche Komplexität in kleine Häppchen aufteilen 20162006 2009 2013 2 Plugins Direktiven, ... “Stateful View Components” Web Components
  23. 23. Teile und Herrsche Komplexität in kleine Häppchen aufteilen 20162006 2009 2011 2013 2 W3C Standard
  24. 24. Teile und Herrsche Komplexität in kleine Häppchen aufteilen 20162006 2009 2011 2013 2 W3C Standard1.5: “module.component”
  25. 25. Teile und Herrsche Komplexität in kleine Häppchen aufteilen 20162006 2009 2011 2013 2 W3C Standard1.5: “module.component” + Trennung der Verantwortlichkeit + Eine Einheit -> Besser testbar + (Wiederverwendbar)
  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. “think local” “keep it simple”
  28. 28. https://www.flickr.com/photos/hades2k/7520172586/ “Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k. Web Components und Polymer
  29. 29. “Web Components” Web Components Custom Elements Shadow DOM HTML Imports HTML Templates HTML5 W3C Editor’s Draft W3C Recomm. Track Process Maturity Levels W3C Working Draft (WD) W3C Candidate Recommendation (CR) W3C Proposed Recommendation (PR) W3C Recommendation (REC) W3C Note No Specification moved to HTML5
  30. 30. 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
  31. 31. https://www.flickr.com/photos/hades2k/7520172586/ “Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k. Browsersupport
  32. 32. Browser-Support (nativ) Frühjahr 2016 seit Version 36+
  33. 33. MOBILE / TABLETDESKTOP HTML Templates HTML Imports Custom Elements Shadow DOM * * Chrome for Android / Android Browser 10+ 10+7+7+ Browser-Support (polyfilled) Frühjahr 2016 Quelle: polymer-project.org
  34. 34. https://www.flickr.com/photos/hades2k/7520172586/ “Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k. Custom Elements
  35. 35. Custom Elements ● Semantische Information ● “Klassen für das Web” ● Wiederverwendbar <paper-slider pin snaps max="10" step="1" value="5" class="orange"> </paper-slider>
  36. 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> Neue Browser-API: document.registerElement(‘paper-slider’, /* proto */);
  37. 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’, /* proto */); NATIVERCODE* *: Wollen wir nicht von Hand schreiben, Polymer übernimmt das für uns!
  38. 38. https://www.flickr.com/photos/hades2k/7520172586/ “Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k. HTML Imports
  39. 39. 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">
  40. 40. https://www.flickr.com/photos/hades2k/7520172586/ “Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k. HTML Templates
  41. 41. HTML Templates ● Beschreibt DOM ● Bilder, Skripte bleiben inaktiv bis clone() ● Leichtgewichtig <template id="myTemplate"> <div class="profile"> <img src="/profile-pic.jpg"> </div> <script> // ... </script> </template>
  42. 42. HTML Templates <template id="myTemplate"> <div class="profile"> <img src="/profile-pic.jpg"> </div> <script> // ... </script> </template> Aktivierung durch clone() in JavaScript: var t = document.querySelector(‘#myTemplate’); var clone = document.importNode(t.content, true); document.body.appendChild(clone); ● Beschreibt DOM ● Bilder, Skripte bleiben inaktiv bis clone() ● Leichtgewichtig
  43. 43. HTML Templates <template id="myTemplate"> <div class="profile"> <img src="/profile-pic.jpg"> </div> <script> // ... </script> </template> Aktivierung durch clone() in JavaScript: var t = document.querySelector(‘#myTemplate’); var clone = document.importNode(t.content, true); document.body.appendChild(clone); NATIVERCODE* ● Beschreibt DOM ● Bilder, Skripte bleiben inaktiv bis clone() ● Leichtgewichtig *: Wollen wir nicht von Hand schreiben, Polymer übernimmt das für uns!
  44. 44. https://www.flickr.com/photos/hades2k/7520172586/ “Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k. Shadow DOM
  45. 45. Shadow DOM bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen <video src="foo.webm" controls> </video>
  46. 46. Shadow DOM bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen <video src="foo.webm" controls> </video>
  47. 47. Shadow DOM bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen <video src="foo.webm" controls> </video>
  48. 48. Shadow DOM bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen <video src="foo.webm" controls> </video> Durch Browser eingefügt
  49. 49. Shadow DOM bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen <video src="foo.webm" controls> </video> Durch Browser eingefügt ● Kein Ersatz zu <iframe> ● Kein separater JavaScript-Kontext ● Gekapseltes Styling / Markup
  50. 50. Shadow DOM bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen <video src="foo.webm" controls> </video> Durch Browser eingefügt ● Kein Ersatz zu <iframe> ● Kein separater JavaScript-Kontext ● Gekapseltes Styling / Markup Neue Browser-API: var shadow = document.querySelector(‘#myId’).createShadowRoot(); var template = document.querySelector(‘#myIdTemplate’); var clone = document.importNode(template.content, true); shadow.appendChild(clone);
  51. 51. Shadow DOM bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen <video src="foo.webm" controls> </video> Durch Browser eingefügt ● Kein Ersatz zu <iframe> ● Kein separater JavaScript-Kontext ● Gekapseltes Styling / Markup Neue Browser-API: var shadow = document.querySelector(‘#myId’).createShadowRoot(); var template = document.querySelector(‘#myIdTemplate’); var clone = document.importNode(template.content, true); shadow.appendChild(clone); NATIVERCODE* *: Wollen wir nicht von Hand schreiben, Polymer übernimmt das für uns!
  52. 52. https://www.flickr.com/photos/hades2k/7520172586/ “Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k. “Putting it all together”
  53. 53. Polymer ShadowDOM/ShadyDOM HTML-Template “Putting it all together” HTML-Markup Scripts + Styling Public Attributes (Markup) + Public Methods (JavaScript) custom-element HTML-Import
  54. 54. <paper-tabs selected="0"> <paper-tab>ITEM ONE</paper-tab> <paper-tab>ITEM TWO</paper-tab> <paper-tab>ITEM THREE</paper-tab> </paper-tabs> “Putting it all together”
  55. 55. <paper-tabs selected="0"> <paper-tab>ITEM ONE</paper-tab> <paper-tab>ITEM TWO</paper-tab> <paper-tab>ITEM THREE</paper-tab> </paper-tabs> “Putting it all together”
  56. 56. <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 “Putting it all together”
  57. 57. https://www.flickr.com/photos/hades2k/7520172586/ “Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k. Demo
  58. 58. http://todomvc.com/examples/angularjs Demo
  59. 59. Nur 3 Use Cases ● Hinzufügen
  60. 60. Nur 3 Use Cases ● Hinzufügen ● Bearbeiten
  61. 61. Nur 3 Use Cases ● Hinzufügen ● Bearbeiten ● Abhaken
  62. 62. Los geht’s! $ git clone git@github.com:tastejs/todomvc.git copy examples/angularjs → examples/angularjs-polymer
  63. 63. https://www.flickr.com/photos/hades2k/7520172586/ “Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k. #1: Fälligkeitsdatum hinzufügen
  64. 64. Download + Import https://customelements.io/vaadin/vaadin-date-picker/ $ bower install --save vaadin-date-picker <link rel=”import” href=”bow.../vaadin-date-picker.html”> <vaadin-date-picker>
  65. 65. Ausgangsbasis <html> <head> <!-- ... --> </head> <body ng-app=”todomvc”> <form> <input placeholder=”What needs to be done?” ng-model=”newTodo” ng-disabled=”saving” autofocus> </form> </body> </html> /examples/angularjs-polymer/index.html https://github.com/silentHoo/todomvc-ngpoly
  66. 66. <html> <head> <link rel=”import” href=”bower_components/vaadin-date-picker/vaadin-date-picker.html”> </head> <body ng-app=”todomvc”> <form> <input placeholder=”What needs to be done?” ng-model=”newTodo” ng-disabled=”saving” autofocus> <vaadin-date-picker ng-model=”newDeadline” value=”2016-04-21” label=”Deadline”> </form> </body> </html> Änderungen /examples/angularjs-polymer/index.html angular.module(‘todomvc’) .controller(‘TodoCtrl’, function() { // ... $scope.newDeadline = new Date(); }); TodoCtrl https://github.com/silentHoo/todomvc-ngpoly
  67. 67. Und wie sieht die UI aus? Flexbox https://github.com/silentHoo/todomvc-ngpoly
  68. 68. Problem #1: ngModel funktioniert nicht ● Komponente sendet Event “value-changed” ● Nur mit Eventlistener ist Zugriff möglich: ● Lösung: Direktive, die diese Art der Events handelt und im Model setzt. addEventListener(‘value-changed’, function() { … }) https://github.com/silentHoo/todomvc-ngpoly
  69. 69. Lösung: Direktive “polyBind” /examples/angularjs-polymer/js/directives/polybind.js https://github.com/silentHoo/todomvc-ngpoly
  70. 70. <html> <head> <link rel=”import” href=”bower_components/vaadin-date-picker/vaadin-date-picker.html”> </head> <body ng-app=”todomvc”> <form ng-keypress=”$event.which === 13 && addTodo()”> <input placeholder=”What needs to be done?” ng-model=”newTodo” ng-disabled=”saving” autofocus> <vaadin-date-picker ... poly-bind=”{{ { event: ‘value-changed’, modelValue: ‘value’ } }}” label=”Deadline”> </form> </body> </html> Änderungen: “polyBind” /examples/angularjs-polymer/index.html angular.module(‘todomvc’) .controller(‘TodoCtrl’, function() { // ... $scope.addTodo = function() { var newTodo = { title: $scope.newTodo.trim(), deadline: moment($scope.newDeadline).toDate(), completed: false }; }; }); TodoCtrl momentjs https://github.com/silentHoo/todomvc-ngpoly
  71. 71. Fälligkeit initial auf “heute” setzen <html> <head> <link rel=”import” href=”bower_components/vaadin-date-picker/vaadin-date-picker.html”> </head> <body ng-app=”todomvc”> <form ng-keypress=”$event.which === 13 && addTodo()”> <input placeholder=”What needs to be done?” ng-model=”newTodo” ng-disabled=”saving” autofocus> <vaadin-date-picker ... value=”{{ ::newDeadline | amDateFormat: ‘YYYY-MM-DD’ }}” label=”Deadline”> </form> </body> </html> /examples/angularjs-polymer/index.html https://github.com/silentHoo/todomvc-ngpoly
  72. 72. https://www.flickr.com/photos/hades2k/7520172586/ “Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k. #2: Fälligkeit in Liste anzeigen
  73. 73. <li ng-repeat=”todo in todos” …> <div> <input type=”checkbox” ng-model=”todo.completed” ng-change=”toggleCompleted(todo)”> <label ng-dblclick=”editTodo(todo)”>{{todo.title}}</label> </div> </li> /examples/angularjs-polymer/index.html <li ng-repeat=”todo in todos” …> <div> <input type=”checkbox” ng-model=”todo.completed” ng-change=”toggleCompleted(todo)”> <div> <label ng-dblclick=”editTodo(todo)”>{{todo.title}}</label> <div> <label>{{ todo.deadline | amDateFormat: ‘MM/DD/YYYY’ }}</label> </div> </div> </div> </li> https://github.com/silentHoo/todomvc-ngpoly
  74. 74. UI mit sichtbarer Deadline https://github.com/silentHoo/todomvc-ngpoly
  75. 75. https://www.flickr.com/photos/hades2k/7520172586/ “Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k. #3: Tooltip um “Created at” Zeitstempel ergänzen
  76. 76. Download + Import $ bower install --save PolymerElements/paper-tooltip <link rel=”import” href=”bow.../paper-tooltip.html”> <paper-tooltip> https://elements.polymer-project.org/elements/paper-tooltip
  77. 77. Download + Import $ bower install --save PolymerElements/paper-tooltip <link rel=”import” href=”bow.../paper-tooltip.html”> <paper-tooltip> https://elements.polymer-project.org/elements/paper-tooltip
  78. 78. ... <li ng-repeat=”todo in todos … track by $index” …> ... <div> <label ng-dblclick=”editTodo(todo)”>{{todo.title}}</label> <div> <label id=”todo-tooltip-{{$index}}”>{{ todo.deadline | amDateFormat: ‘MM/DD/YYYY’ }}</label> <paper-tooltip for=”todo-tooltip-{{$index}}” position=”left” animation-delay=”0”> Created at {{ todo.createdAt }} </paper-tooltip> </div> </div> ... </li> Naiver Ansatz /examples/angularjs-polymer/index.html // ... var newTodo = { // ... createdAt: new Date() }; TodoCtrl https://github.com/silentHoo/todomvc-ngpoly
  79. 79. ... <li ng-repeat=”todo in todos … track by $index” …> ... <div> <label ng-dblclick=”editTodo(todo)”>{{todo.title}}</label> <div> <label id=”todo-tooltip-{{$index}}”>{{ todo.deadline | amDateFormat: ‘MM/DD/YYYY’ }}</label> <paper-tooltip for=”todo-tooltip-{{$index}}” position=”left” animation-delay=”0”> Created at {{ todo.createdAt }} </paper-tooltip> </div> </div> ... </li> Naiver Ansatz /examples/angularjs-polymer/index.html // ... var newTodo = { // ... createdAt: new Date() }; TodoCtrl https://github.com/silentHoo/todomvc-ngpoly
  80. 80. Lösung: ng-attr-* ... <li ng-repeat=”todo in todos … track by $index” …> ... <div> <label ng-dblclick=”editTodo(todo)”>{{todo.title}}</label> <div> <label ng-attr-id=”todo-tooltip-{{$index}}”>{{ todo.deadline | amDateFormat: ‘MM/DD/YYYY’ }}</label> <paper-tooltip ng-attr-for=”todo-tooltip-{{$index}}” position=”left” animation-delay=”0”> Created at {{ todo.createdAt }} </paper-tooltip> </div> </div> ... </li> /examples/angularjs-polymer/index.html https://github.com/silentHoo/todomvc-ngpoly
  81. 81. UI um Tooltip erweitert https://github.com/silentHoo/todomvc-ngpoly
  82. 82. https://www.flickr.com/photos/hades2k/7520172586/ “Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k. #4: Datepicker lokalisieren
  83. 83. Verwenden der Objekt-API https://vaadin.com/docs/-/part/elements/vaadin-date-picker/vaadin-date-picker-features.html
  84. 84. ... <vaadin-date-picker id=”todo-datepicker” ng-model=”newDeadline” value=”2016-04-21” label=”Deadline”> ... /examples/angularjs-polymer/index.html angular.module(‘todomvc’) .controller(‘TodoCtrl’, function() { $scope.dateFormat = ‘DD.MM.YYYY’; var datePicker = CustomElementHelper.getInstance(‘#todo-datepicker’); datePicker.i18n.formatDate = function(date) { return moment(date).format($scope.dateFormat); } }); TodoCtrl Verwenden der Objekt-API https://github.com/silentHoo/todomvc-ngpoly
  85. 85. https://www.flickr.com/photos/hades2k/7520172586/ “Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k. Live-Demo
  86. 86. Fazit: Abwägen ● Gibt es eine ausreichende Lösung für das Framework? ○ Lösung bevorzugen, wenn Sie den Funktionsumfang bietet, den man benötigt. Bessere Integration in Framework. ● Es gibt keine Lösung für Framework aber eine Komponente? ○ Komponente verwenden statt neu entwickeln. Aufwand für Wrapping/Integration in Framework lohnt sich in jedem Fall.
  87. 87. https://www.flickr.com/photos/hades2k/7520172586/ “Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k. Tooling + Roadmap
  88. 88. ● CLI-Generatoren ● Web Component Tester (Unit Tests) Tooling https://github.com/yeoman/generator-polymer
  89. 89. I. Generatoren ● App-Stub ○ Element- inkl. Test-Stubs ● GitHub-Pages für Dokumentation basiert auf Polymer- Starter-Kit Erzeugt statische Doku auf <user.>.github.io # install yeoman polymer generator npm install -g generator-polymer # init your app yo polymer # add a reusable element yo polymer:seed # publish on github yo polymer:gh https://github.com/yeoman/generator-polymer
  90. 90. II. Web Component Tester Others LOCAL TESTINGREMOTE TESTING WCT Automated Cross-Browser Testing https://github.com/Polymer/web-component-tester
  91. 91. https://blog.polymer-project.org
  92. 92. Roadmap 2016 2016 Publish Philosophie Routing Lazy-loading elements l10n/i18n Gute “Community-Elemente” promoten 100% mehr PRs akzeptieren Performance vorhandener Elemente verbessern Mehr Feature Opt-Ins Vererbung bei eigenen “Custom Elements” Ultimate Polymer CLI
  93. 93. 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
  94. 94. Kontakt inovex GmbH Ludwig-Erhard-Allee 6 76131 Karlsruhe Patrick Hillert patrick.hillert@inovex.de @silentHoo /silentHoo /PatrickHillert
  95. 95. 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

×