mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS...

Web Componentsmit Polymer und AngularJS 1.x

Patrick Hillert, 21. April 2016

+

Patrick HillertM.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://commons.wikimedia.org/wiki/File:Old_timer_structural_worker.jpg

https://commons.wikimedia.org/wiki/File:Old_timer_structural_worker.jpg

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>

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

<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


20162006 2009 2013

2

Plugins


20162006 2009 2013

2

PluginsDirektiven, ...


20162006 2009 2013

2


“Stateful View Components”


20162006 2009 2013

2


“Stateful View Components”

Web Components


20162006 2009 2011 2013

2

W3C Standard


20162006 2009 2011 2013

2

W3C Standard1.5: “module.component”


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





Neue Browser-API: document.registerElement(‘paper-slider’, /* proto */);

Custom Elements





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


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


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 DOMbereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen

<video src="foo.webm" controls></video>



Durch Browsereingefügt




● Kein Ersatz zu <iframe>

● Kein separater JavaScript-Kontext

● Gekapseltes Styling / Markup







Neue Browser-API: var shadow = document.querySelector(‘#myId’).createShadowRoot();

var template = document.querySelector(‘#myIdTemplate’);

var clone = document.importNode(template.content, true);

shadow.appendChild(clone);







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”

Poly

mer

Shad

ow D

OM /

Shad

y DO

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

<body ng-app=”todomvc”> <form> <input placeholder=”What needs to be done?” ng-model=”newTodo” ng-disabled=”saving” autofocus> <vaadin-date-picker ng-model=”newDeadline” value=”2016-04-21” label=”Deadline”> </form> </body></html>

Änderungen/examples/angularjs-polymer/index.html

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



<body ng-app=”todomvc”> <form ng-keypress=”$event.which === 13 && addTodo()”> <input placeholder=”What needs to be done?” ng-model=”newTodo” ng-disabled=”saving” autofocus> <vaadin-date-picker ... poly-bind=”{{ { event: ‘value-changed’, modelValue: ‘value’ } }}” label=”Deadline”> </form> </body></html>

Änderungen: “polyBind”/examples/angularjs-polymer/index.html

angular.module(‘todomvc’) .controller(‘TodoCtrl’, function() { // ... $scope.addTodo = function() { var newTodo = { title: $scope.newTodo.trim(), deadline: moment($scope.newDeadline).toDate(), completed: false }; }; });

TodoCtrl

momentjs


Fälligkeit initial auf “heute” setzen


<body ng-app=”todomvc”> <form ng-keypress=”$event.which === 13 && addTodo()”> <input placeholder=”What needs to be done?” ng-model=”newTodo” ng-disabled=”saving” autofocus> <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> <label ng-dblclick=”editTodo(todo)”>{{todo.title}}</label> <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> <label ng-dblclick=”editTodo(todo)”>{{todo.title}}</label> <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/examples/angularjs-polymer/index.html

// ... var newTodo = { // ... createdAt: new Date() };

TodoCtrl


Lösung: ng-attr-*

... <li ng-repeat=”todo in todos … track by $index” …> ... <div> <label ng-dblclick=”editTodo(todo)”>{{todo.title}}</label> <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”>...


angular.module(‘todomvc’) .controller(‘TodoCtrl’, function() { $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 elementsl10n/i18n

Gute “Community-Elemente” promoten

100% mehr PRs akzeptierenPerformance vorhandener Elemente verbessern

Mehr Feature Opt-InsVererbung bei eigenen “Custom Elements”

Ultimate Polymer CLI

Weitere Ressourcen

Polymer Summit 2015 CodeLab Tutorialshttp://www.code-labs.io/polymer-summit

Web Components “Gold Standard” alias “Best Practices”https://github.com/webcomponents/gold-standard/wiki

Polycastshttps://www.youtube.com/playlist?list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN

Polymer Summit 2015https://www.youtube.com/playlist?list=PLNYkxOF6rcICdISJclfQhj2S8QZGjXV8J

Kontakt

inovex GmbHLudwig-Erhard-Allee 676131 Karlsruhe

Patrick [email protected]

@silentHoo

/silentHoo

/PatrickHillert

mailto:[email protected]

mailto:[email protected]

Quellenverzeichnis / RechtlichesDie 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

mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS...

Documents

Transcript of mit Polymer und AngularJS 1 - inovex GmbH · PDF fileWeb Components mit Polymer und AngularJS...