Article original : The Best Way to Learn Frontend Web Development

Par Mehul Mohan

Pourquoi le développement web ?

Le développement web est un domaine qui n'est pas près de disparaître. Le web évolue rapidement, et il y a des améliorations régulières des appareils que beaucoup de gens utilisent quotidiennement.

Les applications basées sur le cloud nous ont permis de faire le gros du travail dans le cloud et d'utiliser le navigateur comme un pont pour connecter des serveurs backend puissants avec des frontends moins capables et moins puissants.

Maintenant est le meilleur moment pour apprendre le développement web si vous cherchez à apprendre quelque chose.

Non seulement le développement web ouvre une pléthore d'opportunités pour vous en tant qu'individu, mais vous serez également capable de coder et de déployer des projets complets de bout en bout qui peuvent être consommés par presque tout le monde sur la planète.

Puisque la plupart des gens ont accès à un navigateur, chaque personne est à seulement une URL de l'application web que vous avez codée. Si vous comparez cela avec une application de bureau ou un produit basé sur du matériel, vous verrez que ce n'est tout simplement pas aussi scalable que le web.

Maintenant que nous avons établi le fait que le web est la meilleure voie à suivre en ce moment, voyons comment apprendre le développement web de la meilleure façon possible.

Le web est vaste – commencez petit et gardez-le petit

Vous avez probablement vu un grand nombre de frameworks et de bibliothèques JavaScript comme React, Angular, Vue, Ember, jQuery, XYZ, et ainsi de suite.

Quelques questions très courantes que je reçois en tant que YouTubeur publiant du contenu sur le développement web sont les suivantes :

Dois-je apprendre X ?

X est-il meilleur que Y ?

Quel est le champ d'application de Z ?

Souvenez-vous toujours de deux choses concernant la technologie, surtout concernant le web :

  1. Votre stack technologique n'a presque jamais d'importance. Si vous êtes suffisamment bon avec votre langage/framework, vous gagnerez à chaque fois.
  2. Vous n'avez jamais besoin d'apprendre tout. Jamais. Vous pouvez être un touche-à-tout, mais assurez-vous d'être un maître dans un domaine.

Pour résumer cette section, vous devez penser très petit lorsque vous commencez. Il est très facile de se laisser emporter par ce framework à la mode qui vient de sortir. Ne cherchez pas à devancer la course en abandonnant l'ancienne technologie et en adoptant la nouvelle technologie sans faire de recherches appropriées.

Commencez avec HTML et CSS

Je ne peux pas insister assez sur ce point. Cela me peine de voir tant de gens me poser des questions sur leurs projets React alors que la réponse réside dans le HTML ou le CSS de base.

JavaScript n'était qu'un langage de script pour navigateur au début. Et bien qu'il soit bien plus que cela maintenant, cela ne change pas le fait que sur le web, il complète HTML et CSS.

Avec les avancées des standards web, il y a tant de choses que vous pouvez réaliser avec CSS seul. Pour beaucoup de choses, JavaScript n'est même pas requis.

Des animations ? Vous les avez. Glisser-déposer ? HTML peut gérer cela. Mises en page ? Consultez les API CSS Flexbox ou Grid !

Il y a tant de choses que vous pouvez apprendre sur HTML et CSS ! Ne vous précipitez pas dans JavaScript simplement parce que tous les jeunes branchés du quartier sont dans Angular. Ces bibliothèques et frameworks ne vont nulle part. Prenez votre temps.

Aller large ou aller profond ?

Il y a deux approches lorsque vous apprenez le développement web – aller large ou aller profond.

Aller large signifie que vous commencez à apprendre beaucoup de choses ensemble. Cela peut fonctionner pour certaines personnes, mais pas pour d'autres. Vous pourriez vous submerger avec des tutoriels, des exercices, des vidéos et des blogs, puis finalement abandonner.

Aller profond signifie que vous commencez à apprendre une chose et essayez d'apprendre autant que possible à ce sujet. Cela a ses propres avantages et inconvénients. Vous pourriez vous ennuyer, ou abandonner parce que vous ne voyez pas de résultats.

Alors, quelle est la solution ? La réponse est, étrangement, de ne faire ni l'un ni l'autre. Choisissez une petite stack technologique comme HTML/CSS/JavaScript, et allez modérément profond dans les trois. Cela présente un couple d'avantages :

  1. Vous ne vous ennuierez pas, car les trois ont des objectifs relativement différents et vous les écrivez différemment.
  2. Vous pouvez mélanger les trois, et créer et voir quelque chose de significatif rapidement sans des mois d'effort (ce qui est généralement requis par d'autres langages comme C/C++). Cela vous motivera à continuer.

Ne choisissez pas React, ou Angular, ou Vue

Lorsque les gens commencent à travailler avec JavaScript, il y a une envie de prendre une bibliothèque comme React, un système d'interface utilisateur comme Material UI, et de se lancer dans la création de choses géniales.

Malheureusement, cela ne mène à rien de plus qu'à se tirer une balle dans le pied. Vous ne pourrez jamais, jamais, créer des projets intermédiaires à avancés avec ces frameworks si vous ne comprenez pas les bases de JavaScript. Et l'application de JavaScript prend un certain temps.

Remarquez que j'ai utilisé le mot appliquer, et non apprendre, dans la phrase précédente. Il y a une énorme différence entre apprendre quelque chose et appliquer quelque chose que vous avez appris.

Créez un petit projet mais fonctionnel avec HTML/CSS/JavaScript. Et lorsque vous le faites, créez-en un autre, puis créez un autre projet.

À chaque étape, continuez à augmenter la complexité du projet, et les attentes aussi, jusqu'à ce que votre base de code devienne ingérable. À ce moment-là, vous êtes arrivé à ce que j'aime appeler la frontière de l'apprentissage supérieur.

Vous voyez, les frameworks existent pour vous décharger du travail répétitif. Ils n'existent pas pour que vous ignoriez ce qui se passe vraiment sous le capot et que vous comptiez sur le fait que c'est de la magie.

La première fois que vous choisissez un framework comme React ou Angular pour vos projets devrait être lorsque vous êtes confiant que vous pouvez créer ce projet sans React ou Angular.

Maître d'un métier

Maintenant, lorsque vous êtes bon avec HTML/CSS/JavaScript, il est temps de passer aux standards de l'industrie. La vérité est que, peu importe à quel point vous êtes un bon développeur JavaScript, vous devrez souvent travailler avec des frameworks modernes comme React – et avec seulement vos connaissances en JavaScript, vous ne pouvez pas immédiatement le maîtriser.

Il faudra du temps pour apprendre et comprendre la terminologie, les concepts et le fonctionnement de ce framework sous le capot. Alors, prenez un framework et maîtrisez-le.

Comment, pourriez-vous demander ? La réponse est simple – c'est à vous de décider. Créez un projet simple dans tous les principaux frameworks (Angular, Vue et React), et voyez lequel vous convient le mieux. Choisissez-en un et ne regardez pas en arrière.

Ensuite, créez tous vos projets avec ce framework. Essayez de faire quelque chose que vous ne savez pas déjà faire. C'est la meilleure façon de vous pousser hors de votre zone de confort et d'apprendre de nouvelles choses.

Mais n'oubliez pas les autres

Il est tout aussi important de garder un œil sur les autres candidats également. Cela ne concerne pas seulement les concurrents directs de votre framework "préféré", mais aussi certains outils de développement web dignes d'intérêt.

Vous n'avez pas besoin de "maîtriser" ces autres outils car, la plupart du temps, ils nécessitent simplement une configuration ponctuelle avec une maintenance régulière. Mais il est toujours agréable de les garder sur votre liste de compétences.

Cela pourrait inclure plusieurs choses - comme les tests unitaires avec Jest, les tests de bout en bout avec Cypress, Webpack, Babel ou Parcel, un peu de devops, le scripting shell Linux, les déploiements de serveurs, et ainsi de suite.

Vous pouvez toujours apprendre les bases de ces compétences rapidement car elles existent depuis longtemps, donc elles disposent de beaucoup de matériel utile disponible.

Passez à autre chose

Croyez-moi, c'est une sensation étrange – mais une fois que vous avez développé de nombreux projets et écrit beaucoup de code avec votre stack préférée, vous commencez à avoir l'impression que vous pouvez tout faire. À ce stade, vous pouvez obtenir un emploi et continuer à faire la même chose - c'est parfaitement bien. Ou, vous pouvez faire monter vos compétences en flèche et passer à autre chose.

Le web. Est. Vaste.

Alors, si vous avez terminé avec HTML/CSS/JavaScript/React/Angular/Vue, passez aux serveurs. Apprenez le déploiement de serveurs, NGiNX, HAProxy, l'équilibrage de charge, la configuration de l'infrastructure cloud, les pare-feu et l'autoscaling.

Vous avez aussi terminé avec cela ? Passez à WebAssembly, le langage pour la prochaine itération du web.

Vous avez terminé d'apprendre WebAssembly ? Err, je ne sais pas alors. Peut-être passez à d'autres domaines de programmation, ou à la cuisine ? :)

Conclusion

Dans le monde d'aujourd'hui, il est si facile pour vous de ne pas répéter les erreurs que j'ai commises en apprenant le développement web moi-même. Parce que toutes ces erreurs sont maintenant publiques pour que tout le monde puisse les lire !

Vous avez tant de ressources à votre disposition, et j'ai travaillé sur l'une d'entre elles pour que les développeurs web puissent apprendre ! Voici ma chaîne YouTube où je vous enseigne comment programmer des choses géniales. Et voici la plateforme codedamn – la plateforme réelle qui vous permet de devenir un excellent développeur en mélangeant une série de vidéos, d'articles et d'exercices.

Faites-moi savoir ce que vous pensez de cet article, et du développement web en général, via mes comptes twitter et Instagram. J'adorerais entrer en contact avec vous !

Paix !