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


Sur le polymère Commencer page, 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> étant défini par platform.js et 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 que AngularJS n'a pas ou ne veut pas?

  • Y a-t-il des projets pour lier Polymer avec AngularJS dans le futur?


506
2017-08-06 19:42


origine


Réponses:


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

  1. Polymères webcomponents.js est une bibliothèque qui contient plusieurs polyfills pour diverses API W3C qui relèvent du domaine des composants Web. Ceux-ci sont:

    • Éléments personnalisés
    • Importations HTML
    • <template>
    • Ombre DOM
    • É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 comporte é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 d'autres HTML. Vous pouvez inclure <script>, <link>, balisage ou tout autre élément dans une importation.

  3. Rien "liens" <x-foo> à x-foo.html. Dans votre exemple, il est supposé que la définition de l'élément personnalisé de <x-foo> (par exemple. <element name="x-foo">) est défini dans x-foo.html. Lorsque le navigateur voit cette définition, il est enregistré en tant que nouvel élément.

Sur les questions!

Quelle est la différence entre Angular et Polymer?

Nous avons couvert une partie de cela dans notre Vidéo Q & A. En général, Polymer est une bibliothèque qui vise à utiliser (et montrer comment utiliser) les composants Web. Sa base est des éléments personnalisés (par exemple, tout ce que vous construisez est un composant Web) et évolue au fur et à mesure que le Web évolue. Pour ce faire, nous ne prenons en charge que la dernière version des navigateurs modernes.

Je vais utiliser cette image pour décrire l'ensemble de la pile d'architecture de Polymer:

enter image description here

Couche ROUGE: Nous obtenons le web de demain à travers une série de polyfills. Gardez à l'esprit que ces bibliothèques disparaissent au fur et à mesure que les navigateurs adoptent les nouvelles API.

Couche JAUNE: saupoudrer de sucre avec polymer.js. Cette couche est notre opinion sur l'utilisation des API spec'd, ensemble. Il ajoute également des éléments tels que la liaison de données, le sucre syntatique, les surveillants de modifications, les propriétés publiées ... Nous pensons que ces éléments sont utiles pour créer des applications basées sur des composants Web.

VERT: l'ensemble complet des composants de l'interface utilisateur (couche verte) est toujours en cours. Ce sont des composants Web qui utilisent toutes les couches rouges + jaunes.

Directives angulaires ou éléments personnalisés?

Voir Alex Russell répondre. Fondamentalement, Shadow DOM permet de composer des bits HTML mais est également un outil d’encapsulation de ce code HTML. C'est fondamentalement un nouveau concept sur le web et quelque chose d'autres cadres tireront parti.

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

Similitudes: modèles déclaratifs, liaison de données.

Différences: Angular a des API de haut niveau pour les services, les filtres, les animations, etc., prend en charge IE8, et à ce stade, il s'agit d'une infrastructure beaucoup plus robuste pour créer des applications de production. Polymer commence juste en alpha.

Y a-t-il des projets pour lier Polymer avec AngularJS dans le futur?

Ils sont projets séparés. Cela dit, les équipes Angular et Ember annoncé ils finiront par utiliser les API de plate-forme sous-jacentes dans leurs propres frameworks.

^ Ceci est une énorme victoire IMO. Dans un monde où les développeurs Web ont des outils puissants (Shadow DOM, Custom Elements), les auteurs de framework peuvent également utiliser ces primitives pour créer de meilleurs frameworks. La plupart d'entre eux passent actuellement par de grandes étapes pour «faire le travail».

METTRE À JOUR:

Il y a un très bon article sur ce sujet: "Voici la différence entre polymère et angulaire"


510
2017-08-07 00:17



Pour votre question:

Y a-t-il des projets pour lier Polymer avec AngularJS dans le futur?

Sur le compte Twitter officiel d'AngularJS: "angularjs utilisera le polymère pour ses widgets, c'est gagnant-gagnant"

la source : https://twitter.com/angularjs/status/335417160438542337


56
2017-08-07 08:17



Dans cette vidéo, 2 gars d'AngularJS ont parlé des différences et des similitudes entre ces deux frameworks (AngularJS 1.2 et Beyond).

Ces liens vous amèneront aux questions et réponses correctes:


19
2017-10-17 19:27



1 et 2) Les composants en polymère ont une portée en raison de leur arbre caché dans l'ombre. Cela signifie que leur style et leur comportement ne peuvent pas disparaître. Angulaire 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 de polymère est ce que j'ai expliqué .. composants modulaires qui ont porté sur css & 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 fonctionnalités. Dans les composants Web Polymer ce n'est pas le cas. Si vous voulez combiner la fonctionnalité des composants, vous incluez deux composants dans un autre composant (ou les enveloppez dans un autre composant) ou vous pouvez étendre un composant existant. Rappelez-vous la différence principale est que chaque composant est limité dans les composants de la bande polymère. Vous pouvez partager des fichiers css & js sur plusieurs composants ou vous pouvez les intégrer.

3) Oui, Angular prévoit d'incorporer le polymère dans la version 2+ selon Rob Dodson et Eric Bidelman

C'est drôle comment personne ici n'a mentionné le mot portée. Je pense que c'est l'une des principales différences.

Il y a beaucoup de différences, mais elles ont aussi beaucoup de points communs quand il s'agit de créer des lego modulaires comme des fonctionnalités pour une application. Je pense qu'il est sûr de dire que Angular serait le cadre d'application et polymère pourrait un jour vivre dans la même application avec des directives secondaires avec la différence majeure étant la portée, mais le polymère peut remplacer de nombreuses directives actuelles. Mais je ne vois pas pourquoi Angular ne pourrait pas fonctionner tel quel et inclure des composants polymères.

En lisant les réponses à nouveau pendant que j'écris ceci, j'ai remarqué qu'Eric Bidelman (ebidel) a fait une sorte de couverture dans son répondre:

"Shadow DOM permet de composer des bouts de HTML mais est aussi un outil pour encapsuler ce HTML."

Pour donner du crédit quand le crédit est dû, j'ai eu mes réponses d'écouter de nombreuses interviews avec 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 recherche, 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


19
2017-08-10 02:41



Polymer est une cale Web Components

  • "Composants Web"est un nouvel ensemble de normes qui est enveloppé par HTML 5 conçu pour fournir des blocs de construction réutilisables pour les applications Web.

  • Les navigateurs sont dans différents états d'implémentation de la spécification "Composants Web" et il est donc trop tôt pour écrire du HTML en utilisant les composants Web.

  • Mais hélas! Polymer à la rescousse! Polymer est une bibliothèque qui fournit une couche d'abstraction à votre code HTML, lui permettant d'utiliser l'API des composants Web comme si elle était entièrement implémentée dans tous les navigateurs.  C'est appelé poly-remplissageet l'équipe Polymer distribue cette bibliothèque webcomponents.js. Cela s'appelait autrefois platform.js BTW

Mais Polymer est plus qu'une bibliothèque polyfill pour les composants web ...

Polymer fournit également des blocs de construction Web Component ouverts et réutilisables via des éléments 

enter image description here

Tous les éléments peuvent être personnalisés et étendus. Ceux-ci sont utilisés comme blocs de construction pour tout, des widgets sociaux aux animations en passant par les clients API Web.

Polymer n'est pas un framework d'application web

  • Le polymère est plus une bibliothèque qu'un cadre.

  • Polymer n'a pas de support pour les choses comme les routes, la portée de l'application, les contrôleurs, etc.

    • Mais il a une liaison bidirectionnelle, et l'utilisation de composants "se sent" comme pour les directives angulaires.
  • Bien qu'il y ait des chevauchements entre Polymer et AngularJS, ils ne sont pas identiques. En fait, l'équipe AngularJS a mentionné l'utilisation de bibliothèques Polymer dans les prochaines versions.

  • Notez également que Polymer est toujours considéré comme "à la pointe de la technologie" alors que AngularJS se stabilise.

  • Il sera intéressant de regarder ces deux projets Google évoluer!


6
2017-11-18 15:42



Je pense que d'un point de vue pratique, à la fin, la fonction de gabarit des directives angulaires et la méthodologie des composants Web exploitée par le polymère accomplissent toutes les deux la même tâche. Les différences majeures que je peux voir sont que le polymère tire parti des API web pour inclure des bits de HTML, une manière plus syntaxiquement correcte, et simpliste d'accomplir ce que Angular fait par programmation en rendant des templates. Le polymère est cependant, comme on l’a dit, un petit cadre pour la construction de modèles déclaratifs et interactifs utilisant des composants. Il est uniquement disponible pour la conception de l'interface utilisateur et n'est pris en charge que dans les navigateurs les plus modernes. AngularJS est un framework MVC complet conçu pour rendre les applications Web déclaratives à l'aide de liaisons de données, de dépendances et de directives. Ils sont deux animaux complètement différents. À votre question, il me semble qu'à ce stade, vous n'obtiendrez aucun avantage majeur de l'utilisation du polymère par rapport à l'angle, sauf que vous avez des douzaines de composants pré-construits, mais cela vous obligerait à les reporter aux directives angulaires. À l'avenir cependant, au fur et à mesure que les API Web deviendront plus avancées, les composants Web élimineront complètement le besoin de définir et de créer des modèles par programmation, car le navigateur pourra les inclure de la même manière que les fichiers javascript ou CSS.


5
2017-07-07 17:43



Le MVVM (model-view, view-model) proposé par Angular n'est pas une préoccupation que Polymer cherche à résoudre. La nature composable et réutilisable que vous donnent les directives angulaires (une balise personnalisée + combinaison logique associée) est une comparaison plus saine lorsque vous envisagez de comparer Angular et Polymer. Angular est et restera un cadre de service plus large.


0
2017-09-21 05:47



Quelle est la différence entre les deux?

Pour un utilisateur: Pas beaucoup. Vous pouvez créer des applications géniales avec les deux.

Pour un développeur: Ils utilisent une syntaxe différente de sorte que l'une ou l'autre des solutions a une courbe d'apprentissage assez raide. Angular a été autour depuis plus longtemps et a une énorme communauté, donc vous aurez 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 verticalement intégrées dans le cas où vous voulez des fonctionnalités comme des composants. D'un autre côté, le polymère ressemble davantage à un paiement à l'usage. Vous voulez une chose modale, sûre, vous voulez un widget interactif, pas de problème, vous voulez la gestion des routes, nous pouvons le faire. Polymer est également plus portable car Angular nécessite une application Angular pour réutiliser les directives. L'idée avec Polymer est d'être plus modulable et fonctionnera dans d'autres applications, même des applications angulaires.

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

Le polymère est une approche pour tirer parti des nouvelles normes de composants Web. Si les fonctionnalités telles que les éléments personnalisés, les importations Shadow DOM et HTML sont prises en charge localement, il serait insensé de ne pas en tirer parti. Actuellement, la plupart des fonctionnalités des composants Web ne sont pas largement prises en charge (statut actuel) Polymer agit comme une cale ou un pont. Un peu comme un polyfill (en fait il utilise des polyfills).

Y a-t-il des projets pour lier Polymer avec AngularJS dans le futur?

Nous utilisons Angular et Polymer depuis plus d'un an. Une partie de la décision à prendre était fondée sur les promesses faites directement par l’équipe Polymer à l’égard de l’interopérabilité. Nous avons renoncé à cette idée. Nous allons maintenant utiliser uniquement Polymer.

Pour le faire à nouveau, nous n'aurions probablement pas du tout utilisé Polymer, attendons plutôt qu'il mûrisse. Cela étant dit, Polymer a des avantages (certains assez bons) et des inconvénients (dont certains sont assez frustrants), mais je pense que c'est une discussion pour un autre sujet.


0
2018-01-30 04:53



Angularjs directif est une approche pour faire des éléments personnalisés. Vous pouvez définir de nouvelles balises personnalisées avec des attributs personnalisés. Polymer peut aussi le faire, mais il le fera d'une manière intéressante et plus simple.Polymer n'est pas vraiment un cadre, c'est juste une bibliothèque. Mais une bibliothèque puissante et étonnante que vous pouvez tomber amoureux (comme moi). Polymer vous permet d'apprendre la technologie des composants Web natifs de w3c, que les navigateurs Web implémentent éventuellement le composant it.web est la technologie future, mais les polymères vous permettent d'utiliser cette technologie dès maintenant.Google Polymer est une bibliothèque fournissant du sucre syntaxique éléments et applications avec des composants web. Rappelez-vous que j'ai dit que le polymère n'est pas un framework et que c'est une bibliothèque. Mais lorsque vous utilisez Polymer, en réalité votre framework est DOM.Ce post concernait angular js ver 1 et polymer et j'ai été travaillé avec les deux est mes projets et je préfère personnellement le polymère aux angularjs. Mais la version angulaire 2 est complètement différente en comparaison avec angularjs ver 1.directive en angulaire 2 a un sens différent.


0
2018-03-05 19:22