Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

Développeurs Web : Full Stack, Front End, Back End ?

Par Alex PLANCHON Publié le 11/10/2016 à 10:59:22 Noter cet article:
(0 votes)
Avis favorable du comité de lecture

Introduction

Vous êtes intéressé par le développement Web mais vous n’y connaissez pas grand-chose ? Et bien, si oui, cet article est fait pour vous !

Des milliers de pages webs sont publiées chaque jour et celles-ci sont codées par des développeurs Web, mais ceci vous le savez sûrement déjà. En revanche, ce que vous ne savez peut-être pas c'est qu'il existe plusieurs types de développeurs webs : Le développement Front-End, le développement Back-End et le développement Full-Stack. Chacun de ces types de développement peut devenir une réelle spécialisation, ainsi certains développeurs webs ne feront que du Back-End quand d'autres ne feront que du Front-End.

Cet article aura donc pour vocation de définir les notions de "Full-Stack" "Front-End/Back-End » et de vous exposer les différents outils et frameworks les plus intéressants à connaître si vous souhaitez exercer dans le web.

Les types de développeurs

Un développeur web a beaucoup de rôles différents. Il crée et entretient du contenu pour le web, ciblant différentes plates-formes, tels que l'ordinateur de bureau classiques, les tablettes et les appareils mobiles de poche.

Les développeurs Front-End travaillent avec les langages qui sont exécutés dans le navigateur, qui est aussi appelé un client. Ainsi, les développeurs front-end travaillent principalement avec HTML, CSS et JavaScript. Ceux-ci sont connus comme des technologies front-end parce qu'elles représentent qui interagissent avec le site.

Certains sites exigent un serveur spécial parce que certains contenus sont personnalisés pour chaque utilisateur en fonction de leurs données. Ce type de développement est appelée développement back-end parce que la plupart des actions ne se produisent pas en face de l'utilisateur, mais sur un serveur en arrière-plan.

Quelqu'un qui travaille avec toutes les différentes couches de développement web est parfois appelé un développeur full-stack. En réalité, tous les développeurs web doivent avoir une bonne compréhension de l'ensemble de la pile. Une pile est l'ensemble des outils, à la fois front et back, qu'une entreprise utilise pour construire sa présence sur le Web. Pour autant les développeurs full-stack sont assez rares.

Les outils

Le rôle de l'HTML

Que vous soyez un développeur front-end, back-end, ou développeur full stack, il y a un langage que tout le monde a besoin de maîtriser, et c'est HTML. HTML signifie HyperText Markup Language. Il décrit le contenu et définit la structure dans une page Web. « Hypertext » signifie que les documents sur le web ne sont pas destinés à être utilisés de façon linéaire, ils sont conçus pour être reliés à d'autres documents. Un développeur front-end doit comprendre la relation entre l'ensemble des pages du site, et la manière dont les documents se rapportent les uns aux autres. On appelle cela l’architecture de l'information, et cela signifie qu’il faut s’interroger sur la meilleure façon de structurer un site, sur comment un utilisateur va naviguer sur ce site et sur la façon dont les utilisateurs vont passer d’un contenu à un autre.

La seconde partie de HTML est le langage de balisage / « Markup Langage ». C’est l’ensemble des balises qui sont ajoutées à une page web pour définir sa structure. Son rôle est vraiment important. Premièrement, elle définit le rôle de chaque élément de contenu aura. Une partie du contenu HTML deviendra le titre principal tandis que d'autres seront des liens de navigations. Certaines balises décrivent les éléments non textuels tels que des images ou des vidéos. Tous les développeurs web sont des as du langage de balisage. Ils doivent être minutieux et passionné par la structure et la sémantique.

Le langage de balisage fait autre chose de vraiment important. Il génère le DOM ou Document Object Model. Le DOM décrit la structure de la page, et il est un peu comme un plan ou une carte du contenu dans un site Web. Lorsque vous ajoutez des balises à un document,vous construisez la carte qui définit le rôle de votre contenu. Une partie du travail consiste à trouver des erreurs, donc un bon développeur front end doit aimer l’écriture et la correction de code. HTML est si important pour un site que si le DOM n’est pas codé correctement, il peut briser l'ensemble du site.

Que ce soit le design ou les fonctionnalités d'un site, rien ne fonctionnera si le HTML n’est pas codé correctement. Il est donc très important de bien apprendre les bases de l’HTML et de s’entrainer à coder avec ce langage. Bien qu'il y ait beaucoup de compétences à apprendre dans le développement web, HTML est fondamental pour chaque type d'emploi dans ce domaine. Des camarades de promotions ont partagés de très bons articles sur le HTML et le DOM sur le site de SUPINFO.

Le rôle du CSS

Le design joue un rôle important et est un élément clé de chaque site Web réussi. Le design est un des domaines où vous verrez des spécialisations au sein des différents types des développeurs. Il y a des gens qui sont plus intéressés à créer le look and l’aspect d'un site ; ils aiment travailler sur l'expérience de l'utilisateur, que l’on appelle UX. Et puis il y a ceux qui préfèrent travailler sur les fonctionnalités d'un site, cette spécialisation est appelée UI.

Cependant, tous les développeurs ont besoin d'apprendre comment CSS influe sur un document. Le Web design exige également une bonne compréhension de la façon dont les gens utilisent des sites et parcourent du contenu. Cela signifie d’apprendre comment la navigation dirige l'expérience utilisateur, et la façon de présenter le contenu à l'utilisateur. Dans la pratique, la conception d'un site Web va requérir d’apprendre à travailler avec le langage de mise en page du Web appelé CSS. CSS signifie Cascading Style Sheets. Et comme le HTML, il est composé de deux parties. Premièrement, CSS consiste à définir un ensemble de règles, ou de feuilles de style, pour traduire le DOM dans une forme visuelle. La deuxième partie est les règles de style en cascade. Ce sont un ensemble de règles qui décrivent la priorité avec laquelle les styles sont rendus sur une page.

Cela signifie que c’est également un langage que vous devez maîtriser. Le CSS comporte un ensemble de règles qui permettent d'identifier d'abord la partie de la page que vous souhaitez modifier ; une fois celles-ci en place vous pouvez faire ressembler votre page à ce que vous voulez en via un large panel de propriétés. Ces propriétés peuvent être aussi simples que la définition des couleurs, des tailles, des polices, et permettent d’appliquer des concepts de design classiques comme le contraste, l'alignement, la proximité, ect…

Un bon exemple de ce langage est le CSS Zen Garden. Ce site montre comment le même contenu peut être présenté de manière complètement différente. Le site présente des styles différents pour la même page HTML. Quand l’on choisit dessus un autre ensemble de règles pour cette page, la mise en page du site change. Parfois de façon spectaculaire. Pourtant, c'est exactement le même code HTML, il est juste présenté de façons radicalement différentes.

CSS vous permettra également d'ajouter un certain mouvement et même un niveau d'interactivité à vos designs. Apprendre le CSS signifie aussi apprendre à travailler avec les éléments du mouvement, et le langage de l'interaction pour ce qui est de la conception graphique.

Comme CSS a évolué, des choses comme des variables, des calculs et des fonctionnalités plus complexes ont fait leur apparition dans le langage. Donc, CSS a maintenant quelques caractéristiques similaires à ce qui est disponible dans les langages de programmation. Une des grandes différences dans la conception pour le web est que le contenu doit être « Responsive ». En d'autres termes, il doit être adapté aux proportions des différents supports comme les ordinateurs de bureau, ordinateurs portables et appareils mobiles. Le langage CSS est toujours en évolution. Il y a eu trois révisions majeures et la troisième, CSS3, a été divisé en modules indépendants qui vont se développer à l’avenir.

Donc, il y aura toujours des nouveautés dans ce langage. Travailler avec CSS peut être un grand défi en raison de la complexité de la langue, mais sa complexité est ce qui le rend passionnant, et peut mener à une carrière très enrichissante.

Le rôle de JavaScript

N’importe qui travaillant dans le monde du développement web doit être un minimum à l’aise avec la programmation. Pour le développement Front-End cela signifie connaître le JavaScript, le langage chargé de gérer les interactions au sein d’un navigateur. Il n’y a pas que les développeurs front-end, même 50% des développeurs back-end se disent utiliser certaines formes de JavaScript de manière quotidienne (source : LinkedIn). Ceux qui s’identifient comme développeurs full-stack utilisent aussi tout autant le JavaScript. JavaScript est utilisé pour le traitement d’événements, le chargement des médias, ainsi que la création, la modification et la suppression d'éléments dans une page DOM.

C’est un travail pour quelqu’un qui apprécie la création et la conception d’interactions avec le contenu. Il y a eu plusieurs révisions du langage avec une nouvelle version toujours à l’horizon. Comme pour le CSS, il s’agit d’implémentations régulières de nouvelles fonctionnalités, ce qui signifie que les développeurs doivent apprendre et explorer les nouvelles fonctionnalités et constater leur impact sur les projets actuels et futurs. Les développeurs doivent également se soucier de la question du support par les différents navigateurs car puisque le langage évolue rapidement, les navigateurs n’ont pas toujours tous intégrés les dernières modifications et améliorations de JavaScript.

JavaScript ne se comporte pas de la même façon dans tous les navigateurs, et le débogage de ce code peut être particulièrement frustrant, mais c’est une partie nécessaire du travail. Certains développeurs écrivent du code dans des autres langages que JavaScript qui leur laissent tirer parti des nouvelles techniques et des améliorations et ensuite les convertissent en JavaScript. D’une certaine façon, le développement implique l'apprentissage de supersets JavaScript comme TypeScript et Go.

JavaScript est également implémenté côté serveur et il est souvent utilisé dans un workflow de développement comme un moyen de gérer et de contrôler l'expérience de développement. Cela signifie faire des choses comme compresser ou combiner le code afin de le faire marcher plus rapidement en utilisant des outils de workflow comme NodeJS, WebPack et GulpJS.

JavaScript est devenu un moyen d'exécuter des applications qui va vous rendre la vie plus facile.

Les fondamentaux du Back End

Sur des sites plus complexes, les technologies front-end qui interagissent directement avec les utilisateurs deviennent un moyen de fournir une expérience personnalisée. Lorsque les utilisateurs visitent ces sites, chacun reçoit une expérience légèrement différente en fonction des données stockées par ces sites. Pour des quantités massives d'informations, il est impossible de coder manuellement chaque page en utilisant uniquement du HTML, CSS et JavaScript. Cela signifie qu’il faut utiliser une base de données pour gérer le taux d'informations envoyé à l'utilisateur. C’est une étape primordiale pour commencer à comprendre comment les bases de données devinrent le fondement de la programmation.

Les développeurs Web ont besoin de comprendre les bases de données, la façon dont elles gèrent les informations des utilisateurs, et les langages de programmation qui utilisent et affichent du contenu basé de ces données. L'ensemble des outils que chaque entreprise utilise varie beaucoup. Chaque entreprise choisit ce qui fonctionnera le mieux pour eux. Parce que ces langages ne sont pas connectés à ce que le visiteur voit, il y a beaucoup plus de choix ici. Les nouveaux développeurs web ont besoin d'étudier au moins l'une des plates-formes de développement Back End, et au moins un langage de traitement des données.

Et si je devais choisir un seul ensemble à apprendre, ce serait la combinaison de PHP et SQL. Cette combinaison est de loin la plus populaire. Malgré tout, connaître uniquement ces deux langages va limiter les endroits où vous pourrez travailler et les missions qui vous seront proposées. Donc, commencez par PHP et ensuite explorez quelques-unes des autres options comme Node.js, .NET, ou Ruby on Rails. C’est important d'être polyvalent lorsque vous êtes débutant, mais une fois que vous allez avoir de l’expérience, il sera encore plus important ( et cela paiera plus ) de se spécialiser dans un seul environnement où vous deviendrez un expert capable de faire des choses compliquées dans votre technologie de prédilection.

Le Back-End est un autre domaine en évolution rapide ; les outils avec lesquels vous travaillez vont également passer par des mises à jour régulières. Maintenant, des approches novatrices et des technologies en constantes évolutions laissent les développeurs en apprentissage permanent, ce qui boost leur compétitivité et leur efficacité. C’est aussi cela qui fait du développement back-end une carrière excitante.

Les serveurs

Lorsque vous accédez à un site Web, une machine éxécutant un logiciel spécial envoie le contenu à votre navigateur. Ces machines sont appelés serveurs parce qu'ils desservent des informations. Basiquement, elles servent à envoyer le code HTML, CSS, JavaScript et les fichiers qu'un utilisateur demande. Le serveur est également en charge de la gestion de l'interaction entre les données et la façon dont les données sont présentées à l'utilisateur. Un serveur construit souvent des pages qui sont personnalisés en fonction des différents paramètres que les développeurs Web contrôlent.

La plupart des grands sites font ceci grâce au logiciel qui gère l’organisation de contenu en cours d'exécution. Les développeurs back-end ou full-stack sont en charge de la construction et de l'entretien de ces systèmes. Les développeurs Front End, d'autre part, pourraient gérer le design et aider à créer les fonctionnalités de ces pages.

On trouve toute une variété de formes, de tailles de serveurs fonctionnants avec différents systèmes d’exploitation. Encore une fois en tant que développeur web, vous devez avoir une expérience avec au moins une de ces machines et au moins un de ces systèmes d’exploitation, mais toujours dans le but de devenir plus compétitif, vous pouvez explorer plus d'une solution, être polyvalent, et ensuite vous spécialiser.

Après avoir maîtrisé l'une de ces plates-formes, l'apprentissage de nouvelles technologies est comme l'apprentissage des différents langages. Chaque langage utilise une syntaxe différente pour expliquer les mêmes concepts. Une fois que vous en apprenez un, le passage à un autre langage est juste une question d’apprentissage d'une nouvelle série de commandes.

Certaines plates-formes fonctionnent avec des systèmes spécifiques, et il y a deux choix principaux, Windows et Linux. Linux est plus fréquent et moins coûteux, tandis que les serveurs Windows sont populaires auprès des grandes entreprises. Microsoft est célèbre pour le développement de grands environnements et d’utilitaires, et a adopté un grand nombre de projets open source. Pour autant on considère l’environnement Microsoft comme un environnement assez couteux. Linux, d'autre part, est entièrement open source et est soutenu par une communauté active de développeurs.

À moins que vous vous spécialisiez dans le back-end, vous n’aurez pas besoin de faire grand-chose avec le serveur lui-même. Cependant, il peut encore être utile de comprendre certains des concepts et appréhender des outils. Une bonne façon de commencer avec ceci est d'installer une version locale d'un serveur PHP et d’un serveur MySQL dans votre propre poste de travail. Des articles sur l’installation d’Apache, de MySQL et de PHP pourraient vous aider à démarrer votre apprentissage. Sur Windows il est facile d’installer de tels serveurs en local grâce à des logiciels comme WAMP ou XAMPP. Sur Mac, un équivalent serait MAMP.

Si vous voulez explorer une autre option, en utilisant Node.js comme serveur, vous pouvez jeter un oeil sur des articles traitant de la construction d’un site web avec Node.js et Express.js. Si le back-end devient votre spécialité, vous serez amenés à effectuer des missions telles que la mise en place des bases de données, la création d'utilisateurs, l'optimisation des performances, la gestion des accès, la sécurité, ainsi que la maintenance

Les langages de script côté serveur

Les développeurs back-end travaillent avec un autre type de langage que l’on appelle langage de script côté serveur (ou simplement langage serveur). Comme son nom l'indique, cela signifie travailler sur du code qui fonctionne directement sur un serveur. Ce code gère les données sur le serveur et le convertit en informations que le navigateur peut afficher. C’est probablement l'un des plus grands domaines de différenciation entre les développeurs. Bien qu'il existe de nombreuses plates-formes différentes, ils font essentiellement tous la même chose. Comme vous apprenez le développement web, il est important d'avoir une expérience dans plus d'une de ces plates-formes afin que vous puissiez trouver celle que vous voulez maîtriser.

Les principaux langages de script côté serveur sont PHP, NodeJS, .NET, ASP.NET, Ruby, ainsi que Python. Maintenant, certains d'entre eux sont liés à un type spécifique de système d'exploitation du serveur. .NET, par exemple, est une plate-forme de serveur uniquement destiné aux serveurs Windows. Certains, comme PHP, peuvent fonctionner sur tout système de plate-forme et d'exploitation, mais il y a quelques différences mineures dans la mise en œuvre sur la base du serveur. Je suggère de commencer avec le PHP.

Il est de loin la plate-forme la plus populaire et vous ouvrira plus de portes à vos débuts. NodeJS est une autre plate-forme populaire. Cette plateforme se travaille avec JavaScript comme langage de serveur. Si vous cherchez à travailler dans un environnement de serveur Windows, alors jetez un oeil à l’ASP.NET. Les langages de script serveur peut sembler un peu intimidant au début, mais ils accélérent vraiment votre façon de travailler avec des sites plus importants. Vous apprécierez ce que vous pouvez faire en ajoutant une de ces langues à votre boîte à outils.

Les langages de base de données

Afin de travailler avec des données en back-end, les développeurs web ont besoin de se familiariser avec une langue distincte qui permet à leur code d’effectuer des requêtes auprès des bases de données pour récupérer des informations. Selon le niveau où vous travaillez dans « le stack », vous aurez besoin de savoir comment accéder aux données et l'inclure à travers un langage côté serveur dans votre mise en page. Heureusement, il y a un peu de standardisation dans cet environnement. La plupart des serveurs utilisent une variante d'un système de gestion de base de données relationnelle ou SGBDR appelé Sequel, ou SQL. Ce langage fonctionne en créant une série de tableaux, comme des feuilles de calcul Excel, avec différents champs, qui peuvent se lier ensemble pour créer des relations entre les données.

Voilà pourquoi ils sont appelés relationnels. Les implémentations les plus populaires sont Oracle, MySQL, MS SQL et PostgreSQL. Cependant, comme avec beaucoup de choses sur le développement web, il y a d'autres méthodes populaires. Une des plus grandes est NoSQL. Alors que SQL encourage les développeurs à séparer les données en différentes tables, NoSQL permet des enregistrements sans structure spécifique.

Ceci est une façon très différente de faire les choses, mais c’est une méthode populaire et utilisés dans les langages de base de données, comme Big Table de Google, qui alimente des choses comme leur moteur de recherche, Google Analytics, Maps et Gmail.

D’autres langages populaires NoSQL existant sont par exemple MongoDB, Couch Base, et Couch DB. Maintenant, il y a encore d'autres mais apprenez moins le SQL, utilisez l'une des plates-formes NoSQL et vous aurez déjà un bon aperçu des langages de bases de données.

Conclusion

Nous avons donc vu dans cet article la différence entre les développeurs Full-Stack, Front-End et Back-End ainsi que les différents outils indispensables à maîtriser si vous voulez vous spécialiser dans l’une de ces branches de développement Web. Evidemment cet article présente les différents langages existant pour vous donner des pistes si vous souhaitez débuter dans le développement Web. Si celui-ci vous a orienté vers une spécialisation ou un type de langage je vous suggère de rechercher des articles sur SUPINFO traitant spécifiquement de ceci.

Pour ma part je vais poursuivre votre initiation au développement Web dans un prochain article dédié à l’apprentissage et à l’entrainement au développement. Je me concentrerai également sur les différents travails et missions concrètes des développeurs web dans un autre article.

J’espère que cet article vous a plu, qu’il vous aura donné envie de voir les prochains et surtout de devenir un développeur web !

A propos de SUPINFO | Contacts & adresses | Enseigner à SUPINFO | Presse | Conditions d'utilisation & Copyright | Respect de la vie privée | Investir
Logo de la société Cisco, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société IBM, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sun-Oracle, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Apple, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sybase, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Novell, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Intel, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Accenture, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société SAP, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Prometric, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Toeic, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo du IT Academy Program par Microsoft, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management

SUPINFO International University
Ecole d'Informatique - IT School
École Supérieure d'Informatique de Paris, leader en France
La Grande Ecole de l'informatique, du numérique et du management
Fondée en 1965, reconnue par l'État. Titre Bac+5 certifié au niveau I.
SUPINFO International University is globally operated by EDUCINVEST Belgium - Avenue Louise, 534 - 1050 Brussels