C'est quoi le frontend ?

Cet article est l'épisode 2 de la mini-série "Comment fonctionne une web-application".

Tu n'as pas lu le premier épisode "comment on communique sur le web" ou si tu n'es pas à l'aise avec  les concepts, je te conseille de lire les épisodes dans l'ordre 😊.

Et sinon,

let's goooo ! 💥

On a vu précédemment que le navigateur est un client HTTP qui te permet de faire des requêtes à un serveur web.

En fait un navigateur tu t'en doutes ce n'est pas seulement un client http. Il permet également trois choses très importantes:

• t'afficher le contenu de la page web
• enregistrer des informations sur ton ordinateur
• exécuter du code présent dans la page web

Du coup il y a quelques points à éclaircir ...

De quoi est composé une page web ?

Une page web est composée de contenu structuré. C'est-à-dire qu'une page web contient du contenu comme du texte ou des images, mais que ce contenu n'est pas affiché n'importe comment.

Je rappelle que le contenu de la page web est lu par une machine (votre navigateur). Nous les humains on a un truc que les machines n'ont pas, c'est la notion de contexte. Et une machine telle qu'un navigateur n'a aucunes notions de contexte.

Exemple:

Je suis écrit en gras donc je dois certainement être un titre

Je suis du contenu pas écrit en gras en dessous d'un texte écrit en gras donc je dois probablement parler de manière plus détaillée de ce que dit le truc en gras au dessus, ce qu'on appelle paragraphe.

Cette analyse, une machine telle qu'un navigateur n'est pas capable de la faire. Donc pour que le navigateur sache quel est le titre de la page il faut lui dire précisément:

Le début du titre de la page c'est ici -> Je suis un titre <- fin du titre de la page.

Et bé c'est exactement comme ça que ça s'écrit sur le web:

<title> Je suis le titre </title>

Donc t'as capté, on ouvre une balise indiquant quelle est la nature du contenu qui est dedans, puis quand le contenu est fini on ferme la balise.

C'est tout le sens des langages de balisage. Ils ont la capacité de donner des particularités à du texte selon les balises qui l'entourent. Cela permet aux machines de pallier leur incapacité à contextualiser.

Et le langage qui définit la structure des pages web, c'est le HTML ou Hyper Text Markup Language. Et en frenchie Markup language se traduit par langage de balisage.

Des exemples de balises HTML

• <h1> - balise utilisée pour définir un titre d'une section de ton contenu. Le h vient de header. Tu as ensuite des sous-titres de moins en moins importants avec h2 , h3, h4 etc..
• <p> - balise pour délimiter un paragraphe simple
• <img> - balise qui permet d'insérer une image

etc...

Donc une page html ça ressemble en très simple à ça:

<title> Je suis le titre </title>

<h1> je suis le titre de la section </h1>
<p> et moi juste un bloc de texte absolument boring de paragraphe</p>

Et c'est donc grâce à cette syntaxe que ton navigateur t'affiche tes pages web correctement.

Sauf que jusque-là ça fait des pages structurées certes mais vilaines comme tout. Pas sûr que si ton site de e-commerce a la tronche de Wikipedia tu fasses un carton tu vois ? (fin peut-être avec tes affaires si t'es le designer du site, mais BREF t'as capté l'idée! )

On veut des pages web stylées ! 💎

Okok j'arrivhaaaaan !

Le HTML a été enrichi avec des fonctionnalités pour donner du style aux éléments. Par exemple:

<h1 style="color: blue"> Je suis un titre bleu </h1>

<p style="text-align: center"> Je suis un paragraphe avec du texte toujours aussi boring mais centré vertical hihi </p>

Bon là c'est assez basique, et nous on veut que ça claque. Tellement que des règles pour styler des éléments il y en a des milliers qui ont été créées, pour aligner en haut, à droite, en bas, donner de la couleur, souligner, faire des dégradés de couleur etc...

Tellement qu'un langage a été créé pour ça: le CSS - Cascading style sheet. En français on appelle ça des feuilles de style. C'est clairement un autre fichier qui vient avec le HTML de ta page. C'est une feuille dans laquelle tu vas pouvoir définir tout le style de ta page.

En gros tu vas pouvoir dire:

mon titre le plus important ( le <h1> ) je veux que sa taille de caractères ( en anglais font ) soit 36 et qu'il soit écrit en bleu, et aligné centré !

mon sous-titre ( <h2>) je veux qu'il soit en taille de caractère 18 et qu'il soit blanc.

Ces deux affirmations, dans du CSS ça va s'écrire comme ceci:

h1 { 
	font-size: 36;
    	font-color: blue;
    	text-align: center;
}

h2 {
	font-size: 18;
    	font-color: #fff; ( #fff = blanc )
}
	

Ok donc là on arrive à faire de l'affichage d'une page web stylée, c'est pas mal du tout! Mais c'est pas très ...

... interactif !

Des pages web interactives

Le web 1.0 c'est quand les pages web affichaient du contenu écrit par les personnes qui gèrent le site.

J'écris du contenu que je mets au format html -> je mets le site en ligne -> tu GET le fichier html de la page web, et ton navigateur te l'affiche.

C'est pas mal, mais on veut que le web soit interactif, qu'on puisse toustes participer à la discussion même si on ne gère pas le serveur web!

Et là c'est le web 2.0 💥. Un web sur lequel les users peuvent générer du contenu sans être derrière le serveur.

Pour ça il a fallu que les pages web ne se contentent pas d'afficher et de styler du contenu, il a fallu doter les pages web de la capacité à exécuter des actions.

La différence entre un langage de balisage et un langage de programmation

Le HTML n'est pas un langage qui permet de réaliser des actions.

C'est un langage de balisage, mais ce n'est pas un langage de programmation ( et c'est pas grave hein baby html tu as un grand rôle malgré ça ! ).

Un langage de programmation, c'est un langage de code qui permet de définir des actions.

Quand tu décris le fonctionnement de ta page web avec des verbes d'état, tu es sur du html / css. "mon titre est bleu et souligné".

Quand tu décris le fonctionnement de ta page web avec des verbes d'action, tu es sur un langage de programmation:

• Quand je clique sur ce bouton, la page me redirige vers mon compte
• Si je crée un compte, ma photo en haut à droite s'affiche automatiquement

Bon ok je ne te fais pas languir plus que ça. Le langage de programmation utilisé sur le web c'est le ( TOUDOUM! ) javascript !

Le langage de programmation du web: le javascript

Ce langage permet de décrire toutes les actions qui sont réalisées sur une page web. Tu te rappelles quand dans le premier article on a vu qu'on pouvait réaliser des requêtes http GET et POST pour échanger avec le serveur ? Et bien c'est le javascript qui gère ces requêtes.

Quand sur Linkedin tu veux mettre un commentaire, tu mets du texte dans un input, tu cliques sur "envoyer", et ensuite la page t'affiche le commentaire en dessous du post de Jean-Michel.

Pour gérer cet exemple, dans la page web de Linkedin, il y a du code javascript qui dit:

Quand l'utilisateur clique sur le bouton "envoyer" je vais faire les actions suivantes:

1. Je sélectionne le texte qui a été écrit par le user dans le formulaire

2. J'envoie une requête http POST au serveur de linkedin avec le texte que je viens de sélectionner

3. J'attends la réponse du serveur

4. Quand j'ai reçu la réponse du serveur je vérifie quel type de réponse j'ai reçu

5. Si j'ai reçu une réponse 200 OK je déclenche automatiquement les actions qui suivent:

6. Pour vérifier si un autre commentaire n'a pas été publié entre-temps, je fais automatiquement une requête GET sur le post Linkedin

7. Si un commentaire a été publié entre-temps je l'affiche au-dessus du commentaire que je viens d'envoyer. Sinon je n'affiche pas d'autre commentaire.

8. Et enfin j'affiche le commentaire que tu viens de poster.

Et là on se rend tout de suite compte que chaque action qui nous paraît extrêmement basique est en fait codée dans les moindres détails par un-e développeur-se, qui est un humain ( vraiment sûr ? ) comme un autre.

Bon, donc là on vient de comprendre qu'une page web est constituée:

• de HTML pour définir sa structure
• de CSS pour définir son style
• et de javascript pour définir les actions possibles!

Et par la même occasion on capte que le navigateur est loin de n'être qu'un client HTTP! c'est:

• un client HTTP qui envoie une requête GET pour récupérer tout le contenu de la page web ( le html, le css, et le javascript ).
• un logiciel qui lit à la fois le HTML et le CSS pour afficher la page
• mais aussi un logiciel dans lequel peut s'exécuter le code javascript qui a été téléchargé!

Et tout ça c'est ce qu'on appelle le frontend !

C'est tout le contenu d'une page web qui est téléchargé sur ton ordinateur et qui permet d'afficher des informations et réaliser des actions.

Tout ça est donc le fruit du travail des formidables personnes qui font le merveilleux job de développeur-euses frontend ! Et qui chaque jour pondent des lignes de code pour que notre web soit stylé, interactif, fluide et rapide.

Petit big-up à Sébastien mon acolyte frontend qui fait tout ce travail !

J'espère que cet article t'a plu! Pour continuer la mini-série, le prochain article:

C’est quoi la différence entre le frontend et le backend ?

En tant que user tu interagis toujours avec le frontend, jamais directement avec le backend. Le frontend est donc l’interface qui te permet de communiquer avec le backend.

Decode - by TancrèdeTancrède Simonin