Tous les langages informatiques à partir de 0

Note: pour ouvrir un article, cliquez sur le titre. Vous pouvez cliquer sur les boutons pour filtrer par catégorie, ou bien faire une recherche pour nom d’article spécifique.

Comment devenir un développeur web en 2020

Quelles technologies/langages pour le développement web en 2020. Comment devenir un développeur web en 2020. Un simple roadmap à suivre. C’est tout de suite dans notre article.

En ce qui concerne le plan de notre article, nous allons faire exactement comme l’année dernière:

  • Les outils que tout le monde utilisent
  • La base de toutes les branches
  • Front-End
  • Back-End
  • Développement Mobile/Desktop

L’article sera long à lire et la vidéo qui vient avec sera longue. Si vous êtes nouveau, vous pouvez lire/regarder l’article (ou la vidéo), autrement je vous conseille d’aller directement à la branche qui vous intéresse.

Le développement web en 2020

Comme dit, nous allons commencer avec les outils que n’importe quel développeur doit connaître:

  • OS: cela semble évident mais vous aurez besoin d’un endroit où écrire votre code
    • Linux: personnellement j’utilise Linux car je trouve que le développement est bien plus fluide que sur Windows. Pour ceux qui utilisent macOS, c’est aussi un bon choix.
    • Alternatives: Windows, macOS
  • EdT/IDE: vous aurez aussi besoin d’un endroit où écrire votre code. Visual Studio Code est devenu très populaire sur tous les langages. Cependant, si vous utilisez un langage qui a besoin d’être compilé, comme le Java, alors vous pouvez utiliser un IDE.
    • Visual Studio Code: VSC permet d’écrire et compilé presque tous les langages (en tout cas je n’ai pas eu de problème pour le moment).
    • Alternatives: Visual Studio (IDE), Eclispe (IDE), Webstorm (IDE), Atom/Sublime (EdT)
  • Navigateur: si vous travaillez dans la branche qui concerne le web, vous aurez besoin d’utiliser un navigateur pour visualiser vos changements à un moment ou un autre. Chrome avait une longueur d’avance pendant un bon moment mais Firefox semble avoir rattraper leur retard au fil du temps.
    • Firefox (Developer Edition): je trouve la version développeur de Firefox très bien faite et c’est ce que j’utilise depuis un bon moment.
    • Alternative: Google Chrome
  • Terminal: tout comme pour le navigateur, si vous travaillez dans la branche du web, vous aurez aussi besoin d’un terminal (que ce soit pour le front-end ou le back-end). Le terminal que vous utilisez n’a pas beaucoup d’importance car vous pouvez utiliser un bash peu importe le système que vous utilisez.
    • Zsh: personnellement j’utilise le terminal de base qui est disponible sur Manjaro avec zsh et oh-my-zsh.
    • Alternatives: powershell, git bash, iTerm, Hyper
  • Git & GitHub: lorsque vous travaillez en équipe (ou tout seul), il est bon d’avoir un endroit où votre code sera sauvegardé. Pour cela, je conseille d’utiliser Git (qui est le VCS) et une plateforme pour héberger ce code, personnellement j’utilise Github.
    • Github: une source sûr pour votre code quoi qu’il arrive. Depuis le rachat de Microsoft, vous avez même la possibilité de créer des repos privés pour vos projets.
    • Alternatives: Gitlab, Bitbucket, local

Il existe d’autres outils mais je trouve qu’ils sont spécifiques à ce que vous utilisez ci-dessus. Par exemple, si vous utilisez VS Code, vous allez forcément utiliser des extensions. Si vous travaillez dans le domaine du front-end, vous allez forcément devoir apprendre Emmet. La liste est longue mais comme dit, cela reste spécifique à ce que vous choisissez.

Passons maintenant à la ‘base’ pour toutes les branches.

La base pour toutes les branches

Si vous avez débuté dans le domaine du web, vous avez forcément commencé par apprendre le HTML et le CSS. Je pense que tout le monde dans ce domaine connaît au moins la base de ces deux langages et comment héberger une application simplement, c’est pour cela que j’appelle ça ‘la base pour toutes les branches’.

A noter que je ne parle pas du Javascript car il est tout à fait possible que vous passiez directement du HTML/CSS à une autre branche/langage. Personnellement, je suis passé du HTML/CSS à Ruby sans apprendre le Javascript (même si j’y suis revenu plus tard).

  • HTML5: le langage permettant d’ajouter du contenu sur vos applications
    • Les balises sémantiques
    • Les attributs
    • Les balises populaires
    • Le squelette de base
    • Les balises div et span etc.
  • CSS3: le langage permettant d’ajouter du style à vos applications
    • Les fondamentaux (couleur, arrière-plan, police d’écriture etc.)
    • La boite CSS
    • Flexbox ou le système de grille
    • Les transitions, animations et keyframes
  • Déploiement: je parle ici de déploiement basique.
    • Un nom de domaine (Namecheap, OVH etc.)
    • Un espace d’hébergement (Hostgator, OVH etc.)
    • Un espace d’hébergement statique (Netlify ou Github)
    • Comment transférer vos fichiers (FTP, SFTP, SSH ou via CLI)

Honnêtement, apprendre les bases ne prend pas beaucoup de temps et cela pourra toujours vous aider, quoi qu’il arrive.

Passons maintenant dans le vif du sujet et voyons les différentes technologies/langages pour le front-end.

Front-End

Maintenant que vous avez les bases et que vous avez décidé de vous spécialiser dans le front-end, il est nécessaire de revenir sur le CSS et apprendre le Javascript.

SASS & les frameworks

  • CSS3: comment créer des composants réutilisables avec le SASS, qui est un pré-procésseur qui permet de rendre le CSS plus efficace
    • Comment créer une architecture de projets correctement avec le SASS
    • Les variables
    • Le ‘nesting’
    • Les fonctions
    • Les conditions
  • Framework CSS3: permet de rendre le développement d’une application plus simple et plus rapide. A noter que cela devient de moins en moins populaire et que la plupart des gens préférent créer leur propre composants avec le SASS.
    • Bootstrap 4: pour avoir tester tous les frameworks, je préfére de loin bootstrap.
    • Alternative: Tailwind, Bulma

Vous l’aurez compris, pour le front-end, il suffit juste d’approfondir vos connaissances dans les trois langages du web, le HTML/CSS/Javascript.

Javascript

Vous pouvez commencer par apprendre le Javascript puis passer directement sur les fonctionnalités de l’ES6/7/8.

  • Javascript (vanilla): le langage du navigateur. Si vous comptez travailler dans le domaine du fron-end, le javascript est obligatoire pour rendre vos pages dynamiques
    • Les fondamentaux (variables, type de données, fonctions, boucles, conditions etc.)
    • Le DOM et le JSON
    • Ajax
    • Le javascript ‘moderne’ (ES6/ES2015+)

A partir de là, vous êtes déjà prêt à chercher du travail ou bien partir en freelance. Cependant, le domaine du fron-end ne s’arrête pas là.

Framework Javascript et le gestionnaire d’état

Si vous voulez continuer à approfondir vos connaissances dans ce domaine, je vous conseille d’apprendre un framework pour le javascript.

  • Framework Javascript: à ce jour il n’existe que trois frameworks vraiment populaire, les trois possèdent leur propre éco-système
    • Vue: le framework le plus populaire après React, il s’agit du plus simple des trois à apprendre grâce à leur documentation qui est vraiment très bien construite.
    • Alternatives: React, Angular

Après avoir choisi un framework, il va falloir vous intéresser à ce qu’on appelle le ‘state management’.

  • State management (‘gestionnaire d’état): ce principe est utilisé lorsque une application devient ‘trop’ grosse et où gérer les états devient trop compliqué à l’intérieur du framework
    • VueX: il s’agit du seul gestionnaire pour Vue (que je connaisse).
    • Alternatives: Redux/React Hooks (React), NGRX/Services (Angular)

Si vous désirez utiliser Vue ou React, il sera aussi important de jeter un coup d’oeil à NEXT (pour react) ou NUXT (pour vue). Ils vont permettre d’interpréter votre code directement du côté serveur (au lieu du côté client), ils possèdent aussi un SEO présent par défaut, un système de fichier très performant et pleins d’autres choses.

Typescript

Enfin, une fois que vous avez appris tout ça, il ne reste plus qu’à apprendre le typescript.

  • Typesript: un superset du Javascript. Il n’est pas là pour rendre le Javascript plus difficile, mais pour vous permettre de faire moins d’erreurs en production
    • Typage statique (string, number, boolean etc.)
    • OOP: Modules, décorateurs, classes
    • VSCode + Typescript = COOL!
    • Un code javascript ‘clean’

A partir de là, vous êtes une perle dans le domaine du front-end, vous pourrez FACILEMENT trouver du travail dans le domaine du front-end. A partir de là, vous pouvez choisir de devenir un développeur web full-stack ou de continuer à approfondir vos connaissances dans les technologies/langages que nous avons vu ci-dessus.

Back-End

Vous avez appris les bases et vous en avez marre de travailler dans le navigateur? Alors vous êtes peut-être sur la bonne voie en choisissant le back-end.

Choisir un langage du côté serveur

La première chose à faire lorsque vous arrivez du côté serveur est de choisir un langage ou une technologie à apprendre pour communiquer avec le serveur en question.

  • Langage côté serveur: sans apprendre un de ces langages, il sera juste impossible de communiquer avec le côté serveur. Si vous connaissez déjà la branche où vous désirez coder, alors le choix devrait être beaucoup plus simple
    • Node.js: il s’agit d’un framework Javascript qui est souvent conseillé car cela vous permet de ne pas avoir à apprendre un langage différent de celui que vous utilisez dans le navigateur
    • GoLang: vu le rapide gain en popularité, il est tout à fait possible que le Go (qui est maintenu par Google) devienne le langage le plus populaire de 2020
    • Alternatives: Python, PHP, Java, Ruby …

Après avoir choisi et ‘maîtriser’ un langage, il est conseillé de directement chercher un framework qui est associé à votre langage.

  • Framework
    • Express: il existe beaucoup de framework pour Node.js, cependant le plus populaire reste et restera probablement Express.
    • Revel: le seul framework qui est disponible pour GoLang (pour le moment)
    • Alternatives: Django/Flask (Python), Laravel (PHP), Spring MVC (Java), Ruby on Rails (Ruby) …

Cela fait quelques mois que je suis complètement passé sur le Go et je vous le conseille fortement. Cependant, si vous êtes un débutant, le choix le plus logique est node.js.

Après le choix du langage et du framework, il va falloir choisir une base de données.

Base de données

Il y a quelques années, le choix était moins compliqué que de nos jours. Il va falloir choisir parmis 4 types de base de données.

  • Base de données: pour ceux qui ne savent pas, une base de données va permettre de stocker vos différentes données.
    • SQL: PostgreSQL, MySQL, MSSQL, Oracle
    • NoSQL: MongoDB, RethinkDB
    • Cloud: Firebase, ACDB, AWS
    • Local Storage: SQLite, Redis, Enmap

Nous ne sommes pas ici pour expliquer la différence entre les quatre. Cependant les bases de données ‘SQL’ (ou les base de données relationelles) sont présentes depuis beaucoup plus longtemps que les autres et il sera probablement plus simple de commencer par là. D’un autre côté, MongoDB fonctionne très bien avec le Javascript, donc si avez choisi Javascript/Node.js, essayez MongoDB ou Firebase.

Bien sur, nous ne pouvons pas parler des base de données sans parler de GraphQL qui va probablement s’installer de façon permanente. GraphQL permet de faire des requêtes directement auprès de l’API. C’est un sujet qui est déjà très avancé mais en gros, cela fonctionne plus ou moins comme le JSON.

Maintenant que nous avons fait le point sur tous les langages, il est l’heure de parler des CMS.

Content Management System

Les CMS existent depuis longtemps et ils sont là pour faciliter l’ajout de contenu pour les débutants. C’est une bonne technologie pour créer votre propre site ou bien donner la possibilité à un de vos cliens d’ajouter ses propres articles, vidéos, images etc.

Il existe deux sortes de CMS, traditionnel et contenu uniquement. Le traditionnel va permettre de créer votre application de A à Z et tout va passer par le CMS. D’un autre côté, l’autre type va permettre de gérer uniquement le contenu de votre application. Le deuxième type devient de plus en plus populaire.

  • CMS
    • Traditionnel: WordPress, Drupal, Joomla, Magento etc.
    • Contenu uniquement: Prepr, Contentful, dotCMS, Butter CMS etc.

J’ai développé mes premiers sites avec les CMS et croyez-moi, un débutant ne verra pas la différence entre les deux. De plus, la création d’un site est beaucoup plus simple avec un CMS traditionnel.

Une fois que votre application est créée, il ne reste plus qu’à la déployer.

Déploiement

Il existe une grosse différence entre le déploiement d’un site statique (HTML/CSS uniquement) et une application possédant un back-end et une base de données. C’est aussi une étape importante à connaître en tant que développeur back-end.

Par défaut, il va falloir apprendre à naviguer à l’aide des différentes commandes du terminal mais aussi apprendre à utiliser le SSH pour vous connecter à votre environnement.

  • Déploiement
    • Hébergement: Upcloud* (Cloud), Heroku (presque aucune configuration), AWS, Now …
    • Virtualisation: Docker ou Vagrant (votre application dans un container pour être utilisé par plusieurs personnes)

Il existe d’autres sujets important à connaître comme par exemple, le testing, visualiser vos données, la sécurité de l’application etc. En général, ce n’est pas votre travail mais si vous développez votre application tout seul, vous devrez vous y intéresser.

En dernier lieu, nous allons parler rapidement du développeut mobile et bureau.

Développement mobile/desktop

Il y a quelques années, les langages qui étaient utilisés pour le développement mobile était le Java ou le Swift. Cependant il est maintenant possible d’utiliser des technologies comme Flutter, React Native, Ionic etc. Si vous avez appris le Javascript et le Typescript, je vous conseille Flutter, qui utilise le langage ‘Dart’, un mélange de Javascript et de Java.

  • Développement mobile
    • Flutter (Dart)
    • Alternatives: React Native (React), NativeScript (Typescript/Vue), Ionic (Javascript)

Le développement mobile est vraiment une branche très spécialisée du développement web. Tout comme le développement dit ‘desktop’ (ou bureau) qui utilise Electron, le plus populaire. Electron permet de développer des applications sur tous les OS, le langage utilisé est le Javascript et il est hautement performance et sécurisé.

Conclusion

En conclusion, si vous venez de débuter, ça fait beaucoup d’informations! Ne perdez pas espoir, commencez par la route la plus simple en suivant tout ce qui concerne le Javascript puis si vous désirez changer, vous pouvez toujours revenir à cette vidéo si vous le désirez.

Enfin, voici quelques technologies qui pourraient devenir populaire pour l’année 2020:

  • Une architecture sans serveur (dit ‘Serverless’): permet simplement de faire des opérations du côté serveur sans serveur (ex: netlify, aws lambda)
  • Machine Learning
  • Speech Recognition (pour mobile surtout)
  • Web Assembly: permet certains langages comme le C++ ou Rust de s’exécuter directement dans le navigateur

Encore une fois, pas besoin de se présser, prenez votre temps! Bonne fin de journée!

Le site est à nouveau en ligne! Les pages de connexion et d'inscription fonctionnent, cependant elles ne sont pas encore stylisées. Certaines traductions peuvent manquer!
+