View
2
Download
0
Category
Preview:
Citation preview
Patrick Hillert, Christian Meder, JAX 2015, 23. April 2015
Slides taken from the Polytechnic event.
Web Components und Polymer: Klassen für das Web
+Christian Meder
Free Software
Linux
Java
Web
Android
CTO@inovex
+Patrick H.
Modern Web-Plattform
Frontend
Web-Softwareentwickler
<style>
#map {
height: 400px;
}
</style>
<div id="map"></div>
<script src=“http://maps.googleapis.com/maps/api/js?callback=mapReady">
</script>
<script>
var marker = null;
function getCurrentLocation(callback) {
navigator.geolocation.watchPosition(callback);
}
function addMarker(opts, info) {
var marker = new google.maps.Marker(opts);
var infoWindow = new google.maps.InfoWindow({content: info});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.open(opts.map, marker);
});
return marker;
}
function mapReady() {
var container = document.querySelector('#map');
var map = new google.maps.Map(container, {
zoom: 14, disableDefaultUI: true
});
getCurrentLocation(function(pos) {
var current = new google.maps.LatLng(pos.coords.latitude,
pos.coords.longitude);
map.setCenter(current);
// Re-position marker or create new one.
if (marker) {
marker.setPosition(map.getCenter());
} else {
marker = addMarker({
position: current, map: map, title: 'Your location'
}, '<b>Your location</b>');
}
});
}
</script>
So viel Code?!
Web Components benutzen
1. FIND
2. IMPORT
3. USE
$ bower install Polymer/paper-button
<body> <div> <paper-button raised>BUTTON</paper-button> </div></body>
<head> <link rel=”import” href=”paper-button.html”></head>
http://drbl.in/esYL
UI-Elemente sollten einfach zu erstellen sein!
<paper-tabs>
<paper-tab>KNOWLEDGE</paper-tab>
<paper-tab>HISTORY</paper-tab>
<paper-tab>FOOD</paper-tab>
</paper-tabs>
Weniger Code. Weniger Verwirrung.Web Components
<paper-tabs selected=“1”>
<paper-tab>Tab 1</paper-tab>
<paper-tab>Tab 2</paper-tab>
<paper-tab>Tab 3</paper-tab>
</paper-tabs>
deklarativ, lesbar
“meaningful HTML”
gebräuchlicher Weg, um Elemente zu erweitern → Wiederverwendbarkeit
Custom Elements
“API for the web” → Events, Attribute
<template>
<div class=“comment”>
<img src=“image.png”>
</div>
<script>...</script>
</template>
Markup beschreibt DOM
content is inaktiv bis clone()
doc fragment → Nicht Teil des DOM- Trees + extrem leichtgewichtig
HTML Templates
nur geparst, nicht gerendert
Shadow DOM
Kein Security-Feature!Es existiert nur ein einziger JavaScript-Kontext.
bereits seit Jahren eingebaut
Shadow DOM
KEIN Security-Feature, weilKEIN separater JavaScript-Kontext!
0..n Shadow DOMs pro Knoten
Nur der zuletzt hinzugefügte ShadowRoot wird gerendert
Gekapseltes Styling
“Klassen für das Web”
<div class=”employee” data-employee-id=”23”>
</div>
Shadow DOMInsertion Points: <content>
<div class=”pic”>
</div>
<div class=”first”>John Doe</div>
<div class=”position”>Manager</div>
<my-fancy-employee employee-id=”23”>
</my-fancy-employee>
<content select=”.pic”></content>
<content select=”.first”></content>
<content select=”.last”></content>
John Doe
Manager
<div class=”employee” data-employee-id=”23”>
</div>
Shadow DOMInsertion Points: <content>
<div class=”pic”>
</div>
<div class=”first”>John Doe</div>
<div class=”position”>Manager</div>
<my-fancy-employee employee-id=”23”>
</my-fancy-employee>
<content select=”.pic”></content>
<content select=”.first”></content>
<content select=”.last”></content>
John Doe
Manager
Klassisches DOM
<div class=”employee” data-employee-id=”23”>
</div>
Shadow DOMInsertion Points: <content>
<div class=”pic”>
</div>
<div class=”first”>John Doe</div>
<div class=”position”>Manager</div>
<my-fancy-employee employee-id=”23”>
</my-fancy-employee>
<content select=”.pic”></content>
<content select=”.first”></content>
<content select=”.last”></content>
John Doe
Manager
Eine mögliche View-Variante
Klassisches DOM
<div class=”employee” data-employee-id=”23”>
</div>
Shadow DOMInsertion Points: <content>
<div class=”pic”>
</div>
<div class=”first”>John Doe</div>
<div class=”position”>Manager</div>
<my-fancy-employee employee-id=”23”>
</my-fancy-employee>
<content select=”.pic”></content>
<content select=”.first”></content>
<content select=”.last”></content>
John Doe
Manager
Eine mögliche View-Variante
Klassisches DOM
<div class=”employee” data-employee-id=”23”>
</div>
Shadow DOMInsertion Points: <content>
<div class=”pic”>
</div>
<div class=”first”>John Doe</div>
<div class=”position”>Manager</div>
<my-fancy-employee employee-id=”23”>
<div>
</div>
</my-fancy-employee>
<content select=”.pic”></content>
John Doe
Manager
Web Component
<content select=”.first”></content>
<content select=”.position”></content>
Klassisches DOM
<div class=”employee” data-employee-id=”23”>
</div>
Shadow DOMInsertion Points: <content>
<div class=”pic”>
</div>
<div class=”first”>John Doe</div>
<div class=”position”>Manager</div>
<my-fancy-employee employee-id=”23”>
<div>
</div>
</my-fancy-employee>
<content select=”.pic”></content>
John Doe
Manager
<content select=”.first”></content>
<content select=”.position”></content>
Klassisches DOM Web Component
<div class=”employee” data-employee-id=”23”>
</div>
Shadow DOMInsertion Points: <content>
<div class=”pic”>
</div>
<div class=”first”>John Doe</div>
<div class=”position”>Manager</div>
<my-fancy-employee employee-id=”23”>
<div>
</div>
</my-fancy-employee>
<content select=”.pic”></content>
John Doe
Manager
<content select=”.first”></content>
<content select=”.position”></content>
rearrange + decorate
Klassisches DOM Web Component
Eine mögliche View-Variante
dringt in den Shadow DOM eines Elements ein
paper-slider::shadow #sliderKnobInner {
background-color: yellow;
}
[CSS-Selector]::shadow
<paper-slider min=“0” max=“100”></paper-slider>
[CSS-Selector] /deep/
dringt in den Shadow DOM aller Elemente ein
Custom ElementsNeue HTML-Elemente definieren und vorhandene verwenden
TemplatesNative Templates direkt im Browser
Shadow DOMScoped CSS, isolierter Markup, KEIN isoliertes JavaScript
HTML ImportsImport von Custom Elements und weiteren Ressourcen
Philosophie
“Everything is an element” (visual + non-visual)
Separation of Concerns
“Composition over inheritance”
Don’t repeat yourself (DRY)
Nur Code schreiben, der einmalig für dieAnwendung ist
Polymer ...
… ist kein Framework!
… ist kein Polyfiller!
… bringt viele nützliche Dinge mit:- erweiterte lifecycle callbacks- data-binding (one+two-way)- declarative event-mapping- property observer- mixins- asynchrone HTML imports- layout attributes (CSS3 flexbox, …)
… bringt higher-level functions on Web Components mit
<paper-input floatinglabel
label="Type only numbers... (floating)"
validate="^[0-9]*$"
error="Input is not a number!">
</paper-input>
Nativ
Pol
ymer
0.5
.4
Polyfillswebcomponents.js
Core
Elemente
Anwendungen Topeka
Polymer UI-Elemente
Polymer Core-Elemente
polymer.jsM
utat
ion
Obs
erve
rs
Poin
ter
Even
ts
Shad
ow D
OM
Cus
tom
El
emen
ts
HTM
L Im
port
s
Wea
kMap
webcomponent.js
Nod
e.bi
nd()
Tem
plat
e-B
indi
ng
Web
Ani
mat
on
Polymer-Architektur
Browser-SupportFrühjahr 2015 (nativ, zum Teil viele Bugs)
MOBILE / TABLETDESKTOP
Templates
HTML Imports
Custom Elements
Shadow DOM
30+ 36+ 37+
4.4+7.1+26+22+ 8+
27+ 4.4.4+
29+ 35+
35+
37+
*
* Chrome for Android / Android Browser
Browser-SupportFrühjahr 2015 (polyfilled)
MOBILE / TABLETDESKTOP
Templates
HTML Imports
Custom Elements
Shadow DOM
*
* Chrome for Android / Android Browser
10+ 10+6+6+
34+ 36+ 37+
4.4+7.1+26+22+ 8+
34+ 4.4.4+
34+ 35+
35+
37+
Custom Elements
polymer<polymer-element name=“my-tabs”> …</polymer-element>
usage<my-tabs>…</my-tabs>
document.createElement(‘my-tabs’);
document.registerElement(‘my-tabs’, {
prototype: Object.create(HTMLElement.prototype)
});
vanilla
Ein neues Element registrieren
Custom Elements
polymer<polymer-element name=“my-tabs”> …</polymer-element>
usage<my-tabs>…</my-tabs>
document.createElement(‘my-tabs’);
document.registerElement(‘my-tabs’, {
prototype: Object.create(HTMLElement.prototype)
});
vanilla
Ein neues Element registrieren
Custom Elements
polymer<polymer-element name=“my-tabs”> …</polymer-element>
usage<my-tabs>…</my-tabs>
document.createElement(‘my-tabs’);
document.registerElement(‘my-tabs’, {
prototype: Object.create(HTMLElement.prototype)
});
vanilla
Ein neues Element registrieren
vanilla
<polymer-element name=“user-list” noscript> <template> <ul> <template repeat=“{{user, i in users}}”> <li>{{user.name}}</li> </template> </ul> </template></polymer-element>
<template> …</template>
polymer
Templates
vanilla
<polymer-element name=“user-list” noscript> <template> <ul> <template repeat=“{{user, i in users}}”> <li>{{user.name}}</li> </template> </ul> </template></polymer-element>
<template> …</template>
polymer
Templates
var shadow = el.createShadowRoot();
shadow.innerHTML = “<style>h2 { color: red; }</style>” +
“<h2>I’m a profile-card</h2>”;
vanilla
<polymer-element name=“profile-card” noscript>
<template>
<link rel=“stylesheet” href=“styles.css”>
<h2>I’m a profile-card</h2>
</template>
</polymer-element>
polymer
Shadow DOM
var shadow = el.createShadowRoot();
shadow.innerHTML = “<style>h2 { color: red; }</style>” +
“<h2>I’m a profile-card</h2>”;
vanilla
<polymer-element name=“profile-card” noscript>
<template>
<link rel=“stylesheet” href=“styles.css”>
<h2>I’m a profile-card</h2>
</template>
</polymer-element>
polymer
Shadow DOM
WorkflowKlassicher Aufbau im Frontend
taskrunnerscaffolding
yo polymer:appyo polymer:el my-app-elementyo polymer:seed my-standalone-elementyo polymer:gh
grunt servegrunt testgrunt build
bower install paper-elements
Bower registry GitHubGit Repo
dependency mgm
t
- Viele Paper-/Core-Elemente fehlen noch- Nur für “early adopters”- Noch keine “Feature-parity” mit 0.5- Shady DOM: leichtgewichtige Alternative zu Shadow DOM- Kleinere payload / schnellerer Startup ggü. 0.5
- Improvements durch...- … Feedback der Community- … Polymer-Team
- In der Pipeline für 1.0/1.1:- Templating-Helper verbessern- Inheritance von eigenen Custom Elements- Benchmarksuite- Cross-Scope-Styling vereinheitlichen
April 0.8-preview
Mitte 2015
??? 0.9
1.0
Auf dem Weg zur “production readyness”
Browser-Core-Team+
W3C Spec-Team
Web-Devs
Standard
Annotations, Data-Binding, Gesture-Events, Scoped Styling für Shady DOM, Helper-Funktionen
Mini
Callbacks, Shadow DOM/Shady DOM-Switch, HTML-Template
Polymer: Lib (Core)
Micro
Attribute, Konstruktor, Vererbung, Mixins, Properties
Polymer 0.8: Überblick
- Best Practices eingeflossen
- Feedback aus der Community
- Experiment ist vorüber
- Vollständiger Rebuild
- API Changes
- Fokus auf Performance
Polyfills: webcomponents-lite.js
Referenzen:
Speakerdeck von http://itshackademic.com/
ListView-Demo: http://github.com/silentHoo/ph-listview
Best Practices:- http://webcomponents.org/articles/web-components-best-practices/
- https://github.com/webcomponents/gold-standard/wiki
- https://github.com/PolymerLabs/polymer-patterns
Vor- / Nachteile
+ Standard+ Wechsel zwischen Projekten
einfacher+ Gekapseltes Styling+ Saubere Trennung des Markups+ Public API+ Ein Import genügt (keine
dependency-Hölle)+ Komponente ist “Black Box”+ Responsiveness kann durch
Komponente selbst umgesetzt werden
+ Sehr guter Tooling-Support
- nativ nur im Chrome- Styling-Agreement legt Entwickler
der Komponente fest- (Noch) kaum 0.8-Elemente
Vielen Dank für Ihre Aufmerksamkeit!
KontaktChristian MederMail: christian.meder@inovex.dePatrick HillertMail: patrick.hillert@inovex.de
Recommended