Web Components und Polymer: Klassen für das Web

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

Agenda<1> Motivation<2> Überblick “Web Components”<3> Was ist Polymer?<4> Status / Ausblick

Ich möchte einen Map-Marker auf einer Google-Karte anzeigen.

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

http://googlewebcomponents.github.io/

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>

Web Components: Überblick

Web ComponentsNur ein Überbegriff

Welche Probleme adressieren Web Components?

http://drbl.in/esYL

UI-Elemente sollten einfach zu erstellen sein!

http://drbl.in/esYL

http://drbl.in/esYL

jQuery Plugin/Bootstrap

Kendo UI

YUI Library

AngularJS

<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

Custom ElementsHTML/DOM Elemente selbst definieren

<paper-tabs selected=“1”>

<paper-tab>Tab 1</paper-tab>



</paper-tabs>

deklarativ, lesbar

“meaningful HTML”

gebräuchlicher Weg, um Elemente zu erweitern → Wiederverwendbarkeit

Custom Elements

“API for the web” → Events, Attribute

TemplatesNative client-seitige Templates

<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 DOMDOM/CSS scoping

<video src=“foo.webm” controls></video>

Shadow DOMbereits seit Jahren eingebaut

<video src=“foo.webm” controls></video>

Shadow DOM

Shadow DOMbereits seit Jahren eingebaut

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>



</div>








John Doe

Manager

Klassisches DOM


</div>



</div>








John Doe

Manager

Eine mögliche View-Variante

Klassisches DOM


</div>



</div>








John Doe

Manager


Klassisches DOM


</div>



</div>




<div>

</div>



John Doe

Manager

Web Component


<content select=”.position”></content>

Klassisches DOM


</div>



</div>




<div>

</div>



John Doe

Manager



Klassisches DOM Web Component


</div>



</div>




<div>

</div>



John Doe

Manager



rearrange + decorate

Klassisches DOM Web Component


Styling

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

HTML Imports#include für das Web

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

Components

<core-icon>

<paper-fab>

<core-drawer-panel>

<core-field>

paper-elements+

core-elements

material design

visual + non-visual

<paper-input floatinglabel

label="Type only numbers... (floating)"

validate="^[0-9]*$"

error="Input is not a number!">

</paper-input>

<paper-checkbox></paper-checkbox>

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+

Mit Web Components arbeiten: 1) Custom Elements

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






});

vanilla


Custom Elements






});

vanilla


Mit Web Components arbeiten: 2) 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

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

Mit Web Components arbeiten: 3) 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

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

Workflow

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

Status und Roadmap: Polymer 0.8+

- 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

Polymer 0.8: Performance

https://blog.polymer-project.org/updates/2015/03/27/why-0.8/

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

Summary

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: [email protected] HillertMail: [email protected]

mailto:[email protected]

mailto:[email protected]

Date post:	17-Jul-2015
Category:	Software
Upload:	inovex-gmbh
View:	97 times
Download:	0 times