Angular 2.0 vs Polymer

Salut les gars! Avant de commencer à comparer ces deux frameworks / bibliothèques javascript, il est important de comprendre en quoi le développement Web évolue et en quoi les nouveaux frameworks tentent de faciliter ce changement.

Le nouveau mode de développement web

Composants

  • La conception et le développement modulaires sont des principes populaires parmi les développeurs. Dans le monde du développement Web, le développement à base de composants a évolué selon le principe de la modularité.
  • Le code modulaire est facile à maintenir et à réutiliser. Il y a moins de risques de bogues en raison de la base de code plus petite, isolée et plus testable.
  • Des structures telles que Angular, Ember, React, Backbone et d’autres ont fourni leurs propres solutions de composants pour le Web.

Composants Web

  • Les composants Web ont introduit le concept de composants dans les navigateurs de manière native. Bien que nous puissions toujours utiliser les solutions de composants fournies par les frameworks, les composants Web natifs apportent un degré de réutilisabilité que d’autres frameworks ne peuvent atteindre.
  • Les composants Web encapsulent des modules de fonctionnalité dans l'unité la plus élémentaire de HTML, un élément DOM. Avec les progrès réalisés sur les composants Web, ils sont devenus la voie à suivre pour le code modulaire sur le Web.
  • Les spécifications des composants Web ne sont pas encore totalement implémentées par tous les navigateurs. Mais les éditeurs de navigateurs implémentent activement les différentes parties de la spécification, ce qui signifie que la prise en charge des composants Web ne fera que s'améliorer.

Le pont vers les composants Web

2.0 angulaire

  • Angular est l’un des frameworks javascript les plus populaires parmi les développeurs. La dernière version de Angular (Angular 2) fonctionne également sur le concept de composants.
  • Angular 2 est un framework javascript à part entière qui vous permet non seulement de construire les composants, mais qui vous aide également à gérer divers aspects des applications Web telles que le routage et la gestion des états.
  • Angular 2 peut également être configuré pour générer des composants Web.

Polymère

  • La bibliothèque Polymer est une couche de sucre légère au-dessus des API de composants Web. Polymer est une bibliothèque qui nous aide à exploiter tout le potentiel des composants Web.
  • Contrairement à un framework javascript classique, Polymer est conçu pour tirer parti des fonctionnalités intégrées à la plateforme Web elle-même afin de vous permettre de créer des composants.
  • #UseThePlatform est le nom que Polymer a donné pour représenter la volonté du navigateur de faire le gros du travail sans bibliothèque.

Comment se comparent-ils

Taille:

La taille d'une application Web a un impact direct sur les performances de temps de chargement. Outre le code d'application et les ressources, les frameworks externes et les bibliothèques augmentent également la taille de l'application. Il est donc souhaitable que la contribution des bibliothèques externes soit aussi réduite que possible.

Angulaire 2.0: 566 Ko - 766 Ko. La taille du paquet angular 2 minifié est de 566K. Angular 2 s'appuie sur un motif observable fourni par la bibliothèque Rxjs. La taille de Angular 2 avec la bibliothèque Rxjs est de 766K.

Polymère: 127 Ko - 168 Ko. La taille du polymère 1.6 minifié est de 127 Ko. Il nécessite également un polyfill appelé webcomponents.js pour les navigateurs où les composants Web ne sont pas pris en charge de manière native. La taille de webcomponents-lite.js est de 41 Ko

Réutilisation:

La structure des composants offre de nombreuses possibilités de réutilisation. Les composants sont de petits morceaux de code isolés pouvant être utilisés à plusieurs endroits de la même application ou entre plusieurs applications.

Angular 2.0: Prend en charge les composants et leur réutilisation. Les composants angulaires 2 ne peuvent être utilisés que dans les applications angulaires2

Polymère: Prend en charge les composants et la réutilisation. Les composants polymères peuvent idéalement être réutilisés dans toute application Web. L'application non polymère nécessiterait d'importer une bibliothèque de polymères pour pouvoir réutiliser des composants polymères.

Structure d'application:

Dans les grandes applications, il est important que le code soit structuré. Les frameworks aident à structurer et structurer le code.

Angular 2.0: dicte la structure du code. Angular 2 est un cadre à part entière. Il fournit un moyen de structurer l'application. Il vient avec le routage d'application intégré, la gestion d'état et la communication de données

Polymère: Pas de mot à dire dans la structure. Polymer facilite uniquement la création de composants. Cependant, l'équipe de polymères a créé peu de composants pouvant être utilisés pour le routage. Une bibliothèque séparée peut être utilisée pour gérer la communication de données. par exemple. Redux, ou toute autre bibliothèque basée sur Flux.

Longévité:

Lors du choix de la pile technologique, il est important de prendre en compte la longévité des frameworks / bibliothèques. Un framework qui peut devenir obsolète ou stagner très rapidement est un mauvais choix pour la création d'applications.

Angular 2.0: la mise à niveau de la version 1 de Angular de la version 1.x à la version 2 était une refonte complète et entraînerait pratiquement une réécriture complète des applications. Angular a fourni un chemin de mise à niveau de 1.4–1.5–2. Mais l'effort de suivre le chemin de mise à niveau aurait pu être équivalent à une réécriture.

Polymer: Polymer entend être plus léger avec l'évolution de la plateforme Web. La version d’aperçu de Polymer 2 est sortie. Polymer a un mode hybride où 1 et 2 peuvent fonctionner ensemble. Étant donné que le polymère n’est pas lourd, les mises à niveau devraient être plus faciles.

Apprentissage:

Angular 2.0: Typescript est un nouveau langage et sa méthode d’écriture de code «décoratrice» n’est pas non plus bien connue des développeurs JavaScript. Bien que, les prochaines versions de javascript ont le concept de décorateurs. Le développeur devra apprendre le framework ainsi que le langage.

Polymère: les composants polymères peuvent être / habituellement écrits en javascript ES5 / ES6. Les développeurs devront s’habituer au concept des composants (ce qui est également vrai avec Angular 2). Polymer fournit un sucre syntaxique minimal sur l’API des composants Web, ce qui n’impose pas une courbe d’apprentissage abrupte.

Rendu côté serveur:

Le rendu côté serveur est important pour la convivialité du référencement, les aperçus des médias sociaux et la rapidité de visualisation de la page. Cependant, il existe de nombreuses techniques permettant d'obtenir un premier rendu rapide, même avec un rendu côté client. En outre, Google peut indexer les sites Web rendus côté client, mais d'autres moteurs de recherche peuvent avoir des difficultés à le faire.

Angular 2.0: Angular Team travaille sur Angular Universal, qui peut être utilisé avec Angular 2 pour permettre le rendu côté serveur.

Polymer: Polymer n’a pas encore pris en charge le rendu côté serveur.

Pile recommandée

Sur la base de la comparaison ci-dessus, si je dois choisir une pile frontale aujourd'hui, je choisirais ceci:

  • La bibliothèque de polymères est plus légère que la bibliothèque de structure Angular 2.
  • Les composants polymères peuvent être réutilisés dans n'importe quelle application, tandis que les composants Angular 2 ne peuvent être utilisés que dans des applications Angular 2
  • Polymer a l’intention de s’affranchir de l’évolution de la plate-forme Web, c’est-à-dire au fur et à mesure que les navigateurs améliorent la prise en charge des spécifications des composants Web, Polymer sera en mesure de réduire sa taille.
  • Redux est basé sur le modèle de flux. Il donne des indications sur le contrôle du flux de données dans l'application. Cela aide à créer des applications prévisibles et évolutives.

Merci!! S'amuser!

Une version légèrement détaillée de cet article se trouve sur mon blog http://dotjsfile.blogspot.fr 2017/2017/angular2-vs-polymer.html