J'ai finalement compris les outils de construction frontaux. Vous pouvez également.

Les outils de construction frontale peuvent être déroutants même pour les développeurs expérimentés comme moi. La solution est de comprendre comment ils fonctionnent - et travaillent ensemble - au niveau conceptuel.

Cet article présente mon approche avisée pour donner un sens aux outils de construction frontaux. Au lieu de plonger dans le code, je vais vous expliquer mon modèle mental du fonctionnement de ces outils et de ce qu'ils accomplissent.

Ne soyez pas intimidé par l'état de l'art

Node, NPM, Grunt, Gulp, Bower, Webpack, Browserify, Yeoman, Brunch… il existe tellement d'outils de construction frontaux qu'il peut sembler impossible de suivre le rythme.

La clé n'est pas d'être intimidant. Tous ces projets sont conçus pour vous faciliter la vie.

Pour comprendre le quoi, le pourquoi et le comment de ces outils, il vous suffit de saisir quelques concepts.

Concept n ° 1 - La dichotomie fondamentale des outils de construction est «installer vs faire»

Les outils de création font deux choses:

  1. Installer des choses
  2. Faire des choses

La première question à se poser lors de la confrontation avec un nouvel outil de build est: "Cet outil est-il destiné à installer des choses pour moi, ou à faire des choses pour moi?"

«Installer» des outils comme npm, Bower et Yeoman peuvent installer à peu près tout. Ils peuvent installer des bibliothèques frontales comme Angular.js ou React.js. Ils peuvent installer des serveurs pour votre environnement de développement. Ils peuvent installer des bibliothèques de test. Ils vous aident même à installer d'autres outils de construction frontaux.

En bref, ils installent la plupart des éléments liés au code auxquels vous pouvez penser.

Les outils «faire» comme Grunt, Webpack, Require.js, Brunch et Gulp sont beaucoup plus compliqués. Le but des outils «faire» est d'automatiser toutes les tâches subalternes et sujettes aux erreurs dans le développement Web. Les choses qu'ils font sont parfois appelées «tâches».

Pour effectuer ces «tâches», ils utilisent souvent leur propre écosystème de packages et de plugins. Chaque outil écrit les tâches de différentes manières. Ces outils ne font pas tous la même chose. Certains outils «faire» essaient de gérer toutes les tâches que vous leur lancez (Grunt, Gulp, etc.). D'autres se concentrent sur une chose, comme la gestion des dépendances Javascript (Browserify, Require.js, etc.).

Parfois, vous finissez par utiliser plusieurs de ces outils dans le même projet.

Voici une courte liste de «tâches» que j'ai automatisées avec ces outils de «faire»:

  1. Remplacement d'une chaîne de texte dans un fichier
  2. Création de dossiers et déplacement de fichiers dans ces dossiers
  3. Exécuter mes tests unitaires avec une seule commande
  4. Actualiser mon navigateur lorsque j'enregistre un fichier
  5. Combiner tous mes fichiers JavaScript en un seul et tous mes fichiers CSS en un seul
  6. Réduire mes fichiers JavaScript et CSS concaténés
  7. Modifier le placement des balises sur une page html

Une fois que vous comprenez que les outils installent des choses ou font des choses, les catégoriser devient beaucoup plus facile:

Concept # 2 - Le grand-parent de tous les outils de construction est Node et npm

Node et npm installent et exécutent tous ces outils de génération, il y en a donc toujours une trace dans votre projet. Pour cette raison, de nombreux développeurs essaient d'utiliser ces deux outils autant que possible avant de recourir à l'installation d'un outil supplémentaire.

Node et NPM entrent dans notre dichotomie «construire» et «faire». Node est l'outil «do», et npm est l'outil «install».

npm peut installer des bibliothèques comme Angular.js ou React.js. Il peut également installer un serveur pour exécuter votre application localement pour le développement. Il peut même installer des outils pour réduire votre code par exemple.

Node, quant à lui, «fait» des choses pour vous, comme exécuter des fichiers JavaScript, des serveurs et bien plus encore.

Si vous avez besoin d'un endroit pour commencer à apprendre, commencez par Node + npm et restez-y pendant un moment. Lorsque votre projet devient suffisamment grand, vous atteindrez les limites de ce que Node et npm peuvent automatiser pour vous. À ce stade, vous pouvez incorporer de manière organique un autre outil de construction.

Concept # 3 - Une build est juste une version prête pour la production de votre application

Les développeurs divisent souvent JavaScript et CSS dans des fichiers séparés. Des fichiers séparés vous permettent de vous concentrer sur l'écriture de morceaux de code plus modulaires qui ne font qu'une seule chose. Les fichiers qui font une chose réduisent votre charge cognitive. (Si vous pensez que des fichiers séparés sont plus déroutants qu'un fichier volumineux, essayez de travailler dans un fichier de 5000 lignes et vous changerez rapidement d'avis?)

Mais lorsqu'il est temps de passer votre application en production, avoir plusieurs fichiers JavaScript ou CSS n'est pas idéal. Lorsqu'un utilisateur visite votre site, chacun de vos fichiers nécessitera des requêtes HTTP supplémentaires, ce qui ralentira le chargement de votre site.

Donc, pour remédier à cela, vous pouvez créer une «build» de notre application, qui fusionne tous vos fichiers CSS en un seul fichier, et fait de même avec votre JavaScript. De cette façon, vous réduisez le nombre et la taille des fichiers que l'utilisateur obtient. Pour créer cette «version», vous utilisez un «outil de création».

Ci-dessous, une capture d'écran d'une application en développement. Remarquez comment il a 5 balises et 3 balises? Si vous regardez sur le côté gauche, remarquez que le dossier DEVELOPMENT contient 10 fichiers?

Et ci-dessous, voici la même application après qu'un outil de construction a fait sa magie.

Remarquez que nous n'avons qu'une seule balise de script et une seule balise de lien? Et maintenant, le dossier PRODUCTION ne contient que 4 fichiers, contre 10 dans le dossier DEVELOPMENT.

L'application est la même ligne pour ligne. Nous venons de le compacter dans un petit paquet soigné que nous appelons une «construction».

Vous vous demandez peut-être pourquoi une compilation en vaut la peine, si elle ne fait que gagner quelques millisecondes de temps de chargement à vos utilisateurs. Eh bien, si vous créez un site juste pour vous ou pour quelques autres personnes, vous n'avez pas à vous en préoccuper. La génération d'une build de votre projet n'est nécessaire que pour les sites à fort trafic (ou les sites dont vous espérez qu'ils seront bientôt à fort trafic?).

Si vous apprenez simplement le développement ou si vous ne créez que des sites avec un trafic très faible, générer une version ne vaut peut-être pas la peine.

Concept n ° 4 - Les lignes entre «installer» et «faire» peuvent être floues

Aucun outil ne fait que l'un et pas l'autre. Ils font tous un mélange de «installer» et de «faire». Mais en général, un outil a tendance à faire plus de l'un que de l'autre.

Parfois, un outil «d'installation» exécutera des fichiers. npm fait souvent cela. npm peut également exécuter des commandes et des scripts - pas seulement installer des fichiers. Un outil comme Yeoman installe des applications standard pré-construites sur votre ordinateur, mais il génère également dynamiquement de nouveaux fichiers si nécessaire, brouillant la frontière entre l'installation et l'exécution.

Concept # 5 - Il n'y a pas une seule bonne combinaison d'outils

La combinaison d'outils que vous utilisez peut être entièrement à vous.

Vous pouvez choisir de n'utiliser aucun outil. Gardez simplement à l'esprit que copier, coller, minifier, démarrer des serveurs et tout ce qui est impliqué peut rapidement devenir écrasant.

Ou vous pouvez simplement utiliser Node et npm avec aucun outil supplémentaire. C'est idéal pour les débutants, mais à mesure que votre projet se développe, il peut commencer à sembler trop manuel d'un processus.

Ou vous pouvez choisir d'utiliser quelques autres outils en plus de Node et npm dans votre projet. Ainsi, votre application utilisera Node + npm comme noyau, puis peut-être Grunt + Bower ou Webpack ou Gulp + Bower.

L'utilisation d'une combinaison d'outils comme ceux-ci en plus de Node + npm vous permet d'automatiser de nombreuses tâches dans votre projet. Le prix à payer est que ces outils ont une courbe d'apprentissage abrupte.

Concept # 6 - Les outils de construction ont une courbe d'apprentissage abrupte, alors apprenez seulement ce qui est nécessaire

Créer une application est déjà assez difficile. Vous travaillez peut-être avec une nouvelle langue ou un nouveau framework. Ou vous pourriez avoir une logique métier très délicate. Ainsi, l'incorporation d'un outil de construction peut ajouter une couche supplémentaire de complexité à votre projet. Cela est particulièrement vrai lorsqu'il s'agit d'un projet dans lequel quelqu'un d'autre a écrit le code associé à l'outil de génération.

Mon conseil est de n'apprendre exactement que ce dont vous avez besoin pour faire votre travail et rien d'autre.

La meilleure façon d'apprendre de nouvelles choses est lorsque vous avez une tâche du monde réel que vous devez accomplir. Par exemple, n'apprenez pas à copier des fichiers avec Grunt pour le plaisir. Au lieu de cela, attendez que votre projet en ait réellement besoin, puis déterminez-le.

N'oubliez pas: une complexité prématurée vous ralentira.

Concept n ° 7 - Tous les outils de construction partagent le même objectif: vous rendre heureux en automatisant de nombreuses tâches subalternes

Vous utilisez votre outil de création à son plein potentiel lorsque vous atteignez ce que j'ai appelé «l'outil de création nirvana». C'est à ce moment qu'après avoir enregistré un fichier ou exécuté une seule commande, des tonnes de tâches se déroulent «automatiquement» pour vous.

Si votre outil de construction vous oblige toujours à déplacer manuellement des fichiers, à modifier des valeurs ou à exécuter des commandes pour obtenir une nouvelle construction, vous n'avez pas encore atteint l'outil de construction nirvana.

L'un des plus grands avantages des outils de création est qu'en enregistrant simplement un fichier, vous pouvez déclencher une nouvelle version de votre application et l'envoyer à votre navigateur. Cela peut considérablement accélérer votre flux de travail de développement frontal.

Alors, combien d'efforts devriez-vous consacrer à la configuration et à l'installation de votre outil de construction? Simple: arrêtez-vous lorsque vous êtes satisfait de ce qu'il fait pour vous.

Concept # 8 - Il n'y a pas que vous. La documentation est souvent terrible.

Ce n'est pas toi, je te le promets. Pour bon nombre de ces outils, la documentation fait tout à fait défaut. Il peut parfois être difficile de comprendre comment effectuer les tâches de base.

Gardez à l'esprit qu'il existe très peu de recettes prédéfinies pour les outils de construction. Vous verrez que les gens obtiennent les mêmes résultats de manières très différentes - parfois en tant que réponses à la même question StackOverflow!

Bien que cela soit ennuyeux, cela vous offre également la possibilité de faire travailler vos muscles de codeur et de mettre en œuvre quelque chose de créatif.

Après tout, n'est-ce pas pour cela que nous faisons cela?

Merci d'avoir lu ceci! Espérons que ces quelques points rendent l'approche des outils de construction une expérience moins déroutante. Si ce n'est pas le cas, je serai ravi d'éclaircir toutes les questions (ou de corriger les erreurs que vous trouverez ici), tweetez-moi @Roneesh!

Et bien sûr, si vous avez aimé ce que vous avez lu, assurez-vous de le ❤ ci-dessous et de le partager avec vos amis. En tant qu'écrivain, cela signifie le monde pour moi!