web components
TRANSCRIPT
Web ComponentsOliver Hader
30.06.2015
Open Web User Group Oberfranken
Web Components
LEGO AdventCalendar 2006
by Jay Reed
Open Web User Group Oberfranken
Web Components
ÜberblickWeb Component Grundlagen
Frameworks & Libraries
Web Components Beispiele
„Gibt’s doch schon!“
2
ohader
@ohader
Oliver_Hader
follow me
Open Web User Group Oberfranken
Web Components
Zielebessere Semantik & ersichtliche Bedeutung
produktivere Entwicklung & Wiederverwertbarkeit
3
Open Web User Group Oberfranken
Web Components
GrundlagenHTML5 Standards
Templates
HTML Imports
Custom Elements
Shadow DOM
Polyfills: Zwischenlösung
Standardisierung läuft
Prolyfills: Zwischenlösung
mögliche Standardisierung
4
Open Web User Group Oberfranken
Web Components
Custom Elements<DIV> Elemente mit CSS Klassen nicht semantisch
jQuery Plugins funktionieren alle irgendwie unterschiedlich
wir brauchen: mehr Bedeutung & einfache Wiederverwertbarkeit
flexible & individuelle Erweiterung des HTML5 DOM Kontexts
5
<my-slider value="{{value}}"> <my-slider-range min="0" max="500" min-value="75" max-value=„300“/> <my-slider-label> Price range: </my-slider-label> <my-slider-input value="{{value}}"> </my-slider>
Slider Widget
Open Web User Group Oberfranken
Web Components
TemplatesVorlage zur Wiederverwendung, aber nicht ausführen
erst anwenden, wenn es tatsächlich angezeigt wird
DocumentFragment - nicht Teil der Seite
Schutz vor Cross Site Scripting
6
<script type="text/x-handlebars-template"> <div class="info-box"> <h3>{{title}}</h3> <div>{{content}}</div> </div> </script>
var InfoBoxView = Backbone.View.extend({ el: 'div', class: 'info-box', template: '<div>...</div>', render: function() { ... }});
<template> <div class="info-box"> <h3>{{title}}</h3> <div>{{content}}</div> </div> <script></script> </template>
Open Web User Group Oberfranken
Web Components
Shadow DOMDOM & CSS Scoping & geschützter Bereich
Auswirkungen sind abgegrenzt - z.B. auch id-Attribut
Content Insertion Points <content select=…></content>
7
<dom-module id="owug-info-box"> <style> h3 { color: #ccc; } owug-info-box >>> h3 { color: #999; } ::content > p { padding: 1em; } </style> <template> <h3 id="title">{{title}}</h3> <content></content> </template> <script></script> </dom-module>
<owug-info-box title="Headline"> <p>Lorem ipsum...</p> <div> <h3>Some other Headline</h3> </div> </owug-info-box>
Open Web User Group Oberfranken
Web Components
HTML ImportsBündelung & Handhabung von Abhängigkeiten
Bedingung für Wiederverwertbarkeit für Jedermann
asynchron - Skript-Verarbeitung blockiert nicht die Anwendung
8
<head> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap-theme.min.css"> </head>
<head> <link rel="import" href="component/bootstrap.html"> </head>
Open Web User Group Oberfranken
Web Components
Components RepositoriesVerwendung via Bower
Download / Git Clone
Versionierung / Tagging
Auflösen von Abhängigkeiten
CustomElements.io &Component Kitchen
buntes Allerlei
Indikator Favs & Forks
9
bower install --save \ GoogleWebComponents/google-hangout-button#^1.0.0
Open Web User Group Oberfranken
Web Components
Components RepositoriesPolymer Catalog
Material Design Elemente
Google Web Components
Animationen & Effekte
Offline, Push (HTML5)
10
Open Web User Group Oberfranken
Web Components
Frameworks & LibrariesPolymer & Polymer Elements
von Google, aktuell in Version 1.0
Kompatibilität zu Internet Explorer 10
„Zucker für Web Components“
X-Tags & Brick
von Mozilla
Kompatibilität zu Internet Explorer 9
14 leichtgewichtige Web Components
action, appbar, calendar, form, layout, menu, storage-indexdb
11
Open Web User Group Oberfranken
Web Components
Beispiel: Google Maps
12
<head> <link rel="import" href="google-map.html"> </head> <body> <google-map latitude="50.32497" longitude="11.94023" zoom="13"> <google-map-marker latitude="50.32497" longitude="11.94023"> <strong>Hof University</strong> </google-map-marker> <google-map-marker latitude="50.3276403" longitude="11.9200896"> <strong>Theresienstein City Park</strong> </google-map-marker> </google-map> </body>
<google-map latitude="50.32497" longitude="11.94023"></google-map>
Open Web User Group Oberfranken
Web Components
Beispiel: Local Storage
13
<dom-module id="owug-storage"> <iron-localstorage name="owug-some-name" value="{{data}}" on-iron-localstorage-load-empty="initialize"> </iron-localstorage> <input value="{{data.firstName}}" /> <input value="{{data.lastName}}" /></dom-module> <script> Polymer({ is: 'owug-storage', properties: { data: Object }, initialize: function() { this.data = { firstName: 'Oliver', lastName: 'Hader' } } });</script>
Open Web User Group Oberfranken
Web Components
Chrome DevTools
14
Open Web User Group Oberfranken
Web Components
„Gibt’s doch schon!“AngularJS 1.3/1.4 kann das ja auch
„Custom Tags“
„Templates“
„Scoping“
AngularJS 2.0 Roadmap
kompletter Rewrite in TypeScript für ECMAScript 6
bisherige eigene Polyfills werden aufgegeben
basierend auf Web Components Features
Angular Material - 31 Elemente
15
Open Web User Group Oberfranken
Web Components
FazitWeb Components
sind deklarativ und wiederverwertbar
sind kombinierbar und erweiterbar
sind interoperabel - DOM gemeinsamer Nenner
erlauben Kapselung - Scoping
steigern Produktivität & Barrierefreiheit
sind Standard
AngularJS 2.0 mit Web Components
fördern Komponentendenken
16
Open Web User Group Oberfranken
Web Components
Quellen & LinksGrundlagen
Web Components: http://webcomponents.org/
Google/IO 2014 Web Components: https://www.youtube.com/watch?v=8OJ7ih8EE7s
Google/IO 2015 Polymer & Elements: https://www.youtube.com/watch?v=fD2As5RmM8Q
Status Internet Explorer: https://status.modern.ie/?term=web%20components
Frameworks & Libraries
Mozilla X-Tags & Bricks: http://www.x-tags.org/ & https://mozbrick.github.io/
Google Polymer & Elements: https://www.polymer-project.org/ & https://elements.polymer-project.org/
weitere Repositories: https://customelements.io/ & http://component.kitchen/components
Bower Package Management: http://bower.io/#getting-started
Beispiele & Ausblick
T3DD15 Website mit Web Components: https://t3dd15.typo3.org/
Experiment Web Components vs. AngularJS 1.4: https://github.com/ohader/wecan
AngularJS 2.0 Preview: http://ng-learn.org/2014/03/AngularJS-2-Status-Preview/
17
Open Web User Group Oberfranken
Web Components
Vielen Dank!