Kategorien
(Kostenlose) Services Essentials

WebComponents.org: Alles über die Zukunft des Web an einer Stelle

Web Components,ja. Darüber sprechen wir seit Jahren. 2012 mutmaßten wir in einigen Beiträgen die bevorstehende Standardisierung. Tatsächlich ist es auch heute am Tag noch nicht so weit. Es gibt allerdings etliche vielversprechende Ansätze und technische Lösungen. Und anstatt den Entwicklern da draußen weiterhin zuzumuten, sich ihre Informationen an allen Ecken und Enden des Web zusammensuchen zu müssen, entschieden sich einige maßgebliche Mitglieder der Web Components Community, darunter Mitarbeiter von Google und Mozilla, eine zentrale Plattform zu schaffen. Diese zentrale Plattform sollte Grundlagen und Best Practices an einer Stelle zugänglich machen. Jetzt gibt es sie und sie hört auf den Namen WebComponents.Org.

why-we-created-webcomponentsorg

Warum Web Components die Zukunft des Web sind

Sie haben von Web Components noch nichts gehört oder inzwischen schon wieder vergessen, worum es dabei geht? Kein Problem, wir schicken eine ganz kurze Einführung vorweg.

Die Idee der Web Components erwuchs aus der Problematik, auf Websites wirklich echte Anwendungslogik zur Ausführung bringen zu wollen. Solange ein Entwickler die volle Hoheit über das hat, was auf einer Website passiert, ist das mit JavaScript schon länger möglich. Wenn aber mehrere Anwendungshappen, z.B. in Form von Widgets unterschiedlicher Entwickler funktionieren sollen, wird es schwierig.

Denn bislang lässt sich eine Website nicht aus voneinander völlig unabhängigen Modulen zusammenbauen, zumindest nicht ohne das Risiko, dass sich die verschiedenen Codeteile gegenseitig ins Gehege kommen.

So sehen die wichtigsten Bestandteile des Arbeitspapiers zu Web Components die Einführung von HTML Imports, Custom Elements und des Shadow DOM vor. HTML Imports erlauben die Einbindung externen HTMLs, etwa im Header. Custom Elements erlauben die Erstellung eigener Tags in der gleichen Systematik wie native HTML Elemente und das Shadow DOM sorgt dafür, dass Anwendungsbereiche nicht über das DOM sichtbar in den Zugriff genommen werden können.

Um die wichtigsten Teile der geplanten Spezifikation bereits zum jetzigen Zeitpunkt in Betrieb nehmen zu können, entwickelten Teams der den Browsermarkt dominierenden Hersteller Google und Mozilla eigene Lösungen. Die bekanntesten dürften X-Tags von Mozilla und Polymer von Google sein. Beide konzentrieren sich auf Custom Elements.

X-Tags haben wir Ihnen bei Dr. Web bereits in diesem und diesem Beitrag näher vorgestellt. Ebenfalls von Google stammt AngularJS, dass neben den Custom Elements auch Dynamic Views abgebildet werden. AngularJS stellten wir Ihnen in diesem Beitrag vor.

Prinzipiell sind alle Projekte so angelegt, dass sie sich schrittweise selber überflüssig machen. Polymer etwa prüft zur Laufzeit, wieviel Web Component der aufrufende Browser selber schon kann und kümmert sich nur noch um den Rest.

WebComponents.org: Alles zum Thema unter einem Dach

Die neue Website WebComponents.org war zunächst als eine Art Wiki für die Community-Mitglieder geplant, entwickelte sich aber aufgrund des Elans einzelner Mitglieder zu einer schicken Website, die den jeweiligen Diskussions- und Entwicklungsstand des Projekts widerspiegeln soll.

wcorg

Dabei erreicht man von WebComponents.org aus sämtliche in Arbeit befindlichen Standardisierungsvorschläge. Eine Darstellung von Best Practices ermuntert Entwickler, bereits jetzt auf den noch langsam fahrenden Zug aufzuspringen. Eine Reihe von Grundlagenartikeln erklärt praktische Stolperfallen oder zeigt, wie man etwa mit Polymer konkret arbeitet oder Web Components zugänglich gestaltet. Rund 20 Artikel schrieben die Betreiber bereits, jeder verdient es, gelesen zu werden.

In der Sektion Presentations finden sich Slideshows und Videos von Vorträgen rund um Web Components zu verschiedenen Anlässen, etwa der letzten Google I/O. Unter Resources finden sich die teilweise bereits weiter oben genannten Projekte zur Erstellung von Custom Elements. In der Rubrik Sandbox sollen konkrete Vorschläge beschrieben werden. Hier ist noch viel Luft nach oben…

Obschon gerade erst gestartet, ist WebComponents.org bereits jetzt mit so viel Informationen befüllt, dass es einem schwerlich zu schnell langweilig werden dürfte. Wer einen extrem soliden, fundierten Ein- und Aufstieg in das Thema Web Components sucht, der kommt an dieser Plattform nicht vorbei.

Links zum Beitrag

Kategorien
JavaScript & jQuery Programmierung

Jetzt einsatzbereit: Mozillas X-Tags sollen das Web-Development beschleunigen

Vor einem knappen Jahr stellten wir Ihnen an dieser Stelle das Mozilla-Projekt X-Tags vor. X-Tags sollte der Standardisierung vorgreifen und Web Components (teilweise) bereits zum jetzigen Zeitpunkt in modernen Browsern verfügbar machen. Vor zwei Tagen nun war es soweit. Im offiziellen Mozilla-Blog wurde der Startschuss gegeben. Seit unserer ersten Vorstellung hat sich einiges getan im Projekt X-Tags.

x-tag-homepage

X-Tags: Eigene HTML-Elemente definieren

Auf den ersten Blick erscheint X-Tags wie ein weiteres Framework. Alles, was man mit X-Tags erreichen kann, lässt sich auch mit jQuery oder anderen Werkzeugen schaffen. Dennoch ist X-Tags etwas besonderes, denn es setzt direkt auf kommenden Standards auf.

Jeder, der sich intensiver mit Web-Entwicklung beschäftigt, wird schon mal die Begriffe Web Components und Custom Elements als Untermenge gehört haben. Bei den Custom Elements geht es im Wesentlichen darum, im HTML-Markup Elemente zu deklarieren, die bestimmte Funktionalitäten aufweisen, ohne dass es zusätzlichen Codes im Markup bedürfte. Da Custom Elements weder standardisiert, noch implementiert sind, bietet Mozilla mit der X-Tags JavaScript-Bibliothek eine Übergangslösung an.

Diese Übergangslösung greift die Syntax des kommenden Standards auf und macht ihn via JavaScript funktionsfähig. Mit dem erfolgreichen Fortschreiten der Standardisierungsbemühungen wird sich das Projekt so schrittweise obsolet machen.

Ein Beispiel mag verdeutlichen, was X-Tags tut:

modal-demo

Sie sehen ein modales Fenster. Keine große Sache, denken Sie sicher. Grundsätzlich nicht, aber schauen Sie jetzt bitte mal, welches Markup dieses modale Fenster definiert hat:


  

Modal 2 Demo

Hello, I'm an auto-magical modal, how do you do?

Ein Custom Element aus der X-Tags Library zeichnet dafür verantwortlich. Von diesen Elementen gibt es einige. Die sog. X-Registry macht bislang sieben verschiedene Elemente verfügbar. Entwickler sind eingeladen, eigene über die Registry zur Verfügung zu stellen. Jedes Element ist hinsichtlich seiner Funktionalität eine eigene JavaScript-Datei. So wird das Beisteuern neuer Elemente extrem vereinfacht.

Das sog. X-UI Toolkit definiert gängige UI-Elemente vor und sieht derzeit so aus:

x-ui-toolkit

Aufgrund der Umsetzung mit JavaScript lassen sich bereits jetzt eine ganze Reihe von Browsern zuverlässig mit den zukünftigen Fähigkeiten nach W3C-Standard versorgen. Nach Entwicklerangaben läuft X-Tag mit Firefox ab Version 5 (auch mobil), Chrome ab 4, Android ab 2.1, Safari ab 4 (auch mobil), dem IE ab Version 9 und Opera ab 11 (auch mobil).

X-Tags wird bei Mozilla von Daniel Buchner und Arron Schaar entwickelt. Beide sind ebenfalls am Standardisierungsverfahren der W3 Spezifikationen beteiligt.

Links zum Beitrag