SlideShare ist ein Scribd-Unternehmen logo
1 von 138
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 …”
http://getbootstrap.com/javascript/#modals
“... and this little script.”
“Isn’t that easy?”
http://getbootstrap.com/javascript/#modals
https://www.flickr.com/photos/122127718@N08/13579450523/
“84 Rusty Color Metal texture - 4”, licensed under CC BY-SA 2.0. Copyright by texturepalace.
Problem #1:
Boilerplate-Code
Kendo UI
Plain HTML
JavaScript
YUI
Template
JavaScript
AngularJS
JavaScript
Template
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
Welches Framework? Mischen möglich?
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
Anforderungen an einen Webentwickler
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
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
Focus on Quality - Bessere Webfrontends durch Web Components
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?
Focus on Quality - Bessere Webfrontends durch Web Components
<google-map latitude="49.0135165" longitude="8.4022463"></google-map>
Focus on Quality - Bessere Webfrontends durch Web Components
Focus on Quality - Bessere Webfrontends durch Web Components
<google-map latitude="49.0135165" longitude="8.4022463">
<google-map-marker
latitude="49.0135165" longitude="8.4022463">
</google-map-marker>
</google-map>
Focus on Quality - Bessere Webfrontends durch Web Components
<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>
<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/
https://www.flickr.com/photos/krossbow/4026537359/
“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.
“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.
“think local”
“divide & conquer”
“keep it simple”
Historie
“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>
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
Shadow DOM
bereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen
<video
src="foo.webm" controls>
</video>
Durch Browser
eingefügt
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”
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
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
Ohne Verwendung von Shadow DOM
div
Ohne Verwendung von Shadow DOM
Container für
Video + Playlistdiv
Ohne Verwendung von Shadow DOM
video
div
Ohne Verwendung von Shadow DOM
div
div
video
Ohne Verwendung von Shadow DOM
divdiv
div
video div
Ohne Verwendung von Shadow DOM
.. ..
..
.. ..
Der Pate
Lorem ipsum dolor sit amet,
ipsum sit orem aleta
Pulp Fiction
Lorem ipsum dolor sit amet,
ipsum sit orem aleta
The Dark KnightLorem ipsum dolor sit amet,
ipsum sit orem aleta
div
video div
divdiv
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
Mit Verwendung von Shadow DOM
div
Mit Verwendung von Shadow DOM
video
div
Mit Verwendung von Shadow DOM
div
my-playlistvideo
Der Pate
Lorem ipsum dolor sit amet,
ipsum sit orem aleta
Pulp Fiction
Lorem ipsum dolor sit amet,
ipsum sit orem aleta
The Dark KnightLorem ipsum dolor sit amet,
ipsum sit orem aleta
Mit Verwendung von Shadow DOM
div
my-playlistvideo
Der Pate
Lorem ipsum dolor sit amet,
ipsum sit orem aleta
Pulp Fiction
Lorem ipsum dolor sit amet,
ipsum sit orem aleta
The Dark KnightLorem ipsum dolor sit amet,
ipsum sit orem aleta
..
.. ..
divdiv
ShadowRoot
ShadowDOMTree
Mit Verwendung von Shadow DOM
div
my-playlistvideo
Der Pate
Lorem ipsum dolor sit amet,
ipsum sit orem aleta
Pulp Fiction
Lorem ipsum dolor sit amet,
ipsum sit orem aleta
The Dark KnightLorem ipsum dolor sit amet,
ipsum sit orem aleta
..
.. ..
divdiv
ShadowRoot
ShadowDOMTree
Neue Browser-API:
var shadowRoot = $(‘my-playlist’).createShadowRoot();
shadowRoot.appendChild($(‘template’).content);
Mit Verwendung von Shadow DOM
div
my-playlistvideo
Der Pate
Lorem ipsum dolor sit amet,
ipsum sit orem aleta
Pulp Fiction
Lorem ipsum dolor sit amet,
ipsum sit orem aleta
The Dark KnightLorem ipsum dolor sit amet,
ipsum sit orem aleta
..
.. ..
divdiv
ShadowRoot
ShadowDOMTree
Max. 1 Shadow-Tree
pro Element
Mit Verwendung von Shadow DOM
div
my-playlistvideo
Der Pate
Lorem ipsum dolor sit amet,
ipsum sit orem aleta
Pulp Fiction
Lorem ipsum dolor sit amet,
ipsum sit orem aleta
The Dark KnightLorem ipsum dolor sit amet,
ipsum sit orem aleta
..
.. ..
divdiv
ShadowRoot
ShadowDOMTree
Max. 1 Shadow-Tree
pro Element
Stylesheet wirkt sich
nur innerhalb dieses
Sub-Trees aus
Mit Verwendung von Shadow DOM
div
my-playlistvideo
Der Pate
Lorem ipsum dolor sit amet,
ipsum sit orem aleta
Pulp Fiction
Lorem ipsum dolor sit amet,
ipsum sit orem aleta
The Dark KnightLorem ipsum dolor sit amet,
ipsum sit orem aleta
..
.. ..
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
● 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>
Einfacher Markup,
kein Boilerplate-Code
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>
“Ripple-Effekt” +
Animationen
Einfacher Markup,
kein Boilerplate-Code
https://www.flickr.com/photos/hades2k/7520172586/
“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.
Und Polymer?
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
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, ...
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, ...
<link rel="import" href=".../polymer.html">
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, ...
<link rel="import" href=".../polymer.html">
<link rel="import" href=".../polymer-mini.html">
ODER
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, ...
<link rel="import" href=".../polymer.html">
<link rel="import" href=".../polymer-mini.html">
ODER
ODER
<link rel="import" href=".../polymer-micro.html">
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, ...
<link rel="import" href=".../polymer.html">
<link rel="import" href=".../polymer-mini.html">
ODER
ODER
<link rel="import" href=".../polymer-micro.html">
“All in”: Für UI-zentrische
Komponenten
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, ...
<link rel="import" href=".../polymer.html">
<link rel="import" href=".../polymer-mini.html">
ODER
ODER
<link rel="import" href=".../polymer-micro.html">
“All in”: Für UI-zentrische
Komponenten
Für Elemente mit
wenig UI-Interaktion
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, ...
<link rel="import" href=".../polymer.html">
<link rel="import" href=".../polymer-mini.html">
ODER
ODER
<link rel="import" href=".../polymer-micro.html">
“All in”: Für UI-zentrische
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
https://www.flickr.com/photos/krossbow/4026537359/
“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.
Styling
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
my-element::shadow span {
color: red;
}
Styling von “außen” / Theming
::shadow
my-element::shadow span {
color: red;
}
Färbt nur die Textfarbe
der <span>s von my-
element in rot.
Styling von “außen” / Theming
/deep/
Styling von “außen” / Theming
/deep/
html /deep/ span {
color: red;
}
Styling von “außen” / Theming
/deep/
html /deep/ span {
color: red;
}
Färbt alle <span>s des
gesamten Dokuments in rot.
Styling von “außen” / Theming
/deep/::shadow
Styling von “außen” / Theming
/deep/::shadow
● “Consumer” muss interne Details der Komponenten kennen
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!
Styling von “außen” / Theming
/deep/::shadow
● “Consumer” muss interne Details der Komponenten kennen
● Schlechte Performance
Bei Änderungen an der
Komponente, kann die CSS-
Regel evtl. nicht mehr
greifen!
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!
Styling von “außen” / Theming
/deep/::shadow
https://www.polymer-project.org/1.0/docs/devguide/styling.html
Styling von “außen” / Theming
<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>
https://www.flickr.com/photos/krossbow/4026537359/
“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.
Tooling Ökosystem
● App-Stub
● Element- inkl. Test-Stubs
● GitHub-Pages für Dokumentation
Generatoren
https://github.com/yeoman/generator-polymer
● App-Stub
● Element- inkl. Test-Stubs
● GitHub-Pages für Dokumentation
Generatoren
basiert auf Polymer-
Starter-Kit
# install yeoman polymer generator
npm install -g generator-polymer
# init your app
yo polymer
https://github.com/yeoman/generator-polymer
● App-Stub
● Element- inkl. Test-Stubs
● GitHub-Pages für Dokumentation
Generatoren
basiert auf Polymer-
Starter-Kit
# install yeoman polymer generator
npm install -g generator-polymer
# init your app
yo polymer
# add a reusable element
yo polymer:seed
https://github.com/yeoman/generator-polymer
Generatoren
● App-Stub
● Element- inkl. Test-Stubs
● GitHub-Pages für Dokumentation
basiert auf Polymer-
Starter-Kit
Erzeugt statische Doku
auf <user.>.github.io
# install yeoman polymer generator
npm install -g generator-polymer
# init your app
yo polymer
# add a reusable element
yo polymer:seed
# publish on github
yo polymer:gh
https://github.com/yeoman/generator-polymer
Web Component Tester
Others
LOCAL TESTINGREMOTE TESTING
WCT
Automated Cross-Browser Testing
https://github.com/Polymer/web-component-tester
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
Others
LOCAL TESTINGREMOTE TESTING
includes
WCT
Automated Cross-Browser Testing
https://github.com/Polymer/web-component-tester
# install web components tester
npm install -g web-component-tester
# run all tests on all installed browsers
wct
Mocha
Chai
Lodash
Async
Sinon
Web Component Tester
https://github.com/Polymer/web-component-tester
● Black-Box-Tests sind möglich
● BDD (suite/test) + TDD (describe/it)
● Komponente wird “als Ganzes” getestet
Web Component Tester
https://www.flickr.com/photos/krossbow/4026537359/
“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.
Weitere Tools
Weitere Tools
PolyBuild
PolyLint
PolyGit.org
PolyDev Chrome Extension
Weitere Tools
PolyBuild
PolyLint
PolyGit.org
PolyDev Chrome Extension
HTML-Imports
kombinieren, JavaScript
minifizieren
Weitere Tools
PolyBuild
PolyLint
PolyGit.org
PolyDev Chrome Extension
HTML-Imports
kombinieren, JavaScript
minifizieren
Linter für Polymer
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
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
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?”
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
● Neue Komponenten aus vorhandenen aufbauen
Frameworks
sinnvoll nutzen
Dann nicht mehr
wiederverwendbar
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?
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?”
● 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
https://www.flickr.com/photos/hades2k/7520172586/
“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.
“Wo finde ich
Komponenten?”
http://elements.polymer-project.org
http://customelements.io
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?”
1 Find/
Install
1 Find/
Install
bower install Polymer/paper-button
1 Find/
Install
bower install Polymer/paper-button
1
2
Find/
Install
Import
<head>
<link rel=”import” href=”components/paper-button/paper-button.html”>
</head>
bower install Polymer/paper-button
1
2
Find/
Install
Import
<head>
<link rel=”import” href=”components/paper-button/paper-button.html”>
</head>
bower install Polymer/paper-button
1
3
2
Find/
Install
Import
Use
<body>
<div>
<paper-button raised>BUTTON</paper-button>
</div>
</body>
<head>
<link rel=”import” href=”components/paper-button/paper-button.html”>
</head>
bower install Polymer/paper-button
1
3
2
Find/
Install
Import
Use
<body>
<div>
<paper-button raised>BUTTON</paper-button>
</div>
</body>
<head>
<link rel=”import” href=”components/paper-button/paper-button.html”>
</head>
bower install Polymer/paper-button
1
3
2
Find/
Install
Import
Use
https://www.flickr.com/photos/krossbow/4026537359/
“Halloween Palette Background set”, licensed under CC BY 2.0. Copyright by F Delventhal.
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
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
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

Más contenido relacionado

Andere mochten auch

Social Media bringt die Bank zurück zum Menschen
Social Media bringt die Bank zurück zum MenschenSocial Media bringt die Bank zurück zum Menschen
Social Media bringt die Bank zurück zum MenschenBoris Janek
 
Standortbestimmung Ernährung - Wo sind wir?
Standortbestimmung Ernährung - Wo sind wir?Standortbestimmung Ernährung - Wo sind wir?
Standortbestimmung Ernährung - Wo sind wir?Christoph Santschi
 
30 Lieder De F. Schubert
30 Lieder De F. Schubert30 Lieder De F. Schubert
30 Lieder De F. SchubertHOME
 
German Basic Intro and Articles
German Basic Intro and ArticlesGerman Basic Intro and Articles
German Basic Intro and ArticlesSiddhant Gautam
 
Making people talkabout...
Making people talkabout...Making people talkabout...
Making people talkabout...ScribbleLive
 
Pemerintah kota makassar
Pemerintah kota makassarPemerintah kota makassar
Pemerintah kota makassarsmpn05makassar
 
Reguläre Ausdrucke (PCRE)
Reguläre Ausdrucke (PCRE)Reguläre Ausdrucke (PCRE)
Reguläre Ausdrucke (PCRE)Dominik Siebel
 
Pemerintah kab. takalar
Pemerintah kab. takalarPemerintah kab. takalar
Pemerintah kab. takalarsmpn05makassar
 
Neuigkeiten aus dem TYPO3-Projekt
Neuigkeiten aus dem TYPO3-ProjektNeuigkeiten aus dem TYPO3-Projekt
Neuigkeiten aus dem TYPO3-ProjektSteffen Gebert
 
Transforming Media 2015 - Bewegtbildvermarktung für journalistische Inhalte
Transforming Media 2015 - Bewegtbildvermarktung für journalistische InhalteTransforming Media 2015 - Bewegtbildvermarktung für journalistische Inhalte
Transforming Media 2015 - Bewegtbildvermarktung für journalistische InhalteLokalrundfunktage
 
Social Media Monitoring mit dem Webboboard
Social Media Monitoring mit dem WebboboardSocial Media Monitoring mit dem Webboboard
Social Media Monitoring mit dem WebboboardTwittwoch e.V.
 
AKADEMIE FÜR FINANZIELLE BILDUNG
AKADEMIE FÜR FINANZIELLE BILDUNGAKADEMIE FÜR FINANZIELLE BILDUNG
AKADEMIE FÜR FINANZIELLE BILDUNGSven Zivanovic
 
Wahlen in Brasilien 2014
Wahlen in Brasilien 2014Wahlen in Brasilien 2014
Wahlen in Brasilien 2014Leo Fried
 

Andere mochten auch (19)

Michaela Holzmann
Michaela HolzmannMichaela Holzmann
Michaela Holzmann
 
Diwali gifts
Diwali giftsDiwali gifts
Diwali gifts
 
Social Media bringt die Bank zurück zum Menschen
Social Media bringt die Bank zurück zum MenschenSocial Media bringt die Bank zurück zum Menschen
Social Media bringt die Bank zurück zum Menschen
 
Standortbestimmung Ernährung - Wo sind wir?
Standortbestimmung Ernährung - Wo sind wir?Standortbestimmung Ernährung - Wo sind wir?
Standortbestimmung Ernährung - Wo sind wir?
 
Joachim Helfer
Joachim HelferJoachim Helfer
Joachim Helfer
 
30 Lieder De F. Schubert
30 Lieder De F. Schubert30 Lieder De F. Schubert
30 Lieder De F. Schubert
 
German Basic Intro and Articles
German Basic Intro and ArticlesGerman Basic Intro and Articles
German Basic Intro and Articles
 
Making people talkabout...
Making people talkabout...Making people talkabout...
Making people talkabout...
 
Pemerintah kota makassar
Pemerintah kota makassarPemerintah kota makassar
Pemerintah kota makassar
 
Reguläre Ausdrucke (PCRE)
Reguläre Ausdrucke (PCRE)Reguläre Ausdrucke (PCRE)
Reguläre Ausdrucke (PCRE)
 
Pemerintah kab. takalar
Pemerintah kab. takalarPemerintah kab. takalar
Pemerintah kab. takalar
 
Dialnet
DialnetDialnet
Dialnet
 
Neuigkeiten aus dem TYPO3-Projekt
Neuigkeiten aus dem TYPO3-ProjektNeuigkeiten aus dem TYPO3-Projekt
Neuigkeiten aus dem TYPO3-Projekt
 
Transforming Media 2015 - Bewegtbildvermarktung für journalistische Inhalte
Transforming Media 2015 - Bewegtbildvermarktung für journalistische InhalteTransforming Media 2015 - Bewegtbildvermarktung für journalistische Inhalte
Transforming Media 2015 - Bewegtbildvermarktung für journalistische Inhalte
 
Social Media Monitoring mit dem Webboboard
Social Media Monitoring mit dem WebboboardSocial Media Monitoring mit dem Webboboard
Social Media Monitoring mit dem Webboboard
 
AKADEMIE FÜR FINANZIELLE BILDUNG
AKADEMIE FÜR FINANZIELLE BILDUNGAKADEMIE FÜR FINANZIELLE BILDUNG
AKADEMIE FÜR FINANZIELLE BILDUNG
 
OS adv
OS advOS adv
OS adv
 
Dirk Spannaus
Dirk SpannausDirk Spannaus
Dirk Spannaus
 
Wahlen in Brasilien 2014
Wahlen in Brasilien 2014Wahlen in Brasilien 2014
Wahlen in Brasilien 2014
 

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

Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsGregor Biswanger
 
Was nicht passt wird responsive gemacht - Extended Edition
Was nicht passt wird responsive gemacht - Extended EditionWas nicht passt wird responsive gemacht - Extended Edition
Was nicht passt wird responsive gemacht - Extended EditionChristoph Reinartz
 
Performance-Optimierung für WordPress-Websites
Performance-Optimierung für WordPress-WebsitesPerformance-Optimierung für WordPress-Websites
Performance-Optimierung für WordPress-WebsitesAndré Goldmann
 
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)Sven Wolfermann
 
Web Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 TalkWeb Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 TalkFabian Lange
 
Mit jQTouch auf's iPhone & Android
Mit jQTouch auf's iPhone & AndroidMit jQTouch auf's iPhone & Android
Mit jQTouch auf's iPhone & AndroidBjörn Wibben
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Patrick Lauke
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEEBenjamin Schmid
 
Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Martin Kliehm
 
Mobile friendly websites on SMX 2016
Mobile friendly websites on SMX 2016Mobile friendly websites on SMX 2016
Mobile friendly websites on SMX 2016André Goldmann
 
Augmented Reality Workshop
Augmented Reality WorkshopAugmented Reality Workshop
Augmented Reality Workshopargency
 
Frontend-Performance @ IPC
Frontend-Performance @ IPCFrontend-Performance @ IPC
Frontend-Performance @ IPCNico Steiner
 
Frontend-Performance mit PHP
Frontend-Performance mit PHPFrontend-Performance mit PHP
Frontend-Performance mit PHPFrank Kleine
 
Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011Dominik Helleberg
 
Creative Technology: Die digitale Welt als Abenteuerspielplatz
Creative Technology: Die digitale Welt als AbenteuerspielplatzCreative Technology: Die digitale Welt als Abenteuerspielplatz
Creative Technology: Die digitale Welt als AbenteuerspielplatzLasse Lüders
 
Creative Technology: Die digitale Welt als Abenteuerspielplatz
Creative Technology: Die digitale Welt als AbenteuerspielplatzCreative Technology: Die digitale Welt als Abenteuerspielplatz
Creative Technology: Die digitale Welt als Abenteuerspielplatzsinnerschrader
 
Microservices mit Rust
Microservices mit RustMicroservices mit Rust
Microservices mit RustJens Siebert
 

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

Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
 
Was nicht passt wird responsive gemacht - Extended Edition
Was nicht passt wird responsive gemacht - Extended EditionWas nicht passt wird responsive gemacht - Extended Edition
Was nicht passt wird responsive gemacht - Extended Edition
 
Performance-Optimierung für WordPress-Websites
Performance-Optimierung für WordPress-WebsitesPerformance-Optimierung für WordPress-Websites
Performance-Optimierung für WordPress-Websites
 
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
 
Web Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 TalkWeb Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 Talk
 
Mit jQTouch auf's iPhone & Android
Mit jQTouch auf's iPhone & AndroidMit jQTouch auf's iPhone & Android
Mit jQTouch auf's iPhone & Android
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
 
HTML5
HTML5HTML5
HTML5
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
 
Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)
 
Responsive Images
Responsive ImagesResponsive Images
Responsive Images
 
Mobile friendly websites on SMX 2016
Mobile friendly websites on SMX 2016Mobile friendly websites on SMX 2016
Mobile friendly websites on SMX 2016
 
Augmented Reality Workshop
Augmented Reality WorkshopAugmented Reality Workshop
Augmented Reality Workshop
 
Frontend-Performance @ IPC
Frontend-Performance @ IPCFrontend-Performance @ IPC
Frontend-Performance @ IPC
 
Frontend-Performance mit PHP
Frontend-Performance mit PHPFrontend-Performance mit PHP
Frontend-Performance mit PHP
 
Kleiner Blick auf CSS3
Kleiner Blick auf CSS3Kleiner Blick auf CSS3
Kleiner Blick auf CSS3
 
Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011
 
Creative Technology: Die digitale Welt als Abenteuerspielplatz
Creative Technology: Die digitale Welt als AbenteuerspielplatzCreative Technology: Die digitale Welt als Abenteuerspielplatz
Creative Technology: Die digitale Welt als Abenteuerspielplatz
 
Creative Technology: Die digitale Welt als Abenteuerspielplatz
Creative Technology: Die digitale Welt als AbenteuerspielplatzCreative Technology: Die digitale Welt als Abenteuerspielplatz
Creative Technology: Die digitale Welt als Abenteuerspielplatz
 
Microservices mit Rust
Microservices mit RustMicroservices mit Rust
Microservices mit Rust
 

Focus on Quality - Bessere Webfrontends durch Web Components