Le monde JavaScript est un environnement riche avec des dizaines d'outils, de bibliothèques et de frameworks. Mais, avec beaucoup d'options, il y a beaucoup de confusion. C'est vraiment une épée à double tranchant.
Bien que vous ayez beaucoup d'espace pour la créativité et l'expérimentation, vous ne savez parfois pas quelle bibliothèque ou quel cadre choisir.
Le cadre frontal que vous choisissez peut faire ou défaire votre projet à long terme.
Dans cet article, nous examinerons certains des frameworks JavaScript les plus populaires et comment ils se comparent. Nous allons examiner cinq perspectives différentes de ces frameworks, ce qui facilite généralement le processus de prise de décision concernant votre prochain framework JavaScript.
Que vous choisissiez l'un de ces frameworks JavaScript populaires ou quelque chose de plus ésotérique, vous devez prendre chacun de ces aspects en considération.
Disponibilité des ressources d'apprentissage
Celui-ci est évident mais souvent négligé. Bien que la page d'accueil sophistiquée de certains frameworks puisse attirer votre attention, vous avez toujours besoin de cours, de livres, de didacticiels et d'articles supplémentaires en plus d'une documentation ennuyeuse et sèche pour vous aider à démarrer.
Créer un cadre génial est une chose et communiquer les idées fondamentales qui le sous-tendent est différent. En fait, il existe de nombreux développeurs professionnels qui se spécialisent dans le coaching. Une ressource d'apprentissage bien conçue réduira considérablement votre courbe d'apprentissage.
Allez chercher des ressources d'auteurs dignes de confiance avec lesquels vous avez une expérience antérieure - cela vaudra votre temps à la fin. Si vous avez du mal à trouver quelque chose d'utile, soyez prudent: le cadre que vous essayez d'apprendre peut être nouveau ou pas encore bien adopté par la communauté.
Bien que j'aie mentionné que la documentation seule ne suffit pas, il y a des exceptions à cela. EmberJS, par exemple, a excellente documentation . Les fonctionnalités principales et les cas d'utilisation sont bien décrits avec des exemples génériques ici et là. Malheureusement, outre la documentation, il ne nous reste que peu de livres de ressources, de cours vidéo ou d'autres matériels.
D'autre part, il existe une abondance de ressources pour Angulaire et Réagir . Presque tous les sites Web éducatifs orientés front-end auront un article ou deux à leur sujet, peut-être même un cours vidéo complet ou un livre.
Vue est en quelque sorte un terrain d'entente: il a une bonne documentation et vous pouvez choisir parmi quelques cours sympas.
Aurelia, par exemple, n'a pratiquement aucune ressource; le seul espoir pour vous est la documentation et la chance.
Je préfère avoir des choix.
Même si vous lisez un bon livre ou un cours, il est possible que vous appreniez quelque chose de nouveau en vous exposant à différentes ressources. Si vous êtes familier avec le sujet, vous pouvez souvent parcourir et rechercher des zones possibles qui ne sont pas encore tout à fait claires.
Malheureusement, cette stratégie ne fonctionnera pas si vos options sont limitées, ce qui nous amène au point suivant.
Popularité
Vous pourriez être fier d'apprendre quelque chose d'exotique, mais si vous regardez cela d'un point de vue commercial, ce n'est pas la même chose. Votre entreprise ou client préfère probablement utiliser un ensemble d'outils testés au combat.
Il y a plusieurs raisons à cela. Si un framework n'est pas si populaire, cela signifie qu'il y a quelques développeurs qui s'y spécialisent. Que se passe-t-il si vous abandonnez le projet ou trouvez un nouvel emploi? Votre employeur finit par être coincé dans la recherche d'un développeur qui connaît le framework que vous avez utilisé.
Ce processus peut devenir un véritable fardeau pour une entreprise. La même chose est vraie même si vous vous en tenez au projet et qu'il grandit. Désormais, l'employeur a besoin de plus de développeurs pour accélérer le développement.
Il y a d'autres raisons personnelles pour lesquelles vous pourriez opter pour un framework populaire et largement utilisé. Que se passe-t-il si vous vous retrouvez coincé avec un problème et qu'il n'y a pas vraiment de communauté à laquelle vous pouvez demander de l'aide? Puisque vous êtes seul avec la documentation, vous perdrez probablement beaucoup de temps.
En plus de cela, vous voulez penser à des opportunités futures plus attrayantes dans votre carrière. Si vous vous spécialisez dans quelque chose de populaire et que vous deveniez vraiment bon dans ce domaine, il y aura beaucoup de projets pour vous.
Les leaders évidents ici sont Angular et React.
meilleurs tutoriels c++
La plupart des offres d'emploi liées au front-end exigent l'un ou l'autre. Ils sont respectivement soutenus par Google et Facebook et les employeurs se sentent donc «en sécurité» dans leur choix.
Parfois, le choix du cadre pour votre entreprise ou votre client ne dépend pas de vous; peut-être que cela a été fait par un ancien employé ou par une autre personne de l'équipe. Il y a de fortes chances que ce soit Angular ou React. Maintenant, il existe d'autres options comme Ember et Vue. Mais vous devez rechercher délibérément les entreprises qui les utilisent.
Vous pouvez déterminer la popularité d'un framework en examinant rapidement les performances du projet sur GitHub et ailleurs. Voici quelques statistiques recueillies au moment de la rédaction de cet article:
| Angulaire 2 | Réagir | Humain | Vue | |
|---|---|---|---|---|
| Stars sur GitHub | 26 924 | 73 530 | 18 154 | 63 438 |
| Contributeurs sur GitHub | 495 | 1044 | 679 | 122 |
| Questions marquées sur StackOverflow | 66 152 | 54 158 | 21 651 | 8 598 |
Bien que ces bibliothèques existent depuis assez longtemps pour prouver qu'elles sont des options populaires, si vous essayez quelque chose de vraiment nouveau, des statistiques similaires peuvent vous aider à faire le choix.
Apprendre uniquement Angular ou React ne vous mènera pas loin dans votre carrière. Bien sûr, vous aurez de nombreuses opportunités, mais il y a une raison pour laquelle d'autres cadres existent. Essayez d'en apprendre davantage sur eux pendant votre temps libre et faites parfois des expériences. Même si vous ne les utilisez jamais dans de vrais projets, vous obtiendrez des informations précieuses qui vous aideront dans votre travail de développement quotidien.
CARACTERISTIQUES de base
Soyons un peu technique maintenant.
Au début, vous souhaitez présenter brièvement les fonctionnalités de base du framework pour avoir une attente adéquate lorsque vous commencerez à coder. Pour cela, parcourez la documentation. Vous devez avoir une idée de ce qu'est ce cadre en général. S'agit-il uniquement d'un calque de vue, à part entière ou de quelque chose entre les deux?
Si vous avez une riche expérience avec d'autres frameworks, ce processus est simple et rapide. Recherchez les rubriques suivantes dans la documentation: création de modèles, gestion des états, communication HTTP, traitement et validation de formulaires et routage. Ce sont des activités quotidiennes que vous faites en tant que développeur. Tous ces éléments peuvent ne pas être présentés dans le cadre de base, ou il peut y avoir une approche différente à un problème particulier.
Voyons brièvement les options populaires.
Nous allons commencer par Réagir et Vue . Ce ne sont pas vraiment des cadres; ils ne représentent que la couche de vue de votre application. Cela signifie que toutes les autres parties - communication HTTP, validation de formulaire, etc. - dépendent de vous.
Comme je l’ai mentionné plus tôt, cela pourrait être une arme à double tranchant. Finalement, vous finirez par créer votre propre cadre personnalisé. Les deux ont leur écosystème de bibliothèques pour fournir des solutions aux problèmes les plus courants, mais la structure globale variera d'un projet à l'autre.
Le JSX de React m'a toujours fait grincer des dents. J'ai dû m'y habituer. Cependant, le modèle de Vue est vraiment sympa, surtout si vous venez d'Angular.
D'un autre côté, Ember a presque tout. Étonnamment, le cœur d'Ember ne fournit pas de traitement avancé des formulaires. Il a juste quelques aides d'entrée et c'est tout. Il est très avisé et possède même sa propre couche de données. Tout doit être fait «à la manière d'Ember».
Si vous avez une expérience dans d'autres frameworks ou JavaScript en général, vous pourriez être frustré car Ember utilise son propre modèle d'objet . Les classes ES2015 standard ne sont pas largement utilisées, comme l'indique leur documentation. Vous pourriez vous retrouver en train d'attribuer la valeur directement à une propriété et Ember s'en plaindre.
Une autre chose très différente des autres frameworks est Données de l'homme . C'est une couche de données pour les applications Ember. Vous pouvez y penser comme une sorte d'ORM pour le front-end. Vous créez des modèles et mappez les relations entre eux.
Maintenant, si votre serveur utilise API JSON (il s'agit d'une spécification pour la mise en œuvre d'API JSON), vous êtes bien placé avec Ember, mais malheureusement, la plupart des serveurs ne le sont pas. Vous devez donc écrire des adaptateurs et des sérialiseurs personnalisés. Cependant, si vous faites les choses à la manière Ember, cela pourrait être vraiment productif. Il a juste une courbe d'apprentissage abrupte.
Angular 2 est un framework riche en fonctionnalités. Il est livré avec de nombreux modules comme Ember, vous avez donc une tonne d'outils à votre disposition prêts à l'emploi. Cependant, comme Angular est destiné aux grandes applications, il fait la promotion de TypeScript , ce qui pourrait déclencher une certaine résistance avant de vous lancer.
Une autre chose notable est l'utilisation intensive des observables de la bibliothèque Rx, ce qui est vraiment sympa. Vous pouvez représenter presque n'importe quoi comme observable et appliquer des opérations de haut niveau comme une carte, un filtre, etc. Si vous avez utilisé Lodash ou Underscore, Rx est un peu le même mais sous stéroïdes.
Voici un résumé des principales fonctionnalités des quatre frameworks dont nous discutons dans cet article:
| Angulaire 2 | Réagir | Humain | Vue | |
|---|---|---|---|---|
| Affichage / création de modèles | ||||
| Routeur | ||||
| Traitement des formulaires | ||||
| Validation du formulaire | ||||
| Communication HTTP |
Toutes ces fonctionnalités que nous avons brièvement présentées ne valent rien si vous devez brûler la bougie aux deux extrémités pour les utiliser efficacement - ce qui est le point suivant.
Convivialité
Si, à ce stade, vous avez encore de l'enthousiasme pour le cadre que vous avez choisi, l'étape suivante consiste à vous salir les mains.
Peut-être que le cadre vous convient en raison de votre expérience. C'est peut-être un peu différent et cela vous met au défi à certains égards. Vous ne le savez pas encore, et aucune quantité de lecture ou de visionnage de didacticiels ne vous aidera jusqu'à ce que vous l'essayiez vous-même.
La meilleure façon de se faire une idée d'un framework est de l'utiliser dans un mini projet. Cela vous donne la possibilité de résoudre les problèmes quotidiens mentionnés ci-dessus avec un cadre donné.
Lorsque vous travaillez sur un projet, prenez votre temps et réfléchissez à votre productivité ou non. Est-il facile d'obtenir le résultat souhaité? Devez-vous rechercher des bibliothèques externes? Peut-être avez-vous besoin de plugins de la communauté. Existe-t-il une structure ou des lignes directrices conventionnelles dans le contexte du cadre? Il existe peut-être une CLI pour accélérer le processus de développement. À cette étape, vous acquérez une expérience de base afin que vous puissiez penser à quoi cela ressemblerait si vous utilisiez ce cadre pour les projets à venir ou même pour la transition de projets existants.
Ember est considéré comme un framework très productif, du moins pour ses principaux utilisateurs. Il vient avec un CLI , ce qui aide vraiment. Vous pouvez générer des routes, des contrôleurs, des composants et des modèles avec leurs propres suites de tests. Faire tout cela manuellement est une tâche fastidieuse. Générer un nouveau projet est également possible. Il créera la structure de base des dossiers, installera les packages nécessaires, les outils de construction, l'environnement de test, etc. Si vous n'avez jamais utilisé une interface de ligne de commande à un tel point, vous serez très heureux. Mais, comme je l'ai mentionné plus tôt, Ember est très opiniâtre; malgré toute cette bonté, vous pourriez vous sentir frustré en essayant d'accomplir des tâches courantes.
Maintenant pour React et Vue, ils ont une sorte de CLI, create-react-app et vue-cli . Mais en plus de générer un projet initial avec certaines options, ils n'offrent pas grand-chose par rapport à Ember ou Angular. C'est compréhensible car ils représentent tous les deux une couche de vue. Si vous aimez les flux de travail personnalisés, l'expérimentation ou différentes structures d'un projet à l'autre, vous êtes au bon endroit. Pour certains développeurs, la flexibilité est la clé inhérente à l'utilisation de React ou Vue.
Angular 4 est livré avec un CLI comme Ember le fait. Vous pouvez générer des composants, des directives, des services, etc. Il génère également la structure initiale d'une application, vous n'avez donc qu'à vous soucier du produit. L'environnement de test est vraiment sympa car, avec chaque application générée, la suite de tests vit à proximité (littéralement). En plus de cela, TypeScript pourrait fournir une réelle augmentation de la productivité. Voici pourquoi:
Combien de fois avez-vous rencontré le code avec des lignes comme celle-ci…
function doSomething(someData) { // do something } … Et je me demandais quoi diable someData est, quelles propriétés il devrait avoir, quelles fonctions il devrait fournir, et quel est leur comportement? Avec TypeScript, vous définissez le type et attendez les données appropriées. Cela peut aller plus loin si vous utilisez un IDE avec le support de TypeScript. Vous pouvez explorer différentes parties de l'application en un rien de temps.
Nous n'avons pas abordé les IDE mais, pour la plupart des frameworks populaires, il existe des plugins qui facilitent vraiment le développement. WebStorm , par exemple, est livré avec un support intégré pour Angular, React et Vue.
Facilité d'intégration (avec d'autres bibliothèques)
Dernier point mais non le moindre, cela pourrait être considéré comme faisant partie de la convivialité, mais il est si important qu’il mérite sa propre section.
Quelle que soit la richesse en fonctionnalités de votre framework sélectionné, il y a de fortes chances que vous rencontriez des problèmes où des outils supplémentaires sont nécessaires. Il existe d'excellentes bibliothèques qui se concentrent sur un problème, que ce soit la manipulation DOM, le traitement des données, le formatage de l'heure, l'édition de texte enrichi, etc. Si vous essayez d'intégrer l'une d'entre elles et d'y passer des heures à chaque fois, ce n'est peut-être pas le choix optimal .
Le tester est très simple. Vous pouvez rapidement proposer un scénario imaginaire où vous avez besoin d'une certaine bibliothèque. Regardez vos projets passés; quels outils utilisez-vous et dans quels scénarios? Il y a de fortes chances que vous rencontriez à nouveau les mêmes situations et que vous souhaitiez être préparé à cela, ou au moins avoir une attente.
Toutes les bibliothèques ne prennent pas en charge TypeScript. Comme Angular l'utilise fortement, une partie des avantages de TypeScript peut disparaître lors de l'utilisation d'une telle bibliothèque. Bien sûr, vous pouvez trouver une solution de contournement, mais c'est un peu plus compliqué. En raison de la popularité angulaire, vous pouvez intégrer des instructions sur le page de la bibliothèque elle-même .
Pour Vue et React, vous êtes responsable de presque tout, et l'utilisation d'autres bibliothèques ne fait pas exception. Si vous utilisez Webpack ou un outil de construction similaire, vous pouvez vous référer directement aux bibliothèques installées à l'aide de NPM. J'ai trouvé que c'était un peu compliqué pour Vue d'utiliser des plugins de communauté, en particulier lorsqu'ils contiennent également une logique d'interface utilisateur.
Ventre d'homme EmberObserver , qui est un site Web de plugins communautaires. Chacun d'eux a un score sur une échelle de zéro à dix. C'est un très bon endroit pour chercher quelque chose dont vous avez besoin. Si vous tapez le nom de vos bibliothèques préférées, comme Lodash, Rx ou Ramda, vous trouverez les plugins associés, des simples wrappers aux réécritures complètes. Bien sûr, il y a Réagir génial et Awesome Vue référentiels qui rassemblent des ressources connexes, y compris des bibliothèques, mais j'ai trouvé EmberObserver particulièrement utile.
S'engager dans un framework JavaScript
Choisir le bon framework JavaScript est l'une des étapes les plus importantes pour faire de votre projet Web un succès. Que vous travailliez sur un petit ou un grand projet, que vous travailliez en solo ou en équipe, chacun de ces détails joue un rôle crucial pour déterminer quel cadre est le meilleur pour votre projet (et moins celui que vous préférez peut-être. ).
En ce qui concerne les fonctionnalités de base et la convivialité, j'ai répertorié les points qui affecteront la productivité des développeurs à divers degrés. La convivialité est particulièrement délicate car elle dépend fortement de votre expérience et de vos antécédents, ainsi que de l'entreprise ou de l'organisation dans laquelle vous travaillez.
Au fil du temps, les cadres dont nous avons discuté dans cet article peuvent évoluer, leurs popularités peuvent changer et les projets auxquels ils conviennent peuvent changer, mais cet article devrait vous donner une idée générale de l'endroit où chacun de ces cadres peut fonctionner le mieux.
En relation:
