Article original : What is a Full Stack Developer? Full Stack Engineer Guide

Les rôles de développeur Full Stack figurent parmi les postes les plus recherchés sur le marché de l'emploi actuel.

Mais qu'est-ce que le développement web Full Stack exactement, et comment devient-on un développeur Full Stack ?

Dans cet article, vous apprendrez d'abord ce que signifie le terme Full Stack.

Ensuite, vous découvrirez des suggestions de technologies à apprendre, accompagnées de ressources d'apprentissage pour commencer votre parcours dans le développement web Full Stack.

Qu'est-ce que le développement Full Stack ?

Les applications web que vous utilisez quotidiennement se composent de :

  • Le front-end, également appelé la partie côté client de l'application,
    • et le back-end, également appelé la partie côté serveur de l'application.

Qu'est-ce que le développement front-end ?

Le front-end est l'interface utilisateur de l'application.

C'est la présentation du contenu, les parties que l'utilisateur voit et avec lesquelles il interagit, ainsi que l'aspect et la convivialité de la page web. C'est la manière dont les informations s'affichent sur les navigateurs web mais aussi sur les appareils mobiles.

Il comprend différents composants tels que les barres de navigation, les menus déroulants, les boutons et les liens.

Le front-end est constitué de toutes les parties visibles responsables de l'expérience utilisateur.

Qu'est-ce que le développement back-end ?

Le back-end se compose d'un serveur qui reçoit et traite les requêtes et d'une base de données utilisée pour stocker les données.

Le back-end correspond à tous les processus qui se déroulent en coulisses dans une application web.

C'est la logique métier, la gestion et la manipulation des données, ainsi que les algorithmes.

Essentiellement, ce sont toutes les parties cachées dont un utilisateur n'a pas directement conscience lorsqu'il consulte et interagit avec une page web. Ces parties sont des processus s'exécutant en arrière-plan.

Le back-end est considéré comme le côté logique ou le « cerveau » d'une application web.

Le front-end et le back-end forment ensemble une application web Full Stack.

Ainsi, le développement web Full Stack fait référence à la connaissance de toutes les parties responsables du côté front-end et du côté back-end d'une application web.

Guide de l'ingénieur Full Stack

Lorsque vous êtes un débutant qui commence tout juste son parcours d'apprentissage, vous pouvez passer plus de temps à chercher quoi apprendre qu'à apprendre réellement. Et il y a beaucoup à apprendre en ce qui concerne le développement web Full Stack — ce qui peut être écrasant et intimidant.

Dans les sections à venir, nous discuterons de nombreuses technologies différentes que vous devrez apprendre, et il en existe beaucoup d'autres qui ne sont pas listées.

Il est impossible de tout apprendre d'un coup, tout comme il est impossible de devenir un expert en tout.

Ce guide est une suggestion et un point de départ. Il fournit les bases sur lesquelles vous pourrez vous développer plus tard.

N'oubliez pas qu'il faudra du temps pour devenir un développeur Full Stack. Trouver un emploi du temps et une routine d'apprentissage qui vous conviennent peut nécessiter quelques tâtonnements, car vous pouvez avoir des engagements tels que s'occuper de votre famille, travailler à plein temps ou toute autre obligation de la vie.

Le succès n'est pas linéaire.

Image Croquis de l'auteur et comédien Demetri Martin

La clé du succès est de rester constant et de vaincre la procrastination.

Planifiez et réservez un peu de temps chaque jour — que ce soit pour seulement une demi-heure ou une heure. Une heure par jour vaut mieux que de ne pas coder du tout.

N'oubliez pas de vous reposer et de vous éloigner de l'écran pour ne pas vous épuiser en cours de route.

Voyons maintenant quelques-unes des technologies que vous devriez apprendre pour devenir un développeur web Full Stack en 2022.

Compréhension de base du fonctionnement d'Internet et du Web

Vous passerez beaucoup de temps sur Internet, à concevoir et à développer pour le Web.

Au lieu d'apprendre simplement comment créer des applications web, des produits et des services, il est judicieux d'avoir une connaissance approfondie et une bonne compréhension de la manière dont ces outils que vous utilisez pour atteindre vos propres objectifs fonctionnent sous le capot et interagissent les uns avec les autres.

Par exemple, il est utile de consacrer du temps à apprendre :

  • Qu'est-ce que le HTTP ?
  • Quels sont les différentes méthodes HTTP, et que signifie et fait chacune d'elles ?
  • Quelle est la différence entre HTTP et HTTPS ?
  • Qu'est-ce qu'une adresse IP, un nom de domaine et le DNS ?
  • Une compréhension des clients et des serveurs, et comment ils interagissent en utilisant ce qu'on appelle le cycle requête-réponse.
  • Comment Internet fonctionne dans son ensemble.

Voici quelques lectures suggérées pour commencer :

Fondamentaux du développement Web front-end

Commencez à apprendre à coder en pratiquant le HTML et le CSS.

Le HTML et le CSS sont deux langages qui servent des objectifs différents mais s'associent pour créer des pages web statiques. Pour cette raison, il arrive souvent qu'on les apprenne en parallèle.

D'abord, apprenez les bases du HTML, spécifiquement le HTML5, qui est la version la plus récente et qui supporte beaucoup plus de fonctionnalités.

Qu'est-ce que le HTML ?

Le HTML (qui signifie HyperText Markup Language) est utilisé pour définir la structure et le contenu d'une page web. Ainsi, les paragraphes, les titres, les listes, les images, les formulaires et les liens que vous voyez sur une page, ainsi que leurs hiérarchies, sont tous du code HTML.

Les concepts clés du HTML à apprendre sont :

  • Il existe de nombreuses balises HTML (en fait, plus d'une centaine), mais vous n'avez besoin d'apprendre que les plus couramment utilisées.
  • Apprenez à écrire du HTML sémantique. Le HTML sémantique décrit la balise et le contenu qu'elle contiendra au lieu d'utiliser une balise sans signification. Par exemple, si vous voulez créer une section sur une page web pour contenir un contenu spécifique, vous pourriez utiliser la balise <section> qui spécifie et décrit la balise au lieu de la balise <div> qui n'a aucune signification particulière. En résumé, évitez d'utiliser trop de balises <div> et apprenez les alternatives que vous pouvez utiliser à la place.
  • Le point précédent s'accorde bien avec l'apprentissage de l'écriture du HTML dans une optique d'accessibilité. Concevoir et développer en pensant à l'accessibilité signifie créer des sites web pour tout le monde. Les personnes ayant des déficiences visuelles comptent sur des technologies d'assistance telles que les lecteurs d'écran pour lire le contenu à haute voix. Les personnes souffrant d'autres handicaps peuvent dépendre d'une navigation au clavier uniquement. Ainsi, apprendre à écrire du HTML accessible vous amènera à créer des pages web plus conviviales.
  • Apprenez à créer des formulaires HTML. Les formulaires sont présents sur presque tous les sites web. C'est ainsi que vous vous connectez ou que vous vous inscrivez sur un site. C'est aussi la manière dont les sites web recueillent des informations et des données auprès des utilisateurs.

Qu'est-ce que le CSS ?

Ensuite, il est temps d'apprendre le CSS.

Le CSS (abréviation de Cascading Style Sheets) stylise les éléments HTML. Il est responsable de la présentation du contenu de manière visuellement attrayante.

Le code CSS permet de définir toutes les couleurs et polices différentes. La taille des éléments et la manière dont ces éléments s'affichent sur la page. La mise en page et la façon dont les éléments sont disposés les uns à côté des autres.

Commencez par apprendre les bases du CSS pour appliquer des styles au contenu HTML en texte brut en abordant des sujets tels que :

  • Les sélecteurs CSS. Apprenez les différentes manières de sélectionner des éléments HTML, comment chacune fonctionne et comment choisir laquelle utiliser. Par exemple, vous pouvez utiliser des sélecteurs simples qui sélectionnent un élément HTML par son nom de balise, son nom de classe ou son identifiant (id). De plus, une autre façon de sélectionner des éléments HTML consiste à utiliser des sélecteurs de pseudo-éléments et des sélecteurs de pseudo-classes, pour n'en citer que quelques-uns.
  • Apprenez la spécificité CSS. Lorsqu'il y a deux ou plusieurs sélecteurs avec des règles CSS correspondantes identiques, comment le navigateur décide-t-il quels styles sont appliqués à l'élément HTML ? Chaque sélecteur a une valeur de spécificité différente, donc apprendre la spécificité vous aidera à éviter toute confusion quant aux raisons pour lesquelles certains styles ne sont pas appliqués.
  • Apprenez le Modèle de Boîte (Box Model). Les éléments HTML sont considérés comme des boîtes, chaque boîte étant constituée du contenu, du rembourrage (padding), de la bordure et de la marge.
  • Apprenez les différentes manières de positionner des éléments sur une page. Apprenez les différences entre les propriétés de position relative, absolue, fixe et collante (sticky).
  • Apprenez-en davantage sur l'affichage (display) et sur la différence entre les éléments de type block et ceux de type inline et inline-block.
  • Apprenez les techniques de mise en page telles que Flexbox pour créer des mises en page unidimensionnelles ou CSS Grid pour créer des mises en page bidimensionnelles.
  • Apprenez les Media Queries et le Responsive Web Design. Les sites web sont aujourd'hui consultés sur de nombreux appareils, tels que les ordinateurs portables, les mobiles et les tablettes, et chaque appareil a une taille et une résolution différentes. Il est primordial que le site soit esthétique et utilisable quel que soit l'appareil.

Comment apprendre l'HTML et le CSS

Le meilleur endroit pour commencer à apprendre le HTML et le CSS est la Certification Responsive Web Design de freeCodeCamp.

C'est un programme interactif gratuit, structuré et bien pensé. Vous apprenez de manière pratique en construisant des projets.

Vous apprendrez tous les concepts énumérés ci-dessus (et plus encore) en réalisant 15 projets d'entraînement et cinq projets de certification.

Une fois que vous avez terminé les projets de certification, vous pouvez réclamer la certification et l'ajouter à votre profil LinkedIn. C'est un moyen de montrer votre réussite à votre réseau et à vos employeurs potentiels.

Maîtriser la ligne de commande

Connaître au moins les bases de la ligne de commande vous rendra plus productif en vous faisant gagner un temps considérable lors de l'exécution de tâches répétitives et chronophages.

Vous pouvez accomplir les mêmes choses (et plus encore !) qu'en utilisant une interface graphique (GUI). Mais avec la ligne de commande, vous utiliserez uniquement la navigation au clavier et saisirez des commandes textuelles au lieu de cliquer et de faire glisser des icônes.

Vous pouvez créer des fichiers et des dossiers, afficher le contenu de fichiers et de dossiers, copier ou déplacer le contenu d'un fichier vers un autre, et supprimer complètement des fichiers et des dossiers, pour n'en citer que quelques exemples.

Vous tapez et entrez les commandes dans une fenêtre ou une CLI (abréviation de Command Line Interface).

Selon votre système d'exploitation, il s'agira d'une application différente. Sur Mac, elle s'appelle Terminal.app. Sur Windows, elle s'appelle l'Invite de commandes (Command Prompt).

L'application exécute un shell, tel que Bash ou Zsh, qui sert d'intermédiaire entre vous et le système d'exploitation de votre ordinateur. Vous tapez des commandes et donnez essentiellement des ordres à votre ordinateur. Le shell s'exécutant dans la CLI lit les commandes et donne des instructions au système d'exploitation. Le système d'exploitation exécute les instructions.

Quel que soit le système d'exploitation que vous utilisez, qu'il s'agisse de MacOS ou de Microsoft Windows, en tant que développeur Full Stack, il vous sera utile d'apprendre Linux. Linux alimente la majorité des serveurs sur Internet.

Une façon de commencer avec Linux est de l'installer sur votre système d'exploitation.

Vous pouvez le faire en configurant une machine virtuelle. Une machine virtuelle agit comme un ordinateur séparé à l'intérieur de votre ordinateur.

Une fois que vous avez configuré une machine virtuelle, vous pouvez installer l'une des distributions Linux, comme Ubuntu, qui est une version de Linux.

Voici quelques ressources utiles pour commencer :

Apprendre à utiliser un éditeur de code

Pour commencer à développer vos projets localement, vous aurez besoin d'un endroit désigné pour écrire du code.

Il n'est pas conseillé de coder en utilisant un traitement de texte comme Google Docs ou Microsoft Word, mais plutôt de configurer un éditeur de code pour écrire votre code source.

Il en existe de nombreux, parmi les plus populaires figurent Atom, Sublime Text et Visual Studio Code. De nombreux développeurs utilisent également un éditeur de texte en ligne de commande appelé VIM. Il n'est pas recommandé aux débutants car la courbe d'apprentissage est abrupte.

Visual Studio Code est l'éditeur de choix pour de nombreux développeurs, que vous verrez également abrégé en VS Code.

Il est gratuit, open-source et dispose de nombreuses fonctionnalités.

VS Code possède des outils et des fonctionnalités puissants qui ressemblent à un IDE (qui signifie Integrated Development Environment).

En utilisant Visual Studio Code, vous pouvez écrire et modifier du code source, gagner du temps avec l'autocomplétion du code et utiliser le débogueur et le terminal intégrés. Vous pouvez compiler et exécuter du code source, le tout sous le même toit.

De plus, il est facile de personnaliser votre espace de travail avec les différentes extensions disponibles sur le Visual Studio Code Marketplace afin d'améliorer encore votre productivité.

Vous trouverez ci-dessous des liens pour télécharger Visual Studio Code pour votre système d'exploitation et pour apprendre à l'utiliser :

Apprendre un système de contrôle de version

Un système de contrôle de version est un moyen de sauvegarder vos projets et de collaborer avec d'autres membres de l'équipe. C'est un outil utilisé dans chaque emploi de développement logiciel.

Le système de contrôle de version le plus populaire est Git, qui est gratuit et open-source.

Vous pouvez consulter l'historique complet d'un projet et suivre tous les changements. Si nécessaire, vous pouvez également revenir à une version précédente.

Git n'est pas seulement pratique pour vos projets personnels, il est indispensable lorsque vous faites partie d'une équipe.

Par exemple :

  • Vous pouvez télécharger (ou cloner) une copie de travail de l'ensemble du code source du projet sur votre machine locale. La base de code (codebase) fait référence à tous les dossiers et fichiers qui composent le projet.
  • Vous pouvez rester à jour en récupérant (pull) tous les changements récents qui ont eu lieu dans la base de code.
  • Vous pouvez effectuer des modifications en toute sécurité, sans affecter la base de code d'origine, en créant ce que l'on appelle une branche (branch). Les branches vous permettent de travailler sur des bogues ou des fonctionnalités spécifiques.
  • Vous pouvez examiner les modifications que vous avez apportées et les fusionner (merge) avec le contenu de la base de code d'origine.

Maintenant, vous avez peut-être entendu parler du terme GitHub et vous êtes peut-être confus quant aux différences entre Git et GitHub.

Git est un outil que vous installez localement pour gérer vos projets, tandis que GitHub est un service d'hébergement en ligne. GitHub facilite l'utilisation de Git et constitue un endroit où vous et votre équipe pouvez téléverser du code.

Voici quelques ressources utiles pour apprendre Git et GitHub :

Maintenant que vous êtes familier avec la ligne de commande, Git et GitHub, vous pouvez déployer une page web HTML et CSS statique et la publier sur Internet. Vous pouvez le faire en utilisant GitHub Pages ou Netlify.

Apprendre un langage de programmation

Les langages de programmation agissent comme le traducteur entre les humains et les machines.

Les langages de programmation sont similaires aux langages humains. Ils possèdent des éléments syntaxiques comme des noms, des verbes et des phrases. Et vous regroupez ces éléments pour former quelque chose qui ressemble à une phrase pour créer du sens.

Certains de ces langages ressemblent beaucoup à l'anglais. Mais ils offrent une manière plus courte, plus précise et moins verbeuse de créer des instructions que l'ordinateur peut comprendre.

Une langue parlée/naturelle comme le français ou l'anglais, en revanche, laisse beaucoup de place à l'ambiguïté et à des interprétations différentes selon les personnes. Avec les langages de programmation, vous n'avez pas cette ambiguïté.

Comment rendre les pages Web dynamiques avec JavaScript

Vous avez peut-être remarqué que j'ai utilisé le mot statique pour décrire le type de pages web créées en utilisant uniquement le HTML et le CSS.

Pour ajouter des comportements dynamiques et de l'interactivité aux pages web, vous devez utiliser JavaScript aux côtés du HTML et du CSS.

JavaScript est un langage de script conçu pour s'exécuter dans le navigateur. Il ajoute des fonctionnalités interactives à des pages web par ailleurs statiques.

Quelques fonctionnalités interactives que JavaScript ajoute :

  • Une carte avec la position actuelle de l'utilisateur
  • Un message affiché à l'utilisateur dès qu'il arrive sur la page
  • Un changement sur la page basé sur une saisie de l'utilisateur
  • Une animation lorsqu'un utilisateur clique sur un bouton
  • Un effet de défilement fluide lorsqu'il y a un bouton pour remonter en haut de la page.

Pour commencer à apprendre JavaScript, commencez par étudier la syntaxe de base, ce que l'on appelle le Vanilla JavaScript.

Il y a beaucoup de concepts à apprendre, et ceci n'est pas une liste exhaustive, mais voici quelques sujets auxquels prêter attention :

  • Types de données
  • Variables et portée (Scope)
  • Instructions conditionnelles
  • Boucles (Loops)
  • Itérateurs
  • Fonctions
  • Objets
  • Manipulation du DOM
  • JS Asynchrone
  • Gestion des événements
  • Syntaxe ES6
  • Tableaux (Arrays)
  • Méthodes de tableaux
  • Callbacks
  • Promises

Pour commencer à apprendre JavaScript, vous pouvez suivre la certification JavaScript Algorithms and Data Structures de freeCodeCamp.

Vous commencerez par les fondamentaux et progresserez vers des sujets plus avancés tels que la programmation orientée objet et les structures de données.

À la fin, vous construirez cinq projets de certification, dont un validateur de numéro de téléphone et un convertisseur de chiffres romains.

Une autre façon amusante d'affiner vos compétences en JavaScript est de créer des jeux.

Consultez les vidéos suivantes sur la chaîne YouTube de freeCodeCamp pour commencer :

Bibliothèques et Frameworks JavaScript

Avant de passer à d'autres technologies, vous devez être à l'aise avec les concepts de base de JavaScript. Prenez le temps de pratiquer et de construire quelques projets en utilisant ce langage.

Ensuite, vous pourrez apprendre l'une des bibliothèques ou l'un des Frameworks JavaScript.

Les bibliothèques et Frameworks JavaScript fournissent du code pré-écrit qui implémente des fonctionnalités spécifiques. Ils vous aident à développer des applications web beaucoup plus facilement et rapidement, et avec plus de cohérence entre les différentes parties en créant ce que l'on appelle des composants d'interface utilisateur (UI components).

La bibliothèque JavaScript la plus populaire et la plus couramment utilisée à apprendre est ReactJS.

Pour apprendre React, voici quelques ressources utiles pour vous aider à démarrer :

Langages de script côté serveur

En tant que développeur web Full Stack, vous devrez connaître à la fois les technologies front-end et les outils back-end. Vous devrez également être capable de travailler avec des langages de programmation de script côté serveur.

Il y en a beaucoup parmi lesquels choisir, tels que PHP, Ruby et Java, pour n'en citer que quelques-uns.

Et juste une note à propos de JavaScript : il est largement utilisé dans le développement front-end, mais ces dernières années, de nombreux développeurs ont commencé à l'utiliser également pour le développement back-end.

Tout cela est possible grâce à NodeJS (un environnement d'exécution JavaScript) qui offre des fonctionnalités back-end.

En associant NodeJS avec le Framework web côté serveur ExpressJS, vous êtes désormais capable de créer des applications web Full Stack.

Pour apprendre Node JS et Express JS, consultez les ressources suivantes :

Connaissance du SQL et des bases de données relationnelles

En tant que développeur Full Stack, vous devrez savoir comment interagir avec les bases de données.

Les bases de données se divisent en deux catégories : relationnelles et non relationnelles.

Les bases de données relationnelles (également appelées bases de données SQL) stockent les données dans un format tabulaire structuré et organisé.

Il existe des relations clairement définies entre les points de données, ce qui facilite la recherche d'informations.

Certaines bases de données relationnelles incluent :

  • MySQL
  • PostgreSQL
  • Oracle
  • Microsoft SQL Server
  • SQLite

La manière de communiquer avec les bases de données relationnelles et de manipuler les données stockées consiste à les interroger à l'aide d'un langage de requête tel que le SQL (abréviation de Structured Query Language).

Il est utile de comprendre le fonctionnement des bases de données relationnelles et du SQL. Un excellent endroit pour commencer votre apprentissage est le Cours de base de données relationnelle de freeCodeCamp.

Vous apprendrez les bases de données relationnelles grâce à des tutoriels interactifs et des projets utilisant SQL et PostgreSQL.

Les bases de données non relationnelles (également appelées bases de données NoSQL) ne stockent pas les données dans des tableaux.

Elles stockent au contraire les données de manière moins structurée, et les éléments ne sont pas forcément liés les uns aux autres, ce qui permet plus de flexibilité.

La base de données non relationnelle la plus populaire est MongoDB.

MongoDB, ainsi que certaines des technologies mentionnées dans les sections précédentes, fait partie de la pile MERN (MERN stack). La pile MERN est un ensemble d'outils utilisés pour développer des applications web Full Stack.

En résumé, voici ce que signifie MERN :

  • MongoDB est la base de données non relationnelle pour le stockage des données.
  • ExpressJS est un Framework web côté serveur superposé à Node JS.
  • ReactJS est une bibliothèque web côté client JavaScript pour la création d'interfaces utilisateur.
  • NodeJS est l'environnement d'exécution JavaScript permettant d'exécuter JavaScript sur un serveur et pas seulement dans le navigateur.

Pour en savoir plus sur MongoDB, voici quelques ressources pour commencer :

Conclusion

Nous espérons que vous avez trouvé cet article utile et que vous avez maintenant une meilleure compréhension de ce que signifie le développement web Full Stack.

Dans cet article, nous avons passé en revue la définition du développement Full Stack et vous avez vu un parcours d'apprentissage suggéré pour vous lancer.

Merci de votre lecture !