SlideShare ist ein Scribd-Unternehmen logo
1 von 18
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

Was ist angesagt?

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
 

Was ist angesagt? (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
 

Ähnlich wie 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
 

Ähnlich wie 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)
 

Mehr von 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
 

Mehr von 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 !