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?
javascript
angularjs
polymer
Dan Kanze
quelle
quelle
Antworten:
Sie sind nicht der erste, der diese Frage stellt :) Lassen Sie mich einige Dinge klären, bevor ich zu Ihren Fragen komme.
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:<template>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.
<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.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:
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 "
quelle
Für Ihre Frage:
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
quelle
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 ?In diesem Video sprachen 2 Leute von AngularJS über Unterschiede und Ähnlichkeiten bei diesen beiden Frameworks (AngularJS 1.2 und darüber hinaus).
Über diese Links gelangen Sie zu den richtigen Fragen und Antworten:
quelle
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
quelle
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?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." 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 ...
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 eher eine Bibliothek als ein Gerüst.
Polymer unterstützt keine Routen, Anwendungsbereiche, Controller usw.
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!
quelle
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.
quelle
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.
quelle
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.
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).
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.
quelle
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.
quelle
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:
Winkelrichtlinie:
quelle