Oliver Hader, profile picture
Hochgeladen vonOliver Hader
1,289 aufrufe

Web Components

Das Dokument gibt einen Überblick über Web Components, deren Grundlagen und Beispiele, sowie über die verwendeten Frameworks und Bibliotheken. Es werden wichtige Konzepte wie Custom Elements, Shadow DOM und HTML Imports behandelt, die zur Verbesserung der Semantik und Wiederverwendbarkeit in der Webentwicklung beitragen. Abschließend wird auf die Interoperabilität und Produktivität von Web Components hingewiesen, einschließlich deren Integration in Frameworks wie AngularJS.

Präsentation einbetten

Downloaden Sie, um offline zu lesen
Web Components
 Oliver Hader 30.06.2015 Open Web User Group Oberfranken Web Components LEGO Advent
 Calendar 2006
 by Jay Reed
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
Open Web User Group Oberfranken Web Components Ziele bessere Semantik & ersichtliche Bedeutung produktivere Entwicklung & Wiederverwertbarkeit 3
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
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 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>
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>
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>
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
Open Web User Group Oberfranken Web Components Components Repositories Polymer Catalog Material Design Elemente Google Web Components Animationen & Effekte Offline, Push (HTML5) 10
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
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 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
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
Open Web User Group Oberfranken Web Components Vielen Dank !

Weitere ähnliche Inhalte

PDF
Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...
vonOliver Hader
 
PDF
WebGL - 3D im Browser - Erfahrungsbericht mit BabylonJS
vonOliver Hader
 
PPTX
JavaServer Faces 2.2 (Herbstcampus 2013)
vonMichael Kurz
 
PDF
3D - Spiel mit der Technik, Tekom 2016
vonRobert Siegel
 
PDF
Java-Webanwendungen mit Vaadin 8
vongedoplan
 
PDF
GWT – Google Web Toolkit in der Praxis
vonCenarion Information Systems GmbH
 
PDF
GWT: Eintauchen in MVP und Internationalisierung
vonCenarion Information Systems GmbH
 
PDF
MVP mit dem Google Web Toolkit
vonCenarion Information Systems GmbH
 
Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...
vonOliver Hader
 
WebGL - 3D im Browser - Erfahrungsbericht mit BabylonJS
vonOliver Hader
 
JavaServer Faces 2.2 (Herbstcampus 2013)
vonMichael Kurz
 
3D - Spiel mit der Technik, Tekom 2016
vonRobert Siegel
 
Java-Webanwendungen mit Vaadin 8
vongedoplan
 
GWT – Google Web Toolkit in der Praxis
vonCenarion Information Systems GmbH
 
GWT: Eintauchen in MVP und Internationalisierung
vonCenarion Information Systems GmbH
 
MVP mit dem Google Web Toolkit
vonCenarion Information Systems GmbH
 

Was ist angesagt?

PPTX
JSF 2 Kompositkomponenten (JAX 2012)
vonMichael Kurz
 
PDF
Eintauchen in MVP mit GWT
vonCenarion Information Systems GmbH
 
PDF
Grails im Überblick und in der Praxis
vonTobias Kraft
 
PPT
2. Technologie-Tag - Frontend Architektur
vonNico Steiner
 
PPTX
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
vongedoplan
 
PDF
Web-GUIs mit Vaadin
vongedoplan
 
PDF
Kann ich mit Grails Enterprise Applikationen umsetzen?
vonTobias Kraft
 
PDF
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
vonOPEN KNOWLEDGE GmbH
 
PDF
Enterprise 2.0 Portale mit Grails. Geht das?
vonTobias Kraft
 
PDF
MEAN SCS in der Cloud
vonTorsten Fink
 
PPTX
Lean web architecture mit jsf 2.0, cdi & co.
vonadesso AG
 
PDF
Wieviel Client braucht das Web?
vongedoplan
 
KEY
Good by Server... Hello Client!
vonSandro Sonntag
 
PPTX
Go Fullstack: Webanwendungen mit Java EE 6 bauen (W-JAX 2011)
vonMichael Kurz
 
PDF
Restful Frontend-Architecture
vonSandro Sonntag
 
PDF
Automatisierung von Client-seitigen Web-Performance-Optimierungen
vonJakob
 
PDF
Wieviel client braucht das web
vongedoplan
 
PDF
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDI
vonadesso AG
 
PPTX
JSF und JPA effizient kombinieren (W-JAX 2011)
vonMichael Kurz
 
PDF
PHP-Module in statischen Seiten - Architektur-Ansätze
vonRalf Lütke
 
JSF 2 Kompositkomponenten (JAX 2012)
vonMichael Kurz
 
Eintauchen in MVP mit GWT
vonCenarion Information Systems GmbH
 
Grails im Überblick und in der Praxis
vonTobias Kraft
 
2. Technologie-Tag - Frontend Architektur
vonNico Steiner
 
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
vongedoplan
 
Web-GUIs mit Vaadin
vongedoplan
 
Kann ich mit Grails Enterprise Applikationen umsetzen?
vonTobias Kraft
 
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
vonOPEN KNOWLEDGE GmbH
 
Enterprise 2.0 Portale mit Grails. Geht das?
vonTobias Kraft
 
MEAN SCS in der Cloud
vonTorsten Fink
 
Lean web architecture mit jsf 2.0, cdi & co.
vonadesso AG
 
Wieviel Client braucht das Web?
vongedoplan
 
Good by Server... Hello Client!
vonSandro Sonntag
 
Go Fullstack: Webanwendungen mit Java EE 6 bauen (W-JAX 2011)
vonMichael Kurz
 
Restful Frontend-Architecture
vonSandro Sonntag
 
Automatisierung von Client-seitigen Web-Performance-Optimierungen
vonJakob
 
Wieviel client braucht das web
vongedoplan
 
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDI
vonadesso AG
 
JSF und JPA effizient kombinieren (W-JAX 2011)
vonMichael Kurz
 
PHP-Module in statischen Seiten - Architektur-Ansätze
vonRalf Lütke
 

Mehr von Oliver Hader

PDF
T3DD23 Content Security Policy - Concept, Strategies & Pitfalls
vonOliver Hader
 
PDF
SAST für TYPO3 Extensions
vonOliver Hader
 
PDF
Web Application Security Workshop (T3DD19)
vonOliver Hader
 
PDF
Hacking TYPO3 v9 (T3DD19 edition)
vonOliver Hader
 
PDF
Hacking TYPO3 v9
vonOliver Hader
 
PDF
TYPO3camp Munich 2018 - Keynote - "Wo woll'n mer denn hin?"
vonOliver Hader
 
PDF
TYPO3 CMS - Datenmodifikation & Event Sourcing (Masterarbeit)
vonOliver Hader
 
PDF
TYPO3 Event Sourcing
vonOliver Hader
 
PDF
H4CK1N6 - Web Application Security
vonOliver Hader
 
PDF
TYPO3 Backstage Development
vonOliver Hader
 
PDF
Web application security
vonOliver Hader
 
PDF
Contribute to TYPO3 CMS
vonOliver Hader
 
PDF
T3CON13DE - TYPO3 CMS Team
vonOliver Hader
 
PDF
TYPO3camp Regensburg: TYPO3 6.0
vonOliver Hader
 
PDF
TYPO3 Inline Relational Record Editing (IRRE)
vonOliver Hader
 
PDF
TYPO3 4.6 & TYPO3 4.7
vonOliver Hader
 
T3DD23 Content Security Policy - Concept, Strategies & Pitfalls
vonOliver Hader
 
SAST für TYPO3 Extensions
vonOliver Hader
 
Web Application Security Workshop (T3DD19)
vonOliver Hader
 
Hacking TYPO3 v9 (T3DD19 edition)
vonOliver Hader
 
Hacking TYPO3 v9
vonOliver Hader
 
TYPO3camp Munich 2018 - Keynote - "Wo woll'n mer denn hin?"
vonOliver Hader
 
TYPO3 CMS - Datenmodifikation & Event Sourcing (Masterarbeit)
vonOliver Hader
 
TYPO3 Event Sourcing
vonOliver Hader
 
H4CK1N6 - Web Application Security
vonOliver Hader
 
TYPO3 Backstage Development
vonOliver Hader
 
Web application security
vonOliver Hader
 
Contribute to TYPO3 CMS
vonOliver Hader
 
T3CON13DE - TYPO3 CMS Team
vonOliver Hader
 
TYPO3camp Regensburg: TYPO3 6.0
vonOliver Hader
 
TYPO3 Inline Relational Record Editing (IRRE)
vonOliver Hader
 
TYPO3 4.6 & TYPO3 4.7
vonOliver Hader
 

Web Components

  • 1.
    Web Components
 Oliver Hader 30.06.2015 OpenWeb User Group Oberfranken Web Components LEGO Advent
 Calendar 2006
 by Jay Reed
  • 2.
    Open Web UserGroup Oberfranken Web Components Überblick Web Component Grundlagen Frameworks & Libraries Web Components Beispiele „Gibt’s doch schon!“ 2 ohader
 @ohader
 Oliver_Hader follow me
  • 3.
    Open Web UserGroup Oberfranken Web Components Ziele bessere Semantik & ersichtliche Bedeutung produktivere Entwicklung & Wiederverwertbarkeit 3
  • 4.
    Open Web UserGroup 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.
    Open Web UserGroup 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.
    Open Web UserGroup 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.
    Open Web UserGroup 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.
    Open Web UserGroup 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.
    Open Web UserGroup 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.
    Open Web UserGroup Oberfranken Web Components Components Repositories Polymer Catalog Material Design Elemente Google Web Components Animationen & Effekte Offline, Push (HTML5) 10
  • 11.
    Open Web UserGroup 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.
    Open Web UserGroup 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.
    Open Web UserGroup 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.
    Open Web UserGroup Oberfranken Web Components Chrome DevTools 14
  • 15.
    Open Web UserGroup 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.
    Open Web UserGroup 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.
    Open Web UserGroup 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.
    Open Web UserGroup Oberfranken Web Components Vielen Dank !