📘 Frontend, javascript et React

Architecture frontend / backend

Lorsqu’on développe une application, on organise généralement le code en plusieurs parties distinctes pour le rendre plus clair et plus facile à maintenir. Deux architectures courantes sont :

• L’architecture MVC (Modèle-Vue-Contrôleur), souvent utilisée dans les applications monolithiques, où le code est structuré en trois couches :
  • Modèle : gère les données et leur stockage
  • Vue : affiche les informations à l’utilisateur
  • Contrôleur : fait le lien entre les deux, en traitant les actions de l’utilisateur

C’est notamment le cas pour les applications pour lesquelles on utilise du Server Side Rendering

• L’architecture frontend / backend, qui repose sur une séparation plus nette entre l’interface utilisateur et la logique métier. C’est cette approche que l’on retrouve dans la plupart des applications web modernes.

Dans une architecture frontend / backend, l’application est divisée en deux grandes parties :

• Le frontend : c’est la partie visible avec laquelle l’utilisateur interagit. Il comprend l’interface graphique (boutons, formulaires, animations, graphiques…) et gère l’affichage des données. Son rôle est de rendre l’expérience utilisateur fluide et intuitive.
• Le backend : c’est la partie cachée qui gère la logique métier et le stockage des données. Il reçoit les requêtes du frontend, effectue les traitements nécessaires (calculs, validation, enregistrement en base de données) et renvoie les résultats.

Dans les applications modernes, ces deux parties communiquent grâce à des API, qui définissent comment le frontend peut récupérer et envoyer des informations au backend.

Comment fonctionnent frontend et backend ensemble ?

Dans une application typique, le frontend et le backend interagissent de la manière suivante :

1. L’utilisateur effectue une action sur l’interface (par exemple, remplir un formulaire).
2. Le frontend envoie une requête HTTP à une API du backend (par exemple, une requête POST pour enregistrer des données).
3. Le backend traite la requête, effectue les vérifications nécessaires et stocke les informations en base de données.
4. Une réponse est envoyée au frontend (succès, échec, données mises à jour…).
5. Le frontend met à jour l’affichage en fonction de la réponse reçue.

Ce schéma repose souvent sur des opérations CRUD (Créer, Lire, Mettre à jour, Supprimer), qui permettent au frontend d’interagir avec la base de données via le backend.

Votre rôle en tant que futurs statisticiens

Dans un projet, les équipes se répartissent généralement les tâches :

• Les développeurs frontend conçoivent et optimisent l’interface utilisateur.
• Les développeurs backend s’occupent des traitements de données et de la mise en place des API.

En tant que statisticiens, vous serez souvent amenés à travailler sur le backend, en manipulant les données.

Introduction à React

Frameworks frontend

Pour faciliter le développement, on utilise des frameworks, qui sont des ensembles d’outils et de bonnes pratiques permettant de structurer le code et de gagner du temps.

• Côté frontend, des frameworks comme React.js, Angular ou Vue.js permettent de créer des interfaces interactives et dynamiques.
• Côté backend, des frameworks comme Spring Boot (Java) ou FastAPI (Python) facilitent la gestion des requêtes, des bases de données et de la logique métier.

React est une bibliothèque JavaScript open-source développée par Facebook. Elle est utilisée pour créer des interfaces utilisateur dynamiques et performantes. De nombreuses applications populaires comme Facebook, Messenger et Instagram reposent en grande partie sur cette technologie.

Il peut être difficile d’apprendre React en un seul cours, mais si cela vous intéresse, il existe de nombreux tutoriels simples et accessibles :

Le DOM et le Virtual DOM

Lorsqu’un navigateur charge une page web, il construit une représentation sous forme d’arbre appelée DOM (Document Object Model) à partir du HTML. Ce DOM est manipulable par l’utilisation du Javascript (C’est le cas par exemple pour les outils de développement des navigateurs, notamment l’onglet “Elements” dans les Developer Tools.)

React ne modifie pas directement ce DOM du navigateur. À la place, il créée et utilise un DOM virtuel (Virtual DOM), qui est une copie optimisée du DOM réel. Lorsque l’interface change, React compare le Virtual DOM avec l’ancien état, détecte les modifications nécessaires et met à jour uniquement les parties concernées du DOM réel. Cela permet d’améliorer considérablement les performances.

Le principe des composants

L’idée centrale de React est de construire une application à partir de composants. Un composant est un bloc réutilisable qui regroupe tout ce dont il a besoin :

• La structure (HTML)
• Le style (CSS)
• Le comportement (JavaScript)

Les composants suivent un cycle de vie composé de trois étapes : Mounting (ajout au DOM), Updating (mise à jour) et Unmounting (suppression du DOM). Leur comportement peut être modifié à chaque étape grâce aux hooks.

Un composant fonctionnel est simplement une fonction JavaScript qui retourne un élément React :

function MyComponent() {
    return <div>Hello ENSAI 👋</div>;
}

Ces composants :

• Encapsulent tout leur fonctionnement : structure, styles et comportement
• Sont réutilisables : on peut les utiliser plusieurs fois dans une même application
• Peuvent être imbriqués les uns dans les autres pour construire une interface complète

React permet donc de découper une interface en petits composants réutilisables et de les assembler pour construire des applications performantes.

React utilise le langage JSX, qui est une extension de JavaScript permettant d’intégrer une syntaxe similaire à HTML directement dans le code JavaScript.

Caractéristiques du JSX :

• Langage à balises : Comme le HTML, le JSX se compose de balises.
• Majuscule pour les composants : Pour que React reconnaisse un élément comme un composant, il est essentiel de commencer son nom par une majuscule. Sinon, React considérera qu’il s’agit d’une balise HTML standard.
• Encapsulation des composants : Lorsque vous utilisez plusieurs composants, ils doivent être enveloppés dans un seul composant parent.

Voici comment structurer plusieurs composants enfants à l’intérieur d’un composant parent :

function Parent() {
    return (
        <div>
            <Enfant />
            <Enfant />
            <Enfant />
        </div>
    );
}

function Enfant() {
    return <div>Je suis un enfant !</div>;
}

Ajouter du style à notre composant

Pour styliser notre composant, il suffit d’utiliser l’attribut className et d’indiquer le nom du sélecteur CSS correspondant.

Par exemple, si je souhaite que le texte “Hello ENSAI 👋” soit en rouge, je peux procéder comme suit :

Fichier nommé Titre.css

.helloensai {
  color: red;
}

Fichier contenant votre composant

import './Titre.css';

function MyComponent() {
    return <div className="helloensai">Hello ENSAI 👋</div>;
}

Le langage React est largement utilisé, et grâce à ça, il y a plein de bibliothèques de composants React prêtes à l’emploi. Elles permettent d’avoir un design harmonieux et vous font gagner un temps fou, car vous n’avez pas besoin de redéfinir chaque composant de base. En plus, elles proposent des options pour rendre votre application accessible à tous et vous donnent la possibilité de personnaliser les éléments selon vos besoins.

À l’INSEE, on utilise surtout la bibliothèque Material UI et le Design système de l’état - DSFR, mais il y a aussi d’autres choix comme Bootstrap ou Ant Design.

Un hook React

Les Hooks sont des fonctions qui permettent de « se brancher » sur la gestion de l’état local et du cycle de vie de React depuis des composants fonctionnels. React propose plusieurs Hooks prédéfinis, comme useState ou useEffect. Mais vous pouvez aussi créer vos propres Hooks pour réutiliser un comportement avec état dans différents composants.

Le hook d’état : useState

Imaginons que vous souhaitez que l’interaction avec l’utilisateur change le comportement de votre composant. Par exemple, si vous cliquez sur un bouton pour ouvrir la description, cela affichera la description de votre Pokémon. Inversement, si vous cliquez sur un bouton pour fermer la description, celle-ci sera masquée.

Pour cela, vous devez définir un hook d’état : ce hook permet d’enregistrer l’état de votre composant. Voici comment procéder dans votre composant :

import { useState } from "react";

function Pokemon() {
    const [isOpen, setIsOpen] = useState(false);
    return (
        <div>
            <h1>Dracaufeu</h1>
            {isOpen ? (
                <p>
                 Dracaufeu (anglais : Charizard ; japonais : リザードン Lizardon) est un Pokémon de type Feu et Vol de la première génération. C'est la mascotte des jeux Pokémon Rouge et Pokémon Rouge Feu.
                </p>
            ) : null}
            <button onClick={() => setIsOpen(!isOpen)}>
                {isOpen ? 'Fermer la description' : 'Ouvrir la description'}
            </button>
        </div>
    );
}

Cependant, la description et le nom du Pokémon sont écrits en dur. Pour réutiliser notre composant, nous allons utiliser les props.

Transmission Parent / Enfant : Props

Nous allons réécrire le composant comme suit :

import { useState } from "react";

function Pokemon({ nom, description }) {
    const [isOpen, setIsOpen] = useState(false);
    return (
        <div>
            <h1>{nom}</h1>
            {isOpen ? (
                <p>{description}</p>
            ) : null}
            <button onClick={() => setIsOpen(!isOpen)}>
                {isOpen ? 'Fermer la description' : 'Ouvrir la description'}
            </button>
        </div>
    );
}

Ensuite, dans un composant parent, nous ferons ceci :

import { useState } from "react";

const pokemonListJson = [
    {
        nom: "Dracaufeu",
        description:
            "Dracaufeu (anglais : Charizard ; japonais : リザードン Lizardon) est un Pokémon de type Feu et Vol de la première génération. C'est la mascotte des jeux Pokémon Rouge et Pokémon Rouge Feu.",
    },
    {
        nom: "Salamèche",
        description:
            "Salamèche (anglais: Charmander ; japonais: ヒトカゲ Hitokage) est un Pokémon de type Feu de la première génération. C'est l'un des Pokémon de départ de la région de Kanto.",
    },
];

function PokemonList() {
    return (
        <div>
            <h1>Liste des Pokémon</h1>
            {pokemonListJson.map((pokemon, index) => (
                <Pokemon key={index} nom={pokemon.nom} description={pokemon.description} />
            ))}
        </div>
    );
}

Dans notre composant PokemonList, nous affichons tous les Pokémon présents dans la liste pokemonListJson. Bien sûr, l’objectif est d’afficher tous les Pokémon que nous recevrons dans un appel à l’API, mais nous aborderons cela plus tard.

Les props (properties) sont des paramètres que tu passes à un composant pour lui fournir des données dynamiques. Elles permettent de rendre les composants réutilisables et configurables. Les props sont passées comme des attributs HTML à un composant dans son coposant parent.

Si nous voulons utiliser l’état d’un composant dans un autre, nous appliquerons la méthode consistant à définir l’état dans le premier composant parent commun aux deux composants. Nous descendrons ensuite l’état et la méthode de changement jusqu’aux composants qui en ont besoin.

Le hook de synchronisation: useEffect

Le hook useEffect est utilisé pour effectuer des effets de bord dans les composants fonctionnels de React. Ce hook vous permet d’exécuter du code après que le composant a été monté ou mis à jour, et même de nettoyer les effets lorsque le composant est démonté.

Voici un exemple simple d’utilisation du hook useEffect. Imaginons que nous voulons récupérer des données d’une API lorsque le composant est monté.

import React, { useState, useEffect } from "react";
import axios from "axios";

function PokemonList() {
    const [pokemons, setPokemons] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchPokemons = async () => {
            try {
                const response = await axios.get("https://api.example.com/pokemons");
                setPokemons(response.data);
            } catch (error) {
                // On récupère le code d'état et le message d'erreur
                const errorMessage = error.response
                    ? `Erreur ${error.response.status}: ${error.response.data.message || "Erreur inconnue"}`
                    : "Erreur de réseau";
                setError(errorMessage);
            } finally {
                setLoading(false);
            }
        };

        fetchPokemons();
    }, []);  // Le tableau vide signifie que l'effet ne s'exécute qu'une fois, lors du premier rendu.

    if (loading) {
        return <p>Chargement des Pokémon...</p>; // Affichage pendant le chargement
    }

    if (error) {
        return <p>{error}</p>; // Affichage du message d'erreur
    }

    return (
        <div>
            <h1>Liste des Pokémon</h1>
            <ul>
                {pokemons.map((pokemon) => (
                    <li key={pokemon.id}>{pokemon.nom}</li>
                ))}
            </ul>
        </div>
    );
}

La méthode fetchPokemons() est une fonction asynchrone qui récupère la liste des Pokémon depuis une API en utilisant Axios. Elle utilise un bloc try-catch pour gérer les erreurs de requête. Si la requête réussit, elle met à jour l’état pokemons avec les données récupérées. En cas d’erreur, elle définit un message d’erreur dans l’état error. Enfin, elle met à jour l’état loading à false dans tous les cas, indiquant que le chargement est terminé. Cette méthode est appelée lors du premier rendu du composant PokemonList.

Client HTTP : Axios

Axios est à JavaScript ce que requests est à Python. Il s’agit d’un client HTTP, comme expliqué dans le cours 🌐 API webservices et HTTP, FastAPI..

C’est une bibliothèque asynchrone, parmi d’autres comme fetch. Cependant, Axios est souvent préféré à fetch en raison de sa gestion automatique des requêtes et des réponses, de la possibilité d’annuler des requêtes, et de sa simplicité d’utilisation pour la configuration des en-têtes et des paramètres.

Remarque: Les principes de conception logicielle s’appliquent toujours en javascript, il vous faudra externaliser et centraliser la configuration des urls

Par exemple, pour une application utilisant VITEJS dans votre fichier .env, vous pourrez ajoutez la ligne suivante :

Nous nous intéresserons a ViteJS dans une partie suivante

VITE_API_URL=https://api.example.com

Les variables d’environnement doivent commencer par VITE_ pour être exposées à votre code client.

import axios from 'axios';

const apiUrl = import.meta.env.VITE_API_URL;
export default axios.create({
  baseURL: apiUrl
});

import API from './api';

const response = await axios.get("https://api.example.com/pokemons");

const response = await API.get("pokemons");

Créer votre application React

Maintenant que vous avez découvert les concepts fondamentaux de ReactJS, voyons comment mettre en place votre première application React.

Utilisation d’un outil de build : Vite.js

Dans un projet React, on ne code pas directement en JavaScript “brut”, car on utilise des fonctionnalités modernes comme le JSX et les modules ES. Pour cela, il est essentiel d’avoir un outil de développement qui facilite la création et l’exécution du projet.

Un tel outil doit permettre de :

• Lancer un serveur local pour voir les modifications en temps réel pendant le développement.
• Transformer et optimiser le code pour qu’il soit compatible avec tous les navigateurs.
• Gérer les imports de fichiers (CSS, images, etc.).
• Accélérer le chargement des modules et améliorer l’expérience des développeurs avec le rechargement automatique.

Plutôt que de tout configurer manuellement, les développeurs utilisent des outils packagés qui simplifient la gestion des dépendances et optimisent le rendu de l’application. Parmi eux, Vite.js est particulièrement apprécié pour sa rapidité et sa simplicité. Il est d’ailleurs largement utilisé à l’Insee. D’autres alternatives existent, comme Create React App ou Next.js.

Exécution du code JavaScript avec Node.js

JavaScript s’exécute normalement dans un navigateur. Cependant, pour développer des applications modernes, il est nécessaire d’avoir un environnement capable d’exécuter JavaScript en dehors du navigateur : Node.js.

Node.js repose sur le moteur V8 de Google Chrome et permet d’exécuter du code JavaScript directement sur votre machine, comme un langage de programmation classique.

Pourquoi a-t-on besoin de Node.js ?

• Il permet de lancer un serveur de développement pour exécuter l’application en local (Vite en a besoin pour fonctionner).
• Il facilite l’installation et la gestion des bibliothèques via npm (Node Package Manager).

En production, un serveur statique est généralement utilisé pour héberger l’application. Il sert uniquement les fichiers générés (HTML, CSS et JavaScript) qui seront exécutés directement dans le navigateur.

Gestion des dépendances avec npm

Comme pip pour Python, npm (Node Package Manager) est le gestionnaire de paquets de Node.js. Il permet d’installer, gérer et partager des modules JavaScript utilisés dans votre projet.

Installation de Node.js et NPM

Sur une distribution Linux (Debian/Ubuntu) :

sudo apt uninstall node npm
sudo apt install curl && curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
source ~/.bashrc
nvm install v22
node -v
npm -v

Installation de Vite.js

Préambule, utilisation de npm :

La commande npm install va installer toutes les dépendances nécessaires à ton projet. Il est important de noter que, lorsque tu versionnes ton projet avec Git, tu dois absolument ajouter ce dossier dans fichier .gitignore pour éviter d’envoyer les fichiers inutiles sur ton dépôt :

node_modules

La syntaxe est :

npm install <package>

Procédure d’installation d’un projet Vite.js

Pour installer Vite.js, il suffit de lancer cette commande dans le terminal :

npm install -g create-vite

Ensuite, pour démarrer un projet avec Vite.js, vous pouvez suivre ces étapes :

npm create vite@latest mon-projet
cd mon-projet
npm install

Pour lancer l’application localement après l’installation, utilise cette commande :

npm run dev

Ton application sera accessible à l’adresse http://localhost:5173/, et elle se rechargera automatiquement à chaque modification.

Si tu veux tester ton application en mode production, tu peux lancer les commandes suivantes :

npm run build
npm run preview

Ton application sera alors accessible à l’adresse http://localhost:5173/.

Détails des fichiers et dossiers générés par Vite.js

• index.html : C’est le fichier HTML de base qui est chargé dans le navigateur. Il contient généralement les liens vers les fichiers JavaScript et CSS de ton projet.

• package.json : Il contient toutes les informations importantes sur ton projet, comme les dépendances (voir semantic-versionning), les scripts pour démarrer et construire ton application, etc. C’est aussi là où tu ajoutes des bibliothèques supplémentaires.

• package-lock.json : Il contient toutes les informations sur les librairies utilisées lors d’une installation, permet de sanctuariser un ensemble de versions de package correspondant a la demande et qui permet de faire fonctionner l’application.

• README.md : Un fichier pour expliquer ton projet, comment l’utiliser et quelles sont ses fonctionnalités.

• src/ : Ce dossier contient tout le code source de ton application. C’est là que tu vas créer tes composants, ajouter tes styles, et gérer toute la logique de ton application.

• main.jsx : Le point d’entrée de ton application. Il va initialiser ton application et y monter le composant principal dans le DOM.

• App.jsx : Le composant principal qui définit la structure de ton interface utilisateur.

• public/ : Ce dossier contient les fichiers statiques accessibles directement via l’URL de ton application.

• vite.config.js : Ce fichier te permet de personnaliser la configuration de Vite pour ton projet. Tu peux y ajouter des plugins ou définir des options de build.

• node_modules/ : Ce dossier contient toutes les dépendances installées. Il est automatiquement généré par npm et ne doit pas être modifié manuellement.

Organiser les composants dans ton projet

Si tu veux ajouter des composants à ton projet, tu peux les organiser dans le dossier src/component/. Par exemple, ton projet pourrait ressembler à ceci :

mon-projet/
.
.
.
├── src/
│   ├── component/
│   │   ├── MonComposant1.jsx
│   │   ├── MonComposant2.jsx
│   ├── styles/
│   │   ├── MonComposant1.css
│   │   ├── MonComposant2.css
│   ├── main.jsx
│   └── App.jsx
.
.
.

Cela te permet de bien structurer ton projet au fur et à mesure que tu ajoutes des composants et des styles.

Utiliser des composants déjà constitués : Material.ui

Material UI est une bibliothèque de composants déjà conçus. Ils permettent de fournir un ensemble déjà construit d’éléments d’affichage qui contiennent déjà des éléments de style, d’accessibilité, de customisation.

Cette bibliothèque permet également de configurer un theme global au projet, ce qui centralise la gestion du style dans votre projet plutôt que de la déléguer a chaque sous composant. Vous pouvez également créer vos propres composants en utilisant des composants fils déjà très développés, les composants MUI.

Si vous souhaitez utiliser Material UI dans votre projet, vous pouvez l’ajouter :

npm install @mui/material @emotion/react @emotion/styled

Cela va mettre à jour votre fichier package.json pour inclure les nouvelles dépendances.

Linter, Formatter : ESLint Prettier

Linter

Nous vous préconisons d’utiliser le linter ESlint. Il s’agit d’un Linter pour le développement JS.

Il se configure a l’aide d’un fichier de configuration .eslintrc.

Dans une application vite.js:

npm install vite-plugin-eslint --save-dev

Une fois installé, il s’applique sur le projet côté serveur.

Pour les contrôles en ligne de commande, et via CI/CD :

npx eslint

Formatter

Nous vous préconisons d’utiliser le formatter Prettier. Il s’agit d’un Formatter pour le développement JS.

Il s’installe via npm :

npm install --save-dev --save-exact prettier

Une fois installé, vous pouvez configurer votre vscode pour l’utiliser via l’extension Prettier.

Pour les contrôles en ligne de commande, et via CI/CD :

npx prettier .