Un guide du développeur moderne –

Cet article a été créé en partenariat avec Sencha . Merci de soutenir les partenaires qui rendent SitePoint possible.

Le code source de l'application JavaScript est traditionnellement difficile à comprendre, en raison de la propagation du code dans les fichiers JavaScript, HTML et CSS, ainsi que des événements et des données circulant dans un certain nombre de chemins non intuitifs. Comme tous les logiciels, l'environnement de développement JavaScript comprend des bundlers, des gestionnaires de packages, des systèmes de contrôle de version et des outils de test. Chacun de ces éléments nécessite une certaine courbe d'apprentissage.

Les incohérences et les incompatibilités entre les navigateurs ont historiquement exigé que divers ajustements et cas spéciaux soient saupoudrés autour du code, et très souvent la correction d'un bogue dans un navigateur casse quelque chose sur un autre navigateur. En conséquence, les équipes de développement ont du mal à créer et à maintenir des applications à grande échelle de haute qualité alors que la demande pour ce qu'elles font monte en flèche, en particulier au niveau des applications d'entreprise où l'impact commercial a remplacé «Combien de lignes de code avez-vous définies? »

Pour faire face à cette complexité, la communauté open source ainsi que les sociétés commerciales ont créé divers frameworks et bibliothèques, mais ces frameworks et bibliothèques sont devenus de plus en plus compliqués car ils ajoutent de plus en plus de fonctionnalités pour tenter de le faire. plus facile pour le développeur. Pourtant, les frameworks et les bibliothèques offrent des avantages significatifs aux développeurs et peuvent également organiser et même réduire la complexité.

Ce guide décrit certains des frameworks et bibliothèques les plus populaires qui ont été créés pour alléger la charge de l'écriture de code d'interface utilisateur (UI) complexe. et comment les applications d'entreprise, en particulier les applications gourmandes en données, peuvent tirer parti de l'utilisation de ces cadres et composants d'interface utilisateur pour fournir des applications plus rapidement, avec une meilleure qualité, tout en respectant le budget de tout atelier de développement.

Complexité du développement Web moderne

Andrew S. Tanenbaum, l'inventeur de Minix (un précurseur de Linux souvent utilisé pour mettre au point de nouveaux systèmes et puces informatiques), a dit un jour ¹ : «Ce qui est bien avec les normes, c'est que vous avez tellement de choix . "Les navigateurs ont suivi un certain nombre de normes, mais pas toutes, et beaucoup ont suivi leur propre chemin.

C'est là que le problème a commencé – la soi-disant" Browser Wars ". Comment chaque navigation r affiché les données de ces sites Web pourraient être très différentes. Des incompatibilités de navigateurs existent toujours aujourd'hui, et on pourrait dire qu'elles sont un peu pires parce que le Web est devenu mobile.

Développer dans le monde d'aujourd'hui signifie être aussi compatible que possible avec le plus grand nombre possible de navigateurs Web populaires, y compris les mobiles et les tablettes. .

Et le mobile?

L'apprentissage d'Android Java (Android) peut être difficile si le développeur n'a pas été amené avec Java. Pour Apple iOS, Objective C est un mashup du langage de programmation C et Smalltalk, qui est différent mais pas totalement étranger aux développeurs C ++. (Après tout, les concepts orientés objet sont similaires.) Mais compte tenu de l'arrivée de (Apple) Swift et d'un nouveau paradigme, la «programmation orientée protocole», l'objectif C a un avenir douteux.

En revanche, le monde JavaScript, grâce à des techniques telles que React Native ou Progressive Web Apps, permet le développement d'applications multiplateformes qui ressemblent à des applications natives et sont performantes. D'un point de vue commercial, une entreprise peut gagner un certain nombre d'avantages en utilisant un seul ensemble d'outils pour créer des applications Web et mobiles sophistiquées.

Le changement constant provoque la consternation

Le monde JavaScript est particulièrement riche en fonctionnalités et en nombre des packages sont disponibles. Le nombre est stupéfiant. Le nombre de technologies clés qui aident les développeurs à créer des applications plus rapidement est également important, mais le taux de changement dans ce domaine provoque ce que l'on appelle un «désabonnement JavaScript», ou simplement un désabonnement. Par exemple, lorsque Angular est passé de la version 1 à 2 (et de nouveau de 3 à 4), les incompatibilités ont nécessité un temps de portage sérieux. Tant que nous n'adopterons pas les normes émergentes pour les composants Web tout n'interagira pas avec tout le reste.

Une chose que l'on peut dire, c'est qu'investir dans des technologies anciennes non étayées par des normes peut limiter la carrière, d'où l'importance des normes ECMA et ECMAScript ainsi que l'adhésion à des modèles de conception plus ou moins courants (la plupart des programmes sont encore, même à ce jour, la maintenance du code existant plutôt que de nouveaux démarrages et architectures). L'utilisation de modèles de conception couramment utilisés comme Model-View-Controller (MVC), Model-View-Viewmodel (MVVM) et Flux signifie que votre code peut être modifié et maintenu plus facilement que si vous inventez un paradigme entièrement nouveau.

de grands écosystèmes et l'utilisation d'outils populaires, robustes et bien pris en charge est une stratégie éprouvée année après année pour donner des résultats positifs pour l'entreprise et la carrière du développeur, et avoir des bibliothèques communes ou standard de l'industrie signifie que vous pouvez trouver des coéquipiers pour vous aider le développement et les tests. Les méthodologies de développement modernes exigent pratiquement l'utilisation de frameworks, de bibliothèques réutilisables et d'API et de composants bien conçus.

Popularité des cadres et bibliothèques modernes

Stack Overflow un site Web de développeurs incroyablement populaire utilisé pour les questions et réponses (n ° 57 selon Alexa en janvier 2019), suit de nombreuses données sur la popularité de diverses technologies et est devenu une source incontournable pour les développeurs. Leur enquête la plus récente a continué de montrer l'incroyable popularité des bibliothèques et des cadres JavaScript et JavaScript:

Selon Stack Overflow, en fonction du type de balises attribuées aux questions, les huit principaux sujets les plus discutés sur le site sont JavaScript, Java, C #, PHP, Android, Python, jQuery et HTML – pas C, C ++, ou des langages plus exotiques comme Ocaml ou Haskell. Si vous créez des sites Web, vous voudrez très probablement utiliser des technologies populaires, car le nombre de produits open source et commerciaux / pris en charge vous permet de coder et de tester plus rapidement, ce qui accélère le temps de

Ce que cela signifie pour les développeurs, c'est que le monde JavaScript continue de dominer tous les autres en termes de nombre de développeurs, et bien que les technologies plus anciennes comme jQuery soient toujours populaires, il est clair que React et Angular sont importants et continuent de croître. Le nouveau venu, Vue, devient également de plus en plus populaire.

Sélection d'Angular, React ou Vue

Angular versus React versus Vue – il y a tellement d'outils open-source. Ajoutez à cela des bibliothèques comme Backbone.js et une centaine d'autres. Comment les développeurs peuvent-ils mettre à jour leurs connaissances sur tant de personnes? Lequel devraient-ils choisir? Dans une certaine mesure, cette décision consiste à choisir des éditeurs de texte: c'est un choix personnel, il est farouchement défendu, et à la fin chacun pourrait réellement fonctionner pour vous.

Si votre principale préoccupation est la popularité, vous ne le faites pas se lancer dans l'apprentissage d'un environnement de programmation riche et compliqué seulement pour voir le support disparaître, alors React est clairement "gagnant" comme le montre la ligne de tendance à long terme. Mais la popularité n'est qu'un attribut dans une longue liste d'achats d'importants facteurs de décision.

Examinons chacun d'eux dans un format facile à digérer.

React

Idéal pour : sites Web qui contiennent beaucoup de données dynamiques et souhaitent des performances très élevées.

React est la bibliothèque JavaScript la plus populaire . Développé et open source par Facebook en 2013, il est rapidement devenu important pour le développement d'énormes applications Web impliquant un traitement dynamique des données. La grande force de React survient lorsque les développeurs doivent créer des applications complexes et souhaitent les modulariser afin que les pièces puissent être réutilisées. React, de par sa nature même, présente des avantages en termes de performances (voir le guide « Quand choisir ExtReact » pour plus d'informations sur la façon dont React utilise les DOM virtuels) et permet aux développeurs d'écrire en JSX. React est particulièrement adapté à la gestion des données en temps réel. Instagram et WhatsApp, deux applications Web extrêmement populaires, utilisent React.

Pour	Contre
Facile à apprendre . React a une syntaxe relativement simple et beaucoup de code HTML. En revanche, Angular nécessite une courbe d'apprentissage abrupte et l'apprentissage de TypeScript (typage fort). React fonctionne avec HTML, CSS3 et d'autres outils familiers et faciles à apprendre.	React continue d'évoluer . Les développeurs doivent continuer à apprendre et suivre les changements de React.
React est une bibliothèque JavaScript, pas un framework . Cela signifie qu'il fournit une méthode déclarative de définition des composants d'interface utilisateur. Il peut également être facilement intégré à d'autres bibliothèques.	JSX peut être robuste . React utilise activement JSX, permettant un mélange de HTML avec JavaScript. Bien que JSX puisse protéger le code contre les injections de piratage, il implique une complexité et une courbe d'apprentissage.
Des couches de données et de présentation séparées . React assure la séparation des couches de données et de présentation et prend en charge les modèles de conception MVC, MVVM et Flux.	React n'est pas une infrastructure complète . L'intégration de cette bibliothèque dans la chaîne d'outils d'un développeur (par exemple, une infrastructure prenant en charge MVC) doit être effectuée par le développeur.
Liaison DOM . Les développeurs n'ont pas à lier les éléments DOM aux fonctionnalités. React gère cela en divisant la liaison sur plusieurs zones du code. React inclut également le concept d'un DOM virtuel et seuls les éléments modifiés sont mis à jour et affichés pour l'utilisateur.	Documentation . L'une des plaintes les plus fréquentes contre React est le manque de documentation officielle.
Composants réutilisables . React offre la possibilité de réutiliser des composants de code de tout niveau à tout moment. Cela permet d'économiser beaucoup de temps lors du développement et facilite la gestion des mises à niveau par les développeurs. Toute modification apportée à un composant n'a aucun effet sur les autres.
Flux de données unidirectionnel . React utilise une liaison de données descendante. Cela permet de s'assurer que les modifications apportées à la structure de l'enfant ne finissent pas par affecter leurs parents. Cela rend le code plus stable, et tout ce que le développeur doit faire pour changer un objet est de modifier son état et d'appliquer des mises à jour. React applique un flux de données descendant.
Interopérez avec d'autres composants . React peut être utilisé comme composant View d'Angular ou d'un autre framework, car il ne vous lie pas à une pile technologique spécifique.
Compatible avec les moteurs de recherche . React peut s'exécuter sur le serveur et le DOM virtuel sera renvoyé et rendu au navigateur sous forme de page Web standard.
Prend en charge la programmation fonctionnelle . React peut utiliser la bibliothèque de gestion d'état Redux.

Angular

Idéal pour : Développeurs qui ne veulent pas se soucier de l'intégration de bibliothèques dans d'autres cadres.

Angular, ou dans le passé AngularJS , est plus ancien que React et est le deuxième plus populaire de notre analyse. Il a été créé et est maintenu par Google et a été développé pour répondre au besoin d'un cadre complet qui pourrait traiter les applications d'une seule page. Une application monopage (SPA) est une application Web ou un site Web qui met à jour les informations et les données en réécrivant dynamiquement la page actuelle plutôt qu'en chargeant de nouvelles pages entières à partir d'un serveur. Par conséquent, l'application ressemble plus à une application PC de bureau mais fonctionne également bien sur les appareils mobiles si elle est conçue correctement. Tout le code est chargé avec un chargement de page unique, ou seules les pages partielles sont chargées dynamiquement lorsque la page est mise à jour. Angular peut avoir une courbe d'apprentissage relativement longue, car il s'agit vraiment d'un cadre de développement complet, mais Angular lui-même ne contient aucun composant d'interface utilisateur. Sencha comble ce vide avec des éléments d'interface utilisateur prétestés et constamment développés avec leur produit ExtAngular (lire notre guide gratuit, « Quand choisir ExtAngular » pour en savoir plus).

Pour	Contre
Single -Page Applications (SPAs) . Angular a été conçu pour ce scénario même.	Syntaxe complexe . L'angulaire peut être compliqué et ne convient pas au style d'écriture de code de chaque programmeur.
Progressive Web Applications (PWA) . Si vous voulez créer des applications qui ressemblent à des applications natives sur mobile, tablette ou bureau, Angular a ceci.	Steeper Learning Curve . L'angulaire peut être difficile à apprendre, bien que la documentation et l'aide en ligne disponibles contribuent dans une certaine mesure à atténuer cela.
Framework à grande échelle . Le développeur n'a pas besoin d'intégrer Angular dans son propre framework et ses outils MVC. Prend également en charge le modèle de conception Flux.	Rétrocompatibilité difficile . Le déplacement d'applications angulaires vers des versions plus récentes peut prendre un certain temps car le portage peut être difficile en raison des changements de version.
Documentation . Contrairement à de nombreuses technologies Web, Angular dispose d'une documentation complète avec de nombreuses vidéos YouTube disponibles. Cela permet de raccourcir la courbe d'apprentissage.	Taux de désabonnement JavaScript élevé . Parce que Google et le monde open-source améliorent constamment Angular, le développeur doit suivre les nouvelles versions ou risquer de développer des applications qui nécessiteront un portage important à l'avenir si elles doivent être modifiées.
Universal TransferState API et DOM . Avec cette nouvelle conception, le code peut être partagé entre le serveur et le client, ce qui peut améliorer les performances.
Build optimizer . Comme un bon compilateur d'optimisation, cela supprime tout le code d'exécution inutile, réduisant la taille de l'application et améliorant les performances.
Router hooks . Les cycles de routeur peuvent désormais être suivis depuis le début de l'exécution des protections jusqu'à la fin de l'activation.
Liaison de données bidirectionnelle et MVVM (Model-View-View-Model) . La liaison bidirectionnelle minimise le risque d'erreurs et permet un comportement singulier de l'application. Pour les modèles de conception MVVM, il a la capacité de permettre aux développeurs de travailler séparément sur la même section d'application avec le même ensemble de données.
Google soutient Angular . Tout comme Facebook utilise React, Google utilise et continue de développer Angular. Il est également utilisé par Google Adwords, donc une prise en charge à long terme est probable.

Vue

Idéal pour : Développeurs avec des applications plus simples et une courbe d'apprentissage plus faible.

Le nouveau venu le bloc et gagne en popularité à un rythme extraordinaire est Vue. Entre novembre 2016 et octobre 2017, une estimation (téléchargements npm) montre que Vue croît à un taux ridiculement élevé de 13933,4%, mais les chiffres de téléchargement absolus montrent React à plus de 7 millions de téléchargements en octobre 2017 contre près de 900000, avec Angular au milieu. à plus de 2 millions de téléchargements depuis npm. Fait intéressant, tous les cadres et bibliothèques JavaScript continuent de croître à un rythme torride. La source de ces données est npm-stat .

Vue établit un juste milieu entre un cadre complet et «juste une bibliothèque». Les fonctions Noncore telles que le routage, la gestion des états, la création de chaînes d'outils et le Les CLI sont externes, mais elles sont toutes officiellement maintenues, bien documentées et conçues pour fonctionner ensemble. Cependant, vous n'êtes pas obligé de les utiliser tous. Angular applique une certaine structure sur la façon dont le code est organisé, contrairement à Vue.

Selon le célèbre développeur John Hannah :

React et Vue sont assez similaires, bien qu'il existe quelques différences clés… . Cela a du sens car Evan You, le développeur de Vue, a utilisé React comme l'une de ses inspirations. Ils se ressemblent beaucoup plus qu'ils ne le sont, disons, angulaires. De la documentation Vue, nous voyons que React et Vue:

• Utiliser un DOM virtuel pour des raisons de performances
• Fournir des composants de vue réactifs et composables
• Maintenir le focus dans la bibliothèque principale, avec des préoccupations telles que le routage et l'état global gestion gérée par les bibliothèques compagnons

Comme React, Vue met l'accent sur les performances mais, étant plus petit, il est plus facile à apprendre au départ.

Pour	Contre
Facile à apprendre . Utilise des modèles plutôt que JSX. Ces modèles sont des extensions de HTML, pas de JavaScript.	Écosystème beaucoup plus petit . React et Angular, étant plus matures, ont des écosystèmes beaucoup plus grands que Vue.
Vue, comme React, est une bibliothèque JavaScript, pas un framework . Cela signifie qu'il fournit une méthode déclarative de définition des composants d'interface utilisateur. Il peut également être facilement intégré à d'autres bibliothèques.	Moins de désabonnement JavaScript . Vue est une bibliothèque, et les développeurs cherchent à garder toutes les bibliothèques compagnons à jour.
Style plus simple . Le style se fait via des balises de style ou CSS, la valeur par défaut étant des balises de style plus simples.
Gestion des états, routage, etc. . Ceci est géré par des bibliothèques externes externes (mais maintenues de manière cohérente). N'impose pas une organisation / conception de code rigide.
Prend en charge de nombreux modèles de conception . Cela devrait vraiment être formulé comme «n'applique pas un modèle de conception sur vous», mais Vue peut prendre en charge MVC ou Flux.

Tableau de recherche rapide axé sur les développeurs

La ​​programmation n'est pas seulement une profession difficile, c'est un métier intensément personnel , une recherche basée sur la langue qui nécessite des personnes intelligentes – des personnes presque toujours soumises à d'énormes contraintes de calendrier et de ressources. Comme nous l'avons dit, la sélection des outils JavaScript à utiliser est extrêmement personnelle et reflète souvent la façon dont les développeurs pensent aux problèmes. C'est, en bref, une entreprise axée sur les gens et généralement un «sport d'équipe» (d'où le besoin d'outils tels que Assembla pour gérer le code source à travers de nombreux projets et beaucoup de gens).

Ce rapide -le tableau peut vous être plus utile qu'une analyse technique, car il décompose ces trois technologies en comment elles affectent la capacité d'une personne à faire le travail et fournit une évaluation et un classement côte à côte. Ces notes et classements sont une question d'opinion et peuvent changer en fonction de la familiarité d'un développeur, du style de codage, du type de modèles de conception qu'ils utilisent, de la disponibilité d'autres personnes autour d'eux qui peuvent fournir de l'aide et des conseils, et probablement d'une centaine d'autres facteurs. 19659089] Attribut

React Angular Vue Popularité 1 2 3 Contributeurs Facebook Google Laravel et Alibaba [19659097] Bibliothèque (L) ou Framework (F)? L F L Style de codage orienté objet ✔ ✔ ✔ Impératif / fonctionnel style de codage des processus ✔ ✔ ✔ Si vous avez besoin de conseils, d'une structure et d'un coup de main ✔ Courbe d'apprentissage Modéré Élevé Faible Faible Vitesse de codage (à quelle vitesse pouvez-vous déployer?) Moyen Plus lent Plus rapide Besoin de flexibilité ✔ Gros écosystème, beaucoup de packages 1er 2e 3e J'adore JavaScript, je veux seulement JavaScript ✔ Création de grandes applications ✔ ✔ Disponibilité des développeurs ✔ ✔ Application d'une seule page ✔ Performances les plus élevées 1er 3e 2e Qualité et quantité de documentation 2e ] 1er 3e Prend en charge le code JS hérité? Non, nécessite une réécriture dans JSX Oui, mais doit être converti en TypeScript Oui, mais peut nécessiter une conversion en syntaxe Vue.js

Source: Davison Pro et autres

Construire sur les épaules des géants: pourquoi réinventer la roue vous ralentit

Le développement de cadres sophistiqués, de bibliothèques réutilisables et surtout de widgets de composants d'interface utilisateur nécessite un temps et un temps précieux c'est de l'argent. Le fardeau de la recherche et du bricolage de différents outils libres et open source (FOSS) peut être coûteux et long et peut entraîner une déception, car certains outils peuvent être incompatibles ou nécessiter des couches de calage supplémentaires.

Aujourd'hui, performances clés les indicateurs ont changé. Le battement de tambour implacable pour les DSI et les responsables du développement ne concerne pas les lignes de code, le nombre de points de fonction fournis et d'autres mesures d'ingénierie. Ils ont cédé la place aux objectifs commerciaux, et parce que c'est ainsi que les DSI et de plus en plus de CTO sont mesurés, les développeurs sont également mesurés par leur impact sur l'entreprise. Ces objectifs commerciaux comprennent désormais des réductions de bénéfices et de coûts grâce à une efficacité accrue; ils incluent souvent également le délai de mise sur le marché (TTM ou le délai avant que DevOps déploie une solution de travail), la réduction des barrières à l'entrée (LBE, en commençant par des outils ouverts et open source ou en utilisant des téléchargements d'essai gratuits pour prototyper), et le coût total de possession (TCO – combien cette technologie me coûtera-t-elle à court terme et à long terme?).

En conséquence, les développeurs deviennent plus stratégiques dans ce qui compte pour eux – ils se rendent bien compte et s'alignent sur les stratégies commerciales de leur employeur. Mais plus que cela, la barre a été relevée: désormais mobile, téléphone, tablette, PC de bureau, même les décodeurs et les téléviseurs intelligents sont des cibles potentielles de déploiement.

Heureusement, des solutions existent: adopter un bon cadre ou un ensemble de les bibliothèques peuvent faire gagner du temps, de l'argent, des efforts, du chagrin au développeur et offrir un avenir brillant. Par exemple, l'adoption de React, Angular ou Vue comme base de ses efforts de développement offre une multitude d'avantages, et ces avantages peuvent être sélectionnés en fonction des exigences et des circonstances.

Utilisation d'une interface utilisateur multiplateforme robuste et bien testée des widgets tels que Sencha Ext JS ExtReact ou ExtAngular peuvent économiser de nombreux mois-personnes pour trouver ce que vous devez utiliser, coder et tester le temps. Sencha garantit que tous ces éléments fonctionnent avec la grande majorité des navigateurs Web, et le fait que votre application Web fonctionne sur les plates-formes Android et iOS sans plus d'efforts peut vous éviter d'avoir à apprendre des langues difficiles et compliquées. Il vous suffit d'utiliser JavaScript.

Pour préserver le choix des développeurs, il est tout à fait possible de mélanger et de faire correspondre les composants de l'interface utilisateur des produits commerciaux open source et Sencha. Cependant, la productivité accrue provient de la recherche de tout ce dont vous avez besoin auprès d'un seul fournisseur, ce qui réduit le temps de recherche d'un développeur. en savoir plus, accéder à des téléchargements d'essai gratuits de 30 jours ou à une licence commerciale limitée Community Edition.

Résumé

¹ Andrew S. Tanenbaum, Réseaux informatiques, 2e éd., P. 254