Nous publions la deuxième partie de la traduction du matériel consacré aux cinq meilleurs outils JavaScript pour développer des parties côté client de projets Web. La
première partie a traité de la bibliothèque React et du framework Angular. Nous discutons ici de Vue, Ember et Backbone.
3. Vue
Les idées derrière Vue viennent d'Angular et de React, mais Vue est, à bien des égards, meilleure que ces deux outils de développement frontaux. Vue a été téléchargé plus de 40 millions de fois cette année. Un récent rapport Snyk JavaScript Frameworks Security a été publié. Il vise principalement à rechercher la sécurité de React et Angular, mais il y avait une place pour étudier d'autres projets. De Vue, à partir de ce rapport, vous pouvez découvrir ce qui n'est connu que sur 4 de ses
vulnérabilités immédiates qui ont été corrigées.
Si vous n'êtes pas familier avec Vue, voici quelques faits clés sur ce cadre.
Lorsque vous travaillez avec Vue, la logique du composant, sa disposition et ses styles sont stockés dans un seul fichier. À l'exception des styles, les matériaux du projet sont également stockés dans React. L'interaction des composants dans Vue est fournie via des objets qui stockent les propriétés et l'état des composants. Cette approche, avant d'apparaître dans Vue, a également été utilisée dans React.
Vue, qui le rend similaire à Angular, vous permet de mélanger le balisage HTML et le code JavaScript. Afin d'intégrer les données des composants dans un modèle, vous devez utiliser les directives Vue. Tels que
v-bind ou
v-if .
Une des raisons pour lesquelles Vue devrait être considérée comme une alternative valable à React est la façon dont l'état de l'application est organisé ici. Dans les projets React, lorsque vous utilisez le bundle React + Redux, à mesure que l'application grandit, les procédures nécessaires pour gérer son état deviennent plus compliquées. Cela peut être dû au fait que le programmeur, au lieu de travailler sur l'application elle-même, doit passer beaucoup de temps à configurer les mécanismes Redux. Vue utilise la bibliothèque Vuex pour gérer l'état. Il est similaire à Flux et créé spécifiquement pour Vue. Travailler avec est beaucoup plus pratique qu'avec Redux.
Si vous essayez de faire un choix entre Vue et Angular, les raisons pour lesquelles vous préférerez peut-être Vue peuvent être réduites au fait que Angular, en comparaison avec Vue, ressemble à un projet à grande échelle trop compliqué, dont la nature est le désir de limiter le développeur. Vue est beaucoup plus simple qu'Angular et ne limite pas tellement les programmeurs.
Un autre avantage de Vue sur Angular et React est que vous n'avez pas besoin d'apprendre une nouvelle langue pour travailler avec ce framework.
▍ Éléments de l'écosystème Vue
Donnons une brève description de l'écosystème dans lequel tombe celui qui choisit Vue:
- Pour contrôler l'état des applications Vue, la bibliothèque Vuex est utilisée, basée sur des concepts liés à Flux.
- Il existe des outils de développement pour Chrome et Firefox qui facilitent la création de projets Vue.
- L'écosystème Vue dispose d'un
vue-loader pour webpack, vous permettant d'utiliser les composants Vue comme composants à fichier unique. - Pour travailler avec les API de serveur, vous pouvez utiliser le client HTTP
vue-resource et la bibliothèque Axios. - Vue prend en charge le cadre Nuxt.js, qui inclut la prise en charge des applications rendues sur le serveur. Nuxt.js peut être considéré comme un concurrent d'Angular Universal.
- Vous pouvez utiliser la bibliothèque Weex pour développer des applications mobiles basées sur Vue.
Vue est un excellent framework qui surpasse les autres en termes de convivialité. Peut-être que je passerai moi-même à Vue dans un proche avenir. Ce cadre n'est pas aussi complexe que React et Angular, et est également bien adapté pour développer des applications de différentes tailles.
4. Braise
Ember 3.13 est sorti cette année. De nombreuses nouveautés sont apparues dans cette version du framework. Ember est similaire à Backbone et Angular. C'est également l'un des cadres JavaScript les plus anciens. Mais, malgré cela, en termes d'opportunités, il n'est pas à la traîne de ses plus jeunes concurrents. Par exemple, il prend en charge la technologie de modification des propriétés traçables, ce qui facilite la surveillance des modifications de l'état de l'application et facilite la visualisation de ces modifications.
Ember a une architecture plutôt sophistiquée qui vous permet de créer rapidement d'énormes applications clientes. Il implémente des idées MVC typiques. Les applications Ember sont construites à partir d'adaptateurs, de composants, de contrôleurs, d'objets auxiliaires, de modèles, de routes, de services, de modèles, d'utilitaires et de modules complémentaires.
L'une des fonctionnalités les plus intéressantes d'Ember est les outils de ligne de commande (Ember CLI). Ces outils aident les développeurs frontaux à travailler de manière productive. En utilisant Ember CLI, vous pouvez créer non seulement des modèles de projet, mais également des préréglages pour les contrôleurs, les composants et d'autres entités à partir desquelles les applications sont créées.
▍Éléments de l'écosystème ambré
Le développeur front-end utilisant Ember a à sa disposition les fonctionnalités clés suivantes:
- Ember CLI est un outil en ligne de commande pour le prototypage rapide d'applications et pour la gestion des dépendances.
- Serveur de développeur Ember standard.
- Ember Data - une bibliothèque pour travailler avec des données.
- Le guidon est un moteur de modèle utilisé dans les applications Ember.
- QUnit est un framework pour tester des projets Ember.
- Ember Inspector - Outils de développement pour Chrome et Firefox.
- Ember Observer - catalogue de modules complémentaires pour Ember CLI.
Ember peut peut-être être appelé un framework sous-estimé, mais malgré cela, il est idéal pour créer des projets Web complexes.
5. Backbone.js
Backbone est un framework JavaScript basé sur une architecture similaire à MVC. Disons que dans MVC est appelé un «contrôleur» dans un backbone est appelé «View». Les vues de dorsale peuvent utiliser divers systèmes de modèles. Par exemple - Moustache, guidons, jQuery-tmpl. Dans les projets Backbone, vous pouvez utiliser des bibliothèques tierces. Il convient de noter que la seule dépendance dure de Backbone est la bibliothèque Underscore.js.
Backbone est un framework facile à utiliser qui vous permet de développer rapidement des applications d'une seule page. Parmi les outils auxiliaires utilisés conjointement avec Backbone.js, on peut citer comme Chaplin, Marionette, Thorax.
Si vous avez besoin de développer une application avec laquelle les utilisateurs appartenant à différents groupes travailleront, vous pouvez utiliser des collections Backbone (tableaux) pour séparer les modèles. Dans les modèles, collections, itinéraires et vues Backbone, vous pouvez utiliser des événements.
▍Écosystèmes de l'épine dorsale
Les caractéristiques de l'écosystème Backbone sont les suivantes:
- La bibliothèque Backbone comprend des événements, des modèles, des collections, des vues et un routeur.
- La bibliothèque Underscore.js, dont dépend Backbone, contient un ensemble de fonctions d'assistance qui vous aident à écrire du code JS inter-navigateurs.
- Lors du développement d'applications Backbone, vous pouvez utiliser différents systèmes de modèles.
- L'outil de ligne de commande CLI Backbone simplifie le développement d'applications.
- Les bibliothèques Marionette, Thorax et Chaplin aident à créer des applications avec des solutions architecturales spécifiques.
Peut-être que Backbone ne peut pas être considéré comme un concurrent sérieux pour les autres outils de développement frontaux abordés dans ce document. Cependant, ce cadre est très populaire parmi les développeurs. Par conséquent, il peut s'avérer que Backbone est exactement ce dont vous avez besoin.
Résumé
Cet article a fourni un bref aperçu des cadres Web, qui ont été reconnus comme les meilleurs selon une enquête menée auprès des développeurs de
ValueCoders . Nous espérons que cette revue aidera à faire le bon choix pour ceux qui sont occupés à choisir un cadre pour leur prochain projet Web.
Chers lecteurs! Sur quoi écrivez-vous des projets Web frontaux?
