Sur la page de démarrage de Polymer , nous voyons un exemple de Polymer en action:
<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>
Ce que vous remarquerez est <x-foo></x-foo>défini par platform.jset x-foo.html.
Il semble que ce soit l'équivalent d'un module de directive dans AngularJS:
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) {
}
};
});
Quelle est la différence entre les deux?
Quels problèmes Polymer résout-il qu'AngularJS n'a pas ou ne veut pas?
Est-il prévu de lier Polymer à AngularJS à l'avenir?
javascript
angularjs
polymer
Dan Kanze
la source
la source
Réponses:
Vous n'êtes pas le premier à poser cette question :) Permettez-moi de clarifier quelques points avant de passer à vos questions.
Polymer
webcomponents.jsest une bibliothèque qui contient plusieurs polyfills pour diverses API W3C qui relèvent du parapluie des composants Web. Ceux-ci sont:<template>La navigation de gauche dans la documentation ( polymer-project.org ) a une page pour toutes ces "technologies de plate-forme". Chacune de ces pages a également un pointeur sur le polyfill individuel.
<link rel="import" href="x-foo.html">est une importation HTML. Les importations sont un outil utile pour inclure du HTML dans un autre HTML. Vous pouvez inclure<script>, un<link>balisage ou tout autre élément dans une importation.Rien ne "relie"
<x-foo>à x-foo.html. Dans votre exemple, il est supposé que la définition d'élément personnalisé<x-foo>(par exemple<element name="x-foo">) est définie dans x-foo.html. Lorsque le navigateur voit cette définition, il est enregistré en tant que nouvel élément.Passons aux questions!
Quelle est la différence entre angulaire et polymère?
Nous en avons couvert une partie dans notre vidéo de questions-réponses . En général, Polymer est une bibliothèque qui vise à utiliser (et à montrer comment utiliser) les composants Web. Il repose sur des éléments personnalisés (par exemple, tout ce que vous créez est un composant Web) et il évolue au fur et à mesure que le Web évolue. À cette fin, nous ne prenons en charge que la dernière version des navigateurs modernes.
Je vais utiliser cette image pour décrire toute la pile d'architecture de Polymer:
Couche ROUGE: Nous obtenons le Web de demain grâce à un ensemble de polyfills. Gardez à l'esprit que ces bibliothèques disparaissent avec le temps lorsque les navigateurs adoptent les nouvelles API.
Couche JAUNE: Saupoudrer de sucre avec du polymère.js. Cette couche est notre avis sur la façon d'utiliser ensemble les API spécifiées. Il ajoute également des éléments tels que la liaison de données, le sucre syntaxique, les observateurs des modifications, les propriétés publiées ... Nous pensons que ces éléments sont utiles pour la création d'applications basées sur des composants Web.
VERT: L'ensemble complet de composants d'interface utilisateur (couche verte) est toujours en cours. Ce seront des composants Web qui utiliseront toutes les couches rouges + jaunes.
Directives angulaires vs éléments personnalisés?
Voir la réponse d' Alex Russell . Fondamentalement, Shadow DOM permet de composer des bits de HTML mais est également un outil pour encapsuler ce HTML. Il s'agit fondamentalement d'un nouveau concept sur le Web et quelque chose que d'autres cadres utiliseront.
Quels problèmes Polymer résout-il qu'AngularJS n'a pas ou ne veut pas?
Similitudes: modèles déclaratifs, liaison de données.
Différences: Angular possède des API de haut niveau pour les services, filtres, animations, etc., prend en charge IE8 et, à ce stade, est un cadre beaucoup plus robuste pour la création d'applications de production. Polymer commence tout juste en alpha.
Est-il prévu de lier Polymer à AngularJS à l'avenir?
Ce sont des projets séparés . Cela dit, les équipes Angular et Ember ont annoncé qu'elles finiront par utiliser les API de plate-forme sous-jacentes dans leurs propres cadres.
^ C'est une énorme victoire à l'OMI. Dans un monde où les développeurs Web disposent d'outils puissants (Shadow DOM, éléments personnalisés), les auteurs de framework peuvent également utiliser ces primitives pour créer de meilleurs frameworks. La plupart d'entre eux passent actuellement par de grands cerceaux pour "faire le travail".
MISE À JOUR:
Il y a un très bon article sur ce sujet: " Voici la différence entre Polymer et Angular "
la source
Pour votre question:
Du compte Twitter officiel d'AngularJS: "angularjs utilisera du polymère pour ses widgets. C'est gagnant-gagnant"
source: https://twitter.com/angularjs/status/335417160438542337
la source
Are there plans to tie Polymer in with AngularJS in the future?je suppose que c'est une bonne idée de citer le post original de l'équipe AngularJS que vous ne pensez pas ?Dans cette vidéo, 2 gars d'AngularJS ont parlé des différences et des similitudes concernant ces deux frameworks (AngularJS 1.2 et au-delà).
Ces liens vous amèneront aux bonnes questions / réponses:
la source
1 & 2) Les composants en polymère sont délimités en raison de leur arbre caché dans le dom de l'ombre. Cela signifie que leur style et leur comportement ne peuvent pas saigner. Angular n'est pas limité à cette directive particulière que vous créez comme un composant Web polymère. Une directive angulaire pourrait éventuellement entrer en conflit avec quelque chose dans votre portée globale. IMO l'avantage que vous obtiendrez du polymère est ce que j'ai expliqué .. composants modulaires qui ont étendu CSS et JavaScript à ce composant particulier que rien ne peut toucher. DOM intouchable!
Des directives angulaires peuvent être créées afin que vous puissiez annoter un élément avec plusieurs éléments de fonctionnalité. Dans les composants Web Polymer, ce n'est pas le cas. Si vous souhaitez combiner des fonctionnalités de composants, vous devez inclure deux composants dans un autre composant (ou les envelopper dans un autre composant) ou vous pouvez étendre un composant existant. Rappelez-vous que la principale différence réside toujours dans le fait que chaque composant est défini dans les composants de la bande polymère. Vous pouvez partager des fichiers css et js sur plusieurs composants ou les incorporer.
3) Oui, Angular prévoit d'incorporer le polymère dans la version 2+ selon Rob Dodson et Eric Bidelman
C'est drôle comme personne ici n'a mentionné le mot portée. Je pense que c'est l'une des principales différences.
Il existe de nombreuses différences, mais elles ont également beaucoup en commun lorsqu'il s'agit de créer des fonctionnalités modulaires de type lego pour une application. Je pense qu'il est prudent de dire que Angular serait le cadre d'application et que polymère pourrait un jour vivre dans la même application avec des directives parallèles, la principale différence étant la portée, mais le polymère pourrait remplacer bon nombre de vos directives actuelles. Mais je ne vois aucune raison pour laquelle Angular ne pourrait pas fonctionner tel quel et inclure également des composants en polymère.
En relisant les réponses pendant que j'écris ceci, j'ai remarqué qu'Eric Bidelman (ebidel) a en quelque sorte couvert cela dans sa réponse :
"Shadow DOM permet de composer des bits de HTML mais est également un outil pour encapsuler ce HTML."
Pour rendre hommage où le mérite est dû, j'ai obtenu mes réponses en écoutant de nombreuses interviews de Rob Dodson et Eric Bidelman . Mais je pense que la réponse n'a pas été formulée pour donner à la question de ce type la compréhension qu'il voulait. Cela dit, je pense avoir abordé la réponse qu'il cherche, mais je ne possède en aucun cas plus d'informations sur le sujet que Rob Dodson et Eric Bidelman.
Voici mes principales sources pour les informations que j'ai recueillies.
JavaScript Jabber - Polymer avec Rob Dodson et Eric Bidelman
Shop Talk Show - Composants Web avec Rob Dodson
la source
normalize.css, ça ne se normalise pas à l'intérieur du dom ombre? J'ai donc besoin de normaliser séparément chacun de ces composants, sans moyen de le faire une fois? Est-ce que c'est une bonne chose?normalize.cssou autres feuilles basée sur des étiquettes), qui est à nouveau facilement réalisable sans l' ombre DOM. Agréablement pas un isolement parfait mais prob. fonctionne dans 95% des cas d'utilisation, du moins ceux auxquels je peux penser." Composants Web " est un nouvel ensemble de normes enveloppé par HTML 5 conçu pour fournir des blocs de construction réutilisables pour les applications Web.
Les navigateurs sont à différents niveaux d'implémentation de la spécification "Composants Web", et il est donc trop tôt pour écrire du HTML à l'aide de composants Web.
Mais hélas! Le polymère à la rescousse! Polymer est une bibliothèque qui fournit une couche d'abstraction à votre code HTML, lui permettant d'utiliser l'API Web Components comme si elle était entièrement implémentée dans tous les navigateurs. Ceci est appelé poly-remplissage , et l'équipe Polymer distribue cette bibliothèque sous le nom de webcomponents.js . Auparavant, cela s'appelait platform.js btw.
Mais Polymer est plus qu'une bibliothèque de polyfill pour les composants Web ...
Tous les éléments peuvent être personnalisés et étendus. Ils sont utilisés comme blocs de construction pour tout, des widgets sociaux à l'animation en passant par les clients API Web.
Le polymère est plus une bibliothèque qu'un framework.
Polymer ne prend pas en charge des éléments tels que les routes, la portée de l'application, les contrôleurs, etc.
Bien qu'il y ait des chevauchements entre Polymer et AngularJS, ils ne sont pas les mêmes. En fait, l'équipe AngularJS a mentionné l'utilisation de bibliothèques Polymer dans les prochaines versions.
Notez également que le polymère est toujours considéré comme un «bord de saignement» tandis que AngularJS se stabilise.
Il sera intéressant de voir évoluer ces deux projets Google!
la source
Je pense que d'un point de vue pratique, au final, la fonction de modèle des directives angulaires et la méthodologie des composants Web exploitée par le polymère accomplissent toutes deux la même tâche. Les principales différences, comme je peux le voir, sont que polymère utilise les API Web pour inclure des bits de HTML, une manière plus syntaxiquement correcte et simpliste de réaliser ce que fait Angular par programme lors du rendu des modèles. Le polymère est cependant, comme cela a été dit, un petit cadre pour construire des modèles déclaratifs et interactifs à l'aide de composants. Il est disponible uniquement à des fins de conception d'interface utilisateur et n'est pris en charge que par les navigateurs les plus modernes. AngularJS est un framework MVC complet conçu pour rendre les applications web déclaratives en utilisant des liaisons de données, des dépendances et des directives. Ce sont deux animaux complètement différents. A votre question, il me semble à ce stade que vous n'obtiendrez aucun avantage majeur à utiliser le polymère sur angulaire, sauf avoir des dizaines de composants pré-construits, mais cela nécessiterait toujours de les porter sur des directives angulaires. À l'avenir, cependant, à mesure que les API Web deviendront plus avancées, les composants Web supprimeront complètement la nécessité de définir et de créer des modèles par programmation, car le navigateur pourra simplement les inclure de la même manière qu'il gère les fichiers javascript ou css.
la source
Le MVVM (model-view, view-model) qu'Angular propose n'est pas une préoccupation que Polymer vise à résoudre. La nature composable et réutilisable que les directives angulaires vous donnent (une balise personnalisée + une combinaison logique associée) est une comparaison plus sensée lorsque vous envisagez de comparer angulaire et polymère. Angular est et restera un cadre de travail plus large.
la source
Pour un utilisateur: pas grand-chose. Vous pouvez créer des applications impressionnantes avec les deux.
Pour un développeur: ils utilisent une syntaxe très différente, de sorte que chaque solution a une courbe d'apprentissage assez abrupte. Angular existe depuis plus longtemps et a une communauté ÉNORME, vous aurez donc du mal à trouver des problèmes qui n'ont pas été résolus.
Pour un architecte: très différent. Angular est un cadre d'application responsable de tous les aspects de votre vie. Il a même des directives intégrées verticalement au cas où vous souhaiteriez des fonctionnalités de type composant. Le polymère, d'autre part, ressemble plus à un paiement à l'utilisation. Vous voulez un modal, c'est sûr, vous voulez un widget interactif, pas de problème, vous voulez la gestion des itinéraires, nous pouvons le faire. Le polymère est également plus portable dans la mesure où Angular nécessite une application Angular pour réutiliser les directives. L'idée avec Polymer est plus modulatrice et fonctionnera dans d'autres applications, même des applications angulaires.
Le polymère est une approche pour se diriger vers tirer parti des nouvelles normes de composants Web. Si des fonctionnalités telles que des éléments personnalisés, Shadow DOM et les importations HTML sont prises en charge localement, il serait stupide de ne pas en tirer parti. Actuellement, la plupart des fonctionnalités des composants Web ne sont pas largement prises en charge ( état actuel ), donc Polymer agit comme une cale ou un pont. Un peu comme un polyfill (en fait, il utilise des polyfill).
Nous utilisons Angular et Polymer ensemble depuis plus d'un an. Une partie de la décision de le faire était basée sur les promesses faites directement par l'équipe Polymer à nous que l'interopérabilité soit là. Nous avons abandonné cette idée. Nous nous dirigeons maintenant vers l'utilisation de Polymère uniquement.
Pour recommencer, nous n'aurions probablement pas du tout décidé d'utiliser Polymer, au lieu d'attendre qu'il mûrisse. Cela étant dit, Polymer a ses avantages (certains assez bons) et ses inconvénients (dont certains sont assez frustrants), mais je pense que c'est une discussion pour un autre fil.
la source
Directive Angularjsest une approche pour créer des éléments personnalisés. vous pouvez définir de nouvelles balises personnalisées avec des attributs personnalisés. Le polymère peut également le faire, mais il le fera de manière intéressante et plus simple.Le polymère n'est en fait pas un cadre, c'est juste une bibliothèque, mais une bibliothèque puissante et étonnante dont vous pouvez tomber amoureux (comme moi). Polymer vous permet d'apprendre la technologie des composants Web natifs créée par w3c, que les navigateurs Web implémentent finalement. des éléments et des applications avec des composants Web. Souvenez-vous que j'ai dit que le polymère n'est pas un framework et que c'est une bibliothèque. ce poste était sur angulaire js ver 1 et polymère et j'ai été travaillé avec les deux est mes projets et je préfère personnellement le polymère aux angularjs. Mais Angular version 2 est complètement différent par rapport à angularjs ver 1.directive dans angular 2 a une signification différente.
la source
Les directives angulaires sont conceptuellement similaires aux éléments personnalisés, mais elles sont implémentées sans utiliser les API des composants Web. Les directives angulaires sont un moyen de créer des éléments personnalisés, mais Polymer et la spécification des composants Web sont le moyen normalisé de le faire.
élément polymère:
Directive angulaire:
la source