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

Web Components& Polymer 1.0

By markuskramer

Web Components& Polymer 1.0

  • 345
Loading comments...

More from markuskramer