Was ist der Unterschied zwischen Polymerelementen und AngularJS-Richtlinien?


524

Auf der Seite Erste Schritte mit Polymer sehen wir ein Beispiel für Polymer in Aktion:

<html>
  <head>
    <!-- 1. Shim missing platform features -->
    <script src="polymer-all/platform/platform.js"></script>
    <!-- 2. Load a component -->
    <link rel="import" href="x-foo.html">
  </head>
  <body>
    <!-- 3. Declare the component by its tag. -->
    <x-foo></x-foo>
  </body>
</html>

Was Sie bemerken werden, wird <x-foo></x-foo>durch platform.jsund definiert x-foo.html.

Es scheint, dass dies einem Direktivenmodul 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 hat oder nicht haben wird?

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


Nützliche Informationen hier 2ality - Die Rollen von AngularJS und Polymer
LCJ

Antworten:


520

Sie sind nicht der erste, der diese Frage stellt :) Lassen Sie mich einige Dinge klären, bevor ich zu Ihren Fragen komme.

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

    • Benutzerdefinierte Elemente
    • HTML-Importe
    • <template>
    • Schatten DOM
    • Zeigerereignisse
    • Andere

    Das linke Navigationsgerät in der Dokumentation ( polymer-project.org ) enthält eine Seite für alle diese "Plattformtechnologien". Jede dieser Seiten hat auch einen Zeiger auf die einzelne Polyfüllung.

  2. <link rel="import" href="x-foo.html">ist ein HTML-Import. Importe sind ein nützliches Werkzeug, um HTML in anderes HTML aufzunehmen. Sie können zählen <script>, <link>, Markup, oder was sonst auch immer in einem Import.

  3. Nichts "verlinkt" <x-foo>auf x-foo.html. In Ihrem Beispiel wird davon ausgegangen, dass die Definition des benutzerdefinierten Elements von <x-foo>(z. B. <element name="x-foo">) in x-foo.html definiert ist. Wenn der Browser diese Definition sieht, wird sie als neues Element registriert.

Auf zu Fragen!

Was ist der Unterschied zwischen Angular und Polymer?

Einige davon haben wir in unserem Q & A-Video behandelt . Im Allgemeinen ist Polymer eine Bibliothek, die Webkomponenten verwenden (und deren Verwendung zeigen) soll. Die Grundlage sind benutzerdefinierte Elemente (z. B. alles, was Sie erstellen, ist eine Webkomponente), und sie entwickeln sich mit der Entwicklung des Webs. Zu diesem Zweck unterstützen wir nur die neueste Version der modernen Browser.

Ich werde dieses Bild verwenden, um den gesamten Architekturstapel von Polymer zu beschreiben:

Geben Sie hier die Bildbeschreibung ein

ROTE Schicht: Wir erhalten das Web von morgen durch eine Reihe von Polyfills. Beachten Sie, dass diese Bibliotheken mit der Zeit verschwinden, wenn Browser die neuen APIs übernehmen.

GELBE Schicht: Etwas Zucker mit polymer.js einstreuen. Diese Ebene ist unsere Meinung dazu, wie die spezifizierten APIs zusammen verwendet werden. Es werden auch Dinge wie Datenbindung, syntatischer Zucker, Änderungsbeobachter, veröffentlichte Eigenschaften hinzugefügt ... Wir denken, dass diese Dinge hilfreich sind, um webkomponentenbasierte Apps zu erstellen.

GRÜN: Der umfassende Satz von UI-Komponenten (grüne Ebene) ist noch in Bearbeitung. Hierbei handelt es sich um Webkomponenten, die alle rot + gelben Ebenen verwenden.

Winkelanweisungen im Vergleich zu benutzerdefinierten Elementen?

Siehe Alex Russells Antwort . Grundsätzlich ermöglicht Shadow DOM das Erstellen von HTML-Bits, ist aber auch ein Werkzeug zum Einkapseln dieses HTML-Codes. Dies ist im Grunde ein neues Konzept im Web und etwas, das andere Frameworks nutzen werden.

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

Ähnlichkeiten: deklarative Vorlagen, Datenbindung.

Unterschiede: Angular verfügt über APIs auf hoher Ebene für Dienste, Filter, Animationen usw., unterstützt IE8 und ist zu diesem Zeitpunkt ein viel robusteres Framework für die Erstellung von Produktions-Apps. Polymer fängt gerade erst in Alpha an.

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

Es sind getrennte Projekte . Das Angular- und das Ember-Team kündigten jedoch an, dass sie die zugrunde liegenden Plattform-APIs irgendwann in ihren eigenen Frameworks verwenden werden.

^ Dies ist ein großer Gewinn IMO. In einer Welt, in der Webentwickler über leistungsstarke Tools (Shadow DOM, Custom Elements) verfügen, können Framework-Autoren diese Grundelemente auch verwenden, um bessere Frameworks zu erstellen. Die meisten von ihnen durchlaufen derzeit große Probleme, um "die Arbeit zu erledigen".

AKTUALISIEREN:

Es gibt einen wirklich großartigen Artikel zu diesem Thema: " Hier ist der Unterschied zwischen Polymer und Angular "


46
Der wichtige Punkt hierbei ist, dass es bei Polymer darum geht, das Web, wie wir es kennen, voranzutreiben, insbesondere indem gezeigt wird, wie Webkomponenten das Web offen, gemeinsam nutzbar und erweiterbar machen können. Bei AngularJS (und Ember) geht es darum, ein Framework zu erstellen, das die besten Teile des Browsers für die Erstellung reaktionsfähiger Anwendungen nutzt. Sobald Webkomponenten von Browsern besser unterstützt werden, können Angular und andere Frameworks darauf aufbauen, um den Framework-Code zu verkleinern und Anwendungen zu vereinfachen. Deshalb ist es Win-Win für alle.
Schmuli

31
Ich verstehe immer noch nicht, was der praktische Unterschied zwischen benutzerdefinierten Polymerelementen und Winkelrichtlinien ist. Warum sollte ich in einem Angular-Projekt benutzerdefinierte Polymerelemente anstelle von Winkelrichtlinien verwenden?
Ronag

3
Bestehende Angular- und Ember-Projekte werden letztendlich von der Verwendung der zugrunde liegenden Plattform-APIs profitieren. Aber wenn Webkomponenten von Browsern besser unterstützt werden, wäre es dann von Vorteil, Angular weiterhin für neue Projekte zu verwenden, oder wird es effektiv redundant?
Pfannkuchen

8
Ich denke, um es schwarz und weiß zu machen: Bleib bei AngularJS für Produktionssachen und spiele in deiner Freizeit mit Polymer, damit du zu gegebener Zeit damit vertraut bist.
Dooan

31
Es ist eine schöne Übersicht über polymer.js, beantwortet aber die Frage in keiner Weise gründlich ...
Christoph

57

Für Ihre Frage:

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

Aus 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


2
@NREZ Ok, ich antworte nicht auf den Titel des Beitrags, sondern auf eine der Fragen im Beitrag. Meine Antwort bezieht sich nur auf die dritte Frage: Are there plans to tie Polymer in with AngularJS in the future? Ich denke, es ist eine gute Idee, den Originalbeitrag des AngularJS-Teams zu zitieren, den Sie nicht glauben ?
loïc m.

Yup sicher, dass Ihr Punkt gültig ist ... Nur, dass die Beschreibung besser hätte sein können ... Wie ich es diesmal getan habe und ich bin sicher, dass Sie es das nächste Mal auch
tun werden

ja sicher. Danke für dein Update :) (Ich fange gerade erst an, Stackoverflow wirklich zu verwenden, daher sehe ich dein Update nicht, bevor ich dir antworte ...)
loïc m.

Haben sie dort ihre Meinung geändert? Ich kann nicht finden, wo sie Polymer verwenden.
Theblang

Ich denke nicht, dass dies eine Antwort ist.
Astroanu


19

1 & 2) Polymerkomponenten werden aufgrund ihres versteckten Baums im Schattendom erfasst. Das bedeutet, dass ihr Stil und Verhalten nicht ausbluten können. Angular ist nicht auf die bestimmte Richtlinie beschränkt, die Sie wie eine Polymer-Webkomponente erstellen. Eine eckige Direktive könnte möglicherweise mit etwas in Ihrem globalen Geltungsbereich in Konflikt stehen. IMO der Vorteil, den Sie von Polymer erhalten, ist das, was ich erklärt habe. Modulare Komponenten, die CSS und JavaScript auf diese bestimmte Komponente beschränkt haben, die nichts berühren kann. Unberührbares DOM!

Winkelanweisungen können erstellt werden, sodass Sie ein Element mit mehreren Funktionen mit Anmerkungen versehen können. Bei Polymer-Webkomponenten ist dies nicht der Fall. Wenn Sie die Funktionalität von Komponenten kombinieren möchten, fügen Sie zwei Komponenten in eine andere Komponente ein (oder wickeln Sie sie in eine andere Komponente ein), oder Sie können eine vorhandene Komponente erweitern. Denken Sie daran, dass der Hauptunterschied immer noch darin besteht, dass jede Komponente in Polymerbahnkomponenten eingeschlossen ist. Sie können CSS- und JS-Dateien für mehrere Komponenten freigeben oder sie inline schalten.

3) Ja, Angular plant den Einbau von Polymer in Version 2+ gemäß Rob Dodson und Eric Bidelman

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

Es gibt viele Unterschiede, aber sie haben auch eine Menge gemeinsam, wenn es darum geht, modulare Lego-ähnliche Funktionen für eine App zu erstellen. Ich denke, man kann mit Sicherheit sagen, dass Angular das Anwendungsframework ist und Polymer eines Tages neben Direktiven in derselben App leben könnte, wobei der Hauptunterschied im Umfang liegt, aber Polymer kann ein Ersatz für viele Ihrer aktuellen Direktiven sein. Aber ich sehe keinen Grund, warum Angular nicht so arbeiten konnte, wie es ist, und auch Polymerkomponenten enthält.

Als ich die Antworten noch einmal durchlas, bemerkte ich, dass Eric Bidelman (ebidel) dies in seiner Antwort irgendwie verdeckte :

"Shadow DOM ermöglicht das Erstellen von HTML-Bits, ist aber auch ein Werkzeug zum Einkapseln dieses HTML-Codes."

Um Kredit zu geben, wo Kredit fällig ist, habe ich meine Antworten aus vielen Interviews mit Rob Dodson und Eric Bidelman erhalten . Aber ich glaube, die Antwort war nicht formuliert, um der Frage dieses Mannes das Verständnis zu geben, das er wollte. Trotzdem denke ich, dass ich die Antwort, nach der er sucht, angesprochen habe, aber ich besitze in keiner Weise mehr Informationen über das 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 Talkshow - Webkomponenten mit Rob Dodson


1
Also, wenn ich benutze normalize.css, normalisiert es sich nicht innerhalb des Schattendoms? Also muss ich jede solche Komponente separat normalisieren, ohne es einmal zu tun? Ist es eine gute Sache?
Dmitri Zaitsev

1
Stellen Sie sich das Shadow DOM nicht als IFRAME vor. Und ich benutze diesen Vergleich locker, weil es kein IFRAME ist. In einem IFRAME hätten Sie jedoch ein eigenes Dokument, das von den CSS- und JavaScript-Seiten des übergeordneten Dokuments nicht betroffen ist. Das ist eine sehr gute Sache. Dies bedeutet, dass Sie garantieren können, dass eine bestimmte Komponente wie beabsichtigt ausgeführt wird und nicht von der übergeordneten Seite gestört wird. Wenn das Schatten-DOM jedoch DOM von der übergeordneten Seite verwenden möchte, kann es. Aber das ist ein anderes Thema.
Eric Bishard

1
Ich sehe, ja, CSS ist eine undichte Sprache, aber in den meisten Fällen gibt es eine einfache (wenn auch nicht perfekte) Lösung, indem eindeutige Klassenpräfixe innerhalb des DOMs verwendet werden, das Sie isolieren möchten. Und natürlich durch Vermeiden von Tag- und ID-Selektoren, was ohnehin keine gute Praxis ist. Auf der anderen Seite, einige dieser Erklärungen können Sie tatsächlich wollen (wie Leck normalize.cssoder anderen Tag-basierte Blätter), die wiederum ohne Schatten DOM leicht erreichbar ist. Einverstanden keine perfekte Isolation, aber wahrscheinlich. funktioniert in 95% der Anwendungsfälle, zumindest in denen, die mir einfallen.
Dmitri Zaitsev

2
Trotzdem muss ich sagen, dass ich das Verdienst einer angemessenen Isolation sehe und finde, dass Ihre Antwort eine gute Erklärung liefert.
Dmitri Zaitsev

6

Polymer ist eine Unterlegscheibe für Webkomponenten

  • " Webkomponenten " ist eine neue Reihe von Standards, die von HTML 5 umhüllt werden und wiederverwendbare Bausteine ​​für Webanwendungen bereitstellen sollen.

  • Browser befinden sich in verschiedenen Zuständen der Implementierung der Spezifikation "Webkomponenten". Daher ist es zu früh, HTML mit Webkomponenten zu schreiben.

  • Aber leider! Polymer zur Rettung! Polymer ist eine Bibliothek, die Ihrem HTML-Code eine Abstraktionsschicht bietet, mit der die Webkomponenten-API so verwendet werden kann, als ob sie in allen Browsern vollständig implementiert wäre. Dies wird als Poly-Filling bezeichnet , und das Polymer-Team verteilt diese Bibliothek als webcomponents.js . Diese verwendet genannt werden platform.js btw.

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

Polymer bietet über Elements auch offene und wiederverwendbare Webkomponenten-Bausteine

Geben Sie hier die Bildbeschreibung ein

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

Polymer ist kein Webanwendungsframework

  • Polymer ist eher eine Bibliothek als ein Gerüst.

  • Polymer unterstützt keine Routen, Anwendungsbereiche, Controller usw.

    • Es hat jedoch eine bidirektionale Bindung, und die Verwendung von Komponenten "fühlt" sich an wie die Verwendung von Angular-Direktiven.
  • Obwohl es einige Überlappungen zwischen Polymer und AngularJS gibt, sind sie nicht gleich. Tatsächlich hat das AngularJS-Team die Verwendung von Polymer-Bibliotheken in kommenden Versionen erwähnt.

  • Beachten Sie auch, dass Polymer immer noch als "Blutungskante" betrachtet wird, während sich AngularJS stabilisiert.

  • Es wird interessant sein zu sehen, wie sich diese beiden Google-Projekte weiterentwickeln!


Polymer ist keine Unterlegscheibe oder Polyfüllung. Das sind die Polyfills von webcomponents.j. Polymer ist eine Bibliothek zum Erstellen von Webkomponenten. Das Polymer-Team erstellte auch Sammlungen von Webkomponenten (implementiert mit Polymer), aber diese sind auch nicht "Polymer"
ebidel

Update: Polymer hat jetzt Routen und ist stabil! : D
JordyvD

5

Ich denke aus praktischer Sicht, dass letztendlich die Vorlagenfunktion von Winkelrichtlinien und die von Polymeren verwendete Webkomponentenmethode dieselbe Aufgabe erfüllen. Wie ich sehen kann, besteht der Hauptunterschied darin, dass Polymer Web-APIs nutzt, um HTML-Bits einzuschließen. Dies ist eine syntaktisch korrektere und einfachere Methode, um das zu erreichen, was Angular beim Rendern von Vorlagen programmgesteuert tut. Polymer ist jedoch, wie bereits erwähnt, ein kleines Framework zum Erstellen deklarativer und interaktiver Vorlagen unter Verwendung von Komponenten. Es wird nur für UI-Designzwecke zur Verfügung gestellt und nur in den modernsten Browsern unterstützt. AngularJS ist ein vollständiges MVC-Framework, mit dem Webanwendungen mithilfe von Datenbindungen, Abhängigkeiten und Anweisungen deklarativ gemacht werden können. Es sind zwei völlig verschiedene Tiere. Auf Ihre Frage, An diesem Punkt scheint es mir, dass Sie keinen großen Nutzen aus der Verwendung von Polymer über Winkel ziehen werden, außer wenn Sie Dutzende vorgefertigter Komponenten haben. Dies würde jedoch erfordern, dass Sie diese auf Winkelrichtlinien portieren. In Zukunft werden Webkomponenten jedoch mit fortschreitender Weiterentwicklung der Web-APIs die Notwendigkeit, Programme programmgesteuert zu definieren und zu erstellen, vollständig beseitigen, da der Browser sie einfach auf ähnliche Weise wie beim Umgang mit Javascript- oder CSS-Dateien einbinden kann.


1
"Sie sind zwei völlig verschiedene Tiere." Ja, aber das hat nichts mit der Frage zu tun. Die Frage bezieht sich auf Polymer ELEMENTS vs AngularJS DIRECTIVES. Und diese sind in vielerlei Hinsicht sehr ähnlich. Wir fragen nicht nach dem besten Framework. Polymer vs AngularJS. "Es scheint mir an diesem Punkt, dass Sie keinen großen Nutzen aus der Verwendung von Polymer gegenüber eckigen ziehen werden." Niemand hat dies vorgeschlagen, tatsächlich haben wir alle darüber gesprochen, sie irgendwann in irgendeiner Form nebeneinander zu verwenden. "Auf Ihre Frage ... Sie werden keinen Nutzen daraus ziehen, Polymer über Winkel zu verwenden." Wieder nicht die Frage.
Eric Bishard

0

Das von Angular angebotene MVVM (Modellansicht, Ansichtsmodell) ist kein Problem, das Polymer lösen möchte. Die zusammensetzbare und wiederverwendbare Natur, die Angular-Direktiven Ihnen bieten (eine Kombination aus benutzerdefiniertem Tag und zugehöriger Logik), ist ein vernünftigerer Vergleich, wenn Sie Angular und Polymer vergleichen. Angular ist und bleibt ein breiterer Zweckrahmen.


0

Was ist der Unterschied zwischen den beiden?

Für einen Benutzer: Nicht viel. Mit beiden können Sie fantastische Apps erstellen.

Für einen Entwickler: Sie verwenden eine ganz andere Syntax, sodass jede Lösung eine ziemlich steile Lernkurve aufweist. Angular gibt es schon länger und es gibt eine RIESIGE Community, sodass es schwierig ist, Probleme zu finden, die nicht gelöst wurden.

Für einen Architekten: Ganz anders. Angular ist ein Anwendungsframework, das für alle Aspekte Ihres Lebens verantwortlich ist. Es sind sogar Anweisungen vertikal integriert, falls Sie komponentenähnliche Funktionen wünschen. Polymer hingegen ist eher wie "Pay-as-you-go". Sie möchten eine modale, sichere Sache, Sie möchten ein interaktives Widget, kein Problem, Sie möchten eine Routenbehandlung, wir können das tun. Polymer ist auch insofern portabler, als Angular eine Angular-App benötigt, um Direktiven wiederzuverwenden. Die Idee mit Polymer ist modulierter und funktioniert in anderen Apps, sogar in Angular-Apps.

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

Polymer ist ein Ansatz, um die neuen Standards für Webkomponenten zu nutzen. Wenn Funktionen wie benutzerdefinierte Elemente, Shadow DOM- und HTML-Importe lokal unterstützt werden, wäre es dumm, sie nicht zu nutzen. Derzeit werden die meisten Webkomponentenfunktionen nicht allgemein unterstützt ( aktueller Status ), sodass Polymer als Unterlegscheibe oder Brücke fungiert. Ein bisschen wie eine Polyfüllung (tatsächlich werden Polyfüllungen verwendet).

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, dies zu tun, beruhte auf Versprechungen, die das Polymer-Team uns direkt gemacht hatte, dass Interoperabilität vorhanden sein sollte. Wir haben diese Idee aufgegeben. Wir verwenden jetzt nur noch Polymer.

Um es noch einmal zu tun, hätten wir uns wahrscheinlich überhaupt nicht für Polymer entschieden, sondern darauf gewartet, dass es reift. Davon abgesehen hat Polymer Vor- (einige ziemlich gute) und Nachteile (von denen einige ziemlich frustrierend sind), aber ich denke, das ist eine Diskussion für einen anderen Thread.


0

Angularjs Richtlinieist ein Ansatz zum Erstellen benutzerdefinierter Elemente. Sie können neue benutzerdefinierte Tags mit benutzerdefinierten Attributen definieren. Polymer kann dies auch, aber es wird auf interessante und einfachere Weise funktionieren. Polymer ist eigentlich kein Framework, sondern nur eine Bibliothek. Aber eine leistungsstarke und erstaunliche Bibliothek, in die Sie sich verlieben können (wie ich). Mit Polymer können Sie die native Webkomponententechnologie von w3c erlernen, die Webbrowser schließlich implementieren. Die Webkomponente ist die zukünftige Technologie, aber mit Polymer können Sie diese Technologie jetzt verwenden. Google Polymer ist eine Bibliothek, die syntaktischen Zucker und Polyfills zum Erstellen bereitstellt Elemente und Anwendungen mit Webkomponenten. Denken Sie daran, dass Polymer kein Framework und keine Bibliothek ist. Wenn Sie jedoch Polymer verwenden, ist Ihr Framework tatsächlich DOM. In diesem Beitrag ging es um eckige js ver 1 und Polymer und ich habe mit beiden gearbeitet, ist mein Projekt und ich persönlich bevorzuge Polymer gegenüber eckigen js. Aber Angular Version 2 ist im Vergleich zu Angularjs Version 1 völlig anders. Direktive in Angular 2 hat eine andere Bedeutung.


0

Winkelanweisungen ähneln konzeptionell benutzerdefinierten Elementen, werden jedoch ohne Verwendung der Webkomponenten-APIs implementiert. Winkelanweisungen sind eine Möglichkeit, benutzerdefinierte Elemente zu erstellen, aber Polymer und die Webkomponenten-Spezifikation sind die standardbasierte Methode, um dies zu tun.

Polymerelement:

<polymer-element name="user-preferences" attributes="email">
  <template>
    <img src="https://secure.user-preferences.com/path/{{userID}}" />
  </template>
  <script>
    Polymer('user-preferences', {
      ready: function() {
        this.userID= md5(this.email);
      }
    });
  </script>
</polymer>

Winkelrichtlinie:

app.directive('user-preferences', ['md5', function() {
  return {
    restrict: 'E',
    link: function(scope, element, attrs) {
      scope.userID= md5(attrs.email);
    },
    template: '<img src="https://secure.user-preferences.com/path/{{userID}}" />'
  };
}]);
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.