© Excellent backgrounds/Shutterstock.com
Java Magazin
Erstellung und Veröffentlichung einer eigenen Webkomponente

Von Kompositionen und Arrangements

So wie in der Musik die Komposition die Zusammenstellung eines Musikstücks aus einzelnen, bereits vorhandenen Bestandteilen wie Noten und Melodien beschreibt, so wird auch bei Web Components die Verwendung vorhandener HTML-Elemente und weiterer Komponenten als Komposition bezeichnet. Ein Arrangement hingegen bezeichnet eine abgewandelte Version eines Musikstücks, das neue Gestaltungsmittel hinzufügt oder bestehende verändert. Durch die Vererbungskonzepte, die Custom Elements mit sich bringen, könnte man im Falle der Web Components so auch von Arrangements der Elemente sprechen.

Patrick Hillert


In diesem Artikel wird von Grund auf gezeigt, wie eine Webkomponente mit Polymer 0.5 erstellt wird, welche Aufgaben durch Tools automatisiert werden können und welche Hilfsfunktionen Polymer bereitstellt, um die Webkomponente übersichtlich zu strukturieren. Die Erstellung der Dokumentation, einer Livedemo und einiger Tests runden die Webkomponente ab. Abschließend wird die fertige Komponente auf den zwei populären Verzeichnisseiten für Web Components veröffentlicht. Dieser Artikel bezieht sich auf Polymer in der Version 0.5, da Version 0.8 zum Zeitpunkt der Erstellung des Artikels erst in einer allerersten Variante vorliegt. Ein weiterer Artikel wird sich mit dem Übergang auf 0.8 und die zukünftige Roadmap für Web Components beschäftigen.

Von Action Sheets bis Web Components

Vor über zwanzig Jahren entstand das Web zum Austausch von wissenschaftlichen Dokumenten. Erst durch die Entwicklung von JavaScript sind einfache, aber interaktive Webseiten und kleinere Webanwendungen möglich geworden. Die Anforderungen haben sich seither drastisch verändert, und Webanwendungen werden immer komplexer, aber es fehlt an standardisierten Strukturierungsmöglichkeiten auf Seiten des Frontends.

Frameworks auf Server- und Clientseite können zwar bei der Strukturierung helfen, setzen aber in aller Regel auf proprietäre Lösungen – ein Standard fehlt. Dadurch ist es schwierig, verschiedene Frameworks parallel einzusetzen. Außerdem sind Lösungen nicht auf andere Projekte übertragbar, da sie nicht kompatibel zueinander sind oder das Setup große Schmerzen bereitet.

Historie von Web ComponentsBereits seit 1998 wird versucht, dieses Problem der Webplattform zu lösen, um Webanwendungen besser in Verhalten, Aussehen und Struktur zu gliedern. Sämtliche Versuche sind beim W3C eingereicht, haben es bislang aber nie zu einer Empfehlung geschafft.Einen kleinen Rückblick auf die Jahre 1998 bis 2011 zeigt Abb. 1.Abb. 1: Historische Entwicklung von Spezifikationen zur besseren StrukturierungAction Sheets [1] sind ein von Netscape im Jahre 1998 verfolgter Ansatz, zusätzlich zur Trennung der Präsentation (CSS) und Struktur (HTML) auch das Verhalten (JavaScript) zu abstrahieren. Ein Action Sheet besitzt dieselbe Struktur wie auch Style Sheets, verknüpft dabei aber Elemente mit JavaScript, anstatt mit Stileigenschaften. Als Attribut sind ausschließlich die nativen Events (onclick, onfocus, ...) erlaubt. Der Wert ist JavaScript-Code, der inline als String angegeben wird.Noch im selben Jahr versucht...

Java Magazin
Erstellung und Veröffentlichung einer eigenen Webkomponente

Von Kompositionen und Arrangements

So wie in der Musik die Komposition die Zusammenstellung eines Musikstücks aus einzelnen, bereits vorhandenen Bestandteilen wie Noten und Melodien beschreibt, so wird auch bei Web Components die Verwendung vorhandener HTML-Elemente und weiterer Komponenten als Komposition bezeichnet. Ein Arrangement hingegen bezeichnet eine abgewandelte Version eines Musikstücks, das neue Gestaltungsmittel hinzufügt oder bestehende verändert. Durch die Vererbungskonzepte, die Custom Elements mit sich bringen, könnte man im Falle der Web Components so auch von Arrangements der Elemente sprechen.

Patrick Hillert


In diesem Artikel wird von Grund auf gezeigt, wie eine Webkomponente mit Polymer 0.5 erstellt wird, welche Aufgaben durch Tools automatisiert werden können und welche Hilfsfunktionen Polymer bereitstellt, um die Webkomponente übersichtlich zu strukturieren. Die Erstellung der Dokumentation, einer Livedemo und einiger Tests runden die Webkomponente ab. Abschließend wird die fertige Komponente auf den zwei populären Verzeichnisseiten für Web Components veröffentlicht. Dieser Artikel bezieht sich auf Polymer in der Version 0.5, da Version 0.8 zum Zeitpunkt der Erstellung des Artikels erst in einer allerersten Variante vorliegt. Ein weiterer Artikel wird sich mit dem Übergang auf 0.8 und die zukünftige Roadmap für Web Components beschäftigen.

Von Action Sheets bis Web Components

Vor über zwanzig Jahren entstand das Web zum Austausch von wissenschaftlichen Dokumenten. Erst durch die Entwicklung von JavaScript sind einfache, aber interaktive Webseiten und kleinere Webanwendungen möglich geworden. Die Anforderungen haben sich seither drastisch verändert, und Webanwendungen werden immer komplexer, aber es fehlt an standardisierten Strukturierungsmöglichkeiten auf Seiten des Frontends.

Frameworks auf Server- und Clientseite können zwar bei der Strukturierung helfen, setzen aber in aller Regel auf proprietäre Lösungen – ein Standard fehlt. Dadurch ist es schwierig, verschiedene Frameworks parallel einzusetzen. Außerdem sind Lösungen nicht auf andere Projekte übertragbar, da sie nicht kompatibel zueinander sind oder das Setup große Schmerzen bereitet.

Historie von Web ComponentsBereits seit 1998 wird versucht, dieses Problem der Webplattform zu lösen, um Webanwendungen besser in Verhalten, Aussehen und Struktur zu gliedern. Sämtliche Versuche sind beim W3C eingereicht, haben es bislang aber nie zu einer Empfehlung geschafft.Einen kleinen Rückblick auf die Jahre 1998 bis 2011 zeigt Abb. 1.Abb. 1: Historische Entwicklung von Spezifikationen zur besseren StrukturierungAction Sheets [1] sind ein von Netscape im Jahre 1998 verfolgter Ansatz, zusätzlich zur Trennung der Präsentation (CSS) und Struktur (HTML) auch das Verhalten (JavaScript) zu abstrahieren. Ein Action Sheet besitzt dieselbe Struktur wie auch Style Sheets, verknüpft dabei aber Elemente mit JavaScript, anstatt mit Stileigenschaften. Als Attribut sind ausschließlich die nativen Events (onclick, onfocus, ...) erlaubt. Der Wert ist JavaScript-Code, der inline als String angegeben wird.Noch im selben Jahr versucht...

Neugierig geworden?


    
Loading...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang