> ## Documentation Index
> Fetch the complete documentation index at: https://docs.arkatech.fr/llms.txt
> Use this file to discover all available pages before exploring further.

# Fondamentaux du web

> Le Frontend englobe toutes les technologies et pratiques qui régissent ce que l'utilisateur voit et avec quoi il interagit. Il est construit sur trois piliers fondamentaux : Structure, Comportement et Présentation.

Le navigateur exécute et interprète trois langages principaux :

| **Langage**                          | **Rôle**         | **Description**                                                                                                         |
| :----------------------------------- | :--------------- | :---------------------------------------------------------------------------------------------------------------------- |
| **HTML (HyperText Markup Language)** | **Structure**    | Dé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ésentation** | Gère l'apparence, le style, la mise en page et l'ergonomie (couleurs, polices, positionnement, réactivité).             |
| **JavaScript (JS)**                  | **Comportement** | Ajoute 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.

| **Technologie** | **Type**             | **Fonctionnement et Avantages**                                                                                                                                                 | **Inconvénients**                                                                                            |
| :-------------- | :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :----------------------------------------------------------------------------------------------------------- |
| **React**       | Librairie UI         | Basé 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.js**      | Framework Progressif | Trè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.        |
| **Angular**     | Framework Complet    | ***Solution 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.                                          |

```typescript theme={null}
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 Template** | **Langage Backend**    | **Fonctionnement et Avantages**                                                                                                     | **Usage Typique**                                                 |
| :--------------------- | :--------------------- | :---------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------- |
| **Twig**               | PHP (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. |
| **Jinja**              | Python (Flask, Django) | Très similaire à Twig, populaire dans l'écosystème Python.                                                                          | Sites web et applications web traditionnelles en Python.          |
| **EJS / Handlebars**   | Node.js                | Utilisé 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*).

**<u>CSS Pure</u>**

```
.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;
}
```

**<u>CSS Pré-processé (SASS)</u>**

```
/* 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.

```typescript theme={null}
// 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>
  );
};
```