Web Components mit Polymer und AngularJS 1.x

Web Components
mit Polymer und AngularJS 1.x
Patrick Hillert, 21. April 2016
+

Patrick Hillert
M.Sc. (Informatik)
Web-Softwareentwickler
Modern Web
Neue Web APIs + Tools@silentHoo
/silentHoo
/PatrickHillert

https://www.flickr.com/photos/hades2k/7520172586/
“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.
Agenda
</> Probleme der Webentwicklung
</> Web Components und Polymer
</> Demo: AngularJS trifft auf Web Components
</> Tooling + Roadmap

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.

https://dribbble.com/meidenberg/projects/6336-Me-Dark-UI-kit
Designs in 2016
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

Problem #2:
Interne Implementierung-
details sind sichtbar

Problem #3:
Frontends sind komplex

Wird es durch 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/

Sind Komponenten die
Lösung?

Teile und Herrsche
Komplexität in kleine Häppchen aufteilen
20162006 2009 2013
2

Teile und Herrsche
20162006 2009 2013
2
Plugins

Teile und Herrsche
20162006 2009 2013
2
Plugins
Direktiven, ...

Teile und Herrsche
20162006 2009 2013
2
Plugins
Direktiven, ...
“Stateful View Components”

Teile und Herrsche
20162006 2009 2013
2
Plugins
Direktiven, ...
“Stateful View Components”
Web Components

Teile und Herrsche
20162006 2009 2011 2013
2
W3C Standard

Teile und Herrsche
20162006 2009 2011 2013
2
W3C Standard1.5: “module.component”

Teile und Herrsche
20162006 2009 2011 2013
2
W3C Standard1.5: “module.component”
+ Trennung der Verantwortlichkeit
+ Eine Einheit -> Besser testbar
+ (Wiederverwendbar)

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

“think local”
“keep it simple”

Web Components und
Polymer

“Web Components”
Web Components
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

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

Browsersupport

Browser-Support (nativ)
Frühjahr 2016
seit Version 36+

MOBILE / TABLETDESKTOP
HTML Templates
HTML Imports
Custom Elements
Shadow DOM
*
* Chrome for Android / Android Browser
10+ 10+7+7+
Browser-Support (polyfilled)
Frühjahr 2016
Quelle: polymer-project.org

Custom Elements

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
<paper-slider
</paper-slider>
Neue Browser-API:
document.registerElement(‘paper-slider’, /* proto */);

Custom Elements
<paper-slider
</paper-slider>
Neue Browser-API:
document.registerElement(‘paper-slider’, /* proto */);
NATIVERCODE*
*: Wollen wir nicht von Hand schreiben, Polymer
übernimmt das für uns!

HTML Imports

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

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

HTML Templates
</div>
<script>
// ...
</script>
</template>
Aktivierung durch clone() in JavaScript:
var t = document.querySelector(‘#myTemplate’);
var clone = document.importNode(t.content, true);
document.body.appendChild(clone);
● Beschreibt DOM
clone()
● Leichtgewichtig

HTML Templates
</div>
<script>
// ...
</script>
</template>
Aktivierung durch clone() in JavaScript:
var t = document.querySelector(‘#myTemplate’);
var clone = document.importNode(t.content, true);
document.body.appendChild(clone);
NATIVERCODE*
● Beschreibt DOM
clone()
● Leichtgewichtig

Shadow DOM

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

Shadow DOM
<video
</video>
Durch Browser
eingefügt

Shadow DOM
<video
</video>
Durch Browser
eingefügt
● Kein Ersatz zu <iframe>
● Kein separater JavaScript-Kontext
● Gekapseltes Styling / Markup

Shadow DOM
<video
</video>
Durch Browser
eingefügt
Neue Browser-API:
var shadow = document.querySelector(‘#myId’).createShadowRoot();
var template = document.querySelector(‘#myIdTemplate’);
var clone = document.importNode(template.content, true);
shadow.appendChild(clone);

Shadow DOM
<video
</video>
Durch Browser
eingefügt
Neue Browser-API:
var shadow = document.querySelector(‘#myId’).createShadowRoot();
var template = document.querySelector(‘#myIdTemplate’);
var clone = document.importNode(template.content, true);
shadow.appendChild(clone);
NATIVERCODE*

“Putting it all together”

Polymer
ShadowDOM/ShadyDOM HTML-Template
HTML-Markup
Scripts + Styling
Public Attributes
(Markup)
+
Public Methods
(JavaScript)
custom-element
HTML-Import

<paper-tabs selected="0">
<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab>
</paper-tabs>

<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

Demo

http://todomvc.com/examples/angularjs
Demo

Nur 3 Use Cases
● Hinzufügen

Nur 3 Use Cases
● Hinzufügen
● Bearbeiten

Nur 3 Use Cases
● Hinzufügen
● Bearbeiten
● Abhaken

Los geht’s!
$ git clone git@github.com:tastejs/todomvc.git
copy examples/angularjs → examples/angularjs-polymer

#1: Fälligkeitsdatum
hinzufügen

Download + Import
https://customelements.io/vaadin/vaadin-date-picker/
$ bower install --save vaadin-date-picker
<link rel=”import” href=”bow.../vaadin-date-picker.html”>
<vaadin-date-picker>

Ausgangsbasis
<html>
<head>

</head>
<body ng-app=”todomvc”>
<form>
<input placeholder=”What needs to be done?” ng-model=”newTodo” ng-disabled=”saving” autofocus>
</form>
</body>
</html>
/examples/angularjs-polymer/index.html
https://github.com/silentHoo/todomvc-ngpoly

<html>
<head>
<link rel=”import” href=”bower_components/vaadin-date-picker/vaadin-date-picker.html”>
</head>
<form>
<vaadin-date-picker ng-model=”newDeadline” value=”2016-04-21” label=”Deadline”>
</form>
</body>
</html>
Änderungen
angular.module(‘todomvc’)
.controller(‘TodoCtrl’, function() {
// ...
$scope.newDeadline = new Date();
});
TodoCtrl

Und wie sieht die UI aus?
Flexbox

Problem #1: ngModel funktioniert nicht
● Komponente sendet Event “value-changed”
● Nur mit Eventlistener ist Zugriff möglich:
● Lösung: Direktive, die diese Art der Events handelt und im Model setzt.
addEventListener(‘value-changed’, function() { … })

Lösung: Direktive “polyBind”
/examples/angularjs-polymer/js/directives/polybind.js

<html>
<head>
</head>
<form ng-keypress=”$event.which === 13 && addTodo()”>
<vaadin-date-picker ... poly-bind=”{{ { event: ‘value-changed’, modelValue: ‘value’ } }}” label=”Deadline”>
</form>
</body>
</html>
Änderungen: “polyBind”
// ...
$scope.addTodo = function() {
var newTodo = {
title: $scope.newTodo.trim(),
deadline: moment($scope.newDeadline).toDate(),
completed: false
};
};
});
TodoCtrl
momentjs

Fälligkeit initial auf “heute” setzen
<html>
<head>
</head>
<form ng-keypress=”$event.which === 13 && addTodo()”>
<vaadin-date-picker ... value=”{{ ::newDeadline | amDateFormat: ‘YYYY-MM-DD’ }}” label=”Deadline”>
</form>
</body>
</html>

#2: Fälligkeit in Liste
anzeigen

<li ng-repeat=”todo in todos” …>
<div>
<input type=”checkbox” ng-model=”todo.completed” ng-change=”toggleCompleted(todo)”>
<label ng-dblclick=”editTodo(todo)”>{{todo.title}}</label>
</div>
</li>
<li ng-repeat=”todo in todos” …>
<div>
<input type=”checkbox” ng-model=”todo.completed” ng-change=”toggleCompleted(todo)”>
<div>
<div>
<label>{{ todo.deadline | amDateFormat: ‘MM/DD/YYYY’ }}</label>
</div>
</div>
</div>
</li>

UI mit sichtbarer Deadline

#3: Tooltip um “Created at”
Zeitstempel ergänzen

Download + Import
$ bower install --save PolymerElements/paper-tooltip
<link rel=”import” href=”bow.../paper-tooltip.html”>
<paper-tooltip>
https://elements.polymer-project.org/elements/paper-tooltip

...
<li ng-repeat=”todo in todos … track by $index” …>
...
<div>
<div>
<label id=”todo-tooltip-{{$index}}”>{{ todo.deadline | amDateFormat: ‘MM/DD/YYYY’ }}</label>
<paper-tooltip for=”todo-tooltip-{{$index}}” position=”left” animation-delay=”0”>
Created at {{ todo.createdAt }}
</paper-tooltip>
</div>
</div>
...
</li>
Naiver Ansatz
// ...
var newTodo = {
// ...
createdAt: new Date()
};
TodoCtrl

Lösung: ng-attr-*
...
<li ng-repeat=”todo in todos … track by $index” …>
...
<div>
<div>
<label ng-attr-id=”todo-tooltip-{{$index}}”>{{ todo.deadline | amDateFormat: ‘MM/DD/YYYY’ }}</label>
<paper-tooltip ng-attr-for=”todo-tooltip-{{$index}}” position=”left” animation-delay=”0”>
Created at {{ todo.createdAt }}
</paper-tooltip>
</div>
</div>
...
</li>

UI um Tooltip erweitert

#4: Datepicker
lokalisieren

Verwenden der Objekt-API
https://vaadin.com/docs/-/part/elements/vaadin-date-picker/vaadin-date-picker-features.html

...
<vaadin-date-picker id=”todo-datepicker” ng-model=”newDeadline” value=”2016-04-21” label=”Deadline”>
...
$scope.dateFormat = ‘DD.MM.YYYY’;
var datePicker = CustomElementHelper.getInstance(‘#todo-datepicker’);
datePicker.i18n.formatDate = function(date) {
return moment(date).format($scope.dateFormat);
}
});
TodoCtrl
Verwenden der Objekt-API

Live-Demo

Fazit: Abwägen
● Gibt es eine ausreichende Lösung für das Framework?
○ Lösung bevorzugen, wenn Sie den Funktionsumfang bietet, den man
benötigt. Bessere Integration in Framework.
● Es gibt keine Lösung für Framework aber eine Komponente?
○ Komponente verwenden statt neu entwickeln. Aufwand für
Wrapping/Integration in Framework lohnt sich in jedem Fall.

Tooling + Roadmap

● CLI-Generatoren
● Web Component Tester (Unit Tests)
Tooling
https://github.com/yeoman/generator-polymer

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

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

https://blog.polymer-project.org

Roadmap 2016
2016
Publish Philosophie
Routing
Lazy-loading elements
l10n/i18n
Gute “Community-Elemente” promoten
100% mehr PRs akzeptieren
Performance vorhandener Elemente verbessern
Mehr Feature Opt-Ins
Vererbung bei eigenen “Custom Elements”
Ultimate Polymer CLI

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
inovex GmbH
Ludwig-Erhard-Allee 6
76131 Karlsruhe
Patrick Hillert
patrick.hillert@inovex.de
@silentHoo
/silentHoo
/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

Web Components mit Polymer und AngularJS 1.x

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (19)

Andere mochten auch

Andere mochten auch (6)

Ähnlich wie Web Components mit Polymer und AngularJS 1.x

Ähnlich wie Web Components mit Polymer und AngularJS 1.x (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Web Components mit Polymer und AngularJS 1.x