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

Plugins

20162006 2009 2013

PluginsDirektiven, ...

20162006 2009 2013

“Stateful View Components”

20162006 2009 2013

“Stateful View Components”

Web Components

20162006 2009 2011 2013

W3C Standard

20162006 2009 2011 2013

W3C Standard1.5: “module.component”

20162006 2009 2011 2013

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

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

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

● Beschreibt DOM

● Bilder, Skripte bleiben inaktiv bis

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

● 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

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”

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>

“Ripple-Effekt” +Animationen

Einfacher Markup,kein Boilerplate-Code

http://todomvc.com/examples/angularjs

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

<vaadin-date-picker>

Ausgangsbasis

/examples/angularjs-polymer/index.html

https://github.com/silentHoo/todomvc-ngpoly

Ä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

Ä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

#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

<paper-tooltip>

https://elements.polymer-project.org/elements/paper-tooltip

Download + Import

$ bower install --save PolymerElements/paper-tooltip

<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

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

Automated Cross-Browser Testing

https://github.com/Polymer/web-component-tester

https://blog.polymer-project.org

Roadmap 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 Hillertpatrick.hillert@inovex.de

@silentHoo

/silentHoo

/PatrickHillert

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

Advance Polymer Tubing-brochure

POLYMER /MONOMER

Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick

Goldpartner: Veranstalter: Der Werkzeugkasten für Entwickler Ein UI-Framework in AngularJS Timo Korinth.

Smart porous materials - 京都大学...polymers and PCPs. 1.Controlled Radical 2.Fabrications of Functional Polymer Materials 3.Confined Polymer Properties Polymer chemistry in PCPs

In The Name of The Most High Halal Certificate - · PDF fileWeb : E-Mail: ... • Ascorbic Acid E300 • Bell Pepper ... E316 • Silicic Acid E551

Bachelorstudiengang Polymer- und Kolloidchemie …€¦ · Fakultät für Biologie, Chemie und Geowissenschaften Bachelorstudiengang Polymer- und Kolloidchemie Modulhandbuch Stand:

Polymer- Carbon Nanotube- Komposite - jenano.deCNT.pdf · Polymer- Carbon Nanotube- Komposite Lysander Jankowsky (136309) Lysander.jankowsky@uni-jena.de

Responsive Web-Apps mit ASP.NET MVC 5 und AngularJS Der ... · Responsive Web-Apps mit ASP.NET MVC 5 und AngularJS Der richtige Mix Microsofts Web-Framework ASP.NET MVC Version 5

Polymer Slurry _ Bore Piles

Polaritätsuntersuchungen an polymer-modifizierten ... · PDF file2 Bibliographische Beschreibung und Referat Prause, S. Polaritätsuntersuchungen an polymer-modifizierten Oberflächen

Determination of Polymer Content in Polymer Bonded Explosives … · 2017. 1. 23. · 합화약(polymer bonded explosive, PBX)에 함유되어 있는 에 너지 물질 함량을 결정하기

Photoschaltbare, elektrisch leitfähige Polymer ...

Legacy WebApps mit AngularJS pimpen

AngularJS für .NET-Entwickler

"ZenQuery - Enterprise Backend as a Service" - Single Page Applications mit AngularJS und Spring MVC

Assoziative Hydrogele und thermosensitive Polymer ...docserv.uni-duesseldorf.de/servlets/DerivateServlet/Derivate-3694... · Assoziative Hydrogele und thermosensitive Polymer-Einschlussverbindungen

Frontend Entwicklung mit AngularJS · EinführungKonzepteWeb-ServicesLiteraturPraktikum Eigenschaften Paradigmen Objektorientiert Prozedural Funktional Eigenschaften “C-ähnliche”

Calcium Phosphate Polymer hybrid materials - …edoc.unibas.ch/1371/1/2011.08.19_Dissertation_elektronisch.pdfCalcium Phosphate Polymer hybrid materials Inauguraldissertation zur Erlangung

AngularJS mit OAuth 2 und OpenId Connect, w-jax 2015