Skip to main content
Le navigateur exécute et interprète trois langages principaux :
LangageRôleDescription
HTML (HyperText Markup Language)StructureDéfinit la sémantique et la structure du contenu (titres, paragraphes, images, liens). C’est l’ossature de la page.
CSS (Cascading Style Sheets)PrésentationGère l’apparence, le style, la mise en page et l’ergonomie (couleurs, polices, positionnement, réactivité).
JavaScript (JS)ComportementAjoute de l’interactivité, de la logique côté client, et permet de manipuler dynamiquement le contenu de la page (DOM).

​
Frameworks et Librairies JavaScript (Le Comportement)

Dans les applications modernes (SPA ou SSR Isomorphe), le JavaScript est le moteur qui gère le rendu et la logique client.
TechnologieTypeFonctionnement et AvantagesInconvénients
ReactLibrairie UIBasé sur les composants (réutilisables), utilise un Virtual DOM pour optimiser le rendu et minimiser les manipulations directes du DOM réel, facilitant l’optimisation.Requiert souvent des outils supplémentaires (gestion d’état, routage) pour devenir une application complète.
Vue.jsFramework ProgressifTrès simple d’approche, se concentre sur l’approche déclarative. Peut être intégré progressivement à un projet existant.Moins utilisé dans les très grandes entreprises que React, bien que sa popularité croisse rapidement.
AngularFramework CompletSolution batteries-included (inclut routage, gestion d’état, CLI) pour les applications d’entreprise structurées. Utilise TypeScript par défaut.Grande courbe d’apprentissage, lourd pour les petites applications.
import React from 'react';

const ArticleCard = ({ titre, est_vedette }) => {
  return (
    <div className="card-article">
      <h2>{titre}</h2>
      {est_vedette && (
        <span className="badge">POPULAIRE</span>
      )}
    </div>
  );
};

export default ArticleCard;

​
Le Rendu Côté Serveur Traditionnel (Les Moteurs de Templates)

Avant l’ère des SPAs, ou dans le cas d’applications SSR complètes, le backend génère le HTML final en utilisant des Moteurs de Templates.
Moteur de TemplateLangage BackendFonctionnement et AvantagesUsage Typique
TwigPHP (Symfony)Syntaxe simple et lisible. Offre la sécurité par défaut (échappement automatique des variables) pour prévenir les attaques XSS.Applications monolithiques ou SSR traditionnelles basées sur PHP.
JinjaPython (Flask, Django)Très similaire à Twig, populaire dans l’écosystème Python.Sites web et applications web traditionnelles en Python.
EJS / HandlebarsNode.jsUtilisé pour générer du HTML dynamique côté serveur en JavaScript.Petits serveurs Node.js ou architecture hybride simple.
<h1>Articles Récents</h1>

{% for article in articles %}
    <div class="card-article">
        <h2>{{ article.titre }}</h2> 
        {% if article.est_vedette %}
            <span class="badge">POPULAIRE</span>
        {% endif %}
    </div>
{% endfor %}

​
Stratégies de Style (CSS)

La manière dont le CSS est organisé est cruciale pour la maintenabilité de la feuille de style.

​
Style Pré-processé (SASS/LESS) ou Pure CSS

  • Pure CSS : Écrire directement en CSS standard. Simple, pas de dépendance externe.
  • SASS / LESS (Pré-processeurs) : Ajoutent des fonctionnalités manquantes au CSS, comme :
    • Variables : Pour réutiliser des couleurs ou des tailles.
    • Mixins : Pour regrouper des blocs de styles réutilisables.
    • Imbrication : Pour structurer le CSS selon la hiérarchie du HTML.
    • Avantage : Rend le code CSS plus DRY (Don’t Repeat Yourself) et maintenable sur les grands projets.
  • Méthodes de Structuration : Des méthodologies comme BEM (Block-Element-Modifier) aident à nommer les classes pour améliorer la clarté et éviter les conflits de style (CSS specificity).
CSS Pure 
.card-article {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    position: relative;
}

/* Style du titre */
.card-article h2 {
    color: #333;
    font-size: 1.2em;
    margin-top: 0;
}

/* Style du badge "POPULAIRE" */
.badge {
    display: inline-block;
    background-color: #e74c3c;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 10px;
}
CSS Pré-processé (SASS) 
/* Définition des variables pour la réutilisation */
$couleur-bordure: #ccc;
$couleur-fond-primaire: #fff;
$couleur-vedette: #e74c3c;
$padding-base: 15px;

.card-article {
    border: 1px solid $couleur-bordure;
    border-radius: 8px;
    padding: $padding-base;
    margin-bottom: 20px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    background-color: $couleur-fond-primaire;
    position: relative;

    // Imbrication du style du titre
    h2 {
        color: #333;
        font-size: 1.2em;
        margin-top: 0;
    }

    // Imbrication du style du badge
    .badge {
        display: inline-block;
        background-color: $couleur-vedette;
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 0.8em;
        font-weight: bold;
        
        // Positionnement absolu
        position: absolute; 
        top: 10px;
        right: 10px;
    }
}

​
Utility-First (Exemple : Tailwind CSS)

  • Définition : Au lieu de créer des classes sémantiques personnalisées (.bouton-principal), on applique directement des classes utilitaires atomiques pour chaque propriété CSS (.bg-blue-500, .p-4, .rounded-lg).
  • Avantages : Vitesse de développement très élevée. Le style d’un composant est colocalisé (tout est dans le HTML). Petite taille de fichier final (le CSS est purgé des classes non utilisées).
  • Inconvénients : Le HTML devient très dense en classes, ce qui peut rendre la lecture du balisage plus difficile.
// Composant ArticleCard avec les classes Tailwind
const ArticleCard = ({ titre, est_vedette }) => {
  return (
    // Classes pour la carte :
    // border p-4 (border: 1px; padding: 1rem;)
    // rounded-lg (border-radius: 8px;)
    // shadow-md (box-shadow: moyenne)
    // bg-white (background-color: blanc)
    // mb-5 (margin-bottom: 1.25rem;)
    // relative (position: relative;)
    <div className="border border-gray-300 rounded-lg p-4 shadow-md bg-white mb-5 relative">
      <h2 className="text-gray-800 text-lg mt-0">{titre}</h2>
      
      {est_vedette && (
        // Classes pour le badge :
        // inline-block (display: inline-block;)
        // bg-red-600 (background-color: rouge vif)
        // text-white (color: blanc)
        // px-2 py-1 (padding horizontal/vertical)
        // text-xs font-bold (taille de police et gras)
        // absolute top-2 right-2 (position: absolute; top: 0.5rem; right: 0.5rem)
        <span className="inline-block bg-red-600 text-white px-2 py-1 rounded text-xs font-bold absolute top-2 right-2">
          POPULAIRE
        </span>
      )}
    </div>
  );
};