Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem...
Transcript of Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem...
![Page 1: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/1.jpg)
Focus on QualityBessere Webfrontends durch Web Components
Patrick Hillert, 03. November 2015
![Page 2: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/2.jpg)
Patrick HillertM.Sc. (Informatik)
Web-Softwareentwickler
Modern Web
Neue Web APIs + Tools
“Full-Stack”
@silentHoo
/silentHoo
![Page 3: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/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
</> Überblick
</> Web Components und Polymer
</> Ökosystem
</> Fazit
![Page 4: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/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: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/5.jpg)
Entwicklungen im Web heute
Spec-Developers
Comm-unities
Web-Developers
HTMLWeb-APIs
CSSJavaScript
jQueryAngularJSEmberJSBootstrap
FreelancerCompanies
![Page 6: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/6.jpg)
https://dribbble.com/meidenberg/projects/6336-Me-Dark-UI-kit
Designs in 2015 sollten für das Web einfach umzusetzen sein
Mikael Eidenberg@meidenberg
![Page 7: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/7.jpg)
“It’s super-easy with Bootstrap”
Modaler Dialog
http://getbootstrap.com/javascript/#modals
![Page 8: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/8.jpg)
“Just copy this simple html …”
http://getbootstrap.com/javascript/#modals
![Page 9: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/9.jpg)
“... and this little script.”
“Isn’t that easy?”
http://getbootstrap.com/javascript/#modals
![Page 10: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/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 #1:Boilerplate-Code
![Page 11: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/11.jpg)
Kendo UI
Plain HTML
JavaScript
![Page 12: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/12.jpg)
YUI
Template
JavaScript
![Page 13: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/13.jpg)
AngularJS
JavaScript
Template
![Page 14: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/14.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:Unterschiedliche Frameworks,unterschiedliche Lösungswege
![Page 15: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/15.jpg)
Welches Framework? Mischen möglich?
![Page 16: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/16.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:“Lock-In” vs. Komplexität
![Page 17: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/17.jpg)
Anforderungen an einen Webentwickler
![Page 18: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/18.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 #4:Frontends sind komplex
![Page 19: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/19.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 #4:Frontends sind komplexsehr komplex
![Page 20: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/20.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 #4:Frontends sind komplexsehr komplexrichtig komplex
![Page 21: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/21.jpg)
![Page 22: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/22.jpg)
https://www.flickr.com/photos/krossbow/4026537359/“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.
Wird es mitWeb Components einfacher?
![Page 23: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/23.jpg)
![Page 24: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/24.jpg)
<google-map latitude="49.0135165" longitude="8.4022463"></google-map>
![Page 25: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/25.jpg)
![Page 26: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/26.jpg)
![Page 27: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/27.jpg)
<google-map latitude="49.0135165" longitude="8.4022463">
<google-map-marker latitude="49.0135165" longitude="8.4022463"> </google-map-marker>
</google-map>
![Page 28: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/28.jpg)
![Page 29: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/29.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 30: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/30.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 31: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/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: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/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.
“divide & conquer”
“keep it simple”
![Page 33: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/33.jpg)
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”
![Page 34: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/34.jpg)
Historie
![Page 35: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/35.jpg)
“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 NoteNo Specification
moved to HTML5
![Page 36: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/36.jpg)
Custom Elements
● Semantische Information
● “Klassen für das Web”
● Wiederverwendbar
![Page 37: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/37.jpg)
Custom Elements
● Semantische Information
● “Klassen für das Web”
● Wiederverwendbar
Neue Browser-API:
![Page 38: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/38.jpg)
HTML Imports
![Page 39: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/39.jpg)
HTML Templates
● Beschreibt DOM
● Bleibt inaktiv, bis clone()
● Leichtgewichtig
![Page 40: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/40.jpg)
Shadow DOMbereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
![Page 41: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/41.jpg)
Shadow DOMbereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
![Page 42: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/42.jpg)
Shadow DOMbereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
![Page 43: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/43.jpg)
Shadow DOMbereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
Durch Browsereingefügt
![Page 44: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/44.jpg)
Shadow DOMbereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
Durch Browsereingefügt
![Page 45: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/45.jpg)
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”
![Page 46: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/46.jpg)
Videoplayer mit Playlist
Der PateLorem ipsum dolor sit amet, ipsum sit orem aleta
Pulp FictionLorem ipsum dolor sit amet, ipsum sit orem aleta
The Dark KnightLorem ipsum dolor sit amet, ipsum sit orem aleta
![Page 47: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/47.jpg)
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
![Page 48: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/48.jpg)
Ohne Verwendung von Shadow DOM
div
![Page 49: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/49.jpg)
Ohne Verwendung von Shadow DOMContainer für
Video + Playlistdiv
![Page 50: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/50.jpg)
Ohne Verwendung von Shadow DOM
video
div
![Page 51: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/51.jpg)
Ohne Verwendung von Shadow DOM
div
div
video
![Page 52: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/52.jpg)
Ohne Verwendung von Shadow DOM
divdiv
div
video div
![Page 53: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/53.jpg)
Ohne Verwendung von Shadow DOM
.. ..
..
.. ..
Der PateLorem ipsum dolor sit amet, ipsum sit orem aleta
Pulp FictionLorem ipsum dolor sit amet, ipsum sit orem aleta
The Dark KnightLorem ipsum dolor sit amet, ipsum sit orem aleta
div
video div
divdiv
![Page 54: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/54.jpg)
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
![Page 55: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/55.jpg)
Mit Verwendung von Shadow DOM
div
![Page 56: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/56.jpg)
Mit Verwendung von Shadow DOM
video
div
![Page 57: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/57.jpg)
Mit Verwendung von Shadow DOM
div
my-playlistvideo
Der PateLorem ipsum dolor sit amet, ipsum sit orem aleta
Pulp FictionLorem ipsum dolor sit amet, ipsum sit orem aleta
The Dark KnightLorem ipsum dolor sit amet, ipsum sit orem aleta
![Page 58: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/58.jpg)
Mit Verwendung von Shadow DOM
div
my-playlistvideo
Der PateLorem ipsum dolor sit amet, ipsum sit orem aleta
Pulp FictionLorem ipsum dolor sit amet, ipsum sit orem aleta
The Dark KnightLorem ipsum dolor sit amet, ipsum sit orem aleta
..
.. ..
divdiv
ShadowRootS
hado
w D
OM
Tre
e
![Page 59: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/59.jpg)
Mit Verwendung von Shadow DOM
div
my-playlistvideo
Der PateLorem ipsum dolor sit amet, ipsum sit orem aleta
Pulp FictionLorem ipsum dolor sit amet, ipsum sit orem aleta
The Dark KnightLorem ipsum dolor sit amet, ipsum sit orem aleta
..
.. ..
divdiv
ShadowRootS
hado
w D
OM
Tre
eNeue Browser-API:
![Page 60: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/60.jpg)
Mit Verwendung von Shadow DOM
div
my-playlistvideo
Der PateLorem ipsum dolor sit amet, ipsum sit orem aleta
Pulp FictionLorem ipsum dolor sit amet, ipsum sit orem aleta
The Dark KnightLorem ipsum dolor sit amet, ipsum sit orem aleta
..
.. ..
divdiv
ShadowRootS
hado
w D
OM
Tre
e
Max. 1 Shadow-Tree pro Element
![Page 61: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/61.jpg)
Mit Verwendung von Shadow DOM
div
my-playlistvideo
Der PateLorem ipsum dolor sit amet, ipsum sit orem aleta
Pulp FictionLorem ipsum dolor sit amet, ipsum sit orem aleta
The Dark KnightLorem ipsum dolor sit amet, ipsum sit orem aleta
..
.. ..
divdiv
ShadowRootS
hado
w D
OM
Tre
e
Max. 1 Shadow-Tree pro Element
Stylesheet wirkt sich nur innerhalb dieses
Sub-Trees aus
![Page 62: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/62.jpg)
Mit Verwendung von Shadow DOM
div
my-playlistvideo
Der PateLorem ipsum dolor sit amet, ipsum sit orem aleta
Pulp FictionLorem ipsum dolor sit amet, ipsum sit orem aleta
The Dark KnightLorem ipsum dolor sit amet, ipsum sit orem aleta
..
.. ..
divdiv
ShadowRootS
hado
w D
OM
Tre
e
Max. 1 Shadow-Tree pro Element
Stylesheet wirkt sich nur innerhalb dieses
Sub-Trees aus
Events in Shadow Tree “wie gehabt”
![Page 63: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/63.jpg)
Shadow DOM
● Kein Ersatz zu <iframe>
● Kein separater JavaScript-Kontext
● Gekapseltes Styling
![Page 64: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/64.jpg)
Shadow DOM
● Kein Ersatz zu <iframe>
● Kein separater JavaScript-Kontext
● Gekapseltes Styling
Einfacher Markup,kein Boilerplate-Code
![Page 65: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/65.jpg)
Shadow DOM
● Kein Ersatz zu <iframe>
● Kein separater JavaScript-Kontext
● Gekapseltes Styling
“Ripple-Effekt” +Animationen
Einfacher Markup,kein Boilerplate-Code
![Page 66: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/66.jpg)
https://www.flickr.com/photos/hades2k/7520172586/“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.
Und Polymer?
![Page 67: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/67.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 68: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/68.jpg)
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
![Page 69: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/69.jpg)
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
![Page 70: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/70.jpg)
Polymer: Schichten-AufbauStandard (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, ...
![Page 71: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/71.jpg)
Polymer: Schichten-AufbauStandard (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, ...
![Page 72: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/72.jpg)
Polymer: Schichten-AufbauStandard (polymer.html)
Annotations, Data-Binding, Gesture-Events, Scoped Styling, Helper-Funktionen
Mini (polymer-mini.html)
HTML-Template, Callbacks, Shadow DOM, Shady DOM
Polymer “Core” (Basis)
Micro (polymer-micro.html)
Behaviours, Konstruktor, Vererbung, Attributes, Properties, ...
ODER
![Page 73: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/73.jpg)
Polymer: Schichten-AufbauStandard (polymer.html)
Annotations, Data-Binding, Gesture-Events, Scoped Styling, Helper-Funktionen
Mini (polymer-mini.html)
HTML-Template, Callbacks, Shadow DOM, Shady DOM
Polymer “Core” (Basis)
Micro (polymer-micro.html)
Behaviours, Konstruktor, Vererbung, Attributes, Properties, ...
ODER
ODER
![Page 74: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/74.jpg)
Polymer: Schichten-AufbauStandard (polymer.html)
Annotations, Data-Binding, Gesture-Events, Scoped Styling, Helper-Funktionen
Mini (polymer-mini.html)
HTML-Template, Callbacks, Shadow DOM, Shady DOM
Polymer “Core” (Basis)
Micro (polymer-micro.html)
Behaviours, Konstruktor, Vererbung, Attributes, Properties, ...
ODER
ODER
“All in”: Für UI-zentrische Komponenten
![Page 75: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/75.jpg)
Polymer: Schichten-AufbauStandard (polymer.html)
Annotations, Data-Binding, Gesture-Events, Scoped Styling, Helper-Funktionen
Mini (polymer-mini.html)
HTML-Template, Callbacks, Shadow DOM, Shady DOM
Polymer “Core” (Basis)
Micro (polymer-micro.html)
Behaviours, Konstruktor, Vererbung, Attributes, Properties, ...
ODER
ODER
“All in”: Für UI-zentrische Komponenten
Für Elemente mit wenig UI-Interaktion
![Page 76: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/76.jpg)
Polymer: Schichten-AufbauStandard (polymer.html)
Annotations, Data-Binding, Gesture-Events, Scoped Styling, Helper-Funktionen
Mini (polymer-mini.html)
HTML-Template, Callbacks, Shadow DOM, Shady DOM
Polymer “Core” (Basis)
Micro (polymer-micro.html)
Behaviours, Konstruktor, Vererbung, Attributes, Properties, ...
ODER
ODER
“All in”: Für UI-zentrische Komponenten
Für Elemente mit wenig UI-Interaktion
Für Elemente ohne UI-Anteile, rein funktionale
Komponenten
![Page 77: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/77.jpg)
Dateistruktur eines “Polymer-Elements”
<HTML-Imports>
<script>
<dom-module>
<dom-module id=”my-element”>
<template>
<style>
![Page 78: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/78.jpg)
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
![Page 79: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/79.jpg)
https://www.polymer-project.org/1.0/docs/devguide/feature-overview.html
![Page 80: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/80.jpg)
https://www.flickr.com/photos/krossbow/4026537359/“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.
Styling
![Page 81: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/81.jpg)
Styling von “außen” / Theming
![Page 82: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/82.jpg)
Styling von “außen” / Theming
Polymer liefert Shim für diesen Draft
![Page 83: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/83.jpg)
Styling von “außen” / Theming
::shadow
![Page 84: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/84.jpg)
Styling von “außen” / Theming
::shadow
![Page 85: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/85.jpg)
Styling von “außen” / Theming
::shadow Färbt nur die Textfarbe der s von my-
element in rot.
![Page 86: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/86.jpg)
Styling von “außen” / Theming
/deep/
![Page 87: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/87.jpg)
Styling von “außen” / Theming
/deep/
![Page 88: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/88.jpg)
Styling von “außen” / Theming
/deep/Färbt alle s des
gesamten Dokuments in rot.
![Page 89: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/89.jpg)
Styling von “außen” / Theming
/deep/::shadow
![Page 90: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/90.jpg)
Styling von “außen” / Theming
/deep/::shadow● “Consumer” muss interne Details der Komponenten kennen
![Page 91: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/91.jpg)
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!
![Page 92: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/92.jpg)
Styling von “außen” / Theming
/deep/::shadow● “Consumer” muss interne Details der Komponenten kennen
● Schlechte PerformanceBei Änderungen an der
Komponente, kann die CSS-Regel evtl. nicht mehr
greifen!
![Page 93: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/93.jpg)
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!
![Page 94: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/94.jpg)
Styling von “außen” / Theming
/deep/::shadow
https://www.polymer-project.org/1.0/docs/devguide/styling.html
![Page 95: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/95.jpg)
Styling von “außen” / Theming
![Page 96: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/96.jpg)
https://www.flickr.com/photos/krossbow/4026537359/“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.
Tooling Ökosystem
![Page 97: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/97.jpg)
● App-Stub
● Element- inkl. Test-Stubs
● GitHub-Pages für Dokumentation
Generatoren
https://github.com/yeoman/generator-polymer
![Page 98: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/98.jpg)
● App-Stub
● Element- inkl. Test-Stubs
● GitHub-Pages für Dokumentation
Generatoren
basiert auf Polymer-Starter-Kit
https://github.com/yeoman/generator-polymer
![Page 99: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/99.jpg)
● App-Stub
● Element- inkl. Test-Stubs
● GitHub-Pages für Dokumentation
Generatoren
basiert auf Polymer-Starter-Kit
https://github.com/yeoman/generator-polymer
![Page 100: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/100.jpg)
Generatoren
● App-Stub
● Element- inkl. Test-Stubs
● GitHub-Pages für Dokumentation
basiert auf Polymer-Starter-Kit
Erzeugt statische Doku auf <user.>.github.io
https://github.com/yeoman/generator-polymer
![Page 101: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/101.jpg)
Web Component Tester
Others
LOCAL TESTINGREMOTE TESTING
WCT
Automated Cross-Browser Testing
https://github.com/Polymer/web-component-tester
![Page 102: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/102.jpg)
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
![Page 103: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/103.jpg)
Others
LOCAL TESTINGREMOTE TESTING
includes
WCT
Automated Cross-Browser Testing
https://github.com/Polymer/web-component-tester
Mocha
Chai
Lodash
Async
Sinon
Web Component Tester
![Page 104: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/104.jpg)
https://github.com/Polymer/web-component-tester
● Black-Box-Tests sind möglich
● BDD ( ) + TDD ( )
● Komponente wird “als Ganzes” getestet
Web Component Tester
![Page 105: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/105.jpg)
https://www.flickr.com/photos/krossbow/4026537359/“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.
Weitere Tools
![Page 106: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/106.jpg)
Weitere Tools
PolyBuild
PolyLint
PolyGit.org
PolyDev Chrome Extension
![Page 107: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/107.jpg)
Weitere Tools
PolyBuild
PolyLint
PolyGit.org
PolyDev Chrome Extension
HTML-Imports kombinieren, JavaScript
minifizieren
![Page 108: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/108.jpg)
Weitere Tools
PolyBuild
PolyLint
PolyGit.org
PolyDev Chrome Extension
HTML-Imports kombinieren, JavaScript
minifizieren
Linter für Polymer
![Page 109: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/109.jpg)
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
![Page 110: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/110.jpg)
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
![Page 111: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/111.jpg)
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?”
![Page 112: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/112.jpg)
Auf die Größe kommt es an
● Nicht nur auf Komponenten setzen
![Page 113: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/113.jpg)
Auf die Größe kommt es an
● Nicht nur auf Komponenten setzen
Frameworks sinnvoll nutzen
![Page 114: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/114.jpg)
Auf die Größe kommt es an
● Nicht nur auf Komponenten setzen
● Keine zu großen Komponenten
Frameworks sinnvoll nutzen
![Page 115: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/115.jpg)
Auf die Größe kommt es an
● Nicht nur auf Komponenten setzen
● Keine zu großen Komponenten
Frameworks sinnvoll nutzen
Dann nicht mehr wiederverwendbar
![Page 116: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/116.jpg)
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
![Page 117: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/117.jpg)
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?
![Page 118: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/118.jpg)
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?”
![Page 119: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/119.jpg)
● 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
![Page 120: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/120.jpg)
https://www.flickr.com/photos/hades2k/7520172586/“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.
“Wo finde ich Komponenten?”
![Page 121: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/121.jpg)
http://elements.polymer-project.org
![Page 122: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/122.jpg)
http://customelements.io
![Page 123: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/123.jpg)
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?”
![Page 124: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/124.jpg)
1 Find/Install
![Page 125: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/125.jpg)
1 Find/Install
![Page 126: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/126.jpg)
1 Find/Install
![Page 127: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/127.jpg)
1
2
Find/Install
Import
![Page 128: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/128.jpg)
<head> <link rel=”import” href=”components/paper-button/paper-button.html”></head>
1
2
Find/Install
Import
![Page 129: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/129.jpg)
<head> <link rel=”import” href=”components/paper-button/paper-button.html”></head>
1
3
2
Find/Install
Import
Use
![Page 130: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/130.jpg)
<body> <div> <paper-button raised>BUTTON</paper-button> </div></body>
<head> <link rel=”import” href=”components/paper-button/paper-button.html”></head>
1
3
2
Find/Install
Import
Use
![Page 131: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/131.jpg)
<body> <div> <paper-button raised>BUTTON</paper-button> </div></body>
<head> <link rel=”import” href=”components/paper-button/paper-button.html”></head>
1
3
2
Find/Install
Import
Use
![Page 132: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/132.jpg)
https://www.flickr.com/photos/krossbow/4026537359/“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.
Browsersupport
![Page 133: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/133.jpg)
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
![Page 134: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/134.jpg)
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
![Page 135: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/135.jpg)
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
![Page 136: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/136.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 137: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/137.jpg)
Kontakt
Patrick [email protected]
github.com/silentHootwitter.com/silentHooslideshare.net/PatrickHillert
![Page 138: Focus on Quality - inovex · 2019-03-13 · Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta .... ..](https://reader033.fdocument.pub/reader033/viewer/2022043015/5f38295be45f6e5ef14e8e25/html5/thumbnails/138.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