Baukastenprinzip fürs Web

Beispiel AppDas Polymer Projekt ist selbst für Googles Maßstäbe ambitioniert. Es hat das Ziel, die Web Entwicklung auf eine neue Stufe zu heben und ist das erste Framework um mit WebComponents (siehe Seitenrand) zu arbeiten. Als Proof of Concept werden die UI-Elemente des Material Design als Komponenten mitgeliefert.

Das klingt nicht spektakulär? Ist es aber! Polymer und ganz besonders die UI-Elemente haben es in sich. Das Material Design hat Google mit Android 5 eingeführt. Es ist ein modernes, reduziertes Design mit klarem Layout, eindeutigen Metaphern und Rückmeldungen an den Benutzer durch zahlreiche Animationen. Noch werden WebComponents nur vom Google Chrome vollständig unterstützt.

Genau hier setzt das Polymer Projekt an. Es füllt die Lücken mit sogenannten Polyfills. D.h., fehlende APIs werden in Javascript implementiert. Das ist eine extrem herausfordernde Aufgabe, denn die APIs sind komplex. Diese Komplexität zwingt Polymer bei der Umsetzung zu Kompromissen. In Details fällt das auf, doch im Entwicklungsprozess wirken sich die Einschränkungen kaum aus.

Der Plan ist, die Polyfills nach und nach durch eigene Implementationen der Browser zu ersetzen. Dann werden die WebComponents ihr volles Potential entfalten. Wie das aussehen kann, kann man im Google Chrome schon heute sehen.

Die UI-Elemente im Material Design sind auf verschiedene Endgeräte ausgelegt und passen sich dem jeweiligen Gerät an. Responsive Design von Feinsten. Touch-Bedienung auf dem Mobilgerät. Automatische Anpassung des Layouts auf die Bildschirmgröße. Auf dem Handy wird die Menüleiste ausgeblendet. Auf dem Tablet oder im Browser ist die Menüleiste stets sichtbar und vieles mehr.

Die Android Apps waren nur der Auftakt. Google stellt alle seine Anwendungen auf Material Design um, egal wo sie laufen, sei es im Web oder unter iOS. Das ist nachvollziehbar, denn ein typischer Google Maps Anwender nutzt Maps unterwegs auf dem Mobiltelefon, am Arbeitsplatz im Browser und zu Hause auf dem iPad.

Multi-Plattform ist Teil der Strategie. Das Material Design ist von vornherein auf unterschiedliche Bildschirme und Eingabemethoden ausgelegt und ist so über alle Plattformen konsistent.

Client Strategie neu denken

PolymerWir haben Polymer 1.0 ausprobiert. Unsere Test-Anwendung funktioniert mit wenig Aufwand auf Android, iOS, Windows Phone und natürlich im Browser. Funktionieren ist untertrieben. Sie sieht aus wie eine App und bedient sich wie eine App. Polymer kann die Basis einer neuen Client Strategie sein. Bisher musste man sich zu Projektstart gut überlegen, welche Zielplattformen man unterstützen möchte, denn jede Plattform bedeutet Mehraufwand, zusätzliche Abhängigkeiten und damit zusätzliche Projektrisiken.

Mit Polymer ist das anders. Mit einer in Polymer geschriebenen Web-Anwendung erreichen Sie alle relevanten Plattformen. Statt sich mit der Entwicklung mehrerer Clients zu verzetteln, können Sie sich darauf konzentrieren Ihre Polymer-App richtig gut zu machen.

Sollte es später doch Gründe geben für ein Betriebssystem eine native App anzubieten, dann können Sie das tun. Eine Polymer-App kommuniziert über eine REST-API mit ihrem Server. Diese REST-API ist vorzüglich für die Anbindung einer nativen App geeignet.

Aber die Chancen stehen gut, dass Sie nie Bedarf für eine native App haben werden.

WebComponents

Polymer-LogoLegosteine für das Web.

Technisch sind WebComponents ein Satz neuer Browser-APIs, die es erlauben, die HTML Syntax um eigene Tags zu erweitern und darin den eigenen Code zu verstecken.

Damit können Softwareentwickler Komponenten anbieten, die sich in HTML-Dokumente integrieren lassen, ohne Konflikte mit anderen Elementen zu riskieren. Das kann den Markt für Komponenten beflügeln und wird auf jeden Fall die Art, wie Web-Anwendungen entwickelt werden verändern.

WebComponents sind eine sehr effektive Methode, um ein Programm zu strukturieren und Teile wieder zu verwenden. Daher lohnen sich WebComponents, selbst wenn man keine fremden Komponenten einsetzt.

Stand heute sind die APIs nur im Google Chrome vorhanden. Im Firefox sind die APIs teilweise umgesetzt. Bei den anderen Browsern sieht es noch mau aus. Aber es gibt ja zum Glück das Polymer Projekt.

Ansprechpartner: Christian Vögtle; Turn on Javascript!