OPTEN, das einzige Umbraco-zertifizierte Unternehmen der Schweiz

Web Components

Web Components ist ein neuer Trend in der Web Entwicklung, welcher momentan noch vom W3C standardisiert wird. Einfach ausgedrückt sind Web Components neue HTML-Elemente, die jeder selbst definieren und anderen zur Verfügung stellen kann. Meiner Meinung nach werden Web Components in der Zukunft der Webentwicklung eine wichtige Rolle spielen. Deshalb möchte ich mich in diesem Blogbeitrag ein wenig mit Web Components auseinandersetzen.

Für Web Components werden verschiedene neue Techniken benötigt. Zu diesen Techniken gehören:

HTML Imports
Hierbei geht es um HTML-Code, welcher über ein Import Statement im Head einer anderen HTML Datei eingebunden werden kann. So kann z.B. ein HTML Code Schnipsel in mehreren Dateien wiederverwendet werden.

Custom Elements
Mit Custom Elements können neue HTML Tags definiert werden. Beispielswiese ein neuer Tag namens <google-maps></google-maps>. Custom Elements enthalten nicht nur eine HTML Struktur, sondern auch CSS und JavaScript für die Gestaltung und Funktionalität dieser Struktur.

Shadow DOM
Mit dem Shadow DOM können versteckte DOM Bäume angelegt werden. So wird zum Beispiel eine Kapselung eines Custom Elements zum restlichen DOM erreicht.

Bis Web Components vom W3C vollständig standardisiert und auch von den Browsern richtig umgesetzt werden, kann noch einige Zeit vergehen. Deshalb hat Google mit dem Polymer Projekt eine JavaScript Library vorgestellt, die uns die Web Components Features schon heute in den modernsten Browsern simuliert.

Polymer installieren

Der einfachste Weg, um Polymer zu installieren, ist mit dem Packet Manager Bower. Bower ist ein Node.js Module und kann mit dem Node Package Manager mit folgendem Befehl global installiert werden:

Npm install –g bower

Danach gibt man in einem neu angelegten Ordner den folgenden Befehl ein um Bower in diesem Ordner zu initialisieren:

Bower init

Jetzt müssen die Polymer Core Komponenten Installiert werden:

bower install --save Polymer/platform
bower install --save Polymer/polymer

Polymer bietet eine Vielzahl von vordefinierten Komponenten an. Diese können einzeln oder als Packet installiert werden. Um alles zu installieren führt man einfach folgenden Befehl aus:

bower install –save Polymer/core-elements
bower install –save Polymer/polymer-ui-elements

Im Projektordner hat Bower nun einen Ordner namens bower_components erstellt. In diesem sind alle angegebenen Elemente von Polymer gespeichert.

Unser erstes Polymer Element
Um unser eigenes Polymer Element zu entwickeln erstellen wir eine Datei mit dem Namen lorem.html.

In dieser Datei müssen wir zuerst den Polymer Core per HTML Import einbinden. Den Core finden wir in der vom Bower heruntergeladenen Datei polymer.html im Ordner Polymer.

<link rel="import" href="../bower_components/polymer/polymer.html">

Als nächstes definieren wir ein neues Polymer Element mit dem <polymer-element> Custom Element Tag.

<polymer-element name=“lorem-ipsum“></polymer-element>

In das Attribut Name schreiben wir den Namen unseres neuen HTML Tags. Dieser Name muss immer ein Bindestrich („-„) enthalten. Im Polymer Element können wir mit dem Template Tag definieren, was für ein HTML Inhalt unser Custom Element hat.

<template>
<p>Lorem Ipsum</p>
</template>

Das war’s! Schon haben wir unser erstes eigenes Polymer Element.
Doch wie brauche ich dieses nun in meinem HTML?

Polymer Elemente einbinden

Unser entwickeltes Polymer Element können wir nun z.B. in einem neuen Polymer Element oder in einer normalen HTML Datei gebrauchen. Ich möchte nun sehen, ob mein Element auch wirklich funktioniert. Dazu erstelle ich ein index.html mit einer normalen HTML Struktur mit Head und Body. Im Head dieser HTML Datei binde ich als erstes die JavaScript Datei ein, die es ermöglicht, dass die Funktionalitäten die für Polymer gebraucht werden in Browsern simuliert werden, die dies noch nicht unterstützen.

<script src="bower_components/platform/platform.js"></script>

Ebenfalls im Head der Seite kann nun unser zuvor erstelltes Polymer Element per HTML Import importiert werden.

<link rel="import" href="lorem.html">

Nun können wir unser Polymer Element auf der Seite gebrauchen. Ganz einfach mit einem HTML Tag:

<lorem-ipsum></lorem-ipsum>

Mehr Funktionalität für unser Element

In unserem Polymer Element muss nicht nur HTML Code stehen. Man kann das Element auch mit Scripts und Styles erweitern.

Um das Element mit JavaScript zu erweitern, fügt man einfach ein <script></script> Tag in das <polymer-element></polymer-element> ein. In diesem kann man nun die Funktionalität des Elements programmieren. Dazu muss es aber zuerst registriert werden. Dies geschieht über die Funktion Polymer:

Polymer(‚lorem-ipsum‘, {
// Hier können Funktionen und Variablen definiert werden
});

Ich möchte, dass meinem Element der String „Lorem ipsum“ zur Verfügung steht. Dazu muss ich diesen im JSON Objekt eintragen:

Polymer(‚lorem-ipsum‘, {
lorem: „lorem ipsum“
});

Diesen Wert kann ich nun in meinem Element mit einem „Double Mustache“ ausgeben:

<template>
<p>{{lorem}}</p>
</template>

Nun möchte ich zusätzlich, dass die Anzahl der Absätze definiert werden kann. Dazu definiere ich eine Variable Count mit dem Default Wert von 1:

Polymer(‚lorem-ipsum‘, {
lorem: „lorem ipsum“,
count: 1
});

Wenn ich mein Polymer Element in meinem Index verwende, muss ich die Möglichkeit haben, den Count Wert dort als Attribut mitzugeben. Dazu muss ich dem Tag <polymer-element></polymer-element> ein „attributes“ Attribut angeben:

<polymer-element attributes=“count“>

Wenn ich meinem <lorem-ipsum></lorem-ipsum> Element nun 5 Lorem Absätze geben will, definiere ich das Element folgendermassen:

<lorem-ipsum count=“5“></lorem-ipsum>

Mehr Informationen

In diesem Blogbeitrag habe ich nur die Basics von Web Components und Polymer erklärt. Das ganze Thema ist jedoch noch viel umfassender. Deshalb empfehle ich die Webseite des Polymer Projekts mit man Erklärungen, Guidelines und Tutorials, um das Thema Polymer weiter zu vertiefen.

http://www.polymer-project.org/


kommentieren


1 Kommentar(e):

Webdesign
Januar 27, 2016 07:46

An attractive website is always capable of attracting a greater number of people towards it, and this is inclusive of designing and developing, at the same time. Good web design services are very vital to make an effective web presence. http://ievolution.ch/webdesign/