![Page 1: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/1.jpg)
Web Componentsmit Polymer und AngularJS 1.x
Patrick Hillert, 21. April 2016
+
![Page 2: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/2.jpg)
Patrick HillertM.Sc. (Informatik)
Web-Softwareentwickler
Modern Web
Neue Web APIs + Tools@silentHoo
/silentHoo
/PatrickHillert
![Page 3: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/3.jpg)
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
![Page 4: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/4.jpg)
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.
![Page 5: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/5.jpg)
https://dribbble.com/meidenberg/projects/6336-Me-Dark-UI-kit
Designs in 2016 sollten für das Web einfach umzusetzen sein
Mikael Eidenberg@meidenberg
![Page 6: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/6.jpg)
“It’s super-easy with Bootstrap”
Modaler Dialog
http://getbootstrap.com/javascript/#modals
![Page 7: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/7.jpg)
“Just copy this simple html …”
http://getbootstrap.com/javascript/#modals
![Page 8: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/8.jpg)
“... and this little script.”
“Isn’t that easy?”
http://getbootstrap.com/javascript/#modals
![Page 9: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/9.jpg)
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
![Page 10: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/10.jpg)
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
![Page 11: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/11.jpg)
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
![Page 12: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/12.jpg)
![Page 13: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/13.jpg)
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?
![Page 14: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/14.jpg)
![Page 15: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/15.jpg)
<google-map latitude="49.0135165" longitude="8.4022463"></google-map>
![Page 16: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/16.jpg)
![Page 17: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/17.jpg)
![Page 18: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/18.jpg)
<google-map latitude="49.0135165" longitude="8.4022463">
<google-map-marker latitude="49.0135165" longitude="8.4022463"> </google-map-marker>
</google-map>
![Page 19: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/19.jpg)
![Page 20: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/20.jpg)
<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>
![Page 21: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/21.jpg)
<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/
![Page 22: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/22.jpg)
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?
![Page 23: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/23.jpg)
Teile und Herrsche Komplexität in kleine Häppchen aufteilen
20162006 2009 2013
2
![Page 24: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/24.jpg)
Teile und Herrsche Komplexität in kleine Häppchen aufteilen
20162006 2009 2013
2
Plugins
![Page 25: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/25.jpg)
Teile und Herrsche Komplexität in kleine Häppchen aufteilen
20162006 2009 2013
2
PluginsDirektiven, ...
![Page 26: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/26.jpg)
Teile und Herrsche Komplexität in kleine Häppchen aufteilen
20162006 2009 2013
2
PluginsDirektiven, ...
“Stateful View Components”
![Page 27: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/27.jpg)
Teile und Herrsche Komplexität in kleine Häppchen aufteilen
20162006 2009 2013
2
PluginsDirektiven, ...
“Stateful View Components”
Web Components
![Page 28: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/28.jpg)
Teile und Herrsche Komplexität in kleine Häppchen aufteilen
20162006 2009 2011 2013
2
W3C Standard
![Page 29: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/29.jpg)
Teile und Herrsche Komplexität in kleine Häppchen aufteilen
20162006 2009 2011 2013
2
W3C Standard1.5: “module.component”
![Page 30: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/30.jpg)
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)
![Page 31: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/31.jpg)
https://www.flickr.com/photos/krossbow/4026537359/“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.
“keep it simple”
![Page 32: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/32.jpg)
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”
![Page 33: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/33.jpg)
https://www.flickr.com/photos/hades2k/7520172586/“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.
Web Components und Polymer
![Page 34: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/34.jpg)
“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 NoteNo Specification
moved to HTML5
![Page 35: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/35.jpg)
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
![Page 36: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/36.jpg)
https://www.flickr.com/photos/hades2k/7520172586/“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.
Browsersupport
![Page 37: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/37.jpg)
Browser-Support (nativ)Frühjahr 2016
seit Version 36+
![Page 38: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/38.jpg)
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
![Page 39: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/39.jpg)
https://www.flickr.com/photos/hades2k/7520172586/“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.
Custom Elements
![Page 40: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/40.jpg)
Custom Elements
● Semantische Information
● “Klassen für das Web”
● Wiederverwendbar
<paper-slider pin snaps max="10" step="1" value="5" class="orange"></paper-slider>
![Page 41: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/41.jpg)
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 */);
![Page 42: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/42.jpg)
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!
![Page 43: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/43.jpg)
https://www.flickr.com/photos/hades2k/7520172586/“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.
HTML Imports
![Page 44: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/44.jpg)
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">
![Page 45: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/45.jpg)
https://www.flickr.com/photos/hades2k/7520172586/“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.
HTML Templates
![Page 46: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/46.jpg)
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>
![Page 47: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/47.jpg)
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
![Page 48: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/48.jpg)
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!
![Page 49: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/49.jpg)
https://www.flickr.com/photos/hades2k/7520172586/“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.
Shadow DOM
![Page 50: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/50.jpg)
Shadow DOMbereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
<video src="foo.webm" controls></video>
![Page 51: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/51.jpg)
Shadow DOMbereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
<video src="foo.webm" controls></video>
![Page 52: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/52.jpg)
Shadow DOMbereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
<video src="foo.webm" controls></video>
![Page 53: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/53.jpg)
Shadow DOMbereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
<video src="foo.webm" controls></video>
Durch Browsereingefügt
![Page 54: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/54.jpg)
Shadow DOMbereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
<video src="foo.webm" controls></video>
Durch Browsereingefügt
● Kein Ersatz zu <iframe>
● Kein separater JavaScript-Kontext
● Gekapseltes Styling / Markup
![Page 55: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/55.jpg)
Shadow DOMbereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
<video src="foo.webm" controls></video>
Durch Browsereingefü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);
![Page 56: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/56.jpg)
Shadow DOMbereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
<video src="foo.webm" controls></video>
Durch Browsereingefü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!
![Page 57: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/57.jpg)
https://www.flickr.com/photos/hades2k/7520172586/“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.
“Putting it all together”
![Page 58: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/58.jpg)
Poly
mer
Shad
ow D
OM /
Shad
y DO
M HTML-Template
“Putting it all together”
HTML-Markup
Scripts + Styling
Public Attributes (Markup)
+Public Methods
(JavaScript)
custom-element
HTML-Import
![Page 59: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/59.jpg)
<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”
![Page 60: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/60.jpg)
<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”
![Page 61: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/61.jpg)
<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”
![Page 62: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/62.jpg)
https://www.flickr.com/photos/hades2k/7520172586/“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.
Demo
![Page 63: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/63.jpg)
http://todomvc.com/examples/angularjs
Demo
![Page 64: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/64.jpg)
Nur 3 Use Cases
● Hinzufügen
![Page 65: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/65.jpg)
Nur 3 Use Cases
● Hinzufügen
● Bearbeiten
![Page 66: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/66.jpg)
Nur 3 Use Cases
● Hinzufügen
● Bearbeiten
● Abhaken
![Page 67: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/67.jpg)
Los geht’s!
$ git clone [email protected]:tastejs/todomvc.git
copy examples/angularjs → examples/angularjs-polymer
![Page 68: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/68.jpg)
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
![Page 69: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/69.jpg)
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>
![Page 70: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/70.jpg)
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
![Page 71: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/71.jpg)
<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
![Page 72: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/72.jpg)
Und wie sieht die UI aus?Flexbox
https://github.com/silentHoo/todomvc-ngpoly
![Page 73: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/73.jpg)
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
![Page 74: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/74.jpg)
Lösung: Direktive “polyBind”/examples/angularjs-polymer/js/directives/polybind.js
https://github.com/silentHoo/todomvc-ngpoly
![Page 75: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/75.jpg)
<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
![Page 76: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/76.jpg)
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
![Page 77: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/77.jpg)
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
![Page 78: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/78.jpg)
<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
![Page 79: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/79.jpg)
UI mit sichtbarer Deadline
https://github.com/silentHoo/todomvc-ngpoly
![Page 80: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/80.jpg)
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
![Page 81: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/81.jpg)
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
![Page 82: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/82.jpg)
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
![Page 83: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/83.jpg)
... <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
![Page 84: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/84.jpg)
... <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
![Page 85: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/85.jpg)
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
![Page 86: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/86.jpg)
UI um Tooltip erweitert
https://github.com/silentHoo/todomvc-ngpoly
![Page 87: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/87.jpg)
https://www.flickr.com/photos/hades2k/7520172586/“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.
#4: Datepicker lokalisieren
![Page 88: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/88.jpg)
Verwenden der Objekt-API
https://vaadin.com/docs/-/part/elements/vaadin-date-picker/vaadin-date-picker-features.html
![Page 89: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/89.jpg)
... <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
![Page 90: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/90.jpg)
https://www.flickr.com/photos/hades2k/7520172586/“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.
Live-Demo
![Page 91: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/91.jpg)
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.
![Page 92: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/92.jpg)
https://www.flickr.com/photos/hades2k/7520172586/“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.
Tooling + Roadmap
![Page 93: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/93.jpg)
● CLI-Generatoren
● Web Component Tester (Unit Tests)
Tooling
https://github.com/yeoman/generator-polymer
![Page 94: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/94.jpg)
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
![Page 95: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/95.jpg)
II. Web Component Tester
Others
LOCAL TESTINGREMOTE TESTING
WCT
Automated Cross-Browser Testing
https://github.com/Polymer/web-component-tester
![Page 96: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/96.jpg)
https://blog.polymer-project.org
![Page 97: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/97.jpg)
Roadmap 2016
2016
Publish Philosophie
Routing
Lazy-loading elementsl10n/i18n
Gute “Community-Elemente” promoten
100% mehr PRs akzeptierenPerformance vorhandener Elemente verbessern
Mehr Feature Opt-InsVererbung bei eigenen “Custom Elements”
Ultimate Polymer CLI
![Page 98: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/98.jpg)
Weitere Ressourcen
Polymer Summit 2015 CodeLab Tutorialshttp://www.code-labs.io/polymer-summit
Web Components “Gold Standard” alias “Best Practices”https://github.com/webcomponents/gold-standard/wiki
Polycastshttps://www.youtube.com/playlist?list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN
Polymer Summit 2015https://www.youtube.com/playlist?list=PLNYkxOF6rcICdISJclfQhj2S8QZGjXV8J
![Page 99: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/99.jpg)
Kontakt
inovex GmbHLudwig-Erhard-Allee 676131 Karlsruhe
Patrick [email protected]
@silentHoo
/silentHoo
/PatrickHillert
![Page 100: mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS 1.x Patrick Hillert, 21. April 2016 +](https://reader034.vdokument.com/reader034/viewer/2022051721/5a79c96f7f8b9afa378cbcff/html5/thumbnails/100.jpg)
Quellenverzeichnis / RechtlichesDie 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