SlideShare una empresa de Scribd logo

Web Components

•
•
Oliver Hader
Oliver Hader

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

Internet
1 de 18
Descargar para leer sin conexión
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 !

Recomendados

Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...
Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...
Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...Oliver Hader
 
WebGL - 3D im Browser - Erfahrungsbericht mit BabylonJS
WebGL - 3D im Browser - Erfahrungsbericht mit BabylonJSWebGL - 3D im Browser - Erfahrungsbericht mit BabylonJS
WebGL - 3D im Browser - Erfahrungsbericht mit BabylonJSOliver Hader
 
JavaServer Faces 2.2 (Herbstcampus 2013)
JavaServer Faces 2.2 (Herbstcampus 2013)JavaServer Faces 2.2 (Herbstcampus 2013)
JavaServer Faces 2.2 (Herbstcampus 2013)Michael Kurz
 
3D - Spiel mit der Technik, Tekom 2016
3D - Spiel mit der Technik, Tekom 20163D - Spiel mit der Technik, Tekom 2016
3D - Spiel mit der Technik, Tekom 2016Robert Siegel
 
Java-Webanwendungen mit Vaadin 8
Java-Webanwendungen mit Vaadin 8Java-Webanwendungen mit Vaadin 8
Java-Webanwendungen mit Vaadin 8gedoplan
 
GWT – Google Web Toolkit in der Praxis
GWT – Google Web Toolkit in der PraxisGWT – Google Web Toolkit in der Praxis
GWT – Google Web Toolkit in der PraxisCenarion Information Systems GmbH
 
GWT: Eintauchen in MVP und Internationalisierung
GWT: Eintauchen in MVP und InternationalisierungGWT: Eintauchen in MVP und Internationalisierung
GWT: Eintauchen in MVP und InternationalisierungCenarion Information Systems GmbH
 
MVP mit dem Google Web Toolkit
MVP mit dem Google Web ToolkitMVP mit dem Google Web Toolkit
MVP mit dem Google Web ToolkitCenarion Information Systems GmbH
 

Recomendados

Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...
Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...
Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...Oliver Hader
 
WebGL - 3D im Browser - Erfahrungsbericht mit BabylonJS
WebGL - 3D im Browser - Erfahrungsbericht mit BabylonJSWebGL - 3D im Browser - Erfahrungsbericht mit BabylonJS
WebGL - 3D im Browser - Erfahrungsbericht mit BabylonJSOliver Hader
 
JavaServer Faces 2.2 (Herbstcampus 2013)
JavaServer Faces 2.2 (Herbstcampus 2013)JavaServer Faces 2.2 (Herbstcampus 2013)
JavaServer Faces 2.2 (Herbstcampus 2013)Michael Kurz
 
3D - Spiel mit der Technik, Tekom 2016
3D - Spiel mit der Technik, Tekom 20163D - Spiel mit der Technik, Tekom 2016
3D - Spiel mit der Technik, Tekom 2016Robert Siegel
 
Java-Webanwendungen mit Vaadin 8
Java-Webanwendungen mit Vaadin 8Java-Webanwendungen mit Vaadin 8
Java-Webanwendungen mit Vaadin 8gedoplan
 
GWT – Google Web Toolkit in der Praxis
GWT – Google Web Toolkit in der PraxisGWT – Google Web Toolkit in der Praxis
GWT – Google Web Toolkit in der PraxisCenarion Information Systems GmbH
 
GWT: Eintauchen in MVP und Internationalisierung
GWT: Eintauchen in MVP und InternationalisierungGWT: Eintauchen in MVP und Internationalisierung
GWT: Eintauchen in MVP und InternationalisierungCenarion Information Systems GmbH
 
MVP mit dem Google Web Toolkit
MVP mit dem Google Web ToolkitMVP mit dem Google Web Toolkit
MVP mit dem Google Web ToolkitCenarion Information Systems GmbH
 
JSF 2 Kompositkomponenten (JAX 2012)
JSF 2 Kompositkomponenten (JAX 2012)JSF 2 Kompositkomponenten (JAX 2012)
JSF 2 Kompositkomponenten (JAX 2012)Michael Kurz
 
Eintauchen in MVP mit GWT
Eintauchen in MVP mit GWT Eintauchen in MVP mit GWT
Eintauchen in MVP mit GWT Cenarion Information Systems GmbH
 
Grails im Überblick und in der Praxis
Grails im Überblick und in der PraxisGrails im Überblick und in der Praxis
Grails im Überblick und in der PraxisTobias Kraft
 
2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend ArchitekturNico Steiner
 
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im VergleichWie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleichgedoplan
 
Web-GUIs mit Vaadin
Web-GUIs mit Vaadin Web-GUIs mit Vaadin
Web-GUIs mit Vaadingedoplan
 
Kann ich mit Grails Enterprise Applikationen umsetzen?
Kann ich mit Grails Enterprise Applikationen umsetzen?Kann ich mit Grails Enterprise Applikationen umsetzen?
Kann ich mit Grails Enterprise Applikationen umsetzen?Tobias Kraft
 
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScriptJSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScriptOPEN KNOWLEDGE GmbH
 
Enterprise 2.0 Portale mit Grails. Geht das?
Enterprise 2.0 Portale mit Grails. Geht das?Enterprise 2.0 Portale mit Grails. Geht das?
Enterprise 2.0 Portale mit Grails. Geht das?Tobias Kraft
 
MEAN SCS in der Cloud
MEAN SCS in der CloudMEAN SCS in der Cloud
MEAN SCS in der CloudTorsten Fink
 
Lean web architecture mit jsf 2.0, cdi & co.
Lean web architecture mit jsf 2.0, cdi & co.Lean web architecture mit jsf 2.0, cdi & co.
Lean web architecture mit jsf 2.0, cdi & co.adesso AG
 
Wieviel Client braucht das Web?
Wieviel Client braucht das Web?Wieviel Client braucht das Web?
Wieviel Client braucht das Web?gedoplan
 
Good by Server... Hello Client!
Good by Server... Hello Client!Good by Server... Hello Client!
Good by Server... Hello Client!Sandro Sonntag
 
Go Fullstack: Webanwendungen mit Java EE 6 bauen (W-JAX 2011)
Go Fullstack: Webanwendungen mit Java EE 6 bauen (W-JAX 2011)Go Fullstack: Webanwendungen mit Java EE 6 bauen (W-JAX 2011)
Go Fullstack: Webanwendungen mit Java EE 6 bauen (W-JAX 2011)Michael Kurz
 
Restful Frontend-Architecture
Restful Frontend-ArchitectureRestful Frontend-Architecture
Restful Frontend-ArchitectureSandro Sonntag
 
Automatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-OptimierungenAutomatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-OptimierungenJakob
 
Wieviel client braucht das web
Wieviel client braucht das webWieviel client braucht das web
Wieviel client braucht das webgedoplan
 
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDI
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDISchlanke Webarchitekturen nicht nur mit JSF 2 und CDI
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDIadesso AG
 
JSF und JPA effizient kombinieren (W-JAX 2011)
JSF und JPA effizient kombinieren (W-JAX 2011)JSF und JPA effizient kombinieren (W-JAX 2011)
JSF und JPA effizient kombinieren (W-JAX 2011)Michael Kurz
 
PHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-AnsätzePHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-AnsätzeRalf Lütke
 
Top 10 Internet-Trends
Top 10 Internet-TrendsTop 10 Internet-Trends
Top 10 Internet-TrendsNamics – A Merkle Company
 
Beschleunigen Sie Ihre Web-Entwicklung mit AngularJS Framework
Beschleunigen Sie Ihre Web-Entwicklung mit AngularJS FrameworkBeschleunigen Sie Ihre Web-Entwicklung mit AngularJS Framework
Beschleunigen Sie Ihre Web-Entwicklung mit AngularJS FrameworkDieter Ziegler
 

Más contenido relacionado

La actualidad más candente

JSF 2 Kompositkomponenten (JAX 2012)
JSF 2 Kompositkomponenten (JAX 2012)JSF 2 Kompositkomponenten (JAX 2012)
JSF 2 Kompositkomponenten (JAX 2012)Michael Kurz
 
Grails im Überblick und in der Praxis
Grails im Überblick und in der PraxisGrails im Überblick und in der Praxis
Grails im Überblick und in der PraxisTobias Kraft
 
2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend ArchitekturNico Steiner
 
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im VergleichWie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleichgedoplan
 
Web-GUIs mit Vaadin
Web-GUIs mit Vaadin Web-GUIs mit Vaadin
Web-GUIs mit Vaadingedoplan
 
Kann ich mit Grails Enterprise Applikationen umsetzen?
Kann ich mit Grails Enterprise Applikationen umsetzen?Kann ich mit Grails Enterprise Applikationen umsetzen?
Kann ich mit Grails Enterprise Applikationen umsetzen?Tobias Kraft
 
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScriptJSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScriptOPEN KNOWLEDGE GmbH
 
Enterprise 2.0 Portale mit Grails. Geht das?
Enterprise 2.0 Portale mit Grails. Geht das?Enterprise 2.0 Portale mit Grails. Geht das?
Enterprise 2.0 Portale mit Grails. Geht das?Tobias Kraft
 
MEAN SCS in der Cloud
MEAN SCS in der CloudMEAN SCS in der Cloud
MEAN SCS in der CloudTorsten Fink
 
Lean web architecture mit jsf 2.0, cdi & co.
Lean web architecture mit jsf 2.0, cdi & co.Lean web architecture mit jsf 2.0, cdi & co.
Lean web architecture mit jsf 2.0, cdi & co.adesso AG
 
Wieviel Client braucht das Web?
Wieviel Client braucht das Web?Wieviel Client braucht das Web?
Wieviel Client braucht das Web?gedoplan
 
Good by Server... Hello Client!
Good by Server... Hello Client!Good by Server... Hello Client!
Good by Server... Hello Client!Sandro Sonntag
 
Go Fullstack: Webanwendungen mit Java EE 6 bauen (W-JAX 2011)
Go Fullstack: Webanwendungen mit Java EE 6 bauen (W-JAX 2011)Go Fullstack: Webanwendungen mit Java EE 6 bauen (W-JAX 2011)
Go Fullstack: Webanwendungen mit Java EE 6 bauen (W-JAX 2011)Michael Kurz
 
Restful Frontend-Architecture
Restful Frontend-ArchitectureRestful Frontend-Architecture
Restful Frontend-ArchitectureSandro Sonntag
 
Automatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-OptimierungenAutomatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-OptimierungenJakob
 
Wieviel client braucht das web
Wieviel client braucht das webWieviel client braucht das web
Wieviel client braucht das webgedoplan
 
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDI
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDISchlanke Webarchitekturen nicht nur mit JSF 2 und CDI
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDIadesso AG
 
JSF und JPA effizient kombinieren (W-JAX 2011)
JSF und JPA effizient kombinieren (W-JAX 2011)JSF und JPA effizient kombinieren (W-JAX 2011)
JSF und JPA effizient kombinieren (W-JAX 2011)Michael Kurz
 
PHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-AnsätzePHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-AnsätzeRalf Lütke
 

La actualidad más candente (20)

JSF 2 Kompositkomponenten (JAX 2012)
JSF 2 Kompositkomponenten (JAX 2012)JSF 2 Kompositkomponenten (JAX 2012)
JSF 2 Kompositkomponenten (JAX 2012)
 
Eintauchen in MVP mit GWT
Eintauchen in MVP mit GWT Eintauchen in MVP mit GWT
Eintauchen in MVP mit GWT
 
Grails im Überblick und in der Praxis
Grails im Überblick und in der PraxisGrails im Überblick und in der Praxis
Grails im Überblick und in der Praxis
 
2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur
 
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im VergleichWie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
 
Web-GUIs mit Vaadin
Web-GUIs mit Vaadin Web-GUIs mit Vaadin
Web-GUIs mit Vaadin
 
Kann ich mit Grails Enterprise Applikationen umsetzen?
Kann ich mit Grails Enterprise Applikationen umsetzen?Kann ich mit Grails Enterprise Applikationen umsetzen?
Kann ich mit Grails Enterprise Applikationen umsetzen?
 
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScriptJSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
 
Enterprise 2.0 Portale mit Grails. Geht das?
Enterprise 2.0 Portale mit Grails. Geht das?Enterprise 2.0 Portale mit Grails. Geht das?
Enterprise 2.0 Portale mit Grails. Geht das?
 
MEAN SCS in der Cloud
MEAN SCS in der CloudMEAN SCS in der Cloud
MEAN SCS in der Cloud
 
Lean web architecture mit jsf 2.0, cdi & co.
Lean web architecture mit jsf 2.0, cdi & co.Lean web architecture mit jsf 2.0, cdi & co.
Lean web architecture mit jsf 2.0, cdi & co.
 
Wieviel Client braucht das Web?
Wieviel Client braucht das Web?Wieviel Client braucht das Web?
Wieviel Client braucht das Web?
 
Good by Server... Hello Client!
Good by Server... Hello Client!Good by Server... Hello Client!
Good by Server... Hello Client!
 
Go Fullstack: Webanwendungen mit Java EE 6 bauen (W-JAX 2011)
Go Fullstack: Webanwendungen mit Java EE 6 bauen (W-JAX 2011)Go Fullstack: Webanwendungen mit Java EE 6 bauen (W-JAX 2011)
Go Fullstack: Webanwendungen mit Java EE 6 bauen (W-JAX 2011)
 
Restful Frontend-Architecture
Restful Frontend-ArchitectureRestful Frontend-Architecture
Restful Frontend-Architecture
 
Automatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-OptimierungenAutomatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-Optimierungen
 
Wieviel client braucht das web
Wieviel client braucht das webWieviel client braucht das web
Wieviel client braucht das web
 
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDI
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDISchlanke Webarchitekturen nicht nur mit JSF 2 und CDI
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDI
 
JSF und JPA effizient kombinieren (W-JAX 2011)
JSF und JPA effizient kombinieren (W-JAX 2011)JSF und JPA effizient kombinieren (W-JAX 2011)
JSF und JPA effizient kombinieren (W-JAX 2011)
 
PHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-AnsätzePHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-Ansätze
 

Similar a Web Components

Beschleunigen Sie Ihre Web-Entwicklung mit AngularJS Framework
Beschleunigen Sie Ihre Web-Entwicklung mit AngularJS FrameworkBeschleunigen Sie Ihre Web-Entwicklung mit AngularJS Framework
Beschleunigen Sie Ihre Web-Entwicklung mit AngularJS FrameworkDieter Ziegler
 
jQueryMobile mit Extbase/Fluid
jQueryMobile mit Extbase/FluidjQueryMobile mit Extbase/Fluid
jQueryMobile mit Extbase/FluidPeter Schuhmann
 
Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Martin Kliehm
 
Google - Mobil-First-Index @SEO-Campixx 2018 | Maximilian Bloch
Google - Mobil-First-Index @SEO-Campixx 2018 | Maximilian BlochGoogle - Mobil-First-Index @SEO-Campixx 2018 | Maximilian Bloch
Google - Mobil-First-Index @SEO-Campixx 2018 | Maximilian BlochMaximilian Bloch
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeNico Steiner
 
OnPage SEO - Technik Grundlagen - Danny Linden
OnPage SEO - Technik Grundlagen - Danny LindenOnPage SEO - Technik Grundlagen - Danny Linden
OnPage SEO - Technik Grundlagen - Danny LindenDanny Linden
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEEBenjamin Schmid
 
Google Tools für Fotografen
Google Tools für FotografenGoogle Tools für Fotografen
Google Tools für FotografenPARX
 
Big Data Konnektivität
Big Data KonnektivitätBig Data Konnektivität
Big Data KonnektivitätTrivadis
 
Drupal Austria Roadshow in Klagenfurt
Drupal Austria Roadshow in KlagenfurtDrupal Austria Roadshow in Klagenfurt
Drupal Austria Roadshow in Klagenfurtdasjo
 
Wartbare Oberflächentests mit Open-Source-Software
Wartbare Oberflächentests mit Open-Source-SoftwareWartbare Oberflächentests mit Open-Source-Software
Wartbare Oberflächentests mit Open-Source-SoftwareOliver Libutzki
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009Felix Sasaki
 
SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016André Scharf
 
Christian heilmann html 5 - das web und der browser als platform
Christian heilmann html 5 - das web und der browser als platformChristian heilmann html 5 - das web und der browser als platform
Christian heilmann html 5 - das web und der browser als platformChristian Heilmann
 
DACHNUG50 Miro-v2.pdf
DACHNUG50 Miro-v2.pdfDACHNUG50 Miro-v2.pdf
DACHNUG50 Miro-v2.pdfDNUG e.V.
 
Mobile Apps mit AngularJS und Plain Old HTML5 (Linuxtag 2013, Berlin)
Mobile Apps mit AngularJS und Plain Old HTML5 (Linuxtag 2013, Berlin)Mobile Apps mit AngularJS und Plain Old HTML5 (Linuxtag 2013, Berlin)
Mobile Apps mit AngularJS und Plain Old HTML5 (Linuxtag 2013, Berlin)philippkumar
 

Similar a Web Components (20)

Top 10 Internet-Trends
Top 10 Internet-TrendsTop 10 Internet-Trends
Top 10 Internet-Trends
 
Beschleunigen Sie Ihre Web-Entwicklung mit AngularJS Framework
Beschleunigen Sie Ihre Web-Entwicklung mit AngularJS FrameworkBeschleunigen Sie Ihre Web-Entwicklung mit AngularJS Framework
Beschleunigen Sie Ihre Web-Entwicklung mit AngularJS Framework
 
jQueryMobile mit Extbase/Fluid
jQueryMobile mit Extbase/FluidjQueryMobile mit Extbase/Fluid
jQueryMobile mit Extbase/Fluid
 
Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)
 
Google - Mobil-First-Index @SEO-Campixx 2018 | Maximilian Bloch
Google - Mobil-First-Index @SEO-Campixx 2018 | Maximilian BlochGoogle - Mobil-First-Index @SEO-Campixx 2018 | Maximilian Bloch
Google - Mobil-First-Index @SEO-Campixx 2018 | Maximilian Bloch
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 Bestellsysteme
 
OnPage SEO - Technik Grundlagen - Danny Linden
OnPage SEO - Technik Grundlagen - Danny LindenOnPage SEO - Technik Grundlagen - Danny Linden
OnPage SEO - Technik Grundlagen - Danny Linden
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
 
Google Tools für Fotografen
Google Tools für FotografenGoogle Tools für Fotografen
Google Tools für Fotografen
 
Big Data Konnektivität
Big Data KonnektivitätBig Data Konnektivität
Big Data Konnektivität
 
Drupal Austria Roadshow in Klagenfurt
Drupal Austria Roadshow in KlagenfurtDrupal Austria Roadshow in Klagenfurt
Drupal Austria Roadshow in Klagenfurt
 
Zecplus de 2020_07_27
Zecplus de 2020_07_27Zecplus de 2020_07_27
Zecplus de 2020_07_27
 
Workshop Vue js
Workshop Vue jsWorkshop Vue js
Workshop Vue js
 
Wartbare Oberflächentests mit Open-Source-Software
Wartbare Oberflächentests mit Open-Source-SoftwareWartbare Oberflächentests mit Open-Source-Software
Wartbare Oberflächentests mit Open-Source-Software
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
 
SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016
 
Christian heilmann html 5 - das web und der browser als platform
Christian heilmann html 5 - das web und der browser als platformChristian heilmann html 5 - das web und der browser als platform
Christian heilmann html 5 - das web und der browser als platform
 
Responsive Images
Responsive ImagesResponsive Images
Responsive Images
 
DACHNUG50 Miro-v2.pdf
DACHNUG50 Miro-v2.pdfDACHNUG50 Miro-v2.pdf
DACHNUG50 Miro-v2.pdf
 
Mobile Apps mit AngularJS und Plain Old HTML5 (Linuxtag 2013, Berlin)
Mobile Apps mit AngularJS und Plain Old HTML5 (Linuxtag 2013, Berlin)Mobile Apps mit AngularJS und Plain Old HTML5 (Linuxtag 2013, Berlin)
Mobile Apps mit AngularJS und Plain Old HTML5 (Linuxtag 2013, Berlin)
 

Más de Oliver Hader

T3DD23 Content Security Policy - Concept, Strategies & Pitfalls
T3DD23 Content Security Policy - Concept, Strategies & PitfallsT3DD23 Content Security Policy - Concept, Strategies & Pitfalls
T3DD23 Content Security Policy - Concept, Strategies & PitfallsOliver Hader
 
SAST für TYPO3 Extensions
SAST für TYPO3 ExtensionsSAST für TYPO3 Extensions
SAST für TYPO3 ExtensionsOliver Hader
 
Web Application Security Workshop (T3DD19)
Web Application Security Workshop (T3DD19)Web Application Security Workshop (T3DD19)
Web Application Security Workshop (T3DD19)Oliver Hader
 
Hacking TYPO3 v9 (T3DD19 edition)
Hacking TYPO3 v9 (T3DD19 edition)Hacking TYPO3 v9 (T3DD19 edition)
Hacking TYPO3 v9 (T3DD19 edition)Oliver Hader
 
TYPO3camp Munich 2018 - Keynote - "Wo woll'n mer denn hin?"
TYPO3camp Munich 2018 - Keynote - "Wo woll'n mer denn hin?"TYPO3camp Munich 2018 - Keynote - "Wo woll'n mer denn hin?"
TYPO3camp Munich 2018 - Keynote - "Wo woll'n mer denn hin?"Oliver Hader
 
TYPO3 CMS - Datenmodifikation & Event Sourcing (Masterarbeit)
TYPO3 CMS - Datenmodifikation & Event Sourcing (Masterarbeit)TYPO3 CMS - Datenmodifikation & Event Sourcing (Masterarbeit)
TYPO3 CMS - Datenmodifikation & Event Sourcing (Masterarbeit)Oliver Hader
 
TYPO3 Event Sourcing
TYPO3 Event SourcingTYPO3 Event Sourcing
TYPO3 Event SourcingOliver Hader
 
H4CK1N6 - Web Application Security
H4CK1N6 - Web Application SecurityH4CK1N6 - Web Application Security
H4CK1N6 - Web Application SecurityOliver Hader
 
TYPO3 Backstage Development
TYPO3 Backstage DevelopmentTYPO3 Backstage Development
TYPO3 Backstage DevelopmentOliver Hader
 
Web application security
Web application securityWeb application security
Web application securityOliver Hader
 
Contribute to TYPO3 CMS
Contribute to TYPO3 CMSContribute to TYPO3 CMS
Contribute to TYPO3 CMSOliver Hader
 
T3CON13DE - TYPO3 CMS Team
T3CON13DE - TYPO3 CMS TeamT3CON13DE - TYPO3 CMS Team
T3CON13DE - TYPO3 CMS TeamOliver Hader
 
TYPO3camp Regensburg: TYPO3 6.0
TYPO3camp Regensburg: TYPO3 6.0TYPO3camp Regensburg: TYPO3 6.0
TYPO3camp Regensburg: TYPO3 6.0Oliver Hader
 
TYPO3 Inline Relational Record Editing (IRRE)
TYPO3 Inline Relational Record Editing (IRRE)TYPO3 Inline Relational Record Editing (IRRE)
TYPO3 Inline Relational Record Editing (IRRE)Oliver Hader
 
TYPO3 4.6 & TYPO3 4.7
TYPO3 4.6 & TYPO3 4.7TYPO3 4.6 & TYPO3 4.7
TYPO3 4.6 & TYPO3 4.7Oliver Hader
 

Más de Oliver Hader (16)

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

Web Components

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