Comment choisir le meilleur framework frontal

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 disposiez de beaucoup d'espace pour la créativité et l'expérimentation, vous n'êtes parfois pas sûr de la bibliothèque ou du framework à choisir.

Le framework 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 les uns aux autres. Nous examinerons 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 de la documentation ennuyeuse et sèche pour vous aider à démarrer.

Créer un framework génial est une chose et communiquer les idées de base qui le sous-tendent en est une autre. En fait, il existe de nombreux développeurs professionnels spécialisés dans le coaching. Une ressource d'apprentissage bien conçue réduira considérablement votre courbe d'apprentissage.

Allez chercher des ressources auprès 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'ai mentionné que la documentation seule ne suffit pas, il y a des exceptions à cela. EmberJS, par exemple, a une excellente documentation. Les fonctionnalités de base et les cas d'utilisation sont bien décrits avec des exemples génériques ici et là. Malheureusement, outre la documentation, il nous reste peu de livres de ressources, de cours vidéo ou d'autres matériaux.

D'autre part, il existe une abondance de ressources pour Angular et React. 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 il y a quelques bons cours parmi lesquels vous pouvez choisir.

Aurelia, par exemple, n'a presque 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 bon 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 votre client préfère probablement utiliser un ensemble d'outils éprouvés.

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 sont spécialisés. 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. Maintenant, l'employeur a besoin de plus de développeurs pour accélérer le développement.

Il existe 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é à qui vous pouvez demander de l'aide ? Puisque vous êtes seul avec la documentation, il y a de fortes chances que vous perdiez 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 devenez vraiment bon, il y aura beaucoup de projets pour vous.

Les leaders évidents ici sont Angular et React.

La plupart des offres d'emploi liées au front-end nécessitent l'un ou l'autre. Ils sont respectivement soutenus par Google et Facebook, et les employeurs se sentent donc « en sécurité » quant à leur choix.

Parfois, le choix du framework pour votre entreprise ou votre client ne vous appartient pas ; peut-être qu'il a été fait par un ancien employé ou 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 :

Bien que ces bibliothèques existent depuis assez longtemps pour faire leurs preuves en tant qu'options populaires, si vous essayez quelque chose de vraiment nouveau, des statistiques similaires pour elles peuvent vous aider à faire votre choix.

Apprendre uniquement Angular ou React ne vous mènera que très loin dans votre carrière. Bien sûr, vous aurez de nombreuses opportunités, mais il y a une raison pour laquelle d'autres frameworks existent. Essayez d'apprendre à leur sujet pendant votre temps libre et faites de temps en temps 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 techniques 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. Est-ce une couche de vue uniquement, à part entière, ou 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 : modèles, gestion des états, communication HTTP, traitement et validation des formulaires et routage. Ce sont des choses 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 pour un problème particulier.

Abordons brièvement les options populaires.

Nous allons commencer par React 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, il pourrait s'agir d'une arme à double tranchant. Finalement, vous finirez par créer votre propre framework 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.

JSX de React m'a toujours fait grincer des dents. J'ai dû m'y habituer. Cependant, les modèles de Vue sont vraiment sympas, surtout si vous venez d'Angular.

D'un autre côté, Ember a presque tout. Étonnamment, le noyau d'Ember ne fournit pas de traitement de formulaire avancé. Il a juste quelques aides à la saisie et c'est tout. Il est très opiniâtre 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 à attribuer la valeur directement à une propriété et Ember s'en plaindre.

Ember Data est une autre chose très différente des autres frameworks. Il s'agit d'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 l'API JSON (il s'agit d'une spécification pour l'implémentation des API JSON), vous êtes bien placé avec Ember, mais malheureusement, la plupart des serveurs ne le font pas. Vous devez donc écrire des adaptateurs et des sérialiseurs personnalisés. Cependant, si vous faites les choses à la manière d'Ember, cela pourrait être très 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 applications volumineuses, il favorise TypeScript, ce qui peut déclencher une certaine résistance avant de l'essayer.

Une autre chose notable est l'utilisation intensive des observables de la bibliothèque Rx, ce qui est vraiment agréable. Vous pouvez représenter presque n'importe quoi comme un observable et appliquer des opérations de haut niveau comme la carte, le filtre, etc. Si vous avez utilisé Lodash ou Underscore, Rx est un peu le même mais sur les stéroïdes.

Voici un résumé des principales fonctionnalités des quatre frameworks dont nous parlons dans cet article :

Toutes ces fonctionnalités que nous avons brièvement décrites 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 toujours de l'enthousiasme pour le framework que vous avez choisi, la prochaine étape consiste à vous salir les mains.

Peut-être que le cadre vous convient en raison de votre parcours. Peut-être que c'est un peu différent et 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 l'opportunité 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 demandez-vous si vous êtes productif ou non. Est-il facile d'obtenir le résultat souhaité ? Devez-vous chercher 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 rassemblez une expérience de base afin que vous puissiez penser à quoi cela ressemblerait si vous utilisiez ce cadre pour des projets à venir ou même la transition de projets existants.

Ember est considéré comme un framework très productif, du moins pour ses principaux utilisateurs. Il est livré avec une CLI, ce qui aide vraiment. Vous pouvez générer des itinéraires, 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 dossiers de base, installera les packages nécessaires, les outils de construction, l'environnement de test, etc. Si vous n'avez jamais utilisé une CLI à ce 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 retrouver 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 quelques 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 de Vue.

Angular 4 est livré avec une CLI comme le fait Ember. 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 agréable car, avec chaque élément d'application généré, la suite de tests se trouve à proximité (littéralement). En plus de cela, TypeScript pourrait fournir un véritable gain de 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 suis demandé ce qu'est someData sur terre, quelles propriétés elle devrait avoir, quelles fonctions elle devrait fournir et quel est son 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 prise en charge de TypeScript. Vous pouvez explorer différentes parties de l'application en un clin d'œil.

Nous n'avons pas abordé les IDE mais, pour la plupart des frameworks populaires, il existe des plugins qui rendent le développement vraiment facile. WebStorm, par exemple, est livré avec un support intégré pour Angular, React et Vue.

Facilité d'intégration (avec d'autres bibliothèques)

Enfin et surtout, cela pourrait être considéré comme faisant partie de la convivialité, mais c'est tellement 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 nécessitant des outils supplémentaires. 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'en intégrer une et que vous y passez des heures à chaque fois, ce n'est peut-être pas le choix optimal. .

Tester cela est très facile. Vous pouvez rapidement proposer un scénario imaginaire dans lequel vous avez besoin d'une certaine bibliothèque. Regardez vos projets passés; Quels outils avez-vous utilisé et dans quels scénarios ? Il y a de fortes chances que vous rencontriez à nouveau les mêmes situations et que vous vouliez vous y préparer, ou du moins avoir une attente.

Toutes les bibliothèques ne prennent pas en charge TypeScript. Comme Angular l'utilise fortement, certaines des qualités de TypeScript peuvent 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é d'Angular, vous pouvez intégrer des instructions sur la 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 directement vous référer aux bibliothèques installées à l'aide de NPM. J'ai trouvé que c'était un peu compliqué pour Vue d'utiliser des plugins communautaires, surtout quand ils contiennent également une logique d'interface utilisateur.

Ember a EmberObserver, qui est un site Web de plugins communautaires. Chacun d'eux a un score sur une échelle de zéro à dix. C'est vraiment un super 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 existe des référentiels Awesome React et Awesome Vue 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 seul ou en équipe, chacun de ces détails joue un rôle crucial pour déterminer quel framework est le meilleur pour votre projet (et moins quel framework vous préférez ).

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 frameworks dont nous avons parlé dans cet article peuvent évoluer, leur popularité peut 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 frameworks peut fonctionner le mieux.