Web Components

696 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
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
696
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
3
Aktionen
Geteilt
0
Downloads
6
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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 !

×