Anzeige
Anzeige
Analyse
Artikel merken

Web-Components: Mit Project Polymer eine Rich-Web-Application zaubern

Web-Components sind heiß im Trend und ermöglichen es, einfach und schnell umfangreiche Web-Applikationen zu erstellen, ohne das Rad neu erfinden zu müssen. Wir schauen uns das Project Polymer an und beleuchten, was alles unter der Haube versteckt ist.

Von Jonathan Schneider
4 Min. Lesezeit
Anzeige
Anzeige
Project Polymer, eine umfangreiche Web-Component-Library (Bild: Project Polymer)

Project Polymer: Was sind Web-Components?

Project Polymer setzt auf die Web-Component-API. (Screenshot: WebComponents.org)

Project Polymer setzt auf die Web-Component-API. (Screenshot: WebComponents.org)

Project Polymer basiert auf den sogenannten Web-Components. Diese Web-Components sind Best-Practice-Lösungen, um eine gewünschte Funktionalität einzubinden – egal ob es um das Erstellen von Tabs, einem Slider oder die Integration von Google Maps geht. Der Vorteil liegt ganz klar auf der Hand, die Web-Components müssen nur über die eigene Element-Definition eingebettet werden und sind schon voll funktionsfähig. Cross-Browser-Weichen und Bugfixing fallen vollständig weg.

Anzeige
Anzeige

Oftmals werden Slider oder Tabs über verschiedenste jQuery-Plugins verwirklicht, wobei jedes Plugin seine eigene JS- und CSS-Datei mitbringt. Im schlimmsten Fall gibt es noch einen großen Asset-Katalog, der zusätzlich einzeln eingebunden werden muss. Umfangreiche Web-Projekte besitzen oft eine Vielzahl an nachgeladenen JavaScript-Bibliotheken, die das DOM explodieren lassen. Das Kern-Problem ist das fehlende Plugin-Management.

Mit den Web-Components haben wir fertige Pakete, die nur noch eingebunden werden müssen. Diese sind modular und einfach zu warten.  Zu einem Web-Component gehört immer eine HTML-Datei, in der das Custom-Element definiert ist. Die zugehörigen CSS-Styles und die mögliche JavaScript-Logik werden direkt hinterlegt. Diese HTML-Datei muss nur noch in den gewünschten Webseiten-HEAD, mit einem HTML-Import, integriert werden:

Anzeige
Anzeige
<link rel="import" href="xy.html">

Damit die Web-Components in jedem modernen Browser funktionieren, wird die JavaScript-Bibliothek WebComponents.js benötigt. Haben wir diese Schritte durchgeführt, können wir das Custom-Element direkt in unserem DOM benutzen. Dabei wir das DOM aber nicht überladen, da hier der Shadow-DOM zum Einsatz kommt.

Anzeige
Anzeige

Project Polymer ist kein Framework!

Im Gegensatz zu AngularJS ist Project Polymer eher als Library zu verstehen. Wir können uns nach Bedarf aus dieser Library bedienen und unsere eigene Struktur vorgeben. Es müssen keine Models, Services oder Provider definiert werden – wir können direkt die gewünschten Funktionen integrieren und müssen dabei kein MVC-Prinzip verfolgen.

Project Polymer ist alles andere als ein Framework. (Screenshot: Project Polymer)

Project Polymer ist alles andere als ein Framework. (Screenshot: Project Polymer)

AngularJS ist ein Framework, um umfangreiche Web-Apps zu erstellen; Project Polymer hingegen liefert nur eine große Anzahl von Web-Components. Die einzige Überschneidung, die es zwischen Project Polymer und AngularJS gibt, sind die sogenannten Custom Elements – bei AngularJS als Directive bezeichnet. Auch wenn die AngularJS-Directive nicht über die Web-Components-API eingebunden wird, um ein Custom-Element zu erstellen, verfolgen doch beide Ansätze das gleiche Ziel – erst ab AngularJS 2.0 wird die Directive über die Web-Components-API eingebunden.

Anzeige
Anzeige

Project Polymer kann ohne Probleme zusammen mit AngularJS eingesetzt werden, auch die Zukunft der beiden Projekte sieht vor, dass sie unabhängig voneinander bestehen können. Mit AngularJS 2.0 wird es möglich sein, die Directive zu einer Web-Components-Library zu exportieren. Damit wird die Zusammenarbeit von einer Web-Components-Library und AngularJS noch einfacher und lassen uns viele Standards und Best-Practices-Lösungen übergreifend verwenden.

Project Polymer im Einsatz

Mit Project Polymer und einem Custom-Element eine Google-Maps-Karte erzeugen. (Screenshot: Project Polymer)

Mit Project Polymer und einem Custom-Element eine Google-Maps-Karte erzeugen. (Screenshot: Project Polymer)

Nicht alle Web-Components werden in jedem Projekt benötigt, daher kann man mit Bower sein eigenes Web-Component-Paket zusammenstellen. Wer keine Zeit investieren will, sein eigenes Web-Components-Paket zusammenzustellen, kann direkt das Polymer-Start-Kit-Light benutzen. In diesem Paket haben wir schon ein fertiges Boilerplate mit Standard-Web-Components und den benötigen Polyfill-Paket. Wem in diesem Paket noch bestimmte Web-Components fehlen, kann diese natürlich auch mit Bower nachrüsten.

In dem Paket finden wir den Ordner bower_components, hier sind alle Abhängigkeiten und geladenen Web-Components hinterlegt. In der index.html-Datei befindet sich unsere Startseite, die mit einem HTML-Import die elements/elements.html Datei integriert. Die elements.html integriert wiederum alle hinterlegten Web-Components und ein Beispiel für ein eigenes Custom-Element.

Anzeige
Anzeige

Wollen wir jetzt eine gewisse Web-Component in die index.html integrieren und damit ausführen lassen, können wir uns zuvor alle unterstützen Elemente ansehen. Damit natürlich der Web-Component funktioniert, muss dieser im Ordner bower_components hinterlegt und verlinkt sein. Da wir kein weiteres Web-Component installieren wollen, suchen wir uns ein vorhandenes aus. Damit unsere Polymer-Demo funktioniert, müssen wir die index.html-Datei über einen lokalen Server aufrufen, das können wir mit Prepros umsetzen.

Wollen wir jetzt die Paper Tabs integrieren, müssen wir zuvor in der elements/elements.html das Web-Component laden:


<link rel="import" href="../bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="../bower_components/paper-tabs/paper-tab.html">

Danach öffnen wir die index.html und löschen den Inhalt zwischen dem body-Element und fügen folgendes ein:

Anzeige
Anzeige

<paper-tabs selected="0">
<paper-tab>TAB 1</paper-tab>
<paper-tab>TAB 2</paper-tab>
<paper-tab>TAB 3</paper-tab>
</paper-tabs>

Dieser Code reicht jetzt aus, um drei funktionstüchtige Tabs zu erstellen. Die Logik und das Styling wird aus der Web-Component geladen. Das hält den DOM sauber und sorgt dafür, dass wir einfach und schnell umfangreiche Funktionalitäten integrieren können. Wollen wir Google Maps integrieren, laden wir die Web-Component über den Stern herunter und verlinken das mit dem HTML-Import. Darauf folgend kann das Custom-Element direkt im DOM verwendet werden.

Projekte die schon mit Project Polymer umgesetzt wurden, könnt ihr euch auf Built with Polymer angucken. Eine weitere Anleitung, wie ihr Web-Components installiert und benutzt, findet ihr auch auf der offiziellen Project-Polymer-Seite.

Project Polymer: Das Fazit

Web-Components sind eine große Neuerung, die uns ermöglichen gewissen Funktionen modular zwischen Projekte und Entwickler auszutauschen. Das vereinfacht nicht nur die Wartung, sondern es entstehen umfangreiche Best-Practice-Lösungen. Die Integration erfolgt durch einen HTML-Import, wobei wir unseren DOM nicht mehr mit den verschiedensten JavaScript-Bibliothek bombardieren müssen. Es gibt einen zentralen Weg, wie Funktionalitäten integriert werden. Der Überblick wird bewahrt und wir brauchen nicht zum X-Mal die Integration von Google Maps nachschlagen.

Anzeige
Anzeige

Project Polymer liefert eine große Sammlung von Web-Components, die mit Bower nach Bedarf installiert werden können – ein zusätzliches Polyfill für die Cross-Browser-Unterstützung wird mit integriert. Damit verhindert Project Polymer nicht nur das Überladen der Webseite, sondern kümmert sich automatisch um die Cross-Browser-Weichen und rüstet fehlende Unterstützung mit Polyfills nach. Das Ende von Hunderten jQuery-Plugin-Requests und stundenlangen Cross-Browser-Debugging ist erreicht.

Die Web-Components von Project Polymer haben zusätzlich noch einen schicken Look verpasst bekommen, die sich wunderbar ergänzen. Two-Way-Binding und somit eine kleine Template-Engine sind integriert. Wem ein Custom-Element fehlt, der kann es eigenständig erstellen. Project Polymer ist in der Version 1.0 verfügbar und somit für den Produktiv-Einsatz geeignet.

Habt ihr Project Polymer auch schon eingesetzt oder benutzt ihr eine andere Web-Components-Library?

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
5 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

core

Super timing!! War gerade auf der Suche nach einer Lösung für eine Google Map.

Habe Polymer das erste Mal eingesetzt.

Passt 1A zu meinem Projekt, in dem Bower eh schon im Einsatz ist.

#MadeMyDay

Antworten
Jonathan Schneider

Das freut uns! :)

Antworten
Viktor Schmid

Wir haben da ein Projekt, welches wir gerne mit Polymer realisieren würden. Wer hat Erfahrung mit Polymer und ein paar Wochen Kapazität, eine einfache WebApp an ein bestehendes ERP/CRM-System zu realisieren?

Antworten
Sebastian K.

Hallo Herr Schmid, wir nutzen Polymer für die Entwicklung von Webanwendungen und arbeiten mit zahlreichen Kunden hinsichtlich der Integration von Backend-Anwendungen zusammen. Daher könnten wir Sie ggf bei ihrem Projekt unterstützen. VG Sebastian K.

Antworten
tinafan

Vielen Dank. Auf unserer WebSite http://www.masoft.ch finden Sie meine EmailAdresse. Ich freue mich auf Ihren Kontakt.

Abbrechen

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige