Frontend-Developer, JavaScript, AngularJS


Veröffentlicht:
Über JavaScript | AngularJS | Web-Components | Polymer

Web Components, Polymer & AngularJS - Talk auf der IPC/WTC

Am Dienstag, 29.10.2014, habe ich auf der WebTech Conference in München (zeitgleich zur IPC) einen Talk (von insgesamt zwei) gehalten.

Unter dem Titel HTML maßgeschneidert – Direktiven in AngularJS und Web Components mit Polymer berichtete ich im ersten Teil des Vortrages vom neuen Web-Standard Web Components.

Web Components sind genau genommen eine Sammlung von neuen W3C-Specs mit dem Ziel, Custom HTML-Elements für die Browser zu implementieren. Es ging in meiner Session also um die Erweiterung von HTML mit eigenen Tags.

Da aber Web Components bisher nur in wenigen Browsern nativ unterstützt werden, stellte ich die JS-Bibliothek Polymer vor, ein sogenanntes Polyfill, mit dem Web Components schon jetzt in möglichst vielen Browsern zum Laufen gebracht werden können.

Der zweite Teil meines Talks handelte dann von der Möglichkeit die das JS-Application-Framework AngularJS bietet um eigene HTML-Elemente zu erstellen. In AngularJS gibt es nämlich das Konzept der Direktiven. Mit Direktiven können bestehende HTML-Elemente erweitert werden und auch völlig neue HTML-Tags erzeugt werden.

Wie bei den Web Components geht es auch in AngularJS letztendlich um wiederverwendbare und dynamische UI-Komponenten die zudem DOM-Manipulationen und Datenupdates in der View vom Rest einer Applikation oder Website kapseln. Nur, dass es sich bei AngularJS eben nicht um einen Web Standard handelt, sondern das Ganze allein auf JavaScript beruht.

Zum Abschluss widmete ich mich noch der Frage, inwieweit Web Components (mit Polymer gebaut) und eine AngularJS-Applikation zusammenpassen könnten, ob also Polymer-Komponenten die Angular-Direktiven ersetzen können. Meine Antwort darauf war zweigeteilt:
In einfachen Fällen ist das ohne Probleme möglich und aus der AngularJS-App heraus können Polymer-Komponenten auch mit Daten gefüttert werden. Will man aber umgekehrt (und tatsächlich will man das häufig), dass eine Polymer-Komponente auf korrekte Weise (aus Angular Sicht) mit der Applikation kommunizieren kann, dann wird es schwierig, unsauber oder sogar unmöglich.

Dazu müsste sich AngularJS ändern, was auch geplant ist und letztendlich hinter dem Artikel von Pascal Precht steckt, auf den ich in der Abschlussdiskussion meines Talks verwiesen habe: http://pascalprecht.github.io/2014/10/25/integrating-web-components-with-angularjs/.

Die Slides und den Sample-Code zum Polymer-und-Angular-Talk findet Ihr auf GitHub unter https://github.com/nosch/web-tech-conference-2014/tree/master/Angular-und-Polymer.