Quelle est la différence entre les éléments Polymer et les directives AngularJS?

524

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
source
— LCJ

Réponses:

520

Vous n'êtes pas le premier à poser cette question :) Permettez-moi de clarifier quelques points avant de passer à vos questions.

  1. 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:

    • Éléments personnalisés
    • Importations HTML
    • <template>
    • DOM fantôme
    • Événements de pointeur
    • autres

    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.

  2. <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.

  3. 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:

entrez la description de l'image ici

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 "

— Ebidel
source
46
Le point important ici, c'est que Polymer vise à faire progresser le Web tel que nous le connaissons, notamment en montrant comment les composants Web peuvent rendre le Web ouvert, partageable et extensible. AngularJS (et Ember d'ailleurs) consiste à créer un cadre qui exploite les meilleures parties du navigateur pour créer des applications réactives. Une fois que les composants Web sont mieux pris en charge par les navigateurs, les frameworks angulaires et autres peuvent s'appuyer sur eux, pour rendre le code du framework plus petit et les applications plus simples. C'est pourquoi c'est gagnant-gagnant pour tous.
— Schmuli
31
Je ne comprends toujours pas quelle est la différence pratique entre les éléments personnalisés en polymère et les directives angulaires? Pourquoi utiliser des éléments personnalisés en polymère au lieu de directives angulaires dans un projet angulaire?
— ronag du
3
Les projets Angular et Ember existants bénéficieront donc à terme de l'utilisation des API de plate-forme sous-jacentes. Mais lorsque les composants Web sont mieux pris en charge par les navigateurs, y aurait-il un avantage à continuer à utiliser Angular sur de nouveaux projets, ou devient-il effectivement redondant?
— crêpe du
8
Je pense que pour le rendre noir et blanc: restez avec AngularJS pour la production et jouez avec Polymer pendant votre temps libre afin que vous le connaissiez le moment venu.
— thdoan
31
C'est un bon aperçu de polymer.js mais ne répond en rien à la question en profondeur ...
— Christoph
57

Pour votre question:

Est-il prévu de lier Polymer à AngularJS à l'avenir?

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

— loïc m.
source
2
@NREZ Ok, je ne réponds pas au titre du post, mais une des questions à l'intérieur du post Ma réponse est juste pour la 3ème question: 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 ?
— loïc m.
Oui, bien sûr, votre point est valide ... Juste que la description aurait pu être meilleure ... Comme je l'ai fait cette fois et je suis sûr que la prochaine fois, vous le ferez aussi ...
— NREZ
Oui bien sûr. merci pour votre mise à jour :) (je commence juste à vraiment utiliser stackoverflow, donc je ne vois pas votre mise à jour avant de vous répondre ...)
— loïc m.
Alors, ont-ils changé d'avis? Je n'arrive pas à trouver où ils utilisent du polymère.
— theblang
je ne pense pas que ce soit une réponse.
— astroanu
19

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

— Eric Bishard
source
1
Donc si j'utilise 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?
— Dmitri Zaitsev
1
Ne pensez pas au Shadow DOM comme un IFRAME. Et j'utilise cette comparaison librement car ce n'est pas un IFRAME. Mais dans un IFRAME, vous auriez votre propre document qui n'est pas affecté par les pages CSS et JavaScript du document parent. C'est une très bonne chose. Cela signifie que vous pouvez garantir qu'un composant spécifique fonctionnera comme prévu et ne sera pas gêné par la page parent. Cependant, si le DOM fantôme voulait utiliser DOM à partir de la page parent, il le peut. Mais c'est un autre sujet.
— Eric Bishard
1
Je vois, oui, CSS est un langage qui fuit, mais dans la plupart des cas, il existe une solution simple (mais pas parfaite) en utilisant des préfixes de classe uniques à l'intérieur du DOM que vous souhaitez isoler. Et, bien sûr, en évitant les sélecteurs de balises et d'identifiants, ce qui n'est pas une bonne pratique de toute façon. D'autre part, certaines de ces déclarations vous pouvez effectivement vouloir à fuir (comme 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.
— Dmitri Zaitsev
2
Cela dit, je dois dire que je vois le mérite d'une bonne isolation et que votre réponse fournit une bonne explication.
— Dmitri Zaitsev
6

Le polymère est une cale de composants Web

  • " 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 ...

Polymer fournit également des blocs de construction de composants Web ouverts et réutilisables via Elements

entrez la description de l'image ici

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 n'est pas un cadre d'application 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.

    • Mais il a une liaison bidirectionnelle et l'utilisation de composants "ressemble" à l'utilisation de directives angulaires.

  • 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!

— Robert Christian
source
Le polymère n'est pas une cale ou des polyfills. C'est ce que sont les polyfills webcomponents.js. Polymer est une bibliothèque de création de composants Web. L'équipe Polymer a également créé des collections de composants Web (mis en œuvre à l'aide de Polymer), mais ceux-ci ne sont pas non plus "Polymer"
— ebidel
Mise à jour: Polymer a maintenant des routes et est stable! : D
— JordyvD
5

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.

— richbai90
source
1
"Ce sont deux animaux complètement différents." Oui, mais cela n'a rien à voir avec la question. La question concerne Polymer ELEMENTS vs AngularJS DIRECTIVES. Et ceux-ci sont très similaires à bien des égards. Nous ne demandons pas quel est le meilleur Framework à utiliser. Polymer vs AngularJS. "Il me semble qu'à ce stade, vous n'obtiendrez aucun avantage majeur à utiliser un polymère par rapport à l'angulaire" Personne ne l'a suggéré, en fait, nous avons tous parlé de les utiliser éventuellement côte à côte dans une certaine mesure. "A votre question, ... vous n'aurez aucun avantage à utiliser un polymère par rapport à angulaire" Encore une fois, pas la question.
— Eric Bishard
0

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.

— saurshaz
source
0

Quelle est la différence entre les deux?

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.

Quels problèmes Polymer résout-il qu'AngularJS n'a pas ou ne veut pas?

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).

Est-il prévu de lier Polymer à AngularJS à l'avenir?

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.

— Pourquoi pas
source
0

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.

— behzad besharati
source
0

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:

<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>

Directive angulaire:

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}}" />'
  };
}]);
— chandu
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.