Focus on Quality - Bessere Webfrontends durch Web Components

Focus on Quality
Bessere Webfrontends durch Web Components
Patrick Hillert, 03. November 2015

Patrick Hillert
M.Sc. (Informatik)
Web-Softwareentwickler
Modern Web
Neue Web APIs + Tools
“Full-Stack”
@silentHoo
/silentHoo

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

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
Spec-
Developers
Comm-
unities
Web-
Developers
HTML
Web-APIs
CSS
JavaScript
jQuery
AngularJS
EmberJS
Bootstrap
Freelancer
Companies

https://dribbble.com/meidenberg/projects/6336-Me-Dark-UI-kit
Designs in 2015
sollten für das Web einfach umzusetzen sein
Mikael Eidenberg
@meidenberg

“It’s super-easy with Bootstrap”
Modaler Dialog
http://getbootstrap.com/javascript/#modals

“Just copy this simple html …”

“... and this little script.”
“Isn’t that easy?”

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

Kendo UI
Plain HTML
JavaScript

Problem #2:
Unterschiedliche Frameworks,
unterschiedliche Lösungswege

Welches Framework? Mischen möglich?

Problem #3:
“Lock-In” vs. Komplexität

Anforderungen an einen Webentwickler

Problem #4:
Frontends sind komplex

Problem #4:
sehr komplex

Problem #4:
sehr komplex
richtig komplex

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

<google-map latitude="49.0135165" longitude="8.4022463"></google-map>

<google-map latitude="49.0135165" longitude="8.4022463">
<google-map-marker
latitude="49.0135165" longitude="8.4022463">
</google-map-marker>
</google-map>

<google-map
map="{{map}}" 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>

<google-map
map="{{map}}" 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/

“keep it simple”

“divide & conquer”

“think local”
“divide & conquer”

“Web Components”
umfassen mehrere einzelne Spezifikationen
Web Components
Decorators
Custom
Elements
Shadow DOM HTML Imports HTML Templates
HTML5
W3C Editor’s Draft
W3C Recomm. Track Process Maturity Levels
W3C Working Draft (WD)
W3C Candidate Recommendation (CR)
W3C Proposed Recommendation (PR)
W3C Recommendation (REC)
W3C Note
No Specification
moved to HTML5

Custom Elements
● Semantische Information
● “Klassen für das Web”
● Wiederverwendbar
<paper-slider
pin snaps max="10" step="1"
value="5" class="orange">
</paper-slider>

Custom Elements
● Semantische Information
● “Klassen für das Web”
● Wiederverwendbar
<paper-slider
pin snaps max="10" step="1"
value="5" class="orange">
</paper-slider>
Neue Browser-API:
document.registerElement(‘paper-slider’, /* options */);

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">

HTML Templates
● Beschreibt DOM
● Bleibt inaktiv, bis clone()
● Leichtgewichtig
<template>
<div class="profile">
<img src="/profile-pic.jpg">
</div>
<script></script>
</template>

Shadow DOM
bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
<video
src="foo.webm" controls>
</video>

Shadow DOM
bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
<video
src="foo.webm" controls>
</video>
Durch Browser
eingefügt

“Ich möchte einen
Videoplayer mit einer
Playlist”

Videoplayer mit Playlist
Der Pate
Lorem ipsum dolor sit amet, ipsum
sit orem aleta
Pulp Fiction
sit orem aleta
The Dark Knight
sit orem aleta

Ohne Verwendung von
Shadow DOM

Ohne Verwendung von Shadow DOM
div

Container für
Video + Playlistdiv

video
div

div
div
video

divdiv
div
video div

.. ..
..
.. ..
Der Pate
Lorem ipsum dolor sit amet,
ipsum sit orem aleta
Pulp Fiction
The Dark KnightLorem ipsum dolor sit amet,
div
video div
divdiv

Mit Verwendung von
Shadow DOM

Mit Verwendung von Shadow DOM
div

video
div

div
my-playlistvideo
Der Pate
Pulp Fiction

div
my-playlistvideo
Der Pate
Pulp Fiction
..
.. ..
divdiv
ShadowRoot
ShadowDOMTree

div
my-playlistvideo
Der Pate
Pulp Fiction
..
.. ..
divdiv
ShadowRoot
ShadowDOMTree
Neue Browser-API:
var shadowRoot = $(‘my-playlist’).createShadowRoot();
shadowRoot.appendChild($(‘template’).content);

div
my-playlistvideo
Der Pate
Pulp Fiction
..
.. ..
divdiv
ShadowRoot
ShadowDOMTree
Max. 1 Shadow-Tree
pro Element

div
my-playlistvideo
Der Pate
Pulp Fiction
..
.. ..
divdiv
ShadowRoot
ShadowDOMTree
Max. 1 Shadow-Tree
pro Element
Stylesheet wirkt sich
nur innerhalb dieses
Sub-Trees aus

div
my-playlistvideo
Der Pate
Pulp Fiction
..
.. ..
divdiv
ShadowRoot
ShadowDOMTree
Max. 1 Shadow-Tree
pro Element
Stylesheet wirkt sich
nur innerhalb dieses
Sub-Trees aus
Events in
Shadow Tree
“wie gehabt”

Shadow DOM
● Kein Ersatz zu <iframe>
● Kein separater JavaScript-Kontext
● Gekapseltes Styling
<paper-tabs selected="0">
<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab>
</paper-tabs>

Shadow DOM
</paper-tabs>
Einfacher Markup,
kein Boilerplate-Code

Shadow DOM
</paper-tabs>
“Ripple-Effekt” +
Animationen
Einfacher Markup,
kein Boilerplate-Code

Und Polymer?

“The Polymer library is a
lightweight sugaring layer on
top of the web components
APIs [...]”
https://github.com/Polymer/polymer

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
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

Polymer: Schichten-Aufbau
Standard (polymer.html)
Annotations, Data-Binding, Gesture-Events, Scoped
Styling, Helper-Funktionen
Mini (polymer-mini.html)
HTML-Template, Callbacks, Shadow DOM,
Shady DOM
Polymer “Core” (Basis)
Micro (polymer-micro.html)
Behaviours, Konstruktor, Vererbung,
Attributes, Properties, ...

Shady DOM
<link rel="import" href=".../polymer.html">

Shady DOM
<link rel="import" href=".../polymer-mini.html">
ODER

Shady DOM
ODER
ODER
<link rel="import" href=".../polymer-micro.html">

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

Shady DOM
ODER
ODER
Komponenten
Für Elemente mit
wenig UI-Interaktion

Shady DOM
ODER
ODER
Komponenten
Für Elemente mit
wenig UI-Interaktion
Für Elemente ohne UI-
Anteile, rein funktionale
Komponenten

Dateistruktur eines “Polymer-Elements”
<HTML-Imports>
<script>
<dom-module>
<dom-module id=”my-element”>
<template>
<style>

Dateistruktur eines “Polymer-Elements”
<dom-module id=”my-element”>
<HTML-Imports>
<template>
<style>
<script>
<dom-module>
Ist selbst ein Custom-
Element, das die Polymer-
Library mitbringt

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

Styling

Styling von “außen” / Theming

Polymer liefert Shim
für diesen Draft

::shadow

::shadow
my-element::shadow span {
color: red;
}

::shadow
my-element::shadow span {
color: red;
}
Färbt nur die Textfarbe
der <span>s von my-
element in rot.

/deep/

/deep/
html /deep/ span {
color: red;
}

/deep/
html /deep/ span {
color: red;
}
Färbt alle <span>s des
gesamten Dokuments in rot.

/deep/::shadow

/deep/::shadow
● “Consumer” muss interne Details der Komponenten kennen

/deep/::shadow
Bei Änderungen an der
Komponente, kann die CSS-
Regel evtl. nicht mehr
greifen!

/deep/::shadow
● Schlechte Performance
greifen!

/deep/::shadow
● Schlechte Performance
CSS-Regeln sind nicht mehr nur
auf den Sub-Tree beschränkt
greifen!

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

<dom-module id=”my-notification”>
<template>
<style>
:host {
--my-message-title-color: black;
}
.error {
--my-message-title-color: red;
}
.success {
--my-message-title-color: green;
}
</style>
</template>
<my-message title=”This title is black.” />
<my-message class=”error” title=”This title is red.” />
<my-message class=”success” title=”This title is green.” />
</dom-module>
<dom-module id=”my-message”>
<template>
<style>
.title {
color: var(--my-message-title-color);
}
</style>
</template>
<span class=”title”>{{title}}</span>
</dom-module>

Tooling Ökosystem

● App-Stub
● Element- inkl. Test-Stubs
● GitHub-Pages für Dokumentation
Generatoren
https://github.com/yeoman/generator-polymer

● App-Stub
Generatoren
basiert auf Polymer-
Starter-Kit
# install yeoman polymer generator
npm install -g generator-polymer
# init your app
yo polymer

● App-Stub
Generatoren
Starter-Kit
# init your app
yo polymer
# add a reusable element
yo polymer:seed

Generatoren
● App-Stub
Starter-Kit
Erzeugt statische Doku
auf <user.>.github.io
# init your app
yo polymer
# add a reusable element
yo polymer:seed
# publish on github
yo polymer:gh

Web Component Tester
Others
LOCAL TESTINGREMOTE TESTING
WCT
Automated Cross-Browser Testing
https://github.com/Polymer/web-component-tester

Others
Mocha
Chai
Lodash
Async
Sinon
includes
WCT

Others
includes
WCT
# install web components tester
npm install -g web-component-tester
# run all tests on all installed browsers
wct
Mocha
Chai
Lodash
Async
Sinon

● Black-Box-Tests sind möglich
● BDD (suite/test) + TDD (describe/it)
● Komponente wird “als Ganzes” getestet

Weitere Tools

Weitere Tools
PolyBuild
PolyLint
PolyGit.org
PolyDev Chrome Extension

Weitere Tools
PolyBuild
PolyLint
PolyGit.org
HTML-Imports
kombinieren, JavaScript
minifizieren

Weitere Tools
PolyBuild
PolyLint
PolyGit.org
HTML-Imports
minifizieren
Linter für Polymer

Weitere Tools
PolyBuild
PolyLint
PolyGit.org
HTML-Imports
minifizieren
Linter für Polymer
cdn.rawgit.com-Proxy,
HTML-Imports mit
Versionierung

“Wie groß sollte eine
Komponente sein?”

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

Frameworks
sinnvoll nutzen

● Keine zu großen Komponenten
Frameworks
sinnvoll nutzen

Frameworks
sinnvoll nutzen
Dann nicht mehr
wiederverwendbar

● Neue Komponenten aus vorhandenen aufbauen
Frameworks
sinnvoll nutzen
Dann nicht mehr
wiederverwendbar

● Neue Komponenten aus vorhandenen aufbauen
Frameworks
sinnvoll nutzen
Dann nicht mehr
wiederverwendbar
Gibt’s hierfür bereits ein
brauchbares Element?

“Wie kann ich damit die
Qualität verbessern?”

● 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

“Wo finde ich
Komponenten?”

http://elements.polymer-project.org

“Wie kann ich eine
Komponente verwenden?”

bower install Polymer/paper-button
1 Find/
Install

1
2
Find/
Install
Import

<head>
<link rel=”import” href=”components/paper-button/paper-button.html”>
</head>
1
2
Find/
Install
Import

<head>
</head>
1
3
2
Find/
Install
Import
Use

<body>
<div>
<paper-button raised>BUTTON</paper-button>
</div>
</body>
<head>
</head>
1
3
2
Find/
Install
Import
Use

Browsersupport

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

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

● Standard / nativ implementiert
● Sehr viele Tools
● Komplexität + Styling wird gekapselt
● Interoperabilität mit anderen Frameworks
● Einfach testbar
Zusammenfassung

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
patrick.hillert@inovex.de
github.com/silentHoo
twitter.com/silentHoo
slideshare.net/PatrickHillert

Quellenverzeichnis / Rechtliches
Die Quellen finden sich jeweils direkt an der entsprechenden Stelle des zitierten Werkes. / 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

Focus on Quality - Bessere Webfrontends durch Web Components

Weitere ähnliche Inhalte

Andere mochten auch

Ähnlich wie Focus on Quality - Bessere Webfrontends durch Web Components

Focus on Quality - Bessere Webfrontends durch Web Components