Quelle est la différence entre les éléments Polymer et les directives AngularJS?
Sur la page Polymer Mise en route , 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>
Vous remarquerez que <x-foo></x-foo> est défini par platform.js et x-foo.html.
Il semble que cela 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?
Est-il prévu de lier Polymer avec AngularJS à l'avenir?
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 de la catégorie des composants Web. Ceux-ci sont:- Éléments personnalisés
- Importations HTML
<template>- Shadow DOM
- Événements de pointeur
- autres
Le menu de gauche dans la documentation ( polymer-project.org ) contient 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>,<link>, un balisage ou tout autre élément d'une importation.Rien "lie"
<x-foo>à x-foo.html. Dans votre exemple, on suppose que la définition d'élément personnalisé de<x-foo>(par exemple<element name="x-foo">) est définie dans x-foo.html. Lorsque le navigateur voit cette définition, elle est enregistrée en tant que nouvel élément.
Sur des questions!
Quelle est la différence entre Angular 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. Ses éléments de base sont des éléments personnalisés (par exemple, tout ce que vous créez est un composant Web) et évolue au fil de l'évolution du Web. À cette fin, nous ne prenons en charge que la dernière version des navigateurs modernes.
J'utiliserai 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 polyfill. N'oubliez pas que ces bibliothèques disparaissent avec le temps, à mesure que les navigateurs adoptent les nouvelles API.
Couche JAUNE: Saupoudrez du sucre avec du polymère.js. Cette couche est notre opinion sur la façon d'utiliser les API de spéc'd, ensemble. Il 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 la création d'applications basées sur des composants Web.
VERT: L'ensemble complet de composants de l'interface utilisateur (couche verte) est toujours en cours. Ce sont des composants Web qui utilisent toutes les couches rouge + jaune.
Directives angulaires ou éléments personnalisés?
Voir Alex Russell réponse . 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 d’un autre cadre que nous utiliserons.
Quels problèmes Polymer ne résout-il pas ou ne résoudra-t-il pas avec AngularJS?
Similarités: 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 constitue à présent un cadre beaucoup plus robuste pour la création d'applications de production. Polymer ne fait que commencer en alpha.
Est-il prévu de lier Polymer avec AngularJS à l'avenir?
Ils sont projets séparés . Cela dit, les équipes Angular et Ember annoncées utiliseront à terme les API de la plate-forme sous-jacente dans leur propre framework.
^ C’est une victoire énorme à l’OMI. Dans un monde où les développeurs Web disposent d'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 grands défis pour "faire le travail".
MISE À JOUR:
Il existe un très bon article sur ce sujet: " Voici la différence entre Polymer et Angular "
Pour ta question:
Est-il prévu de lier Polymer avec AngularJS à l'avenir?
Sur le compte Twitter officiel de AngularJS: "angularjs utilisera polymer pour ses widgets. C'est gagnant-gagnant"
source: https://Twitter.com/angularjs/status/335417160438542337
1 & 2) Les composants Polymer sont étendus 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 soumis à la directive que vous créez, comme un composant Web polymer. Une directive angular pourrait éventuellement entrer en conflit avec quelque chose de votre portée globale. OMI, l’avantage que vous obtiendrez de polymer est ce que j’ai expliqué. Les composants modulaires qui ont associé CSS et JavaScript à ce composant particulier que rien ne peut toucher. DOM intouchable!
Des directives angulaires peuvent être créées pour que vous puissiez annoter un élément avec plusieurs fonctionnalités. Dans Polymer composants Web, ce n'est pas le cas. Si vous souhaitez combiner les fonctionnalités des composants, vous pouvez 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 est limité aux composants Web polymer. Vous pouvez partager des fichiers css & js entre plusieurs composants ou les insérer en ligne.
3) Oui, Angular envisage d'incorporer polymer dans la version 2+ selon Rob Dodson et Eric Bidelman.
C'est drôle comme personne ici n'a mentionné la portée de Word. Je pense que c'est l'une des différences majeures.
Il existe de nombreuses différences, mais elles ont également beaucoup en commun en ce qui concerne la création de lego modulaire, comme des fonctionnalités pour une application. Je pense qu'il est prudent de dire que Angular serait le cadre de l'application et que polymer pourrait un jour vivre dans la même application en suivant les directives parallèles, la différence majeure étant la portée, mais polymer pourrait remplacer pour beaucoup de vos directives actuelles. Mais je ne vois aucune raison pour laquelle Angular ne puisse pas fonctionner tel quel et inclure également des composants polymer.
En relisant les réponses pendant que j'écris ceci, j'ai remarqué qu'Eric Bidelman (ebidel) couvrait en quelque sorte cela dans son réponse :
"Le DOM Shadow permet de composer des bits de HTML mais est également un outil pour encapsuler ce HTML."
Pour vous remercier, nous avons écouté de nombreux entretiens 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 souhaitait. Cela dit, je pense avoir évoqué la réponse qu'il recherche, mais je ne possède pas plus d'informations à ce sujet que Rob Dodson et Eric Bidelman.
Voici mes principales sources d'informations que j'ai rassemblées.
JavaScript Jabber - Polymer avec Rob Dodson et Eric Bidelman
Dans cette vidéo, deux gars d’AngularJS ont parlé des différences et des similitudes entre ces deux cadres (AngularJS 1.2 et Au-delà).
Ces liens vous mèneront aux bonnes questions et réponses:
Polymer est un composant Web Components
" Web Components " est un nouvel ensemble de normes, enveloppées par HTML 5, conçues pour fournir des blocs de construction réutilisables aux applications Web.
Les navigateurs sont à différents états de la spécification "Web Components" et il est donc trop tôt pour écrire du HTML à l'aide de Web Components.
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 Web Components comme si elle était pleinement implémentée dans tous les navigateurs. Ceci s'appelle remplissage multiple , et l'équipe Polymer distribue cette bibliothèque sous la forme 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 de composants Web ouverts et réutilisables via des éléments
Tous les éléments peuvent être personnalisés et étendus. Ceux-ci sont utilisés comme blocs de construction pour tout, des widgets sociaux à l'animation en passant par les clients API Web.
Polymer n'est pas un framework d'application Web
Polymer est plus une bibliothèque qu'un framework.
Polymer ne prend pas en charge des éléments tels que les itinéraires, la portée de l'application, les contrôleurs, etc.
- Mais il existe une liaison bidirectionnelle et l'utilisation de composants a le même effet que les directives Angular.
Bien que Polymer et AngularJS se chevauchent, ils ne sont pas identiques. En fait, l’équipe AngularJS a mentionné l’utilisation des bibliothèques Polymer dans les prochaines versions.
Notez également que Polymer est toujours considéré comme un "bord saillant" tandis que AngularJS se stabilise.
Il sera intéressant de voir évoluer ces deux projets Google!
Je pense que d’un point de vue pratique, à la fin, la fonctionnalité de modèle des directives angular et la méthodologie de composant Web exploitée par polymer accomplissent la même tâche. Comme je peux le constater, les différences majeures sont que polymer utilise les API Web pour inclure des éléments de code HTML, un moyen plus syntaxiquement correct et simple d’atteindre ce que Angular programme en rendant des modèles. . Polymer est cependant, comme cela a été dit, un petit cadre pour la construction de modèles déclaratifs et interactifs à l'aide de composants. Il est uniquement disponible pour la 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. En ce qui concerne votre question, il me semble qu’à ce stade-ci, vous ne tirerez aucun avantage majeur de l’utilisation de polymer angulaire, à l’exception de douzaines de composants prédéfinis, ce qui vous obligerait néanmoins à les reporter angular directives. Toutefois, à l'avenir, à 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 par programmation, car le navigateur pourra les inclure simplement d'une manière similaire à la façon dont il traite les fichiers javascript ou css.
Quelle est la différence entre les deux?
Pour un utilisateur: pas grand chose. Vous pouvez créer des applications géniales avec les deux.
Pour un développeur: Ils utilisent une syntaxe très différente, de sorte que l'une ou l'autre solution nécessite une courbe d'apprentissage assez abrupte. Angular existe depuis plus longtemps et possède une énorme communauté. Vous aurez donc beaucoup de mal à trouver les problèmes qui n'ont pas été résolus.
Pour un architecte: très différent. Angular est un framework d'application responsable de tous les aspects de votre vie. Il a même des directives intégrées verticalement au cas où vous voudriez un composant comme des fonctionnalités. Polymer, par contre, ressemble plus à un paiement par répartition. Vous voulez un modal, bien sûr, vous voulez un widget interactif, pas de problème, vous voulez un traitement d'itinéraire, nous pouvons le faire. Polymer est également plus portable en ce que Angular nécessite une application Angular pour réutiliser des directives. L'idée avec Polymer est d'être plus modulateur et fonctionnera dans d'autres applications, même Angular.
Quels problèmes Polymer résout-il ou non avec AngularJS?
Polymer est une approche qui vise à tirer parti des nouvelles normes des composants Web. Si des fonctionnalités telles que les éléments personnalisés, Shadow DOM et les importations 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 ). Par conséquent, 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 avec AngularJS à l'avenir?
Nous utilisons Angular et Polymer ensemble depuis plus d'un an. Une partie de la décision à cet égard était basée sur les promesses faites directement par l’équipe Polymer que l’interopérabilité soit au rendez-vous. Nous avons abandonné cette idée. Nous allons maintenant utiliser uniquement le polymère.
Pour refaire cela, nous n’aurions probablement pas décidé d’utiliser Polymer, mais plutôt d’attendre sa maturation. Cela étant dit, Polymer a ses avantages (certains plutôt bons) et ses inconvénients (dont certains sont assez frustrants), mais je pense que c'est une discussion pour un autre fil.
Le MVVM (model-view, view-model) proposé par Angular ne constitue pas une préoccupation que Polymer cherche à résoudre. La nature composable et réutilisable que vous donnent les directives Angular (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 plus large servant des objectifs.
Angularjs directive est une approche permettant de créer 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 d'une manière intéressante et plus simple. Polymère n'est en réalité pas un cadre, mais simplement 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 de w3c, que les navigateurs Web mettront éventuellement en œuvre. Le composant Web est la technologie du futur, mais polymer vous permet de l'utiliser dès maintenant.Google Polymer est une bibliothèque qui fournit du sucre syntaxique et des polyfills pour les éléments de construction et les applications Web. Rappelez-vous que polymer n'est pas un cadre, mais une bibliothèque.Mais quand vous êtes en utilisant Polymer, votre cadre est en réalité DOM.Ce post traitait de angular js ver 1 et polymer et j’ai travaillé sur ces deux projets, et je préfère personnellement polymer sur angularjs. Mais Angular version 2 est complètement différent de angularjs ver 1.directive in angular 2 a un sens différent.
Les directives angulaires sont conceptuellement similaires aux éléments personnalisés, mais elles sont implémentées sans l'utilisation des API de composants Web. Les directives Angular permettent de créer des éléments personnalisés, mais Polymer et la spécification des composants Web constituent la méthode standard pour 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}}" />'
};
}]);