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

Question

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

Demandé el 6 de Août, 2013: Quand la question a-t-elle été
49922 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Ouvert: Situation réelle de la question

Sur le polymère Pour commencer page, nous voyons un exemple de Polymère 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, c'est que <x-foo></x-foo> étant défini par platform.js y 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 sont les problèmes que Polymer résout et qu'AngularJS n'a pas résolus ou ne résoudra pas ?
Est-il prévu de lier Polymer à AngularJS à l'avenir ?

Demandé el 6 de Août, 2013 par Dan Kanze

0 votes

Informations utiles ici 2ality - Les rôles d'AngularJS et de Polymer

Commenté el 27 de Janvier, 2016 par Lijo

Answer 1

5 Réponses

Answer 2

518voto

ebidel Points 11312

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

Polymère webcomponents.js est une bibliothèque qui contient plusieurs polyfills pour diverses API du W3C qui relèvent de l'ombrelle des composants Web. Il s'agit de :
- Éléments personnalisés
- Importations HTML
- <template>
- DOM de l'ombre
- Événements relatifs aux pointeurs
- autres
Le menu de gauche dans la documentation ( projet-polymère.org ) a une page pour toutes ces "technologies de plate-forme". Chacune de ces pages contient également un pointeur vers le polyfill individuel.
<link rel="import" href="x-foo.html"> est un import HTML. Les importations sont un outil utile pour inclure du HTML dans d'autres HTML. Vous pouvez inclure <script> , <link> , le balisage ou tout autre élément dans une importation.
Rien "liens" <x-foo> à x-foo.html. Dans votre exemple, on suppose 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 l'enregistre comme un nouvel élément.

Passons aux questions !

Quelle est la différence entre Angular et Polymer ?

Nous avons abordé certains de ces points dans notre Vidéo Q&R . En général, Polymer est une bibliothèque qui vise à utiliser (et à montrer comment utiliser) les composants Web. Sa base est constituée d'éléments personnalisés (par exemple, tout ce que vous construisez est un composant Web) et elle évolue en fonction de l'évolution du Web. À cette fin, nous ne supportons que la dernière version des navigateurs modernes.

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

enter image description here

Couche ROUGE : Nous obtenons le web de demain grâce à un ensemble de polyfills. N'oubliez pas que ces bibliothèques disparaissent avec le temps, à mesure que les navigateurs adoptent les nouvelles API.

Couche JAUNE : Saupoudrer de sucre avec polymer.js. Cette couche est notre opinion sur la façon d'utiliser les API spécifiées, ensemble. Elle ajoute également des éléments tels que la liaison de données, le sucre syntaxique, les observateurs de changement, les propriétés publiées... Nous pensons que ces éléments sont utiles pour construire des applications Web basées sur des composants.

VERT : L'ensemble complet des composants de l'interface utilisateur (couche verte) est toujours en cours. Il s'agira de composants web qui utiliseront l'ensemble des couches rouge et jaune.

Directives Angular ou éléments personnalisés ?

Voir l'article d'Alex Russell responder . Fondamentalement, Shadow DOM permet de composer des morceaux de HTML mais est aussi un outil pour encapsuler ce HTML. Il s'agit d'un concept fondamentalement nouveau sur le Web et d'un outil que les autres frameworks vont exploiter.

Quels sont les problèmes que Polymer résout et qu'AngularJS n'a pas résolus ou ne résoudra pas ?

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

Les différences : Angular possède des API de haut niveau pour les services, les filtres, les animations, etc., prend en charge IE8 et, à ce stade, est un cadre beaucoup plus robuste pour la création d'applications de production. Polymer n'en est qu'à ses débuts en version alpha.

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

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

C'est une énorme victoire, selon moi. Dans un monde où les développeurs web disposent d'outils puissants (Shadow DOM, Custom Elements), les auteurs de frameworks peuvent également utiliser ces primitives pour créer de meilleurs frameworks. La plupart d'entre eux doivent actuellement passer par de grands obstacles pour "faire le travail".

UPDATE :

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

Répondu el 7 de Août, 2013 par ebidel (11312 Points )

46 votes

Le point important ici est que Polymer a pour but de faire avancer 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 par la même occasion) vise à créer un cadre qui exploite les meilleures parties du navigateur pour créer des applications réactives. Une fois que les composants Web seront mieux pris en charge par les navigateurs, Angular et d'autres frameworks pourront s'appuyer sur eux pour réduire le code du framework et simplifier les applications. C'est pourquoi il s'agit d'une solution gagnant-gagnant pour tous.

Commenté el 11 de Août, 2013 par Schmuli

0 votes

Je comprends les bases de Polymer, et j'utilise aussi Angular... Je me fiche également d'IE8 ou d'une version inférieure. Ces deux frameworks sont-ils actuellement compatibles ? Ou y a-t-il des problèmes cachés à les inclure ensemble ?

Commenté el 14 de Décembre, 2013 par Steve

31 votes

Je ne comprends toujours pas quelle est la différence pratique entre les éléments personnalisés Polymer et les directives Angular ? Pourquoi utiliser des Polymer Custom Elements plutôt que des Angular Directives dans un projet Angular ?

Commenté el 15 de Décembre, 2013 par ronag

Afficher 7 autres commentaires

Answer 3

57voto

loïc m. Points 471

Pour votre question :

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

Extrait du compte twitter officiel d'AngularJS : "angularjs va utiliser le polymère pour ses widgets. C'est gagnant-gagnant"

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

Répondu el 7 de Août, 2013 par loïc m. (471 Points )

2 votes

@NREZ Ok, je ne réponds pas au titre du post, mais à l'une des questions du post. Ma réponse ne concerne que la troisième question : Are there plans to tie Polymer in with AngularJS in the future? Je pense que c'est une bonne idée de citer le message original de l'équipe AngularJS, vous ne croyez pas ?

Commenté el 14 de Août, 2013 par loïc m.

0 votes

Je suis sûr que votre point de vue est valable... Juste que la description aurait pu être meilleure... Comme je l'ai fait cette fois-ci et je suis sûr que la prochaine fois tu le feras aussi...

Commenté el 14 de Août, 2013 par NREZ

0 votes

Oui bien sûr. merci pour votre mise à jour :) (je commence tout juste à utiliser stackoverflow, donc je ne vois pas votre mise à jour avant de vous répondre...)

Commenté el 14 de Août, 2013 par loïc m.

Afficher 2 autres commentaires

Answer 4

19voto

Tobias Oberrauch Points 238

Dans cette vidéo, deux spécialistes d'AngularJS parlent des différences et des similitudes de ces deux frameworks (AngularJS 1.2 et au-delà).

Ces liens vous amèneront aux bonnes questions-réponses :

Répondu el 17 de Octobre, 2013 par Tobias Oberrauch (238 Points )

Answer 5

19voto

Eric B Points 505

1 & 2) Les composants polymères sont scopés en raison de leur arbre caché dans le shadow dom. Cela signifie que leur style et leur comportement ne peuvent pas s'échapper. Angular n'est pas limité à la 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é des composants modulaires qui ont une portée css et JavaScript à ce composant particulier que rien ne peut toucher. Un DOM intouchable !

Il est possible de créer des directives Angular afin d'annoter un élément avec plusieurs éléments de fonctionnalité. Dans les composants Web Polymer, ce n'est pas le cas. Si vous voulez combiner les fonctionnalités des 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 dans le fait que chaque composant a une portée dans les composants Web Polymer. Vous pouvez partager les fichiers css et js entre plusieurs composants ou les mettre en ligne.

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

C'est drôle que personne ici n'ait mentionné le mot scope. Je pense que c'est l'une des principales différences.

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

En relisant les réponses pendant que j'écris ces lignes, j'ai remarqué qu'Eric Bidelman (ebidel) a en quelque sorte abordé ce sujet dans sa réponse. responder :

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

Pour rendre à César ce qui appartient à César, j'ai obtenu mes réponses en écoutant de nombreux entretiens avec les personnes suivantes Rob Dodson y Eric Bidelman . Mais je pense que la réponse n'était pas formulée de manière à donner à la question de ce type la compréhension qu'il souhaitait. 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 les principales sources des informations que j'ai recueillies.

JavaScript Jabber - Polymer avec Rob Dodson et Eric Bidelman

Shop Talk Show - Composants Web avec Rob Dodson

Répondu el 10 de Août, 2014 par Eric B (505 Points )

1 votes

Donc si j'utilise normalize.css il ne se normalise pas à l'intérieur du shadow dom ? Je dois donc normaliser séparément chacun de ces composants, sans pouvoir le faire en une seule fois ? Est-ce une bonne chose ?

Commenté el 20 de Août, 2014 par Dmitri Zaitsev

1 votes

Ne pensez pas au DOM de l'ombre comme à un IFRAME. Et j'utilise cette comparaison librement parce que 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 perturbé par la page parent. Cependant, si le DOM fantôme voulait utiliser le DOM de la page parente, il le pourrait. Mais ceci est un autre sujet.

Commenté el 21 de Août, 2014 par Eric B

1 votes

Je vois, oui, CSS est un langage qui fuit, mais dans la plupart des cas il y a une solution simple (bien que pas parfaite) en utilisant des préfixes de classe uniques à l'intérieur du DOM que vous voulez isoler. Et, bien sûr, en évitant les sélecteurs tag et id, ce qui n'est pas une bonne pratique de toute façon. D'un autre côté, certaines de ces déclarations que vous pouvez en fait veulent pour fuir (comme normalize.css ou d'autres feuilles basées sur des balises), ce qui est à nouveau facilement réalisable sans Shadow DOM. Ce n'est pas une isolation parfaite, mais cela fonctionne probablement dans 95% des cas d'utilisation, du moins ceux auxquels je pense.

Commenté el 21 de Août, 2014 par Dmitri Zaitsev

Afficher 1 autres commentaires

Answer 6

5voto

richbai90 Points 497

D'un point de vue pratique, je pense qu'en fin de compte, la fonction de modèle des directives angulaires et la méthodologie des composants Web utilisée par les polymères accomplissent toutes deux la même tâche. Les principales différences, telles que je les vois, sont que polymer exploite les API web pour inclure des morceaux de HTML, une manière plus syntaxiquement correcte et plus simple de réaliser ce qu'Angular fait de manière programmatique en rendant les templates. Polymer est cependant, comme cela a été dit, un petit cadre pour la création de modèles déclaratifs et interactifs à l'aide de composants. Il n'est disponible qu'à 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 grâce à l'utilisation de liaisons de données, de dépendances et de directives. Ce sont deux animaux complètement différents. Pour répondre à votre question, il me semble qu'à ce stade, vous n'obtiendrez aucun avantage majeur à utiliser polymer plutôt qu'angular, à l'exception d'avoir des douzaines de composants pré-construits, mais cela nécessiterait encore de les porter vers les directives angular. À 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 construire des modèles de manière programmatique, car le navigateur pourra simplement les inclure de la même manière qu'il gère les fichiers javascript ou css.

Répondu el 7 de Juillet, 2014 par richbai90 (497 Points )

1 votes

"Ce sont deux animaux complètement différents." Oui, ils le sont, mais cela n'a rien à voir avec la question. La question porte sur les ÉLÉMENTS polymères par rapport aux DIRECTIVES d'AngularJS. Et ils 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 en utilisant polymère sur angular" Personne n'a suggéré cela, en fait, nous avons tous parlé d'éventuellement les utiliser côte à côte dans une certaine capacité. "Pour répondre à votre question, ... vous n'aurez aucun avantage à utiliser polymer plutôt qu'angular" Encore une fois, ce n'est pas la question.

Commenté el 6 de Novembre, 2014 par Eric B

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions connexes

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: