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
- 1,155