18
Web Components Oliver Hader 30.06.2015 Open Web User Group Oberfranken Web Components LEGO Advent Calendar 2006 by Jay Reed
| Date post: | 04-Aug-2015 |
| Category: |
Internet |
| Upload: | oliver-hader |
| View: | 150 times |
| Download: | 0 times |
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!
