Contenu
- 01. Angulaire
- 02. Réagissez
- 03. Vue
- Comment la syntaxe des frameworks se compare-t-elle?
- Popularité et marché
- Développement d'applications mobiles
- Autres cadres à surveiller en 2020
- Conclusion
En 2020, nous avons la chance de disposer d'un certain nombre de cadres et de bibliothèques pour nous aider dans le développement Web. Mais il n’y avait pas toujours autant de variété. En 2005, un nouveau langage de script appelé Mocha a été créé par un type nommé Brendan Eich. Des mois après avoir été renommé en LiveScript, le nom a de nouveau été changé en JavaScript. Depuis, JavaScript a parcouru un long chemin.
En 2010, nous avons vu l'introduction de Backbone et Angular en tant que premiers frameworks JavaScript et, en 2016, 92% de tous les sites Web utilisaient JavaScript. Dans cet article, nous allons examiner trois des principaux frameworks JavaScript (Angular, React et Vue) et leur statut à l'approche de la prochaine décennie. Envie de créer votre propre site? Essayez cette liste de créateurs de sites Web.
Pour quelques ressources géniales, consultez notre liste des meilleurs outils de conception Web, notre tour d'horizon des services d'hébergement Web et cette liste d'excellents logiciels de test utilisateur.
01. Angulaire
AngularJS est sorti en 2010, mais en 2016, il a été complètement réécrit et publié sous le nom d'Angular 2. Angular est un framework Web complet développé par Google, utilisé par Wix, Upwork, The Guardian, HBO et plus encore.
Avantages:
- Prise en charge exceptionnelle de TypeScript
- MVVM permet aux développeurs de séparer le travail sur la même section d'application en utilisant le même ensemble de données
- Excellente documentation
Les inconvénients:
- A un peu de courbe d'apprentissage
- La migration à partir d'une ancienne version peut être difficile.
- Des mises à jour sont introduites assez régulièrement, ce qui signifie que les développeurs doivent s'y adapter
Et après?
Dans Angular 9, Ivy est le compilateur par défaut. Il a été mis en place pour résoudre de nombreux problèmes de performances et de taille de fichier. Cela devrait rendre les applications plus petites, plus rapides et plus simples.
Lorsque vous comparez les versions précédentes d'Angular à React et Vue, le
les tailles de paquet finales étaient beaucoup plus grandes lors de l'utilisation d'Angular. Ivy rend également possible l'hydratation progressive, ce que l'équipe Angular a montré à I / O 2019. Progressive Hydration utilise Ivy pour se charger progressivement sur le serveur et le client. Par exemple, une fois qu’un utilisateur commence à interagir avec une page, le code des composants ainsi que tout moteur d’exécution sont récupérés pièce par pièce.
Ivy semble être le principal objectif d'Angular et l'espoir est de le rendre disponible pour toutes les applications. Il y aura une option de désinscription dans la version 9, jusqu'à Angular 10.
02. Réagissez
React a été initialement publié en 2013 par Facebook et est utilisé pour créer des interfaces Web interactives. Il est utilisé par Netflix, Dropbox, PayPal et Uber pour n'en nommer que quelques-uns.
Avantages:
- React utilise le DOM virtuel, ce qui a un impact positif sur les performances
- JSX est facile à écrire
- Les mises à jour ne compromettent pas la stabilité
Les inconvénients:
- L'un des principaux inconvénients est le besoin de bibliothèques tierces pour créer des applications plus complexes
- Les développeurs ne savent pas quelle est la meilleure façon de développer
Et après?
Lors de React Conf 2019, l'équipe React a abordé un certain nombre de choses sur lesquelles elle a travaillé. Le premier est l'hydratation sélective, où React mettra en pause tout ce sur quoi il travaille afin de hiérarchiser les composants avec lesquels l'utilisateur interagit. Au fur et à mesure que l'utilisateur interagit avec une section particulière, cette zone sera hydratée. L'équipe a également travaillé sur Suspense, le système de React pour orchestrer le chargement de code, de données et d'images. Cela permet aux composants d'attendre quelque chose avant d'être rendus.
L'hydratation sélective et le suspense sont rendus possibles par le mode simultané, qui permet aux applications d'être plus réactives en donnant à React la possibilité d'entrer de grands blocs de travail de priorité inférieure afin de se concentrer sur quelque chose qui est une priorité plus élevée, comme répondre aux entrées de l'utilisateur. L'équipe a également mentionné l'accessibilité comme un autre domaine qu'elle s'est penché, en se concentrant sur deux sujets particuliers - la gestion des interfaces de mise au point et d'entrée.
03. Vue
Vue a été développé en 2014 par Evan You, un ancien employé de Google. Il est utilisé par Xiaomi, Alibaba et GitLab. Vue a réussi à gagner en popularité et au soutien des développeurs en peu de temps et sans le soutien d'une grande marque.
Avantages:
- Taille très légère
- Convient aux débutants - facile à apprendre
- Grande communauté
Les inconvénients:
- Non soutenu par une grande entreprise, comme React avec Facebook et Angular avec Google
- Pas de vraie structure
Et après?
Vue s'est fixé pour objectif d'être plus rapide, plus petit, plus maintenable et de permettre aux développeurs de cibler plus facilement le natif (si vous rencontrez des problèmes de maintenance, envisagez un service d'hébergement Web). La prochaine version (3.0) est prévue pour le premier trimestre 2020, qui comprend une réécriture du DOM virtuel pour de meilleures performances ainsi qu'une prise en charge de TypeScript améliorée. Il y a également l'ajout de l'API de composition, qui offre aux développeurs une nouvelle façon de créer des composants et de les organiser par fonctionnalité plutôt que par opération.
Ceux qui développent Vue ont également été occupés à travailler sur Suspense, qui suspend le rendu de votre composant et restitue un composant de secours jusqu'à ce qu'une condition soit remplie.
L’un des avantages des mises à jour de Vue est qu’elles maintiennent la rétrocompatibilité. Ils ne veulent pas que vous cassiez vos anciens projets Vue. Nous l'avons vu lors de la migration de 1.0 vers 2.0 où 90 pour cent de l'API était identique.
Comment la syntaxe des frameworks se compare-t-elle?
Les trois frameworks ont subi des changements depuis leur sortie, mais il est essentiel de comprendre la syntaxe et ses différences. Voyons comment la syntaxe se compare en ce qui concerne la liaison d'événement simple:
Vue: le v-on La directive est utilisée pour attacher des écouteurs d'événements qui invoquent des méthodes sur des instances Vue. Les directives sont préfixées par v- afin d'indiquer qu'il s'agit d'attributs spéciaux fournis par Vue et d'appliquer un comportement réactif spécial au DOM rendu. Les gestionnaires d'événements peuvent être fournis en ligne ou en tant que nom de la méthode.
template> button v-on: click = ”clickHandler”> Click me / button> / template> script> export default {name: “HelloWorld”, méthodes: {clickHandler: function () {console.log (“On m'a cliqué! ”); }}}; / script>
Réagir: React met le balisage et la logique dans JS et JSX, une extension de syntaxe de JavaScript. Avec JSX, la fonction est passée en tant que gestionnaire d'événements. La gestion des événements avec des éléments React est très similaire à la gestion des événements sur les éléments DOM. Mais il existe quelques différences syntaxiques; par exemple, les événements React sont nommés en utilisant camelCase plutôt qu'en minuscules.
function Button () {function clickHandler (e) {console.log («J'ai été cliqué»); } return button onClick = {clickHandler}> Click me! / button>; }
Angulaire: La syntaxe de liaison d'événement se compose d'un nom d'événement cible entre parenthèses à gauche d'un signe égal et d'une instruction de modèle entre guillemets à droite. Vous pouvez également utiliser le au- préfixe, connu sous le nom de forme canonique.
@Component ({selector: "app-click-me", template: `button (click) =" onClickMe () "> Click me! / Button>`}) classe d'exportation ClickMeComponent {onClickMe () {console.log (" Vous m'avez cliqué! »); }}
Popularité et marché
Commençons par regarder une image globale des trois frameworks en ce qui concerne le reste du Web en examinant les statistiques de W3Techs. Angular est actuellement utilisé par 0,4% de tous les sites Web, avec une part de marché des bibliothèques JavaScript de 0,5%. React est utilisé par 0,3% de tous les sites Web et 0,4% de part de marché des bibliothèques JavaScript et Vue a 0,3% pour les deux. Cela semble assez uniforme et vous vous attendez à voir les chiffres augmenter.
Tendances Google: Au cours des 12 derniers mois, React est le terme de recherche le plus populaire, suivi de près par Angular. Vue.js est assez loin derrière; cependant, une chose à retenir est que Vue est encore jeune par rapport aux deux autres.
Recherche d'emploi: Au moment de la rédaction de cet article, React et Angular sont assez proches en termes d'offres d'emploi sur Indeed avec Vue loin derrière. Sur LinkedIn, cependant, il semble y avoir plus de demande pour les développeurs Vue.
Débordement de pile: Si vous regardez les résultats de l'enquête Stack Overflow Developer Survey pour 2019, React et Vue.js sont à la fois les frameworks Web les plus appréciés et les plus recherchés. Angular se place en neuvième position pour les plus aimés mais en troisième position les plus recherchés.
GitHub: Vue a le plus grand nombre d'étoiles avec 153k mais il a le moins de contributeurs (283). React, quant à lui, compte 140 000 étoiles et 1 341 contributeurs. Angular ne compte que 59,6k étoiles, mais compte le plus grand nombre de contributeurs sur les trois avec 1579.
Tendances NMP: L'image ci-dessus montre les statistiques des 12 derniers mois, où vous pouvez voir que React a un nombre plus élevé de téléchargements par mois par rapport à Angular et Vue.
Développement d'applications mobiles
L'un des principaux objectifs des trois grands est le déploiement mobile. React propose React Native, qui est devenu un choix populaire pour la création d'applications iOS et Android, non seulement pour les utilisateurs de React, mais également pour la communauté de développement d'applications plus large. Les développeurs angulaires peuvent utiliser NativeScript pour les applications natives ou Ionic pour les applications mobiles hybrides, tandis que les développeurs Vue ont le choix entre NativeScript ou Vue Native. En raison de la popularité des applications mobiles, cela reste un domaine d'investissement clé.
Autres cadres à surveiller en 2020
Si vous voulez essayer quelque chose de nouveau en 2020, consultez ces frameworks JavaScript.
Ember: Un framework open-source pour créer des applications Web fonctionnant sur la base du modèle MVVM. Il est utilisé par plusieurs grandes entreprises comme Microsoft, Netflix et LinkedIn.
Météore: Une plate-forme JavaScript complète pour le développement d'applications Web et mobiles modernes. Il est facile à apprendre et bénéficie d’une communauté très solidaire.
Conclusion
Les trois cadres s'améliorent continuellement, ce qui est un signe encourageant. Chacun a sa propre perspective et sa solution préférée sur laquelle utiliser, mais cela dépend vraiment de la taille du projet et de ce qui vous met plus à l'aise.
L'aspect le plus important est le soutien continu de leurs communautés, donc si vous prévoyez de démarrer un nouveau projet et que vous n'avez jamais utilisé l'un des trois auparavant, je pense que vous êtes entre de bonnes mains avec chacun d'eux. Si vous n'avez pas encore eu l'occasion d'apprendre l'un des trois cadres, je vous suggère d'en faire votre résolution du Nouvel An pour commencer à apprendre. L'avenir tournera autour de ces trois.
Ce contenu est apparu à l'origine dans le magazine net.
