Comment devenir développeur Web en 2020 - Un guide complet

Qu'avez-vous ressenti lorsque vous avez créé votre premier formulaire de connexion sur une page Web après tant d'essais et de modèles testés (ne dites pas que vous avez tout créé à partir de zéro…)? … Comment vous êtes-vous senti lorsque vous avez mis en page votre première application Web après plusieurs modifications (Oui… vous avez pris la référence de certains autres sites Web ou modèles selon les exigences…)?… Comment vous êtes-vous senti lorsque vous avez réussi à gérer des milliers d'utilisateurs » des informations sensibles en backend pour construire une application (ça faisait peur…)?

La plupart des développeurs Web passent par toutes les phases ci-dessus et au début, cela peut être frustrant pour certains d'entre eux, mais le sentiment général est vraiment excitant et étonnant quand ils voient que leur site Web est en ligne et que les gens l'utilisent partout dans le monde. Un développeur Web est responsable de nombreuses tâches, de la collecte des exigences à la conception d'un site Web, en gérant sa partie principale et en la faisant vivre avec succès pour les utilisateurs.
Chaque année, de nouvelles technologies et de nouveaux outils font leur apparition dans les industries pour stimuler la productivité des développeurs et améliorer le site Web pour les utilisateurs. Il devient difficile pour eux de rester au top du jeu de développement web. Aujourd'hui, nous allons discuter d'une carte complète pour devenir développeur Web en 2020. Ce sera une directive pratique pour tous les types de développeurs (front-end, backend et full-stack).

Décidez d'abord de votre objectif ou de votre chemin

Nous discuterons de nombreuses technologies, tendances et outils, mais nous ne voulons pas que vous soyez submergé, vous devez donc d'abord décider ce que vous voulez faire pour devenir développeur Web, car cela vous aidera à choisir les bons outils. et la technologie pour apprendre. Il y a beaucoup de raisons différentes pour devenir développeur web, certaines des options sont données ci-dessous…

• Vous voulez travailler pour une entreprise en tant que développeur Web, ce qui est la raison la plus populaire et la plus courante.
• Vous souhaitez travailler en tant que développeur indépendant pour démarrer votre propre entreprise ou agence.
• Vous pouvez devenir consultant pour d'autres entreprises.
• Vous pouvez créer votre propre application pour gagner de l'argent.
• Le code comme passe-temps.

Dans le domaine d'intérêt ou l'objectif ci-dessus, vous pouvez choisir les bons outils et la bonne technologie qui s'appliquent à votre objectif. Si votre objectif est de devenir simplement un développeur frontal, vous pouvez choisir les outils et la technologie de développement frontend. Il en va de même pour le développement backend et full-stack.

Outils et logiciels de base pour le développement Web

• Ordinateur et système d'exploitation: vous ne pouvez pas écrire de code sans qu'un ordinateur et un système d'exploitation s'exécutent dessus. Pour apprendre le développement web, vous n'avez besoin d'aucun ordinateur sophistiqué (si vous en avez, c'est bon…). Vous pouvez utiliser tout type d'ordinateur portable ou de bureau de milieu de gamme. Pour le système d'exploitation, vous pouvez utiliser MacOS, Windows (dernière version) ou Linux tout ce qui vous convient.
• Éditeur de texte / IDE: VSCode est sans aucun doute bon pour la plupart des cas et la plupart des langages. Il a de bonnes performances, de superbes extensions, un terminal intégré et une tonne de fonctionnalités. En 2019 Stackoverflow enquête a été VSCode développeurs premier choix aussi bien. Vous avez également d'autres bonnes options telles que Sublime Text ou Atom . Si nous parlons d'IDE donc Visual Studio (ASP.net ou C # ), Eclipse et Netbeans (Java). sont de bonnes options.
• Navigateur Web: la plupart des développeurs choisissent en premier lieu Chrome ou Firefox . Chrome est rapide et utilise le moteur V8 (moteur JavaScript). Firefox a également parcouru un long chemin et certaines de ses bonnes choses ne sont pas dans le navigateur Chrome. Les deux navigateurs ont des outils de développement fantastiques pour résoudre les problèmes de développement Web.
• Terminal: Vous travaillerez beaucoup avec CLI en utilisant certaines commandes système. Vous pouvez utiliser le terminal par défaut ou tiers pour votre projet de développement Web. Bash, Zsh, Powershell, Git Bash, iTerm, Hyper, ce sont toutes des options disponibles.
• Conception (facultative): personne n'a besoin d'apprendre cela. Dans les entreprises, il existe une équipe spécifique pour créer des images, des logos ou des croquis, mais si vous travaillez en tant que pigiste, vous devrez peut-être apprendre Adobe XD, Photoshop, Sketch ou Figma .

Commencez avec HTML et CSS

HTML et CSS sont les éléments de base du développement Web. Peu importe le niveau avancé de votre application Web ou les cadres et le langage backend que vous utilisez, vous devrez créer votre application frontale à l'aide de HTML et CSS. C'est donc la première chose à apprendre en développement web.

• HTML5 (éléments sémantiques, attributs, doctype, etc.)
• Fondamentaux CSS Couleurs, polices, positionnement, modèle de boîte, etc.
• CSS Grid et Flexbox pour aligner les choses ou créer des colonnes.
• Propriétés personnalisées CSS

Mises en page réactives

Votre application doit être visible et utilisable sur tous types d'appareils tels que smartphones, tablettes, ordinateurs de bureau, iPad ou tout autre appareil de taille d'écran. Il est donc important d'apprendre à créer une conception ou une mise en page réactive. Voyons quelques sujets importants pour cela.

• Apprenez à définir la fenêtre
• Requêtes multimédias pour différentes tailles d'écran.
• Largeurs de fluide
• unités rem
• Mobile First

Composants CSS réutilisables personnalisés

Au lieu de s'appuyer sur de grands frameworks CSS comme Bootstrap, il est bon de créer vos propres composants CSS modulaires et réutilisables à utiliser dans vos projets. Vous n'avez pas besoin d'importer la bibliothèque complète si vous créez votre propre conception personnalisée. Vous créez le composant dont vous avez besoin uniquement pour l'interface utilisateur particulière.
Une nouvelle tendance Saas est également sorti récemment qui aide à écrire du code CSS plus efficacement. Si vous connaissez déjà CSS, vous n'avez pas besoin de faire autant d'efforts pour apprendre Saas. Saas est un préprocesseur CSS qui ajoute plus de fonctionnalités au CSS standard et le rend plus efficace. Vous pouvez utiliser des variables, des imbrications, des conditions pour réduire la répétition du CSS et le rendre plus efficace. Vous pouvez également créer votre fichier Saas distinct pour chaque composant réutilisable. Sass fait vraiment gagner beaucoup de temps, vous devriez donc certainement l'apprendre en 2020.

Cadres CSS

L'apprentissage des frameworks CSS est un peu moins populaire que l'année dernière mais reste très pertinent ou utile pour les développeurs qui ne sont pas bons en conception. Il existe de nombreux frameworks CSS populaires disponibles, certains d'entre eux sont donnés ci-dessous.

• Bootstrap est le framework CSS le plus populaire à apprendre. L'apprentissage du bootstrap aide également à apprendre d'autres cadres.
• Tailwind CSS est un autre framework qui gagne en popularité et il est peu différent des autres. Il s'agit d'un ensemble de classes utilitaires pour que vous puissiez créer vos propres boutons et autres éléments qui sont vraiment différents des autres. Ils sont également hautement personnalisables.
• Matérialiser
• Bulma

JavaScript vanille

Après avoir appris HTML et CSS, la prochaine chose que vous devez apprendre est Javascript Vanilla. Il est très important pour les développeurs d'avoir une bonne maîtrise des principes fondamentaux du javascript. Vous utiliserez beaucoup de javascript avec des langages côté serveur tels que PHP, Python ou ASP.net et l'apprentissage de ce langage est indispensable si vous souhaitez travailler avec React, Angular, NodeJS, Vue ou tout autre framework ou bibliothèque javascript. Voici quelques sujets importants que vous devriez couvrir en javascript…

• Fondamentaux JavaScript (variables, types de données, fonctions, conditions, etc.)
• DOM (Document Object Model)
• JSON (Javascript Object Notation)
• Fetch API (Request / Response / Ajax)
• Les concepts modernes de JS (ES6) sont vraiment importants à apprendre si vous souhaitez passer aux frameworks React, Vue, Angular ou autres.

Quelques outils importants

Il existe certains outils que vous utiliserez dans le développement Web. Ces outils vous aideront à déboguer, à augmenter votre productivité, à gérer votre code, à collaborer avec d'autres développeurs et beaucoup de choses comme ça. Discutons de certains de ces outils.

• Git (Version Control) & Github est l'outil le plus populaire que vous devriez absolument apprendre en 2020. Git aide beaucoup à collaborer avec d'autres développeurs et à gérer votre code. Vous avez également d'autres options telles que GitLab, Bitbucket et quelques autres également.
• Apprenez à utiliser les outils de développement du navigateur . Que ce soit Chrome ou Firefox, vous devez savoir comment utiliser les différents onglets tels que l'onglet Élément, la console pour Javascript, l'onglet Réseau pour la demande et la réponse, l'onglet Application et d'autres onglets à des fins différentes.
• La plupart des IDE ou des éditeurs de texte ont la possibilité d'ajouter des extensions ou des plugins qui sont très utiles pour augmenter la productivité et créer des applications Web. Par exemple, les extensions VSCode dans le code Visual Studio aident à télécharger l'extension telle que le compilateur live-server ou live-saas pour travailler avec React.
• Emmet est un autre excellent outil qui vous permet d'écrire du HTML et du CSS très rapides, ce qui est utile pour augmenter la productivité des développeurs.
• Apprenez à utiliser le gestionnaire de packages javascript tel que NPM et Yarn. Ces gestionnaires de packages que vous utiliserez beaucoup si vous travaillez avec des frameworks Javascript ou une bibliothèque tels que React, mais pour d'autres langages (comme Python ou Php), vous utiliserez les différents gestionnaires de packages.
• Si vous souhaitez installer des packages NPM sur le frontend, vous devez utiliser Webpack ou Parcel . Si vous souhaitez créer votre propre module ou si vous souhaitez apporter un fichier javascript à un autre fichier javascript, vous ne pouvez pas le faire par défaut uniquement avec le navigateur, vous avez donc besoin de Webpack ou Parcel pour le regrouper pour vous.

Déploiement de base

À ce stade, une fois que vous savez quels outils ou technologies vous devez apprendre pour le développement frontal, vous devez savoir comment déployer votre site Web frontal sur Internet. Si vous créez de minuscules applications, des pages de destination ou des sites personnels pour les petites entreprises, il n'est pas nécessaire d'apprendre AWS ou DevOps simplement parce qu'il est brillant et branché. Vous compliquerez davantage les choses au lieu de les simplifier. Il y a quelques outils et étapes de déploiement que vous devriez apprendre en 2020.

• Enregistrement de domaine (Namecheap, Google Domains etc.)
• Hébergement géré (InMotion, Hostgator, Bluehost, etc.)
• Hébergement statique (Netlify, Github Pages)
• Certificat SSL.
• FTP, SFTP (File Transfer Protocol) est bon pour les petites applications.
• SSH (Secure Shell) pour application avancée.
• CLI et Git.

Quels que soient les outils, les tendances technologiques ou les étapes dont nous avons discuté jusqu'à présent, cela fait partie du développement frontal. Vous ne connaissez pas encore le cadre mais vous pouvez créer le site Web pour les particuliers et les petites entreprises ou vous pouvez créer une mise en page adaptée aux mobiles. Vous pouvez également déployer votre petite application ou projet en utilisant les outils ou technologies dont nous avons parlé jusqu'à présent. Si vous souhaitez postuler pour les emplois, ce serait formidable d'apprendre un cadre frontal tel que React, Vue ou Angular.

Cadre frontal et gestion des états

Les frameworks vous permettent de faire un développement frontal plus avancé. Les cadres vous offrent de nombreux avantages tels que des composants réutilisables, une interface utilisateur plus organisée ou une interaction de page. C'est mieux pour la collaboration et aide également à écrire du code propre. Découvrez également la gestion de l'État. Chaque cadre a différentes façons de procéder. Pour 2020, voici quelques cadres et gestionnaires d'État populaires.

• React : La bibliothèque React est la plus populaire à apprendre pour le développement Web et elle est assez facile par rapport à d'autres cadres et bibliothèque. Il y a aussi beaucoup de travail disponible pour les développeurs React. Vous pouvez utiliser Redux et l' API contextuelle avec des crochets pour la gestion des états.
• Vue: Vue gagne également en popularité et les développeurs peuvent également préférer apprendre Vue. Vue est également plus facile à apprendre en comparaison de React et Angular. VueX est le gestionnaire d'état conçu pour la vue.
• Angular : ce cadre est généralement utilisé dans les grandes organisations. Il a une courbe d'apprentissage assez abrupte. Il est également bon d'apprendre TypeScript avec Angular. Il vous permet d'utiliser la saisie statique facultative et la prise en charge des fonctionnalités d'ES2015. NGRX et les services sont de bons gestionnaires d'État à apprendre pour ce cadre.

Facultatif pour apprendre:

• Si vous avez les connaissances pour l'un des trois cadres, vous entrez également dans le Svelte qui est un compilateur javascript qui vous permet de produire du code JS pur vanille et vous aide à créer facilement une interface utilisateur.
• Découvrez le rendu côté serveur. NextJS (React) et NuxtJS (Vue) est le framework qui vous permet d'exécuter React et Vue sur le serveur. Les deux ont de grandes fonctionnalités telles qu'un meilleur référencement, un routage du système de fichiers, un fractionnement automatique du code, une exportation statique, CSS dans JS et beaucoup d'autres fonctionnalités.
• Générateurs de sites statiques: Gatsby (React) et Gridsome (Vue)

Nous avons discuté de la majorité des outils et technologies de développement frontend. Parlons maintenant du langage et de la technologie pour devenir développeur backend ou développeur full-stack.

Langage côté serveur (choisissez-en une)

Vous devez avoir la connaissance d'au moins un langage côté serveur. Pour choisir un Langage en 2020, certaines des options sont données ci-dessous…

• NodeJS (pas un langage mais un environnement d'exécution)
• Python (bon pour les débutants absolus)
• Java (bon pour les grandes organisations)
• Php (bon pour la pige)
• Ruby (moins pupolaire en 2020)
• C #
• Golang

Remarque: Quelle que soit le Langage côté serveur que vous préférez apprendre, assurez-vous de connaître les structures de données et les algorithmes utilisant ce Langage . Les structures de données et les algorithmes vous aideront à rendre vos données pour l'utilisateur et à optimiser votre code dans l'application Web. Nous vous recommandons particulièrement de vous concentrer sur l'utilisation de Array et String (le plus important). Vous travaillerez beaucoup avec ces deux éléments.

Framework côté serveur (choisissez-en un)

Une fois que vous avez appris un Langage côté serveur de votre choix, optez pour l'un des cadres de votre Langage . Vous pouvez choisir l'une des options ci-dessous…

• Node.js - Express, Koa, Adonis, Feather.js, Nest.js
• Python: Django, Flask,
• Java: Spring MVC, Grails
• PHP: Laravel, Symfony, Codeignitor, Slim
• Rubis: Rubis sur rails, Sinatra
• C #: ASP.NET MVC
• Go : Revel

Base de données (choisissez-en une)

La plupart des applications Web ont besoin d'un emplacement pour stocker des données. Dans certains cas, certaines technologies ou certains Langages fonctionnent bien avec certains bases de données. Par exemple: dans la pile Mern, M signifie MongoDB et dans la pile LAMP M signifie MySQL mais c'est à vous de choisir la base de données que vous souhaitez choisir pour votre application. Nous allons discuter de quelques bases de données populaires pour 2020.

• Base de données relationnelle: Les SGBDR sont toujours les bases de données les plus populaires. PostgreSQL, MySQL, MS SQL sont toujours les plus préférés à utiliser.
• NoSQL: MongoDB, RethinkDB, CouchDB
• Base de données cloud: Firebase, Azure pourrait DB, AWS
• Léger et cache: Redis, SQLlite, NeDB

Lorsque vous apprendrez des bases de données, vous apprendrez également SQL (langage de requête structuré) pour RDBMS, ORM (Object Relational Mapper) ou ODM (Object Data Mapper).

GraphQL: (Facultatif) Vous pouvez en apprendre davantage sur le GraphQL qui est assez populaire de nos jours. C'est un langage de requête pour votre API. Il a une syntaxe simple similaire à JSON et il est assez facile à implémenter.

Gestion de contenu

Vous devriez certainement vous renseigner sur le système de gestion de contenu, surtout si vous êtes indépendant. Un CMS est utilisé pour ajouter du contenu à votre site Web ou à votre application. C'est formidable pour les clients de pouvoir mettre à jour leur propre contenu.

• CMS traditionnel: WordPress (PHP), Drupal (PHP), Keystone (Javascript), Enduro (Javascript)
• CMS sans tête: (Devenir populaire en 2020) Contentful, Prismic.io, Strapi.

Déploiement et DevOps

L'hébergement d'une application full-stack ou d'une application backend est un peu plus compliqué qu'une simple application frontale, en particulier lorsque vous avez des bases de données. Assurez-vous que vous savez comment utiliser CLI pour le déploiement. Découvrez les éléments ci-dessous pour le déploiement de votre application.
Dans la plupart des entreprises, une équipe différente travaille sur DevOps. Il est donc tout à fait facultatif d'avoir des connaissances sur DevOps. Vous pouvez l'apprendre si vous travaillez sur votre propre projet.

• SSH (Secure Shell)
• Environnement de serveur Web: NGINX, Apache
• Hébergement d'applications: Linode, Heroku, AWS, Azure, Now.
• Virtualisation: Docker, Vagrant
• Tests: unitaires, fonctionnels, d'intégration, etc.
• Équilibrage de charge, surveillance, sécurité.

Toutes les technologies ci-dessus, les outils sont assez bons pour faire de vous un développeur frontend, backend ou full-stack. Choisissez le bon ensemble d'outils et de technologies selon votre objectif final.