Focus on Quality

03.11.2015 - Shadow DOM bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen. Durch Browser eingefügt ...
6MB Größe 5 Downloads 417 Ansichten
Focus on Quality Bessere Webfrontends durch Web Components

Patrick Hillert, 03. November 2015

Patrick Hillert

Web-Softwareentwickler

M.Sc. (Informatik) @silentHoo /silentHoo

Modern Web Neue Web APIs + Tools “Full-Stack”

Agenda

Überblick Web Components und Polymer Ökosystem Fazit

https://www.flickr.com/photos/hades2k/7520172586/ “Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.

https://commons.wikimedia.org/wiki/File:Old_timer_structural_worker.jpg “Old-timer, keeping up with the boys…”, licensed under Public Domain. Photo taken by Lewis Hine.

Entwicklungen im Web heute

SpecDevelopers

HTML Web-APIs CSS JavaScript

Communities

jQuery AngularJS EmberJS Bootstrap

WebDevelopers

Freelancer Companies

Designs in 2015 sollten für das Web einfach umzusetzen sein

Mikael Eidenberg @meidenberg

https://dribbble.com/meidenberg/projects/6336-Me-Dark-UI-kit

“It’s super-easy with Bootstrap”

Modaler Dialog

http://getbootstrap.com/javascript/#modals

“Just copy this simple html …”

http://getbootstrap.com/javascript/#modals

“... and this little script.”

“Isn’t that easy?”

http://getbootstrap.com/javascript/#modals

Problem #1: Boilerplate-Code https://www.flickr.com/photos/122127718@N08/13579450523/ “84 Rusty Color Metal texture - 4”, licensed under CC BY-SA 2.0. Copyright by texturepalace.

Kendo UI Plain HTML

JavaScript

YUI Template

JavaScript

AngularJS

JavaScript

Template

Problem #2: Unterschiedliche Frameworks, unterschiedliche Lösungswege https://www.flickr.com/photos/122127718@N08/13579450523/ “84 Rusty Color Metal texture - 4”, licensed under CC BY-SA 2.0. Copyright by texturepalace.

Welches Framework? Mischen möglich?

Problem #3: “Lock-In” vs. Komplexität https://www.flickr.com/photos/122127718@N08/13579450523/ “84 Rusty Color Metal texture - 4”, licensed under CC BY-SA 2.0. Copyright by texturepalace.

Anforderungen an einen Webentwickler

Problem #4: Frontends sind komplex

https://www.flickr.com/photos/122127718@N08/13579450523/ “84 Rusty Color Metal texture - 4”, licensed under CC BY-SA 2.0. Copyright by texturepalace.

Problem #4: Frontends sind komplex sehr komplex https://www.flickr.com/photos/122127718@N08/13579450523/ “84 Rusty Color Metal texture - 4”, licensed under CC BY-SA 2.0. Copyright by texturepalace.

Problem #4: Frontends sind komplex sehr komplex richtig komplex https://www.flickr.com/photos/122127718@N08/13579450523/ “84 Rusty Color Metal texture - 4”, licensed under CC BY-SA 2.0. Copyright by texturepalace.

Wird es mit Web Components einfacher? https://www.flickr.com/photos/krossbow/4026537359/ “Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.









http://jsfiddle.net/mprej0j4/67/



“keep it simple” https://www.flickr.com/photos/krossbow/4026537359/ “Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.

“divide & conquer”

“keep it simple” https://www.flickr.com/photos/krossbow/4026537359/ “Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.

“divide & conquer”

“keep it simple” “think local” https://www.flickr.com/photos/krossbow/4026537359/ “Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.

Historie

“Web Components” umfassen mehrere einzelne Spezifikationen HTML5

Web Components moved to HTML5

Decorators

Custom Elements

Shadow DOM

HTML Imports

HTML Templates

W3C Recomm. Track Process Maturity Levels W3C Working Draft (WD) No Specification

W3C Candidate Recommendation (CR)

W3C Note

W3C Proposed Recommendation (PR)

W3C Editor’s Draft

W3C Recommendation (REC)

Custom Elements ● Semantische Information ● “Klassen für das Web” ● Wiederverwendbar

Custom Elements Neue Browser-API:

● Semantische Information ● “Klassen für das Web” ● Wiederverwendbar

HTML Imports

HTML Templates ● Beschreibt DOM ● Bleibt inaktiv, bis clone() ● Leichtgewichtig

Shadow DOM bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen

Shadow DOM bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen

Shadow DOM bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen

Shadow DOM bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen

Durch Browser eingefügt

Shadow DOM bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen

Durch Browser eingefügt

“Ich möchte einen Videoplayer mit einer Playlist” https://www.flickr.com/photos/hades2k/7520172586/ “Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.

Videoplayer mit Playlist Der Pate Lorem ipsum dolor sit amet, ipsum sit orem aleta

Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta

The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta

Ohne Verwendung von Shadow DOM https://www.flickr.com/photos/krossbow/4026537359/ “Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.

Ohne Verwendung von Shadow DOM div

Ohne Verwendung von Shadow DOM div

Container für Video + Playlist

Ohne Verwendung von Shadow DOM div

video

Ohne Verwendung von Shadow DOM div

video

div

Ohne Verwendung von Shadow DOM div

div

video

div

div

Ohne Verwendung von Shadow DOM Der Pate Lorem ipsum dolor sit amet, ipsum sit orem aleta

div

Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta

div

video

div

..

..

div

..

Mit Verwendung von Shadow DOM https://www.flickr.com/photos/krossbow/4026537359/ “Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.

Mit Verwendung von Shadow DOM div

Mit Verwendung von Shadow DOM div

video

Mit Verwendung von Shadow DOM Der Pate Lorem ipsum dolor sit amet, ipsum sit orem aleta

div

Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta

video

my-playlist

The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta

Mit Verwendung von Shadow DOM Der Pate Lorem ipsum dolor sit amet, ipsum sit orem aleta

div

Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta

my-playlist

video

div

..

..

div

..

Shadow DOM Tree

ShadowRoot

Mit Verwendung von Shadow DOM Der Pate Lorem ipsum dolor sit amet, ipsum sit orem aleta

div

Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta

my-playlist

ShadowRoot

div

..

..

div

..

Neue Browser-API: Shadow DOM Tree

video

Mit Verwendung von Shadow DOM Der Pate Lorem ipsum dolor sit amet, ipsum sit orem aleta

div

Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta

my-playlist

video

div

..

..

div

..

Shadow DOM Tree

ShadowRoot

Max. 1 Shadow-Tree pro Element

Mit Verwendung von Shadow DOM Der Pate Lorem ipsum dolor sit amet, ipsum sit orem aleta

div

Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta

my-playlist

video

div

..

..

div

..

Shadow DOM Tree

ShadowRoot

Max. 1 Shadow-Tree pro Element Stylesheet wirkt sich nur innerhalb dieses Sub-Trees aus

Mit Verwendung von Shadow DOM Der Pate Lorem ipsum dolor sit amet, ipsum sit orem aleta

div

Pulp Fiction Lorem ipsum dolor sit amet, ipsum sit orem aleta

my-playlist

video

ShadowRoot

div

..

..

div

..

Shadow DOM Tree

Events in Shadow Tree “wie gehabt”

The Dark Knight Lorem ipsum dolor sit amet, ipsum sit orem aleta

Max. 1 Shadow-Tree pro Element Stylesheet wirkt sich nur innerhalb dieses Sub-Trees aus

Shadow DOM ● Kein Ersatz zu ● Kein separater JavaScript-Kontext ● Gekapseltes Styling

Shadow DOM ● Kein Ersatz zu

Einfacher Markup, kein Boilerplate-Code

● Kein separater JavaScript-Kontext ● Gekapseltes Styling

Shadow DOM ● Kein Ersatz zu

Einfacher Markup, kein Boilerplate-Code

● Kein separater JavaScript-Kontext ● Gekapseltes Styling “Ripple-Effekt” + Animationen

Und Polymer? https://www.flickr.com/photos/hades2k/7520172586/ “Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.

“The Polymer library is a lightweight sugaring layer on top of the web components APIs [...]” https://github.com/Polymer/polymer https://www.flickr.com/photos/krossbow/4026537359/ “Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.

Polymer: Fakten ● Maintainer: Google ● Start der Entwicklung: Oktober 2012, aktuelle Version: 1.2 ● Ziele: ○ ○ ○ ○

Mobile + Modern Browsers First Mehr deklarativ, weniger imperativ Tooling Eco-System Interoperabilität

Produkte, die Polymer verwenden Chrome Dev Editor: https://goo.gl/1ixIkA

Google Zeitgeist 2013: http://zeitgeist-globe.appspot.com

Chrome Platform Status: http://chromestatus.com

YouTube Gaming: http://gaming.youtube.com

Polymer: Schichten-Aufbau Standard (polymer.html) Annotations, Data-Binding, Gesture-Events, Scoped Styling, Helper-Funktionen

Mini (polymer-mini.html) HTML-Template, Callbacks, Shadow DOM, Shady DOM

Micro (polymer-micro.html) Behaviours, Konstruktor, Vererbung, Attributes, Properties, ...

Polymer “Core” (Basis)

Polymer: Schichten-Aufbau Standard (polymer.html) Annotations, Data-Binding, Gesture-Events, Scoped Styling, Helper-Funktionen

Mini (polymer-mini.html) HTML-Template, Callbacks, Shadow DOM, Shady DOM

Micro (polymer-micro.html) Behaviours, Konstruktor, Vererbung, Attributes, Properties, ...

Polymer “Core” (Basis)

Polymer: Schichten-Aufbau Standard (polymer.html) Annotations, Data-Binding, Gesture-Events, Scoped Styling, Helper-Funktionen

Mini (polymer-mini.html) HTML-Template, Callbacks, Shadow DOM, Shady DOM

Micro (polymer-micro.html) Behaviours, Konstruktor, Vererbung, Attributes, Properties, ...

Polymer “Core” (Basis)

ODER

Polymer: Schichten-Aufbau Standard (polymer.html) Annotations, Data-Binding, Gesture-Events, Scoped Styling, Helper-Funktionen

Mini (polymer-mini.html)

ODER

HTML-Template, Callbacks, Shadow DOM, Shady DOM

ODER Micro (polymer-micro.html) Behaviours, Konstruktor, Vererbung, Attributes, Properties, ...

Polymer “Core” (Basis)

Polymer: Schichten-Aufbau Standard (polymer.html)

“All in”: Für UI-zentrische Komponenten

Annotations, Data-Binding, Gesture-Events, Scoped Styling, Helper-Funktionen

Mini (polymer-mini.html)

ODER

HTML-Template, Callbacks, Shadow DOM, Shady DOM

ODER Micro (polymer-micro.html) Behaviours, Konstruktor, Vererbung, Attributes, Properties, ...

Polymer “Core” (Basis)

Polymer: Schichten-Aufbau Standard (polymer.html)

“All in”: Für UI-zentrische Komponenten

Annotations, Data-Binding, Gesture-Events, Scoped Styling, Helper-Funktionen

Mini (polymer-mini.html) HTML-Template, Callbacks, Shadow DOM, Shady DOM

Für Elemente mit ODER wenig UI-Interaktion ODER

Micro (polymer-micro.html) Behaviours, Konstruktor, Vererbung, Attributes, Properties, ...

Polymer “Core” (Basis)

Polymer: Schichten-Aufbau Standard (polymer.html)

“All in”: Für UI-zentrische Komponenten

Annotations, Data-Binding, Gesture-Events, Scoped Styling, Helper-Funktionen

Mini (polymer-mini.html) HTML-Template, Callbacks, Shadow DOM, Shady DOM

Für Elemente mit ODER wenig UI-Interaktion ODER

Micro (polymer-micro.html) Behaviours, Konstruktor, Vererbung, Attributes, Properties, ...

Polymer “Core” (Basis)

Für Elemente ohne UIAnteile, rein funktionale Komponenten

Dateistruktur eines “Polymer-Elements”



Dateistruktur eines “Polymer-Elements”



Ist selbst ein CustomElement, das die PolymerLibrary mitbringt



https://www.polymer-project.org/1.0/docs/devguide/feature-overview.html

Styling https://www.flickr.com/photos/krossbow/4026537359/ “Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.

Styling von “außen” / Theming

Styling von “außen” / Theming Polymer liefert Shim für diesen Draft

Styling von “außen” / Theming

::shadow

Styling von “außen” / Theming

::shadow

Styling von “außen” / Theming

::shadow

Färbt nur die Textfarbe der s von myelement in rot.

Styling von “außen” / Theming

/deep/

Styling von “außen” / Theming

/deep/

Styling von “außen” / Theming

/deep/ Färbt alle s des gesamten Dokuments in rot.

Styling von “außen” / Theming

::shadow

/deep/

Styling von “außen” / Theming

::shadow ●

/deep/

“Consumer” muss interne Details der Komponenten kennen

Styling von “außen” / Theming

::shadow ●

/deep/

“Consumer” muss interne Details der Komponenten kennen Bei Änderungen an der Komponente, kann die CSSRegel evtl. nicht mehr greifen!

Styling von “außen” / Theming

::shadow

/deep/



“Consumer” muss interne Details der Komponenten kennen



Schlechte Performance Bei Änderungen an der Komponente, kann die CSSRegel evtl. nicht mehr greifen!

Styling von “außen” / Theming

::shadow

/deep/



“Consumer” muss interne Details der Komponenten kennen



Schlechte Performance CSS-Regeln sind nicht mehr nur auf den Sub-Tree beschränkt

Bei Änderungen an der Komponente, kann die CSSRegel evtl. nicht mehr greifen!

Styling von “außen” / Theming

::shadow

/deep/

https://www.polymer-project.org/1.0/docs/devguide/styling.html

Styling von “außen” / Theming

Tooling Ökosystem https://www.flickr.com/photos/krossbow/4026537359/ “Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.

Generatoren

● App-Stub ● Element- inkl. Test-Stubs ● GitHub-Pages für Dokumentation

https://github.com/yeoman/generator-polymer

Generatoren

● App-Stub

basiert auf PolymerStarter-Kit

● Element- inkl. Test-Stubs ● GitHub-Pages für Dokumentation

https://github.com/yeoman/generator-polymer

Generatoren

● App-Stub

basiert auf PolymerStarter-Kit

● Element- inkl. Test-Stubs ● GitHub-Pages für Dokumentation

https://github.com/yeoman/generator-polymer

Generatoren

● App-Stub

basiert auf PolymerStarter-Kit

● Element- inkl. Test-Stubs

Erzeugt statische Doku auf .github.io

● GitHub-Pages für Dokumentation

https://github.com/yeoman/generator-polymer

Web Component Tester

WCT

Others

Automated Cross-Browser Testing

REMOTE TESTING

LOCAL TESTING https://github.com/Polymer/web-component-tester

Web Component Tester

Async

Chai

Lodash

Mocha

des

lu inc

Sinon

WCT

Others

Automated Cross-Browser Testing

REMOTE TESTING

LOCAL TESTING https://github.com/Polymer/web-component-tester

Web Component Tester

Async

Chai

Lodash

Mocha

des

lu inc

Sinon

WCT

Others

Automated Cross-Browser Testing

REMOTE TESTING

LOCAL TESTING https://github.com/Polymer/web-component-tester

Web Component Tester ● Black-Box-Tests sind möglich ● BDD (

) + TDD (

)

● Komponente wird “als Ganzes” getestet

https://github.com/Polymer/web-component-tester

Weitere Tools https://www.flickr.com/photos/krossbow/4026537359/ “Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.

Weitere Tools PolyBuild PolyLint PolyGit.org PolyDev Chrome Extension

Weitere Tools PolyBuild

HTML-Imports kombinieren, JavaScript minifizieren

PolyLint PolyGit.org PolyDev Chrome Extension

Weitere Tools PolyBuild

HTML-Imports kombinieren, JavaScript minifizieren Linter für Polymer

PolyLint PolyGit.org PolyDev Chrome Extension

Weitere Tools PolyBuild

HTML-Imports kombinieren, JavaScript minifizieren Linter für Polymer

PolyLint PolyGit.org

cdn.rawgit.com-Proxy, HTML-Imports mit Versionierung

PolyDev Chrome Extension

Weitere Tools PolyBuild

HTML-Imports kombinieren, JavaScript minifizieren Linter für Polymer

PolyLint PolyGit.org

cdn.rawgit.com-Proxy, HTML-Imports mit Versionierung

PolyDev Chrome Extension

“Wie groß sollte eine Komponente sein?” https://www.flickr.com/photos/hades2k/7520172586/ “Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.

Auf die Größe kommt es an ● Nicht nur auf Komponenten setzen

Auf die Größe kommt es an ● Nicht nur auf Komponenten setzen

Frameworks sinnvoll nutzen

Auf die Größe kommt es an ● Nicht nur auf Komponenten setzen ● Keine zu großen Komponenten

Frameworks sinnvoll nutzen

Auf die Größe kommt es an ● Nicht nur auf Komponenten setzen ● Keine zu großen Komponenten

Frameworks sinnvoll nutzen Dann nicht mehr wiederverwendbar

Auf die Größe kommt es an ● Nicht nur auf Komponenten setzen ● Keine zu großen Komponenten

Frameworks sinnvoll nutzen Dann nicht mehr wiederverwendbar

● Neue Komponenten aus vorhandenen aufbauen

Auf die Größe kommt es an ● Nicht nur auf Komponenten setzen ● Keine zu großen Komponenten

Frameworks sinnvoll nutzen Dann nicht mehr wiederverwendbar

● Neue Komponenten aus vorhandenen aufbauen Gibt’s hierfür bereits ein brauchbares Element?

“Wie kann ich damit die Qualität verbessern?” https://www.flickr.com/photos/hades2k/7520172586/ “Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.

Eigener Pool an Komponenten ● z.B. für Kundenprojekte ○ dadurch inkrementelle Verbesserung der Qualität ○ ständig getestet ○ zentral verwaltet ○ Import in das aktuelle Projekt

“Wo finde ich Komponenten?” https://www.flickr.com/photos/hades2k/7520172586/ “Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.

http://elements.polymer-project.org

http://customelements.io

“Wie kann ich eine Komponente verwenden?” https://www.flickr.com/photos/hades2k/7520172586/ “Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.

1

Find/ Install

1

Find/ Install

1

Find/ Install

1

Import

Find/ Install

2

1

Import

Find/ Install

2



1

Find/ Install

Import

3

2

Use



1

Find/ Install

Import

3

2

Use



BUTTON


1

Find/ Install

Import

3

2

Use



BUTTON


Browsersupport https://www.flickr.com/photos/krossbow/4026537359/ “Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.

Browser-Support (nativ) Herbst 2015

DESKTOP

MOBILE / TABLET

* HTML Templates 13+

7.1+

22+

26+

32+

36+

45+

23+

33+

45+

29+

35+

45+

4.4+

8+

HTML Imports

Custom Elements

Shadow DOM Quelle: caniuse.com

* Chrome for Android / Android Browser

Browser-Support (polyfilled) Herbst 2015

DESKTOP

MOBILE / TABLET

* 10+

7+

7+

10+

HTML Templates

HTML Imports

Custom Elements

Shadow DOM Quelle: caniuse.com

* Chrome for Android / Android Browser

Zusammenfassung ● Standard / nativ implementiert ● Sehr viele Tools ● Komplexität + Styling wird gekapselt ● Interoperabilität mit anderen Frameworks ● Einfach testbar https://www.flickr.com/photos/hades2k/7520172586/ “Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.

Weitere Ressourcen Polymer Summit 2015 CodeLab Tutorials http://www.code-labs.io/polymer-summit

Web Components “Gold Standard” alias “Best Practices” https://github.com/webcomponents/gold-standard/wiki

Polycasts https://www.youtube.com/playlist?list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN

Polymer Summit 2015 https://www.youtube.com/playlist?list=PLNYkxOF6rcICdISJclfQhj2S8QZGjXV8J

Kontakt Patrick Hillert [email protected] github.com/silentHoo twitter.com/silentHoo slideshare.net/PatrickHillert

Quellenverzeichnis / Rechtliches Die Quellen finden sich jeweils direkt an der entsprechenden Stelle des zitierten Werkes. / All sources are given appropriate credit at the place of their corresponding place on slide. Die verwendeten Logos sind Eigentum der jeweiligen Inhaber. / All logos and trademarks are the property of their respective owners. If you are the owner and don’t want to show, please let me know.

Copyright by Last Call Media Inc., Free for Commercial Use, https://www.iconfinder. com/icons/296208/axe_configuration_gear_mining_pick_pickaxe_tool_tools_work_icon#size=128

Copyright by the gnome.org project, licensed under GPL, https://www.iconfinder.com/icons/55596/accept_check_ok_tick_icon#size=64

Copyright by Ionicicons.com, licensed under MIT, https://www.iconfinder.com/icons/211746/flag_outline_icon#size=64