Devenir développeur fullstack : Extrait

Je ne veux pas faire un effet de style, c’est juste la réalité. Autant que vous sachiez à quoi vous attendre directement. Certains disent qu’il est quasiment impossible d’apprendre le développement web par soi-même. Cette croyance a malheureusement pour effet d’en décourager plus d’un. Pourtant, laissez-moi vous dire que la moitié des développeurs que je connaisse ont appris ce fabuleux métier par eux-mêmes.

Apprendre le développement web n’est pas plus difficile qu’un autre métier, c’est surtout le fait d’apprendre tout seul qui est difficile. La difficulté ne réside pas dans l’apprentissage du développement web, mais dans la gestion de soi-même. La plupart des autodidactes vont se concentrer sur les éléments techniques à maitriser. Ils pensent souvent qu’ils doivent avant tout améliorer leur connaissance de la syntaxe et de leur logique de programmation. S’ils se concentrent sur le « quoi », ils en oublient le « comment ».

Apprendre en autodidacte demande avant tout d’apprendre à gérer notre temps, notre énergie et notre capacité de concentration. L’apprentissage du développement se fera ensuite de façon naturelle, comme une simple conséquence de notre état d’esprit. Apprendre en autodidacte, c’est avoir la force de jouer le rôle du professeur et de l’élève à la fois. C’est avoir la discipline de se dire que, comme en classe, il y a un temps pour se taire, se mettre au travail et se concentrer.

Fixer les bons objectifs

Pour y parvenir, le seul objectif de devenir développeur web ne vous suffira pas. Ce n’est pas un objectif clair et quantifiable. Vous serez développeur web à partir du moment où vous aurez écrit votre première ligne en HTML. Est-ce pour autant que vous aurez accompli votre objectif ? Je ne crois pas. Quand l’aurez-vous accompli ? Demandez-vous dès lors pourquoi vous souhaitez devenir développeur fullstack. Voulez-vous trouver un emploi ? Voulez-vous réaliser votre propre site Internet et gagner de l’argent ? Si oui, combien d’argent ? 1€, 1 million ? Assez pour remplacer votre métier actuel par celui de développeur web ? La réponse vous appartient, mais elle doit être quantifiable. Vous devez pouvoir accomplir votre objectif en terminant des conditions claires. Prenez quelques instants pour réfléchir et notez votre objectif final.

De nombreuses aventures

Le chemin sera long et un seul objectif ne sera probablement pas suffisant pour vous faire tenir la distance. Lors de chaque session d’apprentissage, il est utile de pouvoir accomplir plusieurs objectifs de petite taille et ainsi constater votre évolution. C’est pour cela que j’ai écrit chaque point du plan d’apprentissage comme une série de petits objectifs clairs et précis que vous pouvez apprendre et terminée en une session d’apprentissage. Le dernier objectif sera le test ultime, celui de décrocher votre premier travail ou votre premier client et de commencer à vivre de votre passion.

Le fait de savoir clairement à quoi ressemble ce qui est « terminé » ne vous aide pas seulement à terminer cette tâche, mais aussi à la commencer. Trop souvent, nous reportons ou nous avons du mal à faire les premiers pas d'un projet parce que nous n'avons pas de ligne d'arrivée claire en tête. Dès que vous définissez ce à quoi ressemble le mot "terminé", vous donnez à votre esprit des instructions claires. Il suffit d'une minute de concentration pour clarifier ce à quoi ressemble "ce qui est fait".

Un marathon, pas un sprint

Il n’y a malheureusement pas de réponse toute faite à la question du temps nécessaire pour apprendre le développement web. Tout simplement parce que chaque être humain est unique et dispose d’une capacité d’apprentissage différente. De plus, chaque développeur autodidacte peut y consacrer plus ou moins de temps que les autres. L’important à retenir c’est que ce n’est pas tant la durée de chacune de vos sessions d’apprentissage qui a de l’importance, mais bien leur récurrence. Il vaut mieux que vous fassiez 20 minutes de code tous les jours, plutôt qu’une seule fois, 2 heures par semaine. La base de l’apprentissage passe par la compréhension et la répétition. C’est à force de rencontrer les mêmes termes et les mêmes problématiques que celles-ci deviendront une seconde nature pour vous. Seule une activité répétée et récurrente peut vous apporter ce bénéfice. Je pense toutefois qu’après 6 mois d’apprentissage soutenu, vous disposerez déjà d’une base solide de compétences et arriverez à produire vos premiers résultats de qualité.

Lorsque l’on se concentre sur ce que l’on n’a pas, on perd ce que l’on a. 
Alors que si l’on se concentre sur ce qu’on possède, on obtient ce qui nous manque.

En vous concentrant sur ce qu’il vous reste à apprendre, vous perdrez de vue ce que vous avez déjà appris. C’est pour vous aider à vous souvenir de vos précédentes réussites que vous trouverez à la fin de chaque chapitre, une page vous permettant de noter ce que vous maitrisez déjà. Complétez-la à chaque fois que vous apprenez quelque chose de nouveau. Revenez à cette liste dès que vous doutez. Utilisez-la comme moteur et comme levier d’action pour vous donner la confiance nécessaire à affronter la prochaine étape.

Prenez soin de vous

Ne faites pas plus aujourd'hui que vous ne pourrez complètement récupérer d’ici demain.

N’oubliez pas de faire des pauses tout au long de votre parcours. Ce n’est pas un sprint. Donnez à votre cerveau le temps d'emmagasiner ce qu’il a appris et de réaliser de nouvelles connexions entre les différents concepts observés. Si vous prenez le temps de planifier des sessions d’apprentissage fixes, prenez également le temps de vous réserver des temps de repos. Il n’est pas rare de se retrouver derrière son écran à des heures avancées de la nuit, envouté par ce que j’appelle la « Passion du Développeur », mais aussi par égo et sa volonté d’arriver à bout d’un bug récalcitrant. Une bonne nuit de sommeil vous apportera toute la clarté d’esprit nécessaire pour trouver la solution.

Bienvenue dans la partie principale de ce guide complet, celle dans laquelle vous passerez le plus de temps et où vous reviendrez sans cesse. Il est désormais temps de vous lancer et de vous mettre au travail. Soyez excités, un fabuleux monde vous attend !

J’ai découpé ce chapitre du livre en différentes sections, toutes dédiées à une technologie ou un aspect du développement web en particulier. Nous allons toutes les aborder de la même manière et toutes les sections utilisent donc la même structure. Rappelez-vous que la clé de la réussite se trouve dans la répétition et la consistance.

Voici la structure type de chaque section et les actions que vous devrez entreprendre pour chacune d’entre elles.

1. Je commence par vous introduire la technologie en question et vous donnez quelques pistes quant à son utilisation courante.

2. Je continue en vous guidant pas à pas à travers les différents points que vous devez connaitre et maitriser. Pour chacun d’entre eux, je vous renvoie vers une ressource de qualité disponible en ligne. C’est à ce moment-là que vous déposerez ce guide sur le côté, vous plongerez dans la lecture des ressources suggérées et apprendrez le concept proposé, par vous-même.
En complément de la ressource suggérée, je vous invite à explorer et à réaliser vos propres recherches, surtout s’il s’agit d’approfondir un concept qui vous serait encore flou. Si des doutes persistent encore, n’hésitez pas à poser une question dans la communauté Parfaitement web.

3. Prenez des notes tout au long de votre apprentissage. Non seulement cela favorisera la rétention de l’information, mais vos notes vous seront très utiles par la suite. Chaque section dispose d’une page réservée à la prise de notes.
À ce propos : ne recopiez pas la documentation, c’est totalement inutile. La documentation est disponible et le restera, vous pourrez toujours vous y référer quand vous les souhaitez. Prenez plutôt note des associations d’idées, des points essentiels ou d’une reformulation de concepts à l’aide de vos propres mots.

4. Lorsque vous pensez avoir compris l’ensemble des notions énoncées, reprenez la lecture de ce guide et validez vos connaissances avec l’exercice adapté à votre niveau. Réalisez cet exercice par vous-même, à l’aide de vos notes, de la documentation officielle ou de la ressource proposée.
Coder n’est pas un examen à livre fermé, tout au contraire. C’est à ce moment-là que l’abondance d’information dont nous avons tant parlé peut s’avérer être un allier de taille. Il est inévitable qu’un autre développeur dans le monde se soit posé la même question que vous et que la solution se trouve dès lors en ligne. Je compte sur vous pour tout de même faire la part des choses et tenter d’abord de trouver la solution par vous-même avant de vous retourner vers les autres. Après tout, le but ultime est de faire de vous un développeur autonome.

5. Enfin, une fois l’exercice réalisé, il est important de vous auto-évaluer pour éventuellement continuer à approfondir les points qui auraient obtenu une note insatisfaisante. Remplissez alors le questionnaire d’évaluation présent en fin de section et reprenez cette liste au point 2, jusqu’au moment où toutes les notions sont parfaitement maitrisées.

6. Passez ensuite à la section suivante et recommencez au point 1 de cette liste.

Je vous conseille vivement de suivre le plan d’apprentissage dans l’ordre. C’est-à-dire de commencer votre apprentissage par le HTML et de finir par l’apprentissage des serveurs. Il est essentiel de maitriser le HTML, le CSS et l’algorithmique en premier. Ce sont des fondations essentielles que vous devez maitriser, quel que soit le langage de programmation que vous utiliserez par la suite. Assurez-vous de savoir nager avant de vous lancer en kayak, sauf bien sûr, si vous aimez boire la tasse.

Dans le cas où vous ne seriez pas un développeur débutant et où vous maitrisez déjà certains aspects du développement web, je vous inviterais à ne pas sauter intégralement une section sans au moins avoir réalisé l’exercice proposé, dans sa plus haute difficulté. Ne soyez pas trop optimise quant à votre réelle maitrise d’un sujet. Validez votre perception des choses à l’aide d’un exercice concret qui ne laissera pas de place au doute. J’en veux pour exemple le nombre de développeurs qui pensent maitriser JavaScript. Si vous leur demandez de noter rapidement leurs compétences en la matière, ils vous donneront en moyenne la note de 8 sur 10. Demandez-leur ensuite de réaliser un exercice qui fait appel à un concept récurrent, mais complexe à maitriser : les « Promesses ». Vous serez surpris qu’un très grand nombre n’arrive pas à s’en servir correctement, au dépit de leur perception de connaissance du langage. Ne faites pas la même erreur et prenez le temps de valider vos connaissances à l’aide de l’exercice proposé avant de sauter une section.

Enfin, ne passez pas d’une section à l’autre. Une fois que vous êtes dans une section, restez-y, même s’il sera tentant de vouloir varier les choses. Cela ne ferait que ralentir votre progression. En passant d’un langage à un autre, même pour moi après 20 ans de métier, il y a toujours un temps d’adaptation nécessaire pour le cerveau. Il me faut systématiquement quelques minutes pour reprendre mes marques dans un langage de programmation après avoir passé beaucoup de temps avec un autre. En passant sans arrêt d’un langage à l’autre, ces minutes d’adaptation s’accumulent et ont tendance à mélanger vos connaissances encore fraîches, rendant votre apprentissage plus difficile. Faites une seule chose à fond et bien.

Introduction

Le CSS, ou « Cascading Style Sheet » en anglais, vous permet d’appliquer du style à votre page web. Tout comme le HTML, il ne s’agit pas non plus d’un langage de programmation, mais plutôt un ensemble de règles s’appliquant à des sélecteurs HTML. Chaque règle est composée de diverses propriétés modifiant un des aspects visuels de l’élément sélectionné.

Le HTML n’a jamais été conçu pour contenir des balises servant à mettre en page un site Internet, pourtant des balises comme font ont été introduites dans la troisième version du HTML. Le fait que les informations visuelles soient liées au markup de la page a commencé à générer un problème de maintien pour les développeurs à l’époque. Imaginez devoir repasser dans chaque page de votre site pour modifier l’aspect visuel de votre barre de navigation par exemple. C’est dans le but d’externaliser les règles de style dans un endroit spécifique et séparé du markup que le CSS a été créé. Depuis, les balises comme `font ont été supprimées.

CSS et les préprocesseurs

Il est rare d’écrire désormais du CSS dans sa version native. Les développeurs ont très souvent recours à des préprocesseurs comme « Less » ou « Sass » pour faciliter son écriture. Il est également important pour vous de découvrir les conventions de nommage comme BEM. Voici quelques ressources pour vous documenter sur le sujet.

https://developer.mozilla.org/fr/docs/Glossary/CSS_preprocessor
https://www.alticreation.com/bem-pour-le-css/
https://www.alsacreations.com/article/lire/1641-Bonnes-pratiques-en-CSS--BEM-et-OOCSS.html
[EN] https://lesscss.org/
[EN] https://sass-lang.com/

Les frameworks CSS

Un framework CSS peut être résumé en une collection des règles CSS prêts à l’emploi dans le but de faciliter le développeur à réaliser une interface utilisateur. Ils proposent une série de composants déjà stylisés que vous pouvez utiliser tels quels ou personnaliser légèrement. Ils sont un excellent outil pour mettre en place le layout d’un site sans devoir réinventer et recréer une charte et interface graphique de zéro à chaque fois. La majorité des frameworks CSS viennent avec leur système de grilles, de boutons, de barres de navigations et de formulaires directement utilisables. Ils proposent aussi fréquemment des composants dynamiques utilisant JavaScript comme des boites de sélection multiples, de dates, des modales, popups, etc.

Les frameworks CSS les plus courants sont :

Bootstrap.

• [EN] https://getbootstrap.com Foundation.
• [EN] https://get.foundation/ Bulma.
• [EN] https://bulma.io/

À cette liste, je rajouterais TailwindCSS, un framework CSS particulier, puisqu’il fait partie de la catégorie des utility-first CSS. Pour en savoir plus à son sujet et découvrir les avantages que je lui trouve, je vous invite à visionner la vidéo que j’ai réalisée à son sujet.

Que faut-il connaitre en CSS ?

Il y a tellement de propriétés de style disponibles que toutes les lister dans ce plan d’apprentissage serait exhaustif. Je vous propose plutôt de découvrir ci-dessous les connaissances essentielles que vous utiliserez dans 80% des cas et ainsi vous permettre d’écrire vos premières feuilles de style rapidement.

Les fondamentaux

Mettre en style les éléments

Retrouvez la suite de ce chapitre dans mon Guide Complet.

Le JavaScript, à ne pas confondre avec Java, est l’un des langages de programmation le plus populaire dans le monde. Vous pouvez l’utiliser pour à peu près tout dans le développement. Avec JavaScript, vous pouvez désormais créer des sites Internet, des applications web, mais aussi des applications mobiles. Sa force est qu’il est utilisable à la fois côté client, c’est-à-dire que votre code est interprété et exécuté dans le navigateur de chaque visiteur ou bien côté serveur, via NodeJS, sur un de vos serveurs, sans que le visiteur ait accès au code source.

JavaScript est tellement populaire qu’il est certain que vous le rencontrez lors de votre carrière et des bases solides dans ce langage sont donc nécessaires. Dans une certaine mesure, certains formateurs n’apprennent que JavaScript comme langage de programmation à leurs étudiants. J’ai toutefois fait le choix de vous proposer également l’apprentissage d’un langage utilisé purement côté serveur dans le but de vous permettre de comparer et d’ouvrir vos horizons.

Il est important de faire la différenciation entre le langage de programmation en lui-même, celui que l’on appelle « Vanilla JavasScript » et les API supplémentaires avec lesquelles il peut interagir. Je pense par exemple à l’API DOM qui permet de manipuler le HTML et le CSS de votre page ou encore à l’API Audio/Vidéo ou aux API tierces qui ne sont pas nativement supportées par les navigateurs, mais qui sont chargées en complément. Je vous invite à parcourir cette ressource qui vous expliquera toutes ces nuances en détail.

Vanilla ou non ?

JavaScript peut être combiné à framework comme ReactJS ou VueJS afin de faciliter sa programmation et de développer des applications plus robustes. Avant de l’utiliser via un framework, il est essentiel de maitriser le langage de programmation en lui-même. Je vous invite dès lors à débuter par l’apprentissage du JavaScript en lui-même. Nous aborderons plus tard son utilisation au sein d’un framework tiers.

ECMAScript

Durant votre apprentissage, vous risquez de rencontrer différents termes relatifs à la version de JavaScript. Je vous propose dès lors une courte introduction et vous évitez de tout confondre. Puisque c’est le navigateur qui exécute le code JavaScript, c’est à lui que revient la tâche de supporter les évolutions éventuelles de ce langage de programmation. Il existe une norme responsable de cela, nommée « ECMAScript » ou en abrégé « ES ». Pour faire simple, retenez que plusieurs versions sont sorties avec le temps. La dernière en date est « ES6 » ou « ECMAScript 2015 ». ES6/ECMAScript 2015 est donc la norme que tous les navigateurs récents supportent. Vous pouvez apprendre cette version et l’utiliser sans crainte de compatibilité.

TypeScript

Enfin, je souhaite mentionner TypeScript, abrégé en « TS » que vous risquez également de rencontrer. TypeScript n’est pas du JavaScript à proprement parler. Il s’agit d’un langage à part entière, ressemblant extrêmement fort à JavaScript, dans le but de lui rajouter des fonctionnalités et faciliter sa programmation. Contrairement au JS, il a besoin d’être converti en JavaScript natif. Il n’est donc pas directement supporté par les navigateurs, comme c’est le cas pour ES6.

Que faut-il connaitre en Vanilla JS ?

C’est toujours dans la logique de ma méthode des « 3S » que je vous propose de commencer par améliorer votre connaissance de la syntaxe du JavaScript.

Ne vous préoccupez pas un instant de la beauté de la page que vous allez créer. Concentrez-vous uniquement sur votre code JavaScript. D’ailleurs, si vous souhaitez écrire votre CSS directement dans le markup de votre page HTML, entre deux balises « style » pour aller plus vite, n’hésitez pas.

J’aimerais que vous réalisiez une liste de tâche fonctionnelle qui est capable de :

1. Contenir et ajouter un nombre indéfini de tâches à réaliser. Une tâche contient un titre et une description éventuelle.
2. Marquer une tâche comme terminée, dans quel cas la tâche est barrée visuellement.
3. Supprimer une tâche de la liste.
4. Afficher le nombre de tâches présentes dans la liste.

Pour réaliser cet exercice, vous devrez donc faire appel à l’API du DOM et vous ne pouvez pas utiliser des libraires tierces comme JQuery ou Lodash.

En dépit de ce que l’on veut vous faire croire, votre ordinateur, votre système d’exploitation, votre écran, votre clavier, votre chaise de bureau, votre éditeur de code et la marque du café que vous buvez n’ont en réalité aucune importance sur votre code ni sur votre productivité.

Seule la façon dont vous utilisez et maitrisez tous ces outils importe.

Cela dit, j’ai pu tester et me choisir une liste de logiciels et d’outils qui me sont devenus indispensables. Bien que je vous les recommande pour débuter, gardez à l’esprit qu’il s’agit de ce qui fonctionne pour moi et ma personnalité.

Je code sous macOS, comme la plupart des développeurs. Cela n’a pas toujours été le cas et mes premiers projets ont été réalisés sous Windows. Les choses évoluent dans le bon sens pour Windows et l’arrivée du terminal Linux Bash rend la vie des développeurs sous Windows plus facile. Des solutions de container comme Docker facilitent également grandement le développement en local, quel que soit le système d’exploitation utilisé.

D’une certaine manière, la question du système d’exploitation utilisé n’aura plus beaucoup d’importance avec l’arrivée sur le marché d’environnements de développement intégralement dans le cloud, comme Github CodeSpace. Ave ce genre de solution, vous pouvez déjà coder avec une suite complète directement depuis Visual Studio Code. Vous n’avez dès lors plus besoin d’installer de logiciel spécialisé sur votre propre machine.

Comme je code principalement en PHP, mon éditeur de choix est PHPStorm.
Disponible sous Windows, Mac et Linux, il s’agit d’un IDE payant, totalement intégré et puissant. Si vous faites du développement JavaScript je vous recommande son équivalent pour JavaScript : WebStorm.

L’énorme avantage des IDE est le support natif des plus grands frameworks, avec le fait que l’éditeur de code comprend extrêmement bien votre code et vous permet de l’écrire et de le modifier avec aisance. Chaque classe et méthode est directement comprise par l’IDE et il vous propose une complétion et une navigation inégalable à tous les autres éditeurs de code. Comme alternative gratuite, je vous recommande l’IDE le plus polyvalent actuellement, qui est disponible gratuitement sous Windows, Mac et Linux. Il s’agit de Visual Studio Code, souvent abrégé en VS Code.

Découvrez la suite de mon setup de développement dans mon guide complet (...)