La bataille des frameworks front-end : à part Vue, Angular et React, qui d'autre les concurrence ?

Ces dernières années, un grand nombre de frameworks ont émergé dans le domaine du développement front-end, rendant les gens éblouis et confus quant à la manière de choisir. Aujourd'hui, nous comparerons pour vous les cinq frameworks JavaScript front-end les plus populaires et vous fournirons un aperçu, présentant leurs principales fonctionnalités, outils, courbes d'apprentissage et d'autres facteurs pour vous aider à prendre une décision et à faire un choix.

Mesure de la popularité

Déterminez la popularité du framework grâce à son utilisation, selon l'enquête 2020 sur l'état de JavaScript. L'enquête a été complétée par 23 765 personnes interrogées et les résultats sont les suivants :

React：80％
Angular：56％
Vue.js：49％
Svelte：15％
PreACT：13％

La "conscience du framework" a également été prise en compte dans la même enquête :

React：100％
Angular：100％
Vue.js：99％
Ember：88％
Svelte：86％

Définition des frameworks front-end

Pour les besoins de cet article, le texte utilisera la définition fournie par Martin Fowler :

Une bibliothèque est essentiellement un ensemble de fonctions que les développeurs peuvent appeler, généralement organisées en classes. L'appel effectue un certain travail et rend le contrôle au client.

Le framework incarne une conception abstraite et possède davantage de comportements intégrés. Les développeurs peuvent insérer des comportements à différents emplacements du framework en sous-classant ou en insérant leurs propres classes, et le framework appelle le code à ces points.

1. React

Recommandé : "Résumé des questions d'entretien React frontales (collection) 》《Tutoriel vidéo React》

Lancé par Facebook en 2013, il s'agit du framework front-end le plus populaire aujourd'hui. Il est utilisé dans les produits de l'entreprise tels que Facebook, Netflix et Airbnb, et compte un grand nombre de développeurs et de riches ressources d'apprentissage.

Il existe de nombreux outils liés à React. La CLI fournie par l'équipe est utilisée pour créer facilement un nouveau projet, et l'extension de l'outil est adaptée à Chrome et Firefox. Il contient de nombreux packages tiers pour une grande variété de tâches (par exemple, le routage, la gestion des formulaires et les animations), ainsi que plusieurs frameworks basés sur React, tels que Next.js et Gatsby.

React poursuit la philosophie « apprendre une fois, écrire n'importe où ». Il peut alimenter des applications mobiles avec React Native, effectuer un rendu sur le serveur avec Node et dispose d'un excellent support SEO.

L'opinion dominante est que React est trop simple : cela n'est lié qu'à la couche d'affichage de l'application, et tout est laissé aux développeurs, et les opinions sont mitigées sur le degré de liberté excessif.

Courbe d'apprentissage modérée si étudiée. React encourage les développeurs à utiliser divers paradigmes de programmation fonctionnelle (tels que l'immuabilité et les fonctions pures) et exige que les développeurs aient une compréhension de base des concepts de base avant de construire

Dans l'ensemble, si vous êtes intéressé par la liberté de réagir Si vous en sont satisfaits, c'est le meilleur choix pour les applications basées sur les données de toute taille.

2. Angulaire

Recommandé : "Tutoriel vidéo Angularjs"

En tant qu'offre Google dans le domaine front-end, elle est née sous le nom d'AngularJS (ou Angular 1) en 2010 et est devenue un succès instantané, principalement en raison de la capacité des développeurs à créer ce qui est maintenant connu. en tant qu'applications d'une seule page, le premier cadre.

Pour résoudre les problèmes de performances et les défis liés à la création de grandes applications JavaScript, Google a réécrit AngularJS et a publié Angular 2 en 2016 (uniquement Angular aujourd'hui). Puisqu’ils ne peuvent pas être facilement migrés, AngularJS et Angular deviennent deux frameworks indépendants.

Angular occupe une position importante dans le framework front-end. Il a été mis en production par des entreprises telles que Google et Microsoft après des tests rigoureux, et les ressources en ligne associées sont également abondantes.

Contrairement à React qui ne traite que de la couche d'affichage, Angular fournit une solution complète pour créer des applications clientes d'une seule page. Les composants angulaires implémentent une liaison de données bidirectionnelle pour écouter les événements et mettre à jour les valeurs simultanément entre les composants parents et enfants. Les modèles sont des parties du HTML qui permettent d'utiliser une syntaxe spéciale pour tirer parti des nombreuses fonctionnalités d'Angular. TypeScript est le langage principal utilisé pour le développement angulaire, le framework est donc adapté aux entreprises et aux applications.

Du point de vue des outils associés, Angular fournit une CLI très complète pour initialiser, développer, construire et maintenir ses applications, ainsi que des extensions Chrome et Firefox Dev Tools pour le débogage des applications Angular.

Mais du point de vue de l'apprentissage, Angulard a la courbe d'apprentissage la plus abrupte. Les développeurs doivent être familiers avec TypeScript pour travailler. Ce n'est pas le meilleur choix pour les novices et est plus adapté pour jouer un rôle dans une équipe.

3. Vue.js

Recommandé : "Les 5 derniers didacticiels vidéo vue.js en vedette 》

Remarque : Les statistiques sont pour Vue v2, la version 3 est disponible, vue@next doit être installé.

Vue est un framework frontal Model-View-ViewModel (MVVM) permettant de créer des interfaces utilisateur et des applications d'une seule page. Écrit par Evan You et publié pour la première fois en 2014.

Vue est désormais utilisé en production par des sociétés telles qu'Alibaba, Gitlab et Adobe. Il s'agit sans doute de la meilleure documentation de tous les frameworks, et son forum est une excellente ressource pour obtenir de l'aide sur les questions de codage. Vue est populaire dans le monde PHP et fait partie du framework Laravel.

Le principal argument de vente de Vue est qu'il est conçu à partir de zéro et peut être adopté progressivement. Autrement dit, Vue peut améliorer les fonctions habituelles des pages Web ou construire des composants pour améliorer les applications d'une seule page. Anugular peut lier des attributs à des modèles de données de base basés sur HTML, fournissant un seul composant File.

En termes d'exhaustivité des outils associés, d'une part, la CLI officielle peut créer des échafaudages et développer des applications Vue, et de plus, l'extension devtools peut être utilisée pour Chrome et Firefox pour aider au débogage. Contrairement à React, Vue fournit des packages officiels pour le routage et la gestion de l'état, fournissant une méthode de traitement pratique et standardisée, ainsi que divers outils tiers et frameworks basés sur Vue.

Mais la barrière d'entrée est très faible par rapport à d'autres frameworks, ce qui le rend adapté aux développeurs moins expérimentés.

4. Svelte

a été publié par Rich Harris en 2016. En tant que nouveau membre du framework front-end, il adopte une approche différente des autres méthodes de framework pour créer des applications Web.

Il évite le concept de DOM virtuel et compile le code lors de la construction dans un petit module JavaScript brut qui met à jour le DOM à mesure que l'état de l'application du développeur change. Obtenez une petite taille et une application rapide.

Rich Harris a une faible courbe d'apprentissage et une petite communauté, mais il a été utilisé en production par des entreprises telles qu'IBM et le New York Times et a un grand potentiel pour l'avenir.

En raison de sa faible maturité, il n'est privilégié que comme petit projet, mais la situation évolue progressivement. SvelteKit est en version bêta publique et la communauté ne cesse de croître. Bien que Svelte soit actuellement jeune, les développeurs doivent y prêter attention.

5. Ember.js

Le dernier Ember introduit existe depuis l'avènement du framework front-end. Initialement publié en 2011, mais toujours populaire dans le monde du développement :

Il remonte à avant React, Vue, Svelte et tous les autres. Le framework n’a jamais été à l’avant-garde du battage médiatique, mais il continue de progresser régulièrement. Les partenaires incluent Qonto et CLARK, deux des 50 plus grandes sociétés de technologie financière en Europe en 2020.

Ember adopte une approche de développement d'applications plus inclusive, similaire à Angular, et fournit tout ce dont vous avez besoin pour créer des applications JavaScript frontales modernes. Un cycle de publication de six semaines est suivi et la stabilité est excellente.

En termes d'outils associés, il existe de nombreux outils associés, d'Ember CLI à Ember Inspector, et de nombreuses bibliothèques tierces sont disponibles.

Sa communauté n'est pas plus grande que les autres communautés framework populaires, mais ses membres sont très engagés, et avec un forum et un serveur Discord, il est facile d'obtenir de l'aide pour les problèmes de codage.

Si les développeurs veulent apprendre, la courbe d'apprentissage est modérée à abrupte, et pour les débutants ou les petits projets, Ember n'est peut-être pas le meilleur choix. Il comporte de nombreuses pièces mobiles et n'offre pas beaucoup de flexibilité pour organiser les choses dans le cadre d'un effort d'équipe.

Conclusion

Cet article compare les cinq frameworks front-end les plus populaires sur le marché aujourd'hui, offrant aux développeurs une meilleure référence à choisir en fonction de leurs capacités personnelles et des besoins de leur projet.