Was ist der Unterschied zwischen Polymer-Elementen und AngularJS-Direktiven?

Question

Auf der Polymer Einführungsseite sehen wir ein Beispiel, wie Polymer funktioniert:

Was Ihnen auffallen wird, ist, dass durch platform.js und x-foo.html definiert wird.

Es scheint, dass dies dem Modul für Direktiven in AngularJS entspricht:

angular.module('xfoo', [])
.controller('X-Foo', ['$scope',function($scope) {
    $scope.text = 'hey hey!';
})
.directive('x-foo', function() {
    return {
        restrict: 'EA',
        replace: true,
        controller: 'X-Foo',
        templateUrl: '/views/x-foo.html',
        link: function(scope, controller) {
        }
    };
});

• Was ist der Unterschied zwischen den beiden?

• Welche Probleme löst Polymer, die AngularJS nicht gelöst hat oder lösen wird?

• Gibt es Pläne, Polymer in Zukunft mit AngularJS zu verknüpfen?

Answer 1

Du bist nicht der Erste, der diese Frage stellt :) Lassen Sie mich ein paar Dinge klären, bevor ich zu Ihren Fragen komme.

1. Polymer's webcomponents.js ist eine Bibliothek, die mehrere Polyfills für verschiedene W3C APIs enthält, die unter das Web Components-Dach fallen. Diese sind:

   • Benutzerdefinierte Elemente
   • HTML-Imports

Answer 2

Für deine Frage:

Gibt es Pläne, Polymer in Zukunft mit AngularJS zu verbinden?

Von dem offiziellen Twitter-Account von AngularJS: "angularjs wird Polymer für seine Widgets verwenden. Es ist eine win-win-Situation"

Quelle: https://twitter.com/angularjs/status/335417160438542337

Answer 3

In diesem Video sprachen 2 Jungs von AngularJS über Unterschiede und Ähnlichkeiten zwischen diesen beiden Frameworks (AngularJS 1.2 und Beyond).

Diese Links bringen Sie zu den richtigen Q&A's:

• http://www.youtube.com/watch?v=W13qDdJDHp8&feature=share&t=56m34s
• http://www.youtube.com/watch?v=W13qDdJDHp8&feature=share&t=59m8s

Answer 4

1 & 2) Polymer-Komponenten sind aufgrund ihres versteckten Baums im Shadow DOM abgegrenzt. Das bedeutet, dass ihr Stil und Verhalten nicht nach außen dringen können. Angular ist nicht auf die spezielle Direktive beschränkt, die Sie erstellen, wie bei einem Polymer-Webkomponenten. Eine Angular-Direktive könnte möglicherweise mit etwas in Ihrem globalen Bereich in Konflikt geraten. Meiner Meinung nach ist der Vorteil, den Sie von Polymer erhalten, das, was ich erklärt habe... modulare Komponenten, die über CSS & JavaScript verfügen, die auf diese bestimmte Komponente beschränkt sind, die niemand berühren kann. Unberührbares DOM!

Angular-Direktiven können erstellt werden, um ein Element mit mehreren Funktionalitäten zu kennzeichnen. Bei Polymer-Webkomponenten ist das nicht der Fall. Wenn Sie die Funktionalität von Komponenten kombinieren möchten, können Sie zwei Komponenten in eine andere Komponente einfügen (oder sie in eine andere Komponente einpacken) oder Sie können eine vorhandene Komponente erweitern. Denken Sie daran, der Hauptunterschied besteht immer noch darin, dass jede Komponente in Polymer-Webkomponenten abgegrenzt ist. Sie können CSS & JS-Dateien über mehrere Komponenten hinweg gemeinsam nutzen oder Sie können sie inline einbetten.

3) Ja, Angular plant laut Rob Dodson und Eric Bidelman, Polymer in Version 2+ zu integrieren.

Es ist lustig, wie hier niemand das Wort Bereich erwähnt hat. Ich denke, das ist einer der Hauptunterschiede.

Es gibt viele Unterschiede, aber sie haben auch eine Menge Gemeinsamkeiten, wenn es darum geht, modulare Legostein-ähnliche Funktionalitäten für eine App zu erstellen. Ich denke, es ist sicher zu sagen, dass Angular das Anwendungs-Framework sein würde und Polymer irgendwann neben Direktiven mit dem Hauptunterschied im Bereich in derselben App existieren könnte, aber Polymer könnte eines Tages viele Ihrer aktuellen Direktiven ersetzen. Aber ich sehe keinen Grund, warum Angular nicht so funktionieren könnte, wie es ist, und auch Polymer-Komponenten einschließen könnte.

Bei erneutem Lesen der Antworten, während ich dies schreibe, habe ich festgestellt, dass Eric Bidelman (ebidel) das in seiner Antwort irgendwie behandelt hat:

"Shadow DOM ermöglicht das Zusammenstellen von HTML-Bits, ist aber auch ein Tool zum Einschließen dieses HTML."

Zur Anerkennung, wo Anerkennung gebührt, habe ich meine Antworten aus vielen Interviews mit Rob Dodson und Eric Bidelman gehört. Aber ich denke, dass die Antwort nicht formuliert war, um die Frage dieses Typen so zu beantworten, wie er es wollte. Trotzdem glaube ich, dass ich auf die Antwort eingegangen bin, die er sucht, verfüge jedoch in keiner Weise über mehr Informationen zum Thema als Rob Dodson und Eric Bidelman.

Hier sind meine Hauptquellen für die Informationen, die ich gesammelt habe.

JavaScript Jabber - Polymer mit Rob Dodson und Eric Bidelman

Shop Talk Show - Webkomponenten mit Rob Dodson

Answer 5

Polymer ist ein Web-Components-Shim

• "Web Components" ist ein neuer Satz von Standards, der von HTML5 umhüllt ist und dazu dient, wiederverwendbare Bausteine für Webanwendungen bereitzustellen.

• Browser befinden sich in verschiedenen Zuständen der Implementierung der "Web Components"-Spezifikation, daher ist es noch zu früh, HTML mit Web Components zu schreiben.

• Aber zum Glück! Polymer ist zur Rettung da! Polymer ist eine Bibliothek, die eine Abstraktionsschicht für Ihren HTML-Code bereitstellt, die es ermöglicht, die Web Components API zu nutzen, als ob sie in allen Browsern vollständig implementiert wäre. Dies nennt man Poly-Filling, und das Polymer-Team verteilt diese Bibliothek als webcomponents.js. Dies wurde übrigens früher platform.js genannt.

Aber Polymer ist mehr als nur eine Polyfill-Bibliothek für Webkomponenten...

Polymer bietet auch offene und wiederverwendbare Web-Component-Bausteine über Elements

Alle Elemente können angepasst und erweitert werden. Diese werden als Bausteine für alles von sozialen Widgets über Animationen bis hin zu Web-API-Clients verwendet.

Polymer ist kein Webanwendungs-Framework

• Polymer ist mehr eine Bibliothek als ein Framework.

• Polymer hat keinen Support für Dinge wie Routen, Anwendungsbereich, Controller usw.

• Aber es hat Two-Way-Binding und die Verwendung von Komponenten "fühlt" sich genauso an wie die Verwendung von Angular-Direktiven.

• Obwohl es einige Überschneidungen zwischen Polymer und AngularJS gibt, sind sie nicht dasselbe. Tatsächlich hat das AngularJS-Team erwähnt, dass sie Polymer-Bibliotheken in zukünftigen Veröffentlichungen nutzen werden.

• Beachten Sie auch, dass Polymer noch als "bleeding edge" gilt, während AngularJS stabilisiert wird.

• Es wird interessant sein, wie sich beide Google-Projekte entwickeln!