Web Components

Oliver Hader
30.06.2015
Open Web User Group Oberfranken
Web Components
LEGO Advent

Calendar 2006

by Jay ...
Open Web User Group Oberfranken
Web Components
Überblick
Web Component Grundlagen
Frameworks & Libraries
Web Components Be...
Open Web User Group Oberfranken
Web Components
Ziele
bessere Semantik & ersichtliche Bedeutung
produktivere Entwicklung & ...
Open Web User Group Oberfranken
Web Components
Grundlagen
HTML5 Standards
Templates
HTML Imports
Custom Elements
Shadow DO...
Open Web User Group Oberfranken
Web Components
Custom Elements
<DIV> Elemente mit CSS Klassen nicht semantisch
jQuery Plug...
Open Web User Group Oberfranken
Web Components
Templates
Vorlage zur Wiederverwendung, aber nicht ausführen
erst anwenden,...
Open Web User Group Oberfranken
Web Components
Shadow DOM
DOM & CSS Scoping & geschützter Bereich
Auswirkungen sind abgegr...
Open Web User Group Oberfranken
Web Components
HTML Imports
Bündelung & Handhabung von Abhängigkeiten
Bedingung für Wieder...
Open Web User Group Oberfranken
Web Components
Components Repositories
Verwendung via Bower
Download / Git Clone
Versionie...
Open Web User Group Oberfranken
Web Components
Components Repositories
Polymer Catalog
Material Design Elemente
Google Web...
Open Web User Group Oberfranken
Web Components
Frameworks & Libraries
Polymer & Polymer Elements
von Google, aktuell in Ve...
Open Web User Group Oberfranken
Web Components
Beispiel: Google Maps
12
<head>

<link rel="import" href="google-map.html">...
Open Web User Group Oberfranken
Web Components
Beispiel: Local Storage
13
<dom-module id="owug-storage">

<iron-localstora...
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“
„Temp...
Open Web User Group Oberfranken
Web Components
Fazit
Web Components
sind deklarativ und wiederverwertbar
sind kombinierbar...
Open Web User Group Oberfranken
Web Components
Quellen & Links
Grundlagen
Web Components: http://webcomponents.org/
Google...
Open Web User Group Oberfranken
Web Components
Vielen Dank
!
Nächste SlideShare
Wird geladen in …5
×

Web Components

890 Aufrufe

Veröffentlicht am

Kurzer Überblick und Einführung in das Thema HTML5 Web Components im Rahmen eines Vortrags am Institut für Informationssysteme der Hochschule Hof - iisys in Kooperation mit der Open Web User Group Oberfranken und dem IT-Cluster Oberfranken. Vortrag vom 30.06.2015

Veröffentlicht in: Internet
  • Als Erste(r) kommentieren

Web Components

  1. 1. Web Components
 Oliver Hader 30.06.2015 Open Web User Group Oberfranken Web Components LEGO Advent
 Calendar 2006
 by Jay Reed
  2. 2. Open Web User Group Oberfranken Web Components Überblick Web Component Grundlagen Frameworks & Libraries Web Components Beispiele „Gibt’s doch schon!“ 2 ohader
 @ohader
 Oliver_Hader follow me
  3. 3. Open Web User Group Oberfranken Web Components Ziele bessere Semantik & ersichtliche Bedeutung produktivere Entwicklung & Wiederverwertbarkeit 3
  4. 4. Open Web User Group Oberfranken Web Components Grundlagen HTML5 Standards Templates HTML Imports Custom Elements Shadow DOM Polyfills: Zwischenlösung Standardisierung läuft Prolyfills: Zwischenlösung mögliche Standardisierung 4
  5. 5. 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
  6. 6. Open Web User Group Oberfranken Web Components Templates Vorlage 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>
  7. 7. Open Web User Group Oberfranken Web Components Shadow DOM DOM & 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>
  8. 8. Open Web User Group Oberfranken Web Components HTML Imports Bü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>
  9. 9. Open Web User Group Oberfranken Web Components Components Repositories Verwendung 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
  10. 10. Open Web User Group Oberfranken Web Components Components Repositories Polymer Catalog Material Design Elemente Google Web Components Animationen & Effekte Offline, Push (HTML5) 10
  11. 11. Open Web User Group Oberfranken Web Components Frameworks & Libraries Polymer & 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
  12. 12. 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>

  13. 13. 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>
  14. 14. Open Web User Group Oberfranken Web Components Chrome DevTools 14
  15. 15. 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
  16. 16. Open Web User Group Oberfranken Web Components Fazit Web 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
  17. 17. Open Web User Group Oberfranken Web Components Quellen & Links Grundlagen 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
  18. 18. Open Web User Group Oberfranken Web Components Vielen Dank !

×