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

Ich denke aus praktischer Sicht, dass letztlich das Template-Feature von Angular-Direktiven und die von Polymer genutzte Web-Komponenten-Methodik beide dieselbe Aufgabe erfüllen. Die wesentlichen Unterschiede, wie ich es sehe, bestehen darin, dass Polymer Web-APIs nutzt, um Teile von HTML einzuschließen, einen syntaktisch korrekteren und einfacheren Weg, um zu erreichen, was Angular programmatisch rendern tut. Polymer ist jedoch, wie bereits gesagt wurde, ein kleines Framework zum Erstellen deklarativer und interaktiver Templates mithilfe von Komponenten. Es steht nur für UI-Design-Zwecke zur Verfügung und wird nur von den modernsten Browsern unterstützt. AngularJS ist ein komplettes MVC-Framework, das darauf ausgelegt ist, Webanwendungen deklarativ durch die Verwendung von Datenbindungen, Abhängigkeiten und Direktiven zu gestalten. Sie sind zwei völlig unterschiedliche Ansätze. Zu Ihrer Frage scheint es mir, dass Sie zu diesem Zeitpunkt keinen wesentlichen Vorteil davon haben werden, Polymer anstelle von Angular zu verwenden, außer dass Sie Dutzende von vordefinierten Komponenten haben werden, die Sie jedoch immer noch in Angular-Direktiven übertragen müssten. In Zukunft werden jedoch, wenn die Web-APIs fortschrittlicher werden, Webkomponenten die Notwendigkeit beseitigen, Vorlagen programmatisch zu definieren und aufzubauen, da der Browser sie einfach auf ähnliche Weise einbinden kann, wie er Javascript- oder CSS-Dateien behandelt.

Answer 2

Das MVVM (Model-View, View-Model), das Angular bietet, ist nicht das Anliegen, das Polymer lösen will. Die zusammensetzbare und wiederverwendbare Natur, die Angular-Direktiven bieten (mit einer benutzerdefinierten Markierung und zugehöriger Logik-Kombination) ist ein vernünftigerer Vergleich, wenn Sie Angular und Polymer vergleichen. Angular ist und bleibt ein umfangreicheres Framework für verschiedenste Zwecke.

Answer 3

Was ist der Unterschied zwischen den beiden?

Für einen Benutzer: Nicht viel. Mit beiden kannst du großartige Apps erstellen.

Für einen Entwickler: Sie verwenden sehr unterschiedliche Syntax, daher hat jede Lösung eine ziemlich steile Lernkurve. Angular gibt es schon länger und hat eine RIESIGE Community, sodass es schwer sein dürfte, Probleme zu finden, die nicht bereits gelöst wurden.

Für einen Architekten: Sehr unterschiedlich. Angular ist ein Anwendungsrahmen, der für alle Aspekte Ihres Lebens verantwortlich ist. Es hat sogar direktive vertikal integriert, falls Sie Komponentenähnliche Funktionen möchten. Polymer hingegen ist mehr auf Bedarf ausgerichtet. Du möchtest ein Modal, kein Problem, ein interaktives Widget, sicher, du möchtest die Routenverarbeitung, das können wir auch tun. Polymer ist auch portabler, da Angular eine Angular-App erfordert, um Direktiven erneut zu verwenden. Die Idee bei Polymer ist, modularer zu sein und in anderen Apps zu funktionieren, auch in Angular-Apps.

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

Polymer ist ein Ansatz zur Nutzung der neuen Webkomponentenstandards. Wenn Funktionen wie benutzerdefinierte Elemente, Shadow DOM und HTML-Imports lokal unterstützt werden, wäre es dumm, sie nicht zu nutzen. Derzeit werden die meisten Funktionen von Webkomponenten nicht weit verbreitet unterstützt (aktueller Stand), daher fungiert Polymer als Shim oder Brücke. So etwas wie ein Polyfill (tatsächlich verwendet es Polyfills).

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

Wir verwenden Angular und Polymer seit über einem Jahr zusammen. Ein Teil der Entscheidung dafür beruhte auf den Versprechungen, die uns direkt vom Polymer-Team gemacht wurden, dass die Interoperabilität gegeben sein würde. Wir haben uns von dieser Idee verabschiedet. Wir bewegen uns jetzt in Richtung ausschließlicher Verwendung von Polymer.

Wenn wir es noch einmal machen könnten, würden wir wahrscheinlich den Schritt, Polymer zu verwenden, nicht gemacht haben, sondern auf eine Reife warten. Trotzdem hat Polymer seine Vorteile (einige davon sind ziemlich gut) und Nachteile (einige davon sind ziemlich frustrierend), aber ich denke, das ist eine Diskussion für einen anderen Thread.

Answer 4

Angularjs Direktive ist ein Ansatz zur Erstellung von benutzerdefinierten Elementen. Sie können neue benutzerdefinierte Tags mit benutzerdefinierten Attributen definieren. Auch Polymer kann dies tun, aber auf eine interessante und einfachere Weise. Polymer ist tatsächlich kein Framework, sondern nur eine Bibliothek. Eine leistungsstarke und erstaunliche Bibliothek, in die man sich verlieben kann (so wie ich). Polymer ermöglicht es Ihnen, die von der W3C entwickelte native Webkomponententechnologie zu erlernen, die von Webbrowsern schließlich implementiert wird. Webkomponenten sind die Zukunftstechnologie, aber Polymer ermöglicht es Ihnen, diese Technologie bereits jetzt zu nutzen. Google Polymer ist eine Bibliothek, die Zucker und Polyfills bereitstellt, um Elemente und Anwendungen mit Webkomponenten zu erstellen. Denken Sie daran, ich habe gesagt, dass Polymer kein Framework ist, sondern eine Bibliothek. Aber wenn Sie Polymer verwenden, ist tatsächlich Ihr Framework der DOM. Dieser Beitrag handelte von AngularJS Version 1 und Polymer, und ich habe in meinen Projekten mit beiden gearbeitet und persönlich bevorzuge ich Polymer gegenüber AngularJS. Aber Angular Version 2 ist vollkommen anders im Vergleich zu AngularJS Version 1. In Angular 2 hat die Direktive eine andere Bedeutung.

Answer 5

Angular Direktiven sind konzeptionell ähnlich wie benutzerdefinierte Elemente, werden jedoch ohne die Verwendung der Webkomponenten-APIs implementiert. Angular Direktiven sind eine Möglichkeit, benutzerdefinierte Elemente zu erstellen, aber Polymer und die Webkomponenten-Spezifikation sind der standardbasierte Weg, um dies zu tun.

polymer-element:

    Polymer('user-preferences', {
      ready: function() {
        this.userID= md5(this.email);
      }
    });

Angular Direktive:

app.directive('user-preferences', ['md5', function() {
  return {
    restrict: 'E',
    link: function(scope, element, attrs) {
      scope.userID= md5(attrs.email);
    },
    template: ''
  };
}]);