Web Components

Eine kurze Einführung

Mai 2014
Simon Heimler
www.fannon.de

Zukunft

Web Components?

(2014)

  • Eine experimentelle Browser-Technologie
  • Fokus: Web Anwendungen
  • Aktuell in aktiver Entwicklung

Wozu Web Components?

  • Eigene (native) HTML Elemente definieren
  • Modulare Entwicklung
  • Abstraktion (versteckt Komplexität)

Wer steckt dahinter?

  • W3C: Editor's Draft
  • Google und Mozilla

Beispiele

Altbekanntes

HTML5 Input Type: Range


            
        

X-Tag: Sparklines


            
        

https://github.com/x-tag/sparkline

Neue Elemente "erfinden"


            
        
Ausgabe

https://github.com/educastellano/qr-code

Responsive Images?

Wird seit Jahren von Webentwicklern gewünscht. Browserhersteller können sich nicht einigen.


                            
                        

http://the-grid.github.io/the-image

Übersicht

Nach den W3C Drafts

5 Kernkomponenten
http://www.w3.org/TR/components-intro/

1. Templates

2. Decorators (Noch keine Spezifikation)

3. Shadow DOM

4. Custom Elements

5. Imports

Templates

The <template> element contains markup intended to be used later.

The content of the <template> element is parsed by the parser, but it is inert: scripts aren't processed, images aren't downloaded, and so on.

The <template> element is not rendered.

Code



        

Decorators

A decorator is something that enhances or overrides the presentation of an existing element.

Decorators, unlike other parts of Web Components, do not have a specification yet.


Überspringen wir!

Custom Elements

Custom elements are new types of DOM elements that can be defined by authors. Unlike decorators, which are stateless and ephemeral, custom elements can encapsulate state and provide script interfaces.



        

Features

  • Eigene Methoden und Eigenschaften
  • Lifecycle Callbacks
    • readyCallback
    • insertedCallback
    • removedCallback

Verwendung

  • Einfach: Markup im HTML
    • HTML ist das API!
  • Advanced: Mit JavaScript: new Element()
  • Erweiterbar: extend

Shadow DOM

Shadow DOM is an adjunct tree of DOM nodes.

These shadow DOM subtrees can be associated with an element, but do not appear as child nodes of the element. Instead the subtrees form their own scope.

Shadow DOM Beispiel
Shadow DOM in den Chrome Entwicklertools
Shadow DOM Beispiel
Jens Ihlenfeld 2013 (http://www.w3.org/TR/components-intro/#custom-element-section)
  • Element hat eigenen JavaScript und CSS Scope!
  • Neue CSS Selektoren: element::shadow h1
  • Kann Black-Box sein, muss aber nicht
  • Komplexeres Thema

Imports

HTML Imports are a way to include and reuse HTML documents in other HTML documents.


			<link rel="import" href="goodies.html">
        
  • Komponente wird als eine HTML Datei importiert
  • Dieses beinhaltet:
    • Templates als HTML
    • JavaScript
    • CSS
    • Weitere Module / Komponenten

Hintergrund

Wie es aktuell läuft

  • Browser Hersteller sind sehr langsam in der Entwicklung neuer Standards
  • Community ist meist schneller und iterativer (jQuery)
  • Die besten Lösungen setzen sich durch

Mit WebComponents

  • Browser Hersteller erlauben Entwickleren tieferen Zugang (low level) zum Browser
  • Webentwickler können Features entwickeln bevor sie von den Browser Herstellern unterstützt werden
  • Browser Hersteller können dann etablierte Standards übernehmen und optimieren

Aussicht

Etablierter Standard

Warten auf...

  • Feste Standard Definition
  • W3C Recommendation
  • Browser Support
Can I use... http://caniuse.com/#search=web%20components

Bis dahin...

  • Abwarten.
  • Bis dahin: Polyfills?
(Google) Polymer: http://www.polymer-project.org
Mozilla X-Tag: http://www.x-tags.org

Fragen?

Quellenverzeichnis

Folien online:
http://fannon.de/p/web-components