Focus on Quality - Bessere Webfrontends durch Web Components

Focus on QualityBessere Webfrontends durch Web Components

Patrick Hillert, 03. November 2015

Patrick HillertM.Sc. (Informatik)

Web-Softwareentwickler

Modern Web

Neue Web APIs + Tools

“Full-Stack”

@silentHoo

/silentHoo

https://www.flickr.com/photos/hades2k/7520172586/“Blue wall wallpaper”, licensed under CC BY-SA 2.0. Copyright by Hades2k.

Agenda

</> Überblick

</> Web Components und Polymer

</> Ökosystem

</> Fazit

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

Entwicklungen im Web heute

Spec-Developers

Comm-unities

Web-Developers

HTMLWeb-APIs

CSSJavaScript

jQueryAngularJSEmberJSBootstrap

FreelancerCompanies

https://dribbble.com/meidenberg/projects/6336-Me-Dark-UI-kit

Designs in 2015 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

Kendo UI

Plain HTML

JavaScript

YUI

Template

JavaScript

AngularJS

JavaScript

Template


Problem #2:Unterschiedliche Frameworks,unterschiedliche Lösungswege

Welches Framework? Mischen möglich?


Problem #3:“Lock-In” vs. Komplexität

Anforderungen an einen Webentwickler


Problem #4:Frontends sind komplex


Problem #4:Frontends sind komplexsehr komplex


Problem #4:Frontends sind komplexsehr komplexrichtig komplex

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

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


“keep it simple”


“divide & conquer”



“think local”

“divide & conquer”


Historie

“Web Components”umfassen mehrere einzelne Spezifikationen

Web Components

Decorators 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

Custom Elements

● Semantische Information

● “Klassen für das Web”

● Wiederverwendbar

Custom Elements

● Semantische Information

● “Klassen für das Web”

● Wiederverwendbar

Neue Browser-API:

HTML Imports

HTML Templates

● Beschreibt DOM

● Bleibt inaktiv, bis clone()

● Leichtgewichtig

Shadow DOMbereits seit Jahren in Browsern integriert, um Komplexität beherrschbar zu machen




Durch Browsereingefügt


Durch Browsereingefügt


“Ich möchte einen Videoplayer mit einer

Playlist”

Videoplayer mit Playlist

Der PateLorem ipsum dolor sit amet, ipsum sit orem aleta

Pulp FictionLorem ipsum dolor sit amet, ipsum sit orem aleta

The Dark KnightLorem ipsum dolor sit amet, ipsum sit orem aleta


Ohne Verwendung von Shadow DOM


div

Ohne Verwendung von Shadow DOMContainer für

Video + Playlistdiv


video

div


div

div

video


divdiv

div

video div


.. ..

..

.. ..




div

video div

divdiv


Mit Verwendung von Shadow DOM


div


video

div


div

my-playlistvideo





div

my-playlistvideo




..

.. ..

divdiv

ShadowRootS

hado

w D

OM

Tre

e


div

my-playlistvideo




..

.. ..

divdiv

ShadowRootS

hado

w D

OM

Tre

eNeue Browser-API:


div

my-playlistvideo




..

.. ..

divdiv

ShadowRootS

hado

w D

OM

Tre

e

Max. 1 Shadow-Tree pro Element


div

my-playlistvideo




..

.. ..

divdiv

ShadowRootS

hado

w D

OM

Tre

e


Stylesheet wirkt sich nur innerhalb dieses

Sub-Trees aus


div

my-playlistvideo




..

.. ..

divdiv

ShadowRootS

hado

w D

OM

Tre

e


Stylesheet wirkt sich nur innerhalb dieses

Sub-Trees aus

Events in Shadow Tree “wie gehabt”

Shadow DOM

● Kein Ersatz zu <iframe>

● Kein separater JavaScript-Kontext

● Gekapseltes Styling

Shadow DOM




Einfacher Markup,kein Boilerplate-Code

Shadow DOM




“Ripple-Effekt” +Animationen

Einfacher Markup,kein Boilerplate-Code


Und Polymer?


“The Polymer library is a lightweight sugaring layer on top of the web components

APIs [...]”https://github.com/Polymer/polymer

Polymer: Fakten

● Maintainer: Google● Start der Entwicklung: Oktober 2012, aktuelle Version: 1.2

● Ziele:○ Mobile + Modern Browsers First○ Mehr deklarativ, weniger imperativ○ Tooling Eco-System○ Interoperabilität

Produkte, die Polymer verwenden

YouTube Gaming:http://gaming.youtube.com

Chrome Platform Status:http://chromestatus.com

Google Zeitgeist 2013:http://zeitgeist-globe.appspot.com

Chrome Dev Editor:https://goo.gl/1ixIkA

Polymer: Schichten-AufbauStandard (polymer.html)

Annotations, Data-Binding, Gesture-Events, Scoped Styling, Helper-Funktionen

Mini (polymer-mini.html)

HTML-Template, Callbacks, Shadow DOM, Shady DOM

Polymer “Core” (Basis)

Micro (polymer-micro.html)

Behaviours, Konstruktor, Vererbung, Attributes, Properties, ...















ODER








ODER

ODER








ODER

ODER

“All in”: Für UI-zentrische Komponenten








ODER

ODER


Für Elemente mit wenig UI-Interaktion








ODER

ODER


Für Elemente mit wenig UI-Interaktion

Für Elemente ohne UI-Anteile, rein funktionale

Komponenten

Dateistruktur eines “Polymer-Elements”

<HTML-Imports>

<script>

<dom-module>

<dom-module id=”my-element”>

<template>

<style>

Dateistruktur eines “Polymer-Elements”<dom-module id=”my-element”>

<HTML-Imports>

<template>

<style>

<script>

<dom-module>

Ist selbst ein Custom-Element, das die Polymer-

Library mitbringt

https://www.polymer-project.org/1.0/docs/devguide/feature-overview.html


Styling

Styling von “außen” / Theming


Polymer liefert Shim für diesen Draft


::shadow


::shadow


::shadow Färbt nur die Textfarbe der s von my-

element in rot.


/deep/


/deep/


/deep/Färbt alle s des

gesamten Dokuments in rot.


/deep/::shadow


/deep/::shadow● “Consumer” muss interne Details der Komponenten kennen



Bei Änderungen an der Komponente, kann die CSS-

Regel evtl. nicht mehr greifen!



● Schlechte PerformanceBei Änderungen an der

Komponente, kann die CSS-Regel evtl. nicht mehr

greifen!



● Schlechte Performance

CSS-Regeln sind nicht mehr nur auf den Sub-Tree beschränkt

Bei Änderungen an der Komponente, kann die CSS-

Regel evtl. nicht mehr greifen!


/deep/::shadow

https://www.polymer-project.org/1.0/docs/devguide/styling.html



Tooling Ökosystem

● App-Stub

● Element- inkl. Test-Stubs

● GitHub-Pages für Dokumentation

Generatoren

https://github.com/yeoman/generator-polymer

● App-Stub



Generatoren

basiert auf Polymer-Starter-Kit


● App-Stub



Generatoren



Generatoren

● App-Stub




Erzeugt statische Doku auf <user.>.github.io


Web Component Tester

Others

LOCAL TESTINGREMOTE TESTING

WCT

Automated Cross-Browser Testing

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

Others




Mocha

Chai

Lodash

Async

Sinon

includes

WCT


Others


includes

WCT



Mocha

Chai

Lodash

Async

Sinon



● Black-Box-Tests sind möglich

● BDD ( ) + TDD ( )

● Komponente wird “als Ganzes” getestet



Weitere Tools

Weitere Tools

PolyBuild

PolyLint

PolyGit.org

PolyDev Chrome Extension

Weitere Tools

PolyBuild

PolyLint

PolyGit.org


HTML-Imports kombinieren, JavaScript

minifizieren

Weitere Tools

PolyBuild

PolyLint

PolyGit.org



minifizieren

Linter für Polymer

Weitere Tools

PolyBuild

PolyLint

PolyGit.org



minifizieren

Linter für Polymer

cdn.rawgit.com-Proxy, HTML-Imports mit

Versionierung

Weitere Tools

PolyBuild

PolyLint

PolyGit.org



minifizieren

Linter für Polymer

cdn.rawgit.com-Proxy, HTML-Imports mit

Versionierung


“Wie groß sollte eine Komponente sein?”

Auf die Größe kommt es an

● Nicht nur auf Komponenten setzen



Frameworks sinnvoll nutzen



● Keine zu großen Komponenten






Dann nicht mehr wiederverwendbar




● Neue Komponenten aus vorhandenen aufbauen






● Neue Komponenten aus vorhandenen aufbauen



Gibt’s hierfür bereits ein brauchbares Element?


“Wie kann ich damit die Qualität verbessern?”

● z.B. für Kundenprojekte

○ dadurch inkrementelle Verbesserung der Qualität

○ ständig getestet

○ zentral verwaltet

○ Import in das aktuelle Projekt

Eigener Pool an Komponenten


“Wo finde ich Komponenten?”

http://elements.polymer-project.org

http://customelements.io


“Wie kann ich eine Komponente verwenden?”

1 Find/Install

1 Find/Install

1 Find/Install

1

2

Find/Install

Import

<head> <link rel=”import” href=”components/paper-button/paper-button.html”></head>

1

2

Find/Install

Import


1

3

2

Find/Install

Import

Use

<body> <div> <paper-button raised>BUTTON</paper-button> </div></body>


1

3

2

Find/Install

Import

Use

<body> <div> <paper-button raised>BUTTON</paper-button> </div></body>


1

3

2

Find/Install

Import

Use


Browsersupport

MOBILE / TABLETDESKTOP

HTML Templates

HTML Imports

Custom Elements

Shadow DOM

32+ 36+ 45+

4.4+7.1+26+22+ 8+

23+ 45+

29+ 35+

33+

45+

*

* Chrome for Android / Android Browser

Browser-Support (nativ)Herbst 2015

13+

Quelle: caniuse.com

MOBILE / TABLETDESKTOP

HTML Templates

HTML Imports

Custom Elements

Shadow DOM

*

* Chrome for Android / Android Browser

10+ 10+7+7+

Browser-Support (polyfilled)Herbst 2015

Quelle: caniuse.com


● Standard / nativ implementiert

● Sehr viele Tools

● Komplexität + Styling wird gekapselt

● Interoperabilität mit anderen Frameworks

● Einfach testbar

Zusammenfassung

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

Patrick [email protected]

github.com/silentHootwitter.com/silentHooslideshare.net/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

Date post:	13-Apr-2017
Category:	Software
Upload:	inovex-gmbh
View:	420 times
Download:	0 times