Web Components

& Polymer 1.0

Web Components

Motivation

Ziel: Entwicklung von

• wiederverwendbaren
• UI-Komponenten
• basierend auf Web-Standards

<CODE/>

https://bitbucket.org/MarkusKramer/polymer-demo

Polymer Layers

Text

Web Components Primitives

• Custom Elements
  • <user-rating></user-rating>
  • Lifecycle callbacks
     
• HTML Templates
  • Markup das zur Laufzeit instaniziert werden kann
  • Zuvor vom Browser ignoriert wird.

Web Components Primitives

• HTML Imports
  • Import von HTML-Fragmenten
  • Resourcen (Bilder) werden relativ zur Komponente gesucht
     
• Shadow DOM
  • Verstecken interner DOM-Strukturen der Komponente
  • Schutz der Umwelt vor CSS der Komponente
  • Schutz der Komponente vor externem CSS

Neues in Polymer 1.0

• Kompletter Rewrite
• Wesentlich verbesserte Performance
• Shady DOM
• CSS Custom Properties
• Neues Layering der Bibliothek
• Element Konfiguration mit Typisierung und mehr

Polymer vs AngularJS

Unterschiede:

• "Polymer is a library, not a framework"
• Fokus auf deklarative & wiederverwendbare Elemente
• Resourcen (Bilder) werden relativ zur Komponente gesucht (Wiederverwendbarkeit!)
• Shadow DOM / CSS Encapsulation
• Scope Isolation / Notifications
• Keine Change Observation per Polling
• Nutzung von W3C Standards ... mehr oder weniger :-)

AngularJS

Polymer

<dom-module name="hello-world">
  <style>
    p {
      color: red;
    }
  </style>

  <template>
    <img src="icon.jpg" />
    <p>[[text]]</p>
  </template>

  <script>
    Polymer({
      is: "hello-world",

      ready: function() {
        this.text = "Hello World"
      }
    })
  </script>
</dom-module>

ngModule.directive('hello-world', [function() {
  return {
    restrict: 'E',
    templateUrl: 'complete/path/to/hello-world.html',
    scope: {
    },
    controller: ['$scope', function($scope) {
      $scope.text = "Hello World"
    }]
  }
}]);

<img src="complete/path/to/icon.jpg" />

<p class="hello-world-paragraph">{{text}}</p>

p.hello-world-paragraph {
  color: red;
}

Component Galleries

• https://elements.polymer-project.org
• https://customelements.io
• http://component.kitchen
• https://mozbrick.github.io

<DEMO/>

Status

• Polymer ist bereit für produktiven Einsatz
• HTML Template bereits Teil von HTML 5
• Custom Elements unstrittig
• Standardisierung von HTML Imports und
  Shadow DOM noch work-in-progress
• Web Components werden vorangetrieben von Google und Mozilla

Danke

mk@markus-kramer.de

http://www.xing.com/profile/Markus_Kramer7