Pourquoi je suis passé d'AngularJS à React

En 2011, lorsque mon code a commencé à être encombré de sélecteurs et de rappels jQuery, AngularJS est venu comme une bouée de sauvetage qui a aidé à une meilleure gestion, un développement rapide et beaucoup plus de fonctionnalités prêtes à l'emploi. La liaison bidirectionnelle d'AngularJS et la philosophie du "modèle en tant que source unique de vérité" m'ont époustouflé et ont réduit la redondance des données dans mon application.

Au fil du temps, cependant, j'ai découvert qu'AngularJS avait ses propres points faibles. Finalement, cela m'a causé suffisamment de frustration que j'ai commencé à chercher des solutions alternatives.

Points douloureux dans AngularJS 1.x

• DOM pour l'exécution

  Angular s'appuie fortement sur le DOM pour son flux d'exécution. Dans le démarrage par défaut des applications, il scanne le DOM et le compile avec les priorités des directives, ce qui rend difficile le débogage et le test de l'ordre d'exécution.

• Sa propre injection de dépendance

  JavaScript n'a pas de gestionnaire de packages ni de résolveur de dépendances. Mais dernièrement, des implémentations comme AMD, UMD et CommonJS ont très bien résolu ce problème. Malheureusement, AngularJS n'est utile avec aucun de ceux-ci. Au lieu de cela, il introduit sa propre injection de dépendance (DI) ; bien qu'il existe des implémentations AngularJS DI non officielles utilisant RequireJS.

• La reliure à double sens est une arme à double tranchant

  Il est tentant d'utiliser une liaison bidirectionnelle, mais à mesure que la complexité de votre composant augmente, cela peut entraîner une catastrophe en termes de performances.

  Comment la liaison bidirectionnelle affecte-t-elle les performances ? Eh bien, JavaScript ES5 n'a aucune implémentation à notifier pour toute modification de ses variables ou objets, donc Angular utilise quelque chose appelé "vérification sale" pour suivre les modifications de données et les synchroniser avec l'interface utilisateur. La vérification sale est effectuée après toute opération effectuée dans la portée d'Angular (cycle de digestion $), ce qui ralentit les performances à mesure que le nombre de liaisons augmente.

  Un autre problème avec la liaison bidirectionnelle est que de nombreux composants différents sur la page sont capables de modifier les données, ce qui entraîne plusieurs sources d'entrées de données. S'il n'est pas bien géré, il peut conduire à une situation ambiguë. Mais pour être juste, c'est purement une question de mise en œuvre.

• Angular a son propre monde

  Chaque opération dans Angular doit passer par son cycle de digestion, sinon vos composants ne se synchroniseront pas avec vos modèles de données. Ainsi, si vous utilisez une bibliothèque JavaScript existante tierce, vous devez l'envelopper avec la fonction $apply d'Angular si elle implique des modifications de données ou vous devrez la convertir en service s'il s'agit d'une bibliothèque utilitaire. C'est comme réinventer chaque module JavaScript disponible pour Angular.

• Trop de concepts et courbe d'apprentissage abrupte

  Apprendre Angular nécessite d'apprendre une tonne de concepts, notamment des modules, des contrôleurs, des directives, des portées, des modèles, des fonctions de liaison, des filtres et l'injection de dépendances.

Rencontrez Réagissez

React, la nouvelle bibliothèque JS open source de Facebook et Instagram, est une manière différente d'écrire des applications JavaScript. Lorsqu'il a été présenté à la JSConf EU en mai 2013, le public a été choqué par certains de ses principes de conception tels que le "flux de données à sens unique" et le "DOM virtuel".

Le site Web officiel de React dit: "React est une bibliothèque JavaScript pour créer des interfaces utilisateur" et oui, uniquement des interfaces et rien d'autre. Ce n'est pas un framework comme AngularJS. Mais vous pouvez écrire des composants autonomes qui se comparent plus ou moins aux directives angulaires. Rapide vue d'ensemble

React repense les meilleures pratiques en matière de développement Web. Reach encourage le flux de données à sens unique et croit en une philosophie selon laquelle les composants sont des machines à états pilotées par les données. Alors que la plupart des autres frameworks aiment travailler avec le DOM et le manipuler directement, React déteste le DOM et s'efforce d'en protéger le développeur. React ne fournit que l'API de base nécessaire pour définir n'importe quel composant d'interface utilisateur et rien d'autre. Reach suit la philosophie UNIX : Small is beautiful. Faites une chose et faites-la au mieux.

C'est une très belle comparaison entre les deux par Pete Hunt (de l'équipe Instagram)

C'est juste une bibliothèque. A-t-on besoin d'un framework avec React ?

Réponse courte : Votre choix.

En utilisant React, vous pouvez créer des interfaces utilisateur, mais nous devons encore gérer les dépendances, effectuer des appels AJAX, appliquer des filtres de données. Si nous avons besoin d'un framework, pourquoi abandonner AngularJS ?

Les frameworks sont un ensemble de packages et un ensemble de règles. Que se passe-t-il si je n'ai pas besoin de certains packages ou si je souhaite échanger avec un autre package. Comment fait-on ça? Nous avons besoin d'un gestionnaire de paquets. Comment gérons-nous les packages dans AngularJS ? C'est votre choix, mais Angular a son propre monde. Vous devrez intégrer chaque package extérieur dans le monde d'Angular, puis l'utiliser. Mais React n'est que du JavaScript, et tout package écrit en JavaScript n'aura pas besoin d'être enveloppé dans React.

Il est donc préférable de choisir nos propres packages dans un référentiel de packages tel que npm et de les organiser à notre guise. La bonne nouvelle est que React encourage l'utilisation de npm, qui contient de nombreux packages prêts à l'emploi. Pour commencer avec React, vous pouvez utiliser l'un de ces kits de démarrage Full-Stack

Avantages de réagir

Alors pourquoi suis-je vraiment passé à React ?

Réagissez c'est rapide !

React adopte une approche différente des autres frameworks. Il ne vous permet pas de travailler directement avec le DOM. Au lieu de cela, il introduit une couche de DOM virtuel entre votre logique JavaScript et le DOM réel. Cela aide à améliorer considérablement la vitesse. Lors de rendus successifs, React effectue un diff sur le DOM virtuel et ne met à jour que la partie du DOM réel qui doit être mise à jour.

Le DOM virtuel aide également à résoudre les problèmes entre navigateurs, car il fournit une API multi-navigateurs unifiée qui fonctionne même dans Internet Explorer 8. (Ouf !)

Tout est un composant (widget UI)

L'écriture de composants d'interface utilisateur autonomes modularise votre application et sépare les préoccupations de chacun d'eux. Chaque composant peut être développé et testé de manière isolée et utiliser à son tour d'autres composants, ce qui augmente la maintenabilité.

Flux de données à sens unique pour la victoire !

Flux est une architecture permettant de créer des couches de données unidirectionnelles dans les applications JavaScript. Il a été conçu sur Facebook avec la bibliothèque de vues React. Cela simplifie le développement et facilite la recherche et la correction des bogues. Flux est plus un concept qu'une implémentation. Il peut également être implémenté dans d'autres frameworks. Alex Rattray a une très belle implémentation de Flux en utilisant Backbone Collection et Model in React.

JavaScript et rien d'autre

Les applications Web modernes fonctionnent différemment du Web traditionnel. La couche View doit être mise à jour avec les interactions de l'utilisateur sans toucher le serveur. Et par conséquent, View et Controller doivent s'appuyer fortement l'un sur l'autre. De nombreux autres frameworks utilisent des moteurs de template comme Handlebars et Moustache pour leur couche View, mais React pense que les deux parties sont si interdépendantes qu'elles doivent résider à un seul endroit sans utiliser de moteur de template tiers, et sans quitter le champ d'application de JavaScript.

JavaScript isomorphe

Le plus gros inconvénient des applications Web JavaScript à page unique est qu'elles ont des limites lorsqu'elles sont explorées par les moteurs de recherche. React a une solution pour cela. React peut pré-rendre les applications sur le serveur avant de les envoyer au navigateur et peut également restaurer le même état dans l'application en direct à partir du contenu statique pré-rendu du serveur. Comme les robots d'exploration des moteurs de recherche s'appuient fortement sur la réponse du serveur plutôt que sur l'exécution de JavaScript, le pré-rendu de ces applications aide à l'optimisation des moteurs de recherche.

React fonctionne bien avec RequireJS, Browserify et Webpack

Les chargeurs et les bundlers sont indispensables lorsque vous créez une application volumineuse. Malheureusement, la version actuelle de JavaScript ne fournit pas de groupeur ou de chargeur de modules, bien qu'il soit proposé dans la prochaine version d'EcmaScript 6 (System.import). Heureusement, nous avons des alternatives comme RequireJS et Webpack, qui sont plutôt correctes.

React est construit avec Browserify, mais si vous cherchez à injecter des ressources d'image et à compiler LESS ou CoffeeScript, Webpack est probablement une meilleure option.

Je suis passé à React avec un peu de douleur.

• Étant donné qu'AngularJS est un framework, il est livré avec de nombreux avantages, notamment un wrapper AJAX dans le service $http, $q en tant que service de promesse, ng-show, ng-hide, ng-class et ng-if en tant qu'instructions de contrôle. pour modèle.

• React n'est pas un framework mais une bibliothèque pour construire l'interface utilisateur, vous devez donc penser à tous les autres éléments par vous-même. Je travaille sur un projet open source qui peut être utilisé avec React pour faciliter votre développement, et la communauté contribue également activement à des composants réutilisables similaires.

  React-components.com est un site Web d'annuaire non officiel où vous pouvez trouver de tels composants open source.

• La philosophie de React ne vous encourage pas à utiliser la liaison bidirectionnelle, ce qui est très pénible lorsque vous traitez des éléments de formulaire et des grilles de données modifiables. Cependant, à mesure que vous commencez à comprendre le flux de données Flux et les magasins, les choses deviennent plus claires, plus simples et plus faciles.

React est nouveau et il faudra donc un certain temps pour que la communauté se développe.

Angular a gagné en popularité ces derniers temps et dispose d'un nombre relativement important d'extensions disponibles comme AngularUI et Restangular. La communauté open source de React est nouvelle, mais elle se développe rapidement, avec des extensions comme React Bootstrap. Ce n'est qu'une question de temps avant que nous ayons plus de composants disponibles, et React peut facilement être utilisé pour le développement rapide d'applications Web.

Conclusion

Si vous avez déjà utilisé AngularJS, vous détesterez peut-être React au début, principalement en raison de son flux de données à sens unique et de l'absence de «cadre» où vous devez vous occuper de beaucoup d'autres choses vous-même. Mais dès que vous serez à l'aise avec le modèle de conception Flux et la philosophie de React, vous réaliserez sa beauté.

Facebook et Instagram utilisent tous deux React. Le nouvel éditeur Atom de Github est construit à l'aide de React. Le prochain Yahoo Mail est en cours de reconstruction dans React. De quels autres exemples avez-vous besoin ? Essayez React dès aujourd'hui.