Devenir développeur Full Stack, est une des principales préoccupations des développeurs, et peut être un objectif pour ceux qui commencent à coder leur premières lignes.
Chaque année, Stack Overflow effectue un sondage à grande échelle, sur leur base de développeurs. En 2019, sur presque 100 000 développeurs, 51,9 % d’entre eux se considèrent développeurs Full Stack.
Assez évocateur non ?
Et ce n’est pas un hasard ! Du côté des recruteurs, une rapide recherche d’offres d’emplois de montre bien qu’une grande partie des offres cible les développeurs Full Stack.
En 2018, un ami de longue date a décidé de changer de vie et de se lancer dans une reconversion professionnelle. Partant de 0, il m’a demandé de l’accompagner vers son objectif : devenir développeur. Aujourd’hui, avec du courage et beaucoup de volonté, cet ami est maintenant développeur Full Stack pour une agence de développement web et vit pleinement de son nouveau métier.
Mais qu’est-ce qu’un développeur Full Stack exactement ?
À la différence d’un développeur spécialisé dans un domaine (un langage, une technologie), un développeur Full Stack doit être capable de gérer toute la stack d’une application web, c’est à dire de travailler sur le back-end (la partie métier) ainsi que sur le front-end (la partie visuelle). Mais un développeur Full Stack doit aussi être capable d’utiliser les outils indispensables qui gravitent autour d’une application web, comme la base de données, les Frameworks, etc.
Cet article est destiné aux développeurs débutants, ainsi qu’à toutes personnes souhaitant changer de métier ou tout simplement intéressées par de nouvelles compétences. Mais aussi aux développeurs plus expérimentés, qui y trouveront des rappels et pourquoi pas une façon de structurer leurs connaissances.
Je vais vous guider vers les principales compétences et connaissances requises au développeur Full Stack.
Pour chaque partie, je vous expliquerai les principaux concepts, et ce sera à vous, d’utiliser les ressources indispensables (que je vous fournirai) pour débuter votre apprentissage.
Pour vous aider à maîtriser votre apprentissage et à ne pas vous disperser, chaque partie sera accompagnée d’une estimation de temps moyen d’apprentissage à y consacrer. Le but étant de ne pas s’attarder sur une technologie en particulier qui ne serait pas la plus « utile » dans votre formation. Si vous vous sentez réellement à l’aise avec un concept, vous pouvez y passer un peu moins de temps. Et à l’inverse, si un concept vous échappe, prenez plus de temps pour le comprendre.
Une chose importante, aucun développeur ne connaît tout sur tout. Chaque technologie peut être approfondie quasiment à l’infini, et ce n’est pas là l’objectif du bon développeur Full Stack. Vous devez prendre du recule, ne pas vous focaliser sur une technologie, qui sera certainement dépassée d’ici quelques années. Les principes et les concepts eux, restent. Je vous conseille, tout au long de votre carrière, de vous documenter et de faire de la veille. Consacrez du temps, chaque jour ou chaque semaine, à vos lectures techniques.
Avec de volonté, de la determination et de l’organisation, tout comme mon ami, vous deviendrez développeur Full Stack ! 🙂
1. Le Front-end
C’est la partie embarquée par votre navigateur. Celle qui crée l’interaction avec vos utilisateurs. Je vous encourage à démarrer par cette partie car elle est ludique (on voit tout de suite un résultat) et assez simple. Cela permet de commencer tranquillement et de comprendre des principes qui vous permettront d’attaquer la suite plus sereinement.
Les langages
HTML & CSS
Presque tous les développeurs web commencent par là, et ce n’est pas pour rien. L’HTML, est la base de vos pages web. Par un système de balises, l’HTML permet de construire une page web avec du texte, des images et des liens.
Ressources d’apprentissages :
- Le tuto d’Openclassroom, ou celui de Mozilla
- En complément, les principales balises HTML
Temps moyen d’apprentissage : 3 jours
LE JAVASCRIPT
Je vous présente LE langage que vous devez apprendre pour devenir développeur Full Stack.
Le Javascript est le langage le plus populaire des développeurs web, et pour cause, c’est l’unique langage comprit des navigateurs web. Un incontournable dans la création d’applications web !
Le Javascript permet de dynamiser votre application et vos pages web. Il est aussi la base de tous les Framework Front (nous en parlons juste après) et l’apprendre vous permettra de mieux les comprendre.
Cet exemple n’est pas utilisé dans la vraie vie vous vous en doutez, mais il permet d’illustrer le caractère dynamique d’une page.
Le Javascript doit vous servir de base dans le développement. Je vous conseille de vous y attarder afin de comprendre les concepts fondamentaux de la programmation : variables, fonctions, objets, etc.
Ressources d’apprentissages :
- Je vous conseille ce tuto complet d’Openclassroom qui vous initiera à la programmation, tout en vous permettant d’apprendre le langage. N’hésitez-pas à passer du temps dessus.
- En complément, le fonctionnement des promesses et callbacks Javascript.
- Comprendre le principe de session navigateur et du web storage
- Comprendre le fonctionnement du DOM
Temps moyen d’apprentissage : 10-15 jours (N’y passez pas trop de temps non plus, vous l’apprendrez naturellement tout au long de votre évolution et dans l’utilisation des frameworks).
Les Frameworks
Comme vous le savez, rien ne sert de réinventer la roue. Les frameworks permettent de faciliter le travail du développeur, en fournissant architecture pré-construite et un certain nombre de composants. Ils permettent d’une part de structurer vos projets et d’autre part de vous faire gagner beaucoup de temps.
- React.js est un des principaux framework front, beaucoup de ressources sont disponibles sur Internet. Le site dispose de tutos et vous pouvez aussi utiliser ce tuto d’Openclassroom.
- Les promesses, indispensables dans l’utilisation de React.js et du Javascript en général.
- Pour utiliser des composants HTML / CSS, je vous conseille bootstrap qui est un grand classique. Une bibliothèque de composants utilisée sur de nombreuses applications web. N’y passez pas plus d’une journée, vous y reviendrez dès que vous aurez besoin d’ajouter un composant dans votre application.
- Comprendre le principe des tests unitaires. Vous les passerez en revue avec jestjs dans le tuto d’Openclassroom. Ne passez pas trop de temps dessus. Même si certains disent le contraire, ce n’est pas une priorité !
Temps moyen d’apprentissage : 10 jours (focus sur React.js)
2. Le Back-end
Vous connaissez maintenant les bases de la programmation. Bravo !
Maintenant, il est temps de faire vivre votre application avec :
– L’authentification
– La gestion des données utilisateurs
– Vos processus métier
Et c’est précisément là qu’intervient le Back-end. Le Back-end exposera vos endpoints API, qui seront utilisés par les actions utilisateurs de votre Front-end. Ces API déclencheront alors le processus liée à la demande front (Authentification, opérations en base de données…), et renverront le résultat et les données à afficher au Front-end.
Les langages
À la différence du Front-end, de nombreux langages existent pour développer un Back-end pour votre application web. PHP, Node.js, Java, Scala, Ruby, Python. Tous ces langages ont leur spécificités : compilé, typé, syntaxe…
Nous ne nous attarderont pas ici sur les langages. Le plus important est d’en apprendre un correctement et de le comprendre.
Si vous avez suivi votre formation telle que je vous la préconise, vous devriez déjà en connaître un : le Javascript. Il s’avère que Node.js utilise le moteur du navigateur Chrome (codé en javascript) et permet de coder son Back-end en Javascript. Ce qui en fait un excellent choix !
Et oui ! vous n’aurez pas à apprendre un second langage pour devenir développeur Full Stack.
Ressources d’apprentissage :
- Pour avoir une compréhension des communications HTTP, et des API : c’est par ici. Avec un rapide détour en JSON, le format de données le plus fréquemment utilisé par les API REST.
- Le tuto d’Openclassroom qui parcours les principaux concepts de Node.js (Serveur, API, web sockets ..)
- De la même manière que pour le front, vous aurez besoin d’un framework pour pouvoir créer votre serveur web, exposer vos api, gérer votre base de données.. En Node, le plus utilisé est express. Et c’est celui utilisé dans le tuto de Node.js
- Pour les tests unitaires (optionnels) : https://mochajs.org/
- Pour gérer vos authentifications web, vous pourrez aussi jeter un oeil à Passsport.js
Temps moyen d’apprentissage : 10 jours (focus sur Node.js)
3. La base de données
La base de données est l’outil qui permet de rendre votre application persistante. Elle vous permet, comme vous vous en doutez, de sauvegarder les données (utilisateurs, applicatives) et d’y accéder quand vous le souhaitez.
Il y a deux grands types de base de données. Les bases de données relationnelles classiques type SQL, et non relationnelles type NoSQL. Les bases classiques sont dites structurées, sous forme de tables, de colonnes et de lignes. À l’inverse, les tables NoSQL sont dites non structurées, sous forme de documents (comme le JSON).
Votre base de données doit être choisie en fonction du besoin. Le NoSQL a été créé pour passer à l’échelle plus facilement, c’est à dire de pouvoir accepter un plus grand nombre de données sans perdre de performance. Mais une base NoSQL est aussi plus complexe à gérer.
Dans un premier temps, je vous conseille de vous diriger vers une base de données « classique » de type SQL comme PostgreSQL.
Ressources d’apprentissage :
- Pour simplifier la connexion et utiliser votre BDD avec son back-end, il est courant d’utiliser un ORM. Pour utiliser Node.js + MongoDB, il existe Sequelize.
- Un tuto complet de scotch.io avec Node.js + Sequelize
Temps moyen d’apprentissage : 5 jours
4. Architecture d’une application web
Vous commencez à être à l’aise avec React.js, Node.js, la base de données et les échanges REST. Vous allez maintenant pouvoir vous lancer dans une application plus complexe, et complète. Pour arriver à votre objectif, il est nécessaire maintenant de structurer votre application : structurer votre code, séparer vos fichiers, structurer vos données, gérer l’hébergement, effectuer vos tâches de calcul au bon endroit (côté client vs côté serveur) et bien plus encore (intégration continue, testing…).
Pour vous aider à comprendre l’application web dans sa globalité, je vous invite à prendre un peu de recul. Voici un petit schéma qui synthétise une application web classique (avec les technos que nous avons utilisées dans cet article).
Ressources d’apprentissages :
- Le modèle MVC, qui vous permet de structurer votre code, le rendre modulaire, réutilisable et évolutif.
- Heroku, qui est un hébergement simple, gratuit et s’intègre très bien avec Github (que nous allons voir juste après).
Temps moyen d’apprentissage : 1 jour pour comprendre les principes.
À vous ensuite de vous forcer à toujours rendre votre code plus propre, plus modulaire et documenté.
5. Les outils indispensables à tout développeur
- Outil de versionning et de gestion de vos sources : Github (Git est l’outil utilisé par Github)
- Un éditeur simple et efficace conçu par Microsoft : Vscode
- Pour tester vos API : postman
- Un serveur simple : Heroku
Je le mentionne, même s’il ferait part d’un article à lui tout seul. Je vous recommande de l’utiliser une fois que vous êtes à l’aise : Docker
Cela fait beaucoup de choses, mais faisons le compte, nous arrivons à 40 jours. Ce qui pourrait prendre de 2 mois à 1 an, en fonction du temps que vous avez à y consacrer et de vos facultés d’apprentissage. Envisageable non ? 🙂
Pour résumer et synthétiser, voici mes derniers conseils :
- Organisez-vous, il est préférable de passer 1 à 2h par jour, tous les jours, plutôt que de passer 10h de suite une fois par semaine. Vous garderez votre productivité, laisserez le temps à votre inconscient d’assimiler certains concepts et vous resterez motivé !
- Ne lésinez pas sur les concepts, ils sont peut être plus important que la technique pure. Si un concept vous échappe, passez-y plus de temps.
- Pratiquez, pratiquez, pratiquez ! Ne faites pas simplement les tutos, ayez vos propres projets ! (Un mini jeu, un chat, une to do list…)
- Fixez-vous des objectifs atteignables. Plutôt que de partir tout de suite sur un projet d’envergure, commencez par un projet simple puis repartez de 0 pour en créer un second un peu plus complexe, etc. Vous aurez alors appris du projet précédant et vos projets seront toujours mieux pensés, mieux développés et cela encrera pour de bon les concepts.
- Découpez vos projets avant de coder vos premières lignes puis avancez par étapes. Par exemple : 1 – Créer la base de données, 2 – Créer le serveur, 3 – Créer ma première route, 4 – Afficher un hello word, 5 – Créer le formulaire d’inscription, 6 – Gérer l’authentification, etc.
- Prenez toujours du recul sur votre travail. Ne vous focalisez pas trop sur les détails, soyez efficace et gardez une vision globale de vos objectifs.
- Documentez-vous, faites de la veille. Consacrez-y un temps chaque jour ou chaque semaine. Cela gardera votre esprit ouvert et vous aidera dans votre apprentissage.
