Advanced Ecosystem 76 termes

Authentification multi-facteurs combinant quelque chose que l'utilisateur sait (mot de passe), possède (téléphone/clé) ou est (biométrie). Réduit drastiquement les compromissions.

Entrer dans un coffre-fort de banque avec une clé ET un code : voler l'un sans l'autre est inutile.

import { authenticator } from 'otplib';
const secret = authenticator.generateSecret();
const qrUrl = authenticator.keyuri(user.email, 'MyApp', secret);
// Verification
const isValid = authenticator.verify({
  token: userInput, secret: user.totpSecret
});

Cas d'usage : Ajouter une couche de sécurité obligatoire pour les comptes admin et les opérations sensibles.

Service SaaS de recherche instantanée avec typo-tolerance, facettes et analytics intégrés. Offre des widgets UI prêts à l'emploi (InstantSearch).

Un moteur de recherche Google clé en main pour votre propre site, avec résultats en moins de 50ms.

import algoliasearch from 'algoliasearch';
const client = algoliasearch('APP_ID', 'SEARCH_KEY');
const index = client.initIndex('products');
const { hits } = await index.search('iphone', {
  filters: 'price < 1000',
  hitsPerPage: 20,
});

Cas d'usage : Ajouter rapidement une recherche performante sur un site e-commerce ou une documentation.

Bonnes pratiques de gestion des clés API : génération sécurisée, stockage hashé côté serveur, rotation régulière, scoping des permissions et révocation.

Des clés de voiture numérotées avec un registre : on sait qui a quelle clé, on peut la désactiver à distance.

const apiKey = `sk_live_${crypto.randomBytes(32).toString('hex')}`;
// Store only hash in DB
const hash = crypto.createHash('sha256').update(apiKey).digest('hex');
await db.insert({ hash, userId, permissions: ['read'], expiresAt });

Cas d'usage : Fournir un accès programmatique à votre API avec traçabilité et contrôle granulaire.

Ensemble de techniques pour empêcher les attaques par force brute sur l'authentification : lockout progressif, CAPTCHA, délai exponentiel entre les tentatives.

Un coffre-fort qui ajoute 10 secondes d'attente supplémentaires après chaque mauvais code, rendant le crochetage impraticable.

const attempts = await getLoginAttempts(email);
if (attempts > 5) {
  const delay = Math.pow(2, attempts - 5) * 1000;
  await sleep(delay); // Exponential backoff
}
if (attempts > 10) {
  requireCaptcha(req);
}

Cas d'usage : Protéger les formulaires de login et de reset de mot de passe contre les attaques automatisées.

Réseau de serveurs géographiquement distribués qui cache et sert le contenu statique au plus près des utilisateurs. Réduit la latence et décharge le serveur d'origine.

Des boulangeries de quartier qui stockent le pain cuit à la boulangerie centrale : plus besoin de traverser la ville.

// Next.js with CDN headers
export async function GET() {
  return new Response(data, {
    headers: {
      'Cache-Control': 'public, s-maxage=3600, stale-while-revalidate=86400',
    },
  });
}

Cas d'usage : Servir les assets statiques, images et API réponses cachées avec latence < 50ms mondiale.

Workflow lancé depuis un autre Workflow parent dans Temporal. Permet la décomposition de processus complexes et l'isolation des échecs.

Un manager qui délègue une sous-tâche à un employé tout en continuant son propre travail.

async function parentWorkflow(orders) {
  const handles = orders.map(order =>
    startChild(processOrderWorkflow, { args: [order] })
  );
  return Promise.all(handles.map(h => h.result()));
}

Cas d'usage : Traiter en parallèle plusieurs sous-processus indépendants tout en gardant un contrôle centralisé.

Deux approches de coordination de services. Orchestration : un chef centralisé dirige (Temporal). Chorégraphie : chaque service réagit aux événements des autres (event-driven).

Orchestre symphonique (chef d'orchestre dirigeant chaque musicien) vs danse de salon (chaque danseur réagit aux mouvements du partenaire).

// Orchestration (centralized)
await paymentService.charge(order);
await inventoryService.reserve(order);
await shippingService.ship(order);
// Choreography (event-driven)
eventBus.emit('order.created', order);
// Each service listens and reacts independently

Cas d'usage : Choisir orchestration pour les workflows critiques avec compensation, chorégraphie pour le découplage maximal.

Algorithmes de compression HTTP réduisant la taille des transferts. Brotli offre 15-20% de compression en plus que gzip et est supporté par tous les navigateurs modernes.

Aspirer l'air d'un sac sous vide avant de l'envoyer par la poste pour réduire les frais de port.

// Express with compression
import compression from 'compression';
app.use(compression({ level: 6 }));
// Nginx config
gzip on;
brotli on;
brotli_types text/html application/javascript text/css;

Cas d'usage : Réduire de 60-80% la taille des transferts HTTP pour les fichiers texte (JS, CSS, HTML, JSON).

En-tête HTTP qui restreint les sources autorisées pour les scripts, styles, images et autres ressources. Principale défense contre les attaques XSS.

Une liste blanche à l'entrée d'un club VIP : seules les sources approuvées peuvent entrer et s'exécuter.

// CSP Header
Content-Security-Policy:
  default-src 'self';
  script-src 'self' 'nonce-abc123';
  style-src 'self' 'unsafe-inline';
  img-src 'self' https://cdn.example.com;
  connect-src 'self' https://api.example.com;

Cas d'usage : Empêcher l'exécution de scripts malicieux injectés dans la page (XSS, injection de publicités).

Mécanisme Temporal qui termine un Workflow et en démarre un nouveau avec un historique frais. Évite la croissance illimitée de l'historique d'événements.

Commencer un nouveau carnet quand l'ancien est plein, en notant juste le résumé de la dernière page.

async function pollingWorkflow(state) {
  for (let i = 0; i < 100; i++) {
    state = await pollExternal(state);
  }
  await continueAsNew(state);
}

Cas d'usage : Maintenir des Workflows de longue durée (polling, monitoring) sans dépasser la limite d'historique.

Les attributs de sécurité des cookies : httpOnly empêche l'accès JavaScript (anti-XSS), secure exige HTTPS, sameSite protège contre le CSRF.

Un coffre-fort avec trois serrures : une contre le vol numérique, une contre l'espionnage réseau, une contre la tromperie.

res.cookie('session', token, {
  httpOnly: true,   // No JS access
  secure: true,     // HTTPS only
  sameSite: 'lax',  // CSRF protection
  maxAge: 3600000,  // 1 hour
  path: '/',
});

Cas d'usage : Stocker des tokens d'authentification de manière sécurisée dans le navigateur.

Trois métriques Google mesurant l'expérience utilisateur : LCP (temps d'affichage du plus grand élément), INP (réactivité aux interactions), CLS (stabilité visuelle).

Les 3 notes d'un restaurant : rapidité du service (LCP), réactivité du serveur (INP), stabilité de la table (CLS).

// Measure with web-vitals library
import { onLCP, onINP, onCLS } from 'web-vitals';
onLCP(({ value }) => analytics.send('LCP', value));
onINP(({ value }) => analytics.send('INP', value));
onCLS(({ value }) => analytics.send('CLS', value));
// Good: LCP<2.5s, INP<200ms, CLS<0.1

Cas d'usage : Monitorer et optimiser l'UX mesurable pour améliorer le SEO et la satisfaction utilisateur.

Mécanisme de sécurité navigateur qui bloque les requêtes cross-origin. Les requêtes non-simples déclenchent un preflight OPTIONS pour vérifier les permissions du serveur.

Avant de livrer un colis international, le douanier appelle le destinataire pour vérifier qu'il attend bien ce paquet.

import cors from 'cors';
app.use(cors({
  origin: 'https://myapp.com',
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  credentials: true,
  maxAge: 86400, // Cache preflight 24h
}));

Cas d'usage : Configurer une API backend pour accepter les requêtes du frontend déployé sur un autre domaine.

Exécution de code côté serveur au plus près de l'utilisateur sur un réseau distribué de points de présence (PoP). Réduit la latence de 100-300ms à 10-50ms.

Des guichets de banque dans chaque quartier au lieu d'un seul siège en centre-ville.

// Cloudflare Worker
export default {
  async fetch(request) {
    const country = request.cf?.country;
    const cached = await caches.default.match(request);
    if (cached) return cached;
    const response = await fetch(request);
    return response;
  },
};

Cas d'usage : Personnalisation géographique, auth validation, A/B testing et cache API au plus près des utilisateurs.

Moteur de recherche distribué basé sur Lucene, optimisé pour la recherche full-text, l'analyse de logs et l'agrégation de données à grande échelle.

Un bibliothécaire surpuissant qui retrouve n'importe quel livre en millisecondes parmi des millions.

const results = await client.search({
  index: 'products',
  body: {
    query: { multi_match: {
      query: 'chaussure running',
      fields: ['name^3', 'description'],
      fuzziness: 'AUTO'
    }}
  }
});

Cas d'usage : Recherche produit e-commerce, analyse de logs (ELK stack), moteur de suggestions.

Frameworks pour créer des emails HTML responsives. MJML utilise un langage de balisage dédié, React Email utilise des composants React transpilés en HTML compatible email.

Un moule à gâteau pour emails : vous choisissez la forme, le contenu s'adapte automatiquement à tous les fours (clients email).

// React Email component
import { Html, Button, Text } from '@react-email/components';
export function WelcomeEmail({ name, url }) {
  return (
    <Html>
      <Text>Bienvenue {name} !</Text>
      <Button href={url}>Confirmer</Button>
    </Html>
  );
}

Cas d'usage : Créer des emails professionnels responsives compatibles Outlook, Gmail et Apple Mail.

Système de filtrage dynamique qui affiche les catégories disponibles avec leur nombre de résultats, permettant un affinage progressif de la recherche.

Les filtres sur un site immobilier (prix, surface, ville) qui se mettent à jour selon les résultats disponibles.

const results = await index.search('laptop', {
  facets: ['brand', 'price_range', 'ram'],
});
// Returns: { brand: { Apple: 42, Dell: 38 }, ... }

Cas d'usage : Navigation produit e-commerce avec filtres dynamiques (marque, prix, taille, couleur).

Moment où le navigateur affiche le premier contenu visible (texte, image, SVG). Indique quand l'utilisateur perçoit que la page commence à charger.

Le moment où la première image apparaît quand on allume une vieille télévision à tube.

// Performance Observer for FCP
new PerformanceObserver((entries) => {
  const fcp = entries.getEntriesByName('first-contentful-paint')[0];
  console.log(`FCP: ${fcp.startTime}ms`); // Target: < 1.8s
}).observe({ type: 'paint', buffered: true });

Cas d'usage : Mesurer le temps de perception initial et identifier les blocages de rendu (CSS/JS bloquants).

Modèle mathématique avec un nombre fini d'états, de transitions entre ces états et d'événements déclencheurs. Le système ne peut être que dans un seul état à la fois.

Un feu tricolore : vert, orange ou rouge, jamais deux à la fois, et les transitions suivent un ordre strict.

// Simple FSM
const transitions = {
  green:  { TIMER: 'yellow' },
  yellow: { TIMER: 'red' },
  red:    { TIMER: 'green' },
};
function next(state, event) {
  return transitions[state]?.[event] ?? state;
}

Cas d'usage : Modéliser tout processus séquentiel avec des règles de transition strictes (UI, protocoles, workflows).

Techniques d'optimisation des polices web : subsetting (garder seulement les caractères utilisés), font-display:swap, preload et formats modernes (woff2).

Ne mettre dans sa valise que les vêtements qu'on va porter au lieu d'emporter toute la garde-robe.

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0000-00FF; /* Latin subset only */
}
/* Preload in HTML */
/* <link rel="preload" href="/fonts/inter-latin.woff2" as="font"> */

Cas d'usage : Réduire le FOUT/FOIT et le poids des polices pour améliorer le LCP et le CLS.

Technique de recherche qui analyse le contenu textuel complet des documents, avec tokenisation, stemming et scoring de pertinence, contrairement au simple LIKE SQL.

Chercher un livre non par son titre exact mais par les idées qu'il contient, même formulées différemment.

-- PostgreSQL full-text search
SELECT title, ts_rank(search_vector, query) AS rank
FROM articles,
  to_tsquery('french', 'développement & web') AS query
WHERE search_vector @@ query
ORDER BY rank DESC;

Cas d'usage : Recherche dans des articles, documentation ou descriptions produits avec pertinence linguistique.

Recherche approximative tolérant les fautes de frappe en calculant la distance d'édition (Levenshtein) entre le terme saisi et les termes indexés.

Un ami qui comprend 'javscript' quand vous vouliez dire 'javascript' grâce au contexte.

// Meilisearch fuzzy by default
const results = await index.search('javscrpt');
// Returns: 'JavaScript' (1 typo tolerance)
// Elasticsearch
{ query: { fuzzy: { name: { value: 'javscrpt', fuzziness: 2 } } } }

Cas d'usage : Offrir une expérience de recherche indulgente sur un site e-commerce ou une documentation.

Middleware Express qui configure automatiquement une dizaine d'en-têtes de sécurité HTTP (CSP, HSTS, X-Frame-Options, etc.) avec des valeurs saines par défaut.

Un casque de protection tout-en-un qui protège la tête sous tous les angles sans effort.

import helmet from 'helmet';
app.use(helmet({
  contentSecurityPolicy: {
    directives: {
      defaultSrc: ["'self'"],
      scriptSrc: ["'self'", "'nonce-abc'"],
    },
  },
}));

Cas d'usage : Appliquer les bonnes pratiques de sécurité HTTP en une seule ligne sur toute app Express.

Version majeure du protocole HTTP avec multiplexage (plusieurs requêtes sur une connexion), compression des headers (HPACK) et server push. Élimine le besoin de concaténation.

Une autoroute à plusieurs voies au lieu d'une route à voie unique avec feu de circulation.

// Nginx HTTP/2 config
server {
  listen 443 ssl http2;
  ssl_certificate /path/to/cert.pem;
  ssl_certificate_key /path/to/key.pem;
}
// Node.js
import http2 from 'node:http2';
const server = http2.createSecureServer({ cert, key });

Cas d'usage : Améliorer la performance de chargement en parallélisant les requêtes sans overhead de connexion.

Dernière version du protocole HTTP basée sur QUIC (UDP) au lieu de TCP. Élimine le head-of-line blocking, offre des handshakes 0-RTT et une meilleure performance mobile.

Passer de la route (TCP) à l'avion (QUIC) : plus de bouchons, connexion plus rapide et changement de réseau fluide.

// Nginx HTTP/3 (experimental)
server {
  listen 443 quic reuseport;
  listen 443 ssl;
  http3 on;
  add_header Alt-Svc 'h3=":443"; ma=86400';
}

Cas d'usage : Améliorer la latence sur les connexions mobiles instables et les réseaux à forte perte de paquets.

Protocole de chiffrement des communications web utilisant TLS. Garantit la confidentialité, l'intégrité et l'authenticité des échanges entre client et serveur.

Une enveloppe scellée et signée : personne ne peut lire le contenu ni le modifier en chemin.

// Force HTTPS redirect (Express)
app.use((req, res, next) => {
  if (req.header('x-forwarded-proto') !== 'https') {
    return res.redirect(301, `https://${req.hostname}${req.url}`);
  }
  next();
});

Cas d'usage : Obligatoire pour toute application en production, requis pour les cookies Secure et HTTP/2.

Conversion des images vers des formats modernes (WebP, AVIF) avec redimensionnement responsive. AVIF offre 50% de compression en plus que JPEG à qualité égale.

Compresser une valise avec des sacs sous vide : même contenu, moitié de place.

import sharp from 'sharp';
await sharp(inputBuffer)
  .resize(800, 600, { fit: 'inside' })
  .avif({ quality: 60 })
  .toFile('output.avif');
// Fallback chain: AVIF > WebP > JPEG

Cas d'usage : Réduire le poids des images de 60-80% pour améliorer le LCP et la bande passante.

Système de notifications intégré à l'application (cloche, badge, toasts) avec centre de notifications persistant. Utilise souvent WebSocket ou SSE pour le temps réel.

La boîte de réception interne d'un bureau avec un voyant lumineux qui s'allume quand un nouveau message arrive.

// Notification center pattern
const [notifications, setNotifications] = useState([]);
useEffect(() => {
  const es = new EventSource('/api/notifications/stream');
  es.onmessage = (e) => {
    setNotifications(prev => [JSON.parse(e.data), ...prev]);
  };
  return () => es.close();
}, []);

Cas d'usage : Informer l'utilisateur d'événements (mentions, mises à jour, tâches) sans quitter l'application.

Packages partagés au sein d'un monorepo sans publication sur NPM. Référencés via le protocole workspace, ils permettent le partage de code typé entre applications.

Des recettes maison partagées entre restaurants du même groupe, jamais publiées dans un livre de cuisine.

// packages/ui/package.json
{ "name": "@myorg/ui", "main": "./src/index.ts" }
// apps/web/package.json
{ "dependencies": { "@myorg/ui": "workspace:*" } }
// Usage
import { Button } from '@myorg/ui';

Cas d'usage : Partager des composants UI, utils ou types entre le frontend et le backend d'un monorepo.

Structure de données qui associe chaque terme à la liste des documents le contenant. Fondement de tous les moteurs de recherche full-text pour des requêtes en O(1).

L'index alphabétique à la fin d'un livre : au lieu de lire tout le livre, on cherche le mot et on trouve les pages.

// Simplified inverted index
const index = {
  'javascript': [docId1, docId3, docId7],
  'react':      [docId1, docId2],
  'node':       [docId3, docId5, docId7],
};

Cas d'usage : Comprendre le fonctionnement interne d'Elasticsearch, Meilisearch et des moteurs de recherche.

Token auto-contenu composé de 3 parties (header, payload, signature) encodé en Base64. Permet l'authentification stateless sans interroger la base de données à chaque requête.

Un badge visiteur avec photo, nom et tampon de sécurité : toutes les infos sont sur le badge, pas besoin de vérifier un registre.

import jwt from 'jsonwebtoken';
const accessToken = jwt.sign(
  { userId: user.id, role: 'admin' },
  process.env.JWT_SECRET,
  { expiresIn: '15m' }
);

Cas d'usage : Authentification API stateless avec access token court (15min) et refresh token long (7j).

Stratégie où le refresh token est à usage unique : chaque utilisation génère une nouvelle paire access/refresh. Détecte le vol de token par réutilisation.

Un ticket de vestiaire à usage unique : si quelqu'un l'a déjà utilisé, le vestiaire sait qu'il y a fraude.

async function rotateTokens(refreshToken) {
  const stored = await db.findToken(refreshToken);
  if (stored.used) {
    await db.revokeFamily(stored.familyId); // Compromis!
    throw new Error('Token reuse detected');
  }
  await db.markUsed(refreshToken);
  return generateTokenPair(stored.userId, stored.familyId);
}

Cas d'usage : Sécuriser les sessions longue durée en détectant automatiquement le vol de refresh token.

Outil historique de gestion de monorepos JS pour le versioning et la publication de packages NPM. Désormais maintenu par Nx avec cache et graphe de tâches intégrés.

Un éditeur de livres qui gère les versions et la publication coordonnée de toute une collection.

// lerna.json
{
  "version": "independent",
  "npmClient": "pnpm",
  "command": {
    "publish": { "conventionalCommits": true }
  }
}

Cas d'usage : Publier et versionner des packages NPM interdépendants depuis un monorepo avec changelog automatique.

Outil Google d'audit automatisé mesurant performance, accessibilité, SEO et bonnes pratiques d'une page web. Disponible dans Chrome DevTools et en CI.

Un contrôle technique automobile qui inspecte tous les aspects de votre véhicule et donne une note.

// Lighthouse CI
npx lhci autorun --collect.url=https://myapp.com
// lighthouse.config.js
{ ci: { assert: {
  assertions: {
    'categories:performance': ['error', { minScore: 0.9 }],
    'categories:accessibility': ['warn', { minScore: 0.95 }],
  }
}}}

Cas d'usage : Auditer automatiquement les pages en CI pour détecter les régressions de performance et accessibilité.

Technique où le client envoie une requête HTTP et le serveur la garde ouverte jusqu'à avoir de nouvelles données. Simule du temps réel sans WebSocket.

Appeler un restaurant pour demander si une table est libre et rester en ligne jusqu'à ce qu'une se libère.

async function longPoll() {
  const res = await fetch('/api/updates?timeout=30000');
  const data = await res.json();
  processUpdate(data);
  longPoll(); // Immediately reconnect
}

Cas d'usage : Fallback temps réel quand WebSocket ou SSE ne sont pas disponibles (firewalls, proxies).

Moteur de recherche open-source ultra-rapide et simple à configurer. Alternative à Algolia avec typo-tolerance, filtres et tri, déployable on-premise.

Un Algolia gratuit que vous pouvez héberger chez vous, aussi rapide mais sans la facture SaaS.

import { MeiliSearch } from 'meilisearch';
const client = new MeiliSearch({ host: 'http://localhost:7700' });
await client.index('movies').addDocuments(movies);
const results = await client.index('movies').search('avenger', {
  filter: ['year > 2015'],
});

Cas d'usage : Recherche instantanée sur un projet avec contraintes budget/données sensibles nécessitant du self-hosted.

Protocole de push temps réel basé sur SSE avec un hub central. Le serveur publie des updates vers le hub qui les distribue aux clients abonnés via SSE.

Un bureau de poste central qui reçoit les lettres des expéditeurs et les distribue aux boîtes aux lettres des abonnés.

// Publish from server
await fetch('https://hub.example.com/.well-known/mercure', {
  method: 'POST',
  headers: { Authorization: `Bearer ${jwt}` },
  body: new URLSearchParams({
    topic: '/orders/42', data: JSON.stringify(order)
  }),
});

Cas d'usage : Push temps réel dans un écosystème Symfony/API Platform sans gérer l'infrastructure WebSocket.

Technique de découpage d'un fichier volumineux en plusieurs parties uploadées en parallèle. Permet la reprise en cas d'erreur et optimise le débit réseau.

Déménager en envoyant les cartons par plusieurs camions en parallèle plutôt qu'un seul gros camion.

const upload = new Upload({
  client: s3,
  params: {
    Bucket: 'videos', Key: 'movie.mp4', Body: fileStream,
  },
  partSize: 10 * 1024 * 1024, // 10MB parts
  leavePartsOnError: false,
});
await upload.done();

Cas d'usage : Upload de fichiers volumineux (vidéos, datasets) avec barre de progression et reprise sur erreur.

Framework de monorepo avec graphe de dépendances intelligent, cache distribué et générateurs de code. Supporte React, Angular, Node et plus avec des plugins dédiés.

Un architecte de chantier qui connaît toutes les dépendances entre bâtiments et ne rénove que ce qui est impacté.

// nx.json - affected commands
npx nx affected --target=test // Only test changed
npx nx affected --target=build // Only build changed
npx nx graph // Visualize dependency graph

Cas d'usage : Gérer un monorepo d'entreprise multi-frameworks avec des dizaines de projets interdépendants.

Protocole d'autorisation déléguée permettant à une app d'accéder aux ressources d'un utilisateur sans connaître son mot de passe. Définit plusieurs flows selon le contexte.

Donner un passe limité au plombier pour accéder à la salle de bain sans lui donner les clés de toute la maison.

// Authorization Code flow (redirect)
const authUrl = `https://auth.example.com/authorize
  ?response_type=code
  &client_id=${CLIENT_ID}
  &redirect_uri=${REDIRECT}
  &scope=read:profile
  &state=${csrfToken}`;

Cas d'usage : Permettre le 'Login with Google/GitHub' ou accéder aux APIs tierces au nom de l'utilisateur.

Extension OAuth2 (Proof Key for Code Exchange) qui protège le flow Authorization Code contre l'interception. Utilise un code_verifier et code_challenge.

Envoyer un cadenas ouvert avec la demande, puis prouver qu'on a la clé en l'ouvrant lors de l'échange.

const verifier = generateRandomString(128);
const challenge = base64url(sha256(verifier));
// Step 1: Send challenge
`&code_challenge=${challenge}&code_challenge_method=S256`
// Step 2: Send verifier to get token
`&code_verifier=${verifier}`

Cas d'usage : Sécuriser le flow OAuth2 dans les SPA et apps mobiles qui ne peuvent pas garder un client_secret.

Couche d'identité construite sur OAuth2 qui ajoute l'authentification. Retourne un ID Token (JWT) contenant les informations de l'utilisateur en plus de l'access token.

OAuth2 dit 'cette personne a le droit d'entrer', OpenID Connect ajoute 'et voici sa carte d'identité'.

// ID Token decoded payload
{
  "sub": "user-123",
  "name": "Alice Martin",
  "email": "alice@example.com",
  "iss": "https://auth.example.com",
  "aud": "my-app-client-id",
  "exp": 1700000000
}

Cas d'usage : Implémenter un SSO (Single Sign-On) d'entreprise avec identification fiable de l'utilisateur.

Classification des 10 risques de sécurité web les plus critiques, mise à jour régulièrement. Inclut injection, broken auth, XSS, SSRF, etc.

Le top 10 des erreurs les plus courantes au code de la route : les connaître évite 90% des accidents.

// A03:2021 Injection - Prevention
const user = await db.query(
  'SELECT * FROM users WHERE id = $1', // Parameterized
  [userId] // Never concatenate!
);

Cas d'usage : Checklist de sécurité obligatoire lors de l'audit ou de la revue de code d'une application web.

Standard d'authentification sans mot de passe utilisant la cryptographie asymétrique. La clé privée reste sur l'appareil de l'utilisateur, seule la clé publique est stockée côté serveur.

Un verrou qui ne reconnaît que votre empreinte digitale : impossible à copier, rien à retenir.

const credential = await navigator.credentials.create({
  publicKey: {
    challenge: serverChallenge,
    rp: { name: 'MyApp' },
    user: { id: userId, name: email, displayName: name },
    pubKeyCredParams: [{ alg: -7, type: 'public-key' }],
  }
});

Cas d'usage : Remplacer les mots de passe par une authentification résistante au phishing sur mobile et desktop.

Limites maximales définies pour les métriques de performance (taille JS < 200KB, LCP < 2.5s). Bloque le build ou alerte quand les budgets sont dépassés.

Un budget financier pour les courses : si vous dépassez, vous devez retirer un article avant de passer en caisse.

// bundlesize config or CI check
{
  "budgets": [
    { "path": "dist/*.js", "maxSize": "200kB" },
    { "path": "dist/*.css", "maxSize": "50kB" },
    { "metric": "LCP", "max": 2500 }
  ]
}

Cas d'usage : Empêcher la régression de performance en intégrant des garde-fous dans le pipeline CI/CD.

Fonctionnalité native de pnpm pour gérer un monorepo avec symlinks et content-addressable store. Économise l'espace disque en partageant les dépendances identiques.

Une bibliothèque partagée où chaque bureau a un raccourci vers le livre au lieu d'une copie complète.

# pnpm-workspace.yaml
packages:
  - 'apps/*'
  - 'packages/*'
# Using workspace protocol
{ "dependencies": { "@myorg/ui": "workspace:*" } }

Cas d'usage : Structurer un monorepo avec gestion efficace des dépendances partagées et résolution rapide.

URL temporaire signée cryptographiquement qui donne un accès limité dans le temps à un objet S3. Permet l'upload/download direct sans exposer les credentials.

Un ticket de vestiaire avec date d'expiration : il donne accès à un seul casier pendant un temps limité.

import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
const url = await getSignedUrl(s3, new PutObjectCommand({
  Bucket: 'uploads',
  Key: `docs/${fileId}`,
  ContentType: 'application/pdf',
}), { expiresIn: 300 }); // 5 min

Cas d'usage : Permettre l'upload direct du navigateur vers S3 sans passer par votre serveur backend.

Messages envoyés depuis un serveur vers l'appareil de l'utilisateur via APNs (Apple) ou FCM (Google), même quand l'application est fermée. Requiert un Service Worker sur le web.

Un facteur qui sonne à votre porte pour livrer un message urgent, même si vous n'attendiez rien.

// Web Push API
const subscription = await registration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: VAPID_PUBLIC_KEY,
});
// Server-side
await webpush.sendNotification(subscription, JSON.stringify({
  title: 'New message', body: 'Alice sent you a photo',
}));

Cas d'usage : Réengager les utilisateurs avec des alertes pertinentes (messages, commandes, promotions ciblées).

Mécanisme qui limite le nombre de requêtes qu'un client peut faire dans une fenêtre de temps. Protège contre les abus, DDoS et scraping.

Un distributeur de tickets qui ne donne qu'un ticket par minute par personne pour éviter la bousculade.

import rateLimit from 'express-rate-limit';
app.use('/api/', rateLimit({
  windowMs: 15 * 60 * 1000, // 15 min
  max: 100, // 100 requests per window
  standardHeaders: true,
  message: 'Too many requests',
}));

Cas d'usage : Protéger les endpoints d'authentification et les API publiques contre les abus automatisés.

Directives HTML (preload, prefetch, preconnect, dns-prefetch) qui informent le navigateur des ressources à charger en priorité ou à préparer en avance.

Commander l'entrée et le plat en même temps au restaurant pour que le plat arrive plus vite après l'entrée.

<!-- Critical resource -->
<link rel="preload" href="/fonts/inter.woff2" as="font" crossorigin>
<!-- Next page -->
<link rel="prefetch" href="/dashboard">
<!-- Third-party -->
<link rel="preconnect" href="https://api.example.com">
<link rel="dns-prefetch" href="https://cdn.example.com">

Cas d'usage : Accélérer le chargement des fonts critiques, des pages suivantes probables et des APIs tierces.

Configuration qui définit comment Temporal retente une Activity en échec : intervalle initial, backoff, nombre max de tentatives et erreurs non-retentables.

Rappeler un ami qui ne répond pas : d'abord après 1 min, puis 5 min, puis 30 min, avec un maximum de 5 essais.

const retryPolicy = {
  initialInterval: '1s',
  backoffCoefficient: 2,
  maximumAttempts: 5,
  nonRetryableErrorTypes: ['InvalidInputError'],
};

Cas d'usage : Configurer des retries intelligents sur les appels API externes pour absorber les erreurs transitoires.

Stockage objet accessible via l'API S3 d'Amazon, devenu un standard. Compatible avec MinIO, Cloudflare R2, DigitalOcean Spaces pour éviter le vendor lock-in.

Un entrepôt de stockage standardisé : les cartons (fichiers) se rangent de la même façon quel que soit l'entrepôt.

import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';
const s3 = new S3Client({ region: 'eu-west-1' });
await s3.send(new PutObjectCommand({
  Bucket: 'my-uploads',
  Key: `avatars/${userId}.webp`,
  Body: fileBuffer,
}));

Cas d'usage : Stocker les fichiers uploadés (images, documents, vidéos) hors du serveur applicatif.

Pattern de gestion de transactions distribuées où chaque étape a une action compensatoire. En cas d'échec, les compensations sont exécutées en ordre inverse.

Annuler une réservation de vacances : d'abord l'hôtel, puis le vol, puis la voiture, dans l'ordre inverse des réservations.

const compensations = [];
try {
  await chargeCard(order); compensations.push(() => refund(order));
  await reserveStock(order); compensations.push(() => releaseStock(order));
  await shipOrder(order);
} catch (err) {
  for (const comp of compensations.reverse()) await comp();
}

Cas d'usage : Gérer des transactions multi-services (paiement + stock + livraison) sans verrou distribué.

Standard XML d'authentification fédérée principalement utilisé en entreprise. L'Identity Provider émet des assertions XML signées pour authentifier l'utilisateur auprès du Service Provider.

Un passeport diplomatique émis par un pays (IdP) et reconnu à la frontière d'un autre (SP).

// SAML config (passport-saml)
{
  entryPoint: 'https://idp.corp.com/saml/sso',
  issuer: 'my-app',
  cert: idpCertificate,
  callbackUrl: 'https://app.com/auth/saml/callback',
}

Cas d'usage : Intégrer une app SaaS avec l'Active Directory ou le SSO d'une grande entreprise.

Pratiques et outils (Vault, AWS Secrets Manager, doppler) pour stocker, distribuer et rotationner les secrets applicatifs hors du code source.

Un coffre-fort numérique centralisé dont seuls les employés autorisés connaissent la combinaison, changée régulièrement.

// Using AWS Secrets Manager
const secret = await secretsManager.getSecretValue({
  SecretId: 'prod/db/credentials'
}).promise();
const { username, password } = JSON.parse(secret.SecretString);

Cas d'usage : Centraliser et sécuriser tous les secrets (DB, API, clés) avec rotation automatique en production.

Protocole HTTP unidirectionnel serveur vers client pour le streaming d'événements. Plus simple que WebSocket quand la communication bidirectionnelle n'est pas nécessaire.

Une radio FM : le serveur diffuse et les clients écoutent, sans pouvoir répondre par le même canal.

// Server (Node.js)
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
setInterval(() => {
  res.write(`data: ${JSON.stringify(getUpdate())}\n\n`);
}, 1000);

Cas d'usage : Notifications serveur, flux d'actualités, suivi de progression d'un traitement long.

Sessions stockent l'état côté serveur (cookie + store), tokens sont stateless (JWT côté client). Sessions offrent révocation facile, tokens offrent scalabilité horizontale.

Session = badge gardé au registre de l'accueil. Token = badge avec toutes les infos imprimées dessus.

// Session: server stores state
req.session.userId = user.id; // Stored in Redis
// Token: client stores state
const token = jwt.sign({ userId: user.id }, secret);
res.json({ accessToken: token });

Cas d'usage : Choisir sessions pour les apps monolithiques classiques, tokens pour les API/microservices.

Packages monorepo contenant les configurations partagées (ESLint, TSConfig, Prettier, Tailwind). Centralisent les standards du projet en un seul endroit.

Un cahier des charges commun à tous les chantiers d'un groupe de construction.

// packages/eslint-config/index.js
module.exports = {
  extends: ['next', 'prettier'],
  rules: { 'no-console': 'warn' },
};
// apps/web/.eslintrc.js
module.exports = { extends: ['@myorg/eslint-config'] };

Cas d'usage : Garantir une configuration homogène de linting, formatting et compilation dans tout le monorepo.

Bibliothèque temps réel au-dessus de WebSocket avec fallback automatique. Les Rooms groupent les clients, les Namespaces séparent les canaux logiques.

Un immeuble (namespace) avec des appartements (rooms) : chaque message va à la bonne pièce du bon étage.

const chat = io.of('/chat');
chat.on('connection', (socket) => {
  socket.join('room-42');
  chat.to('room-42').emit('message', {
    user: socket.id, text: 'Hello!'
  });
});

Cas d'usage : Construire un chat multi-salons avec reconnexion automatique et support des anciens navigateurs.

Bibliothèque JavaScript pour modéliser la logique applicative comme des machines à états finis. Garantit que seules les transitions valides sont possibles.

Un distributeur automatique qui ne peut être que dans un état à la fois : en attente, en paiement, en distribution.

import { createMachine } from 'xstate';
const orderMachine = createMachine({
  initial: 'pending',
  states: {
    pending: { on: { PAY: 'processing' } },
    processing: { on: { SUCCESS: 'shipped', FAIL: 'pending' } },
    shipped: { on: { DELIVER: 'delivered' } },
    delivered: { type: 'final' },
  },
});

Cas d'usage : Modéliser des workflows complexes (commande, formulaire multi-étapes, lecteur vidéo) sans bugs d'état.

Extension des FSM avec états hiérarchiques (imbriqués), parallèles et historiques. Permet de modéliser des systèmes complexes tout en gardant la rigueur des FSM.

Un organigramme d'entreprise avec des départements (états parents) contenant des équipes (sous-états) travaillant en parallèle.

const machine = createMachine({
  type: 'parallel',
  states: {
    player: { initial: 'paused',
      states: { paused: {}, playing: {} } },
    volume: { initial: 'normal',
      states: { muted: {}, normal: {}, loud: {} } },
  },
});

Cas d'usage : Modéliser des interfaces complexes avec plusieurs sous-systèmes indépendants (lecteur média, formulaires).

Protocoles de streaming adaptatif qui découpent la vidéo en segments et ajustent la qualité selon la bande passante. HLS (Apple) et DASH (standard ouvert) dominent le marché.

Un robinet qui ajuste automatiquement le débit d'eau selon la pression disponible dans les tuyaux.

// Video.js HLS player
import Hls from 'hls.js';
const hls = new Hls();
hls.loadSource('https://cdn.example.com/video/master.m3u8');
hls.attachMedia(videoElement);
hls.on(Hls.Events.MANIFEST_PARSED, () => {
  videoElement.play();
});

Cas d'usage : Diffuser du contenu vidéo à grande échelle avec adaptation automatique à la qualité réseau.

Unité de travail exécutée par un Worker Temporal, représentant une action avec effets de bord (appel API, écriture DB). Les Activities peuvent être retentées indépendamment.

Les étapes individuelles d'une recette de cuisine : chacune peut être refaite sans recommencer tout le plat.

// Activity definition
async function sendEmail(to, subject, body) {
  const result = await mailer.send({ to, subject, body });
  return result.messageId;
}
// Registered in worker
const activities = { sendEmail, chargeCard };

Cas d'usage : Encapsuler chaque appel externe (paiement, email, API tierce) pour bénéficier du retry automatique.

Mécanisme synchrone pour lire l'état interne d'un Workflow en cours sans le modifier. Retourne une valeur immédiatement.

Regarder par la vitre d'un four pour vérifier la cuisson sans ouvrir la porte.

const statusQuery = defineQuery('getStatus');
setHandler(statusQuery, () => ({
  step: currentStep,
  progress: completedSteps / totalSteps,
}));

Cas d'usage : Exposer la progression d'un processus long dans une UI sans interférer avec l'exécution.

Planification native de Temporal pour lancer des Workflows à intervalles réguliers (cron-like). Gère les chevauchements, les pauses et les rattrappages.

Un réveil programmable qui sonne chaque jour à la même heure, même si vous dormez encore quand il sonne.

await client.schedule.create({
  scheduleId: 'daily-report',
  spec: { cronExpressions: ['0 8 * * *'] },
  action: {
    type: 'startWorkflow',
    workflowType: 'generateReport',
  },
});

Cas d'usage : Remplacer les cron jobs fragiles par des schedules durables avec retry et monitoring intégrés.

Mécanisme pour envoyer des données à un Workflow en cours d'exécution depuis l'extérieur. Le Signal est asynchrone et modifie l'état interne du Workflow.

Glisser un post-it sous la porte d'un collègue occupé pour lui transmettre une info sans l'interrompre.

// Define signal
const approveSignal = defineSignal('approve');
// Handle in workflow
setHandler(approveSignal, (data) => {
  approved = true;
  approver = data.userId;
});

Cas d'usage : Permettre une approbation humaine ou un événement externe d'influencer un Workflow en cours.

Pause durable dans un Workflow Temporal qui survit aux redémarrages du Worker. Peut durer de secondes à des mois sans consommer de ressources.

Un minuteur de cuisine qui continue de tourner même si vous quittez la maison et revenez.

import { sleep } from '@temporalio/workflow';
// Wait 7 days for payment
await sleep('7 days');
if (!paymentReceived) {
  await cancelOrder(orderId);
}

Cas d'usage : Implémenter des délais métier (période d'essai, rappels, expiration) de manière fiable.

Système de recherche et filtrage des Workflows Temporal via des attributs personnalisés. Permet de lister et monitorer les exécutions en cours ou terminées.

Le tableau de bord d'un centre logistique montrant l'état de tous les colis en temps réel.

// Search workflows
const results = await client.workflow.list({
  query: `WorkflowType='OrderWorkflow'
    AND ExecutionStatus='Running'
    AND CustomField='vip'`,
});

Cas d'usage : Construire des dashboards opérationnels pour suivre les processus métier en production.

Processus qui écoute une Task Queue Temporal et exécute les Workflows et Activities assignés. Plusieurs Workers peuvent partager la même queue pour la scalabilité.

Un employé de bureau qui prend des dossiers dans une pile partagée et les traite un par un.

import { Worker } from '@temporalio/worker';
const worker = await Worker.create({
  workflowsPath: require.resolve('./workflows'),
  activities,
  taskQueue: 'order-queue',
});
await worker.run();

Cas d'usage : Déployer des Workers scalables horizontalement pour absorber les pics de charge sur les tâches asynchrones.

Fonction durable orchestrée par Temporal qui survit aux pannes et redémarrages. Le code s'exécute de manière déterministe et reprend automatiquement là où il s'est arrêté.

Un GPS qui recalcule automatiquement l'itinéraire après chaque détour, sans jamais oublier la destination finale.

// Temporal Workflow
async function orderWorkflow(order) {
  await validatePayment(order);
  await reserveStock(order);
  await shipOrder(order);
  await notifyCustomer(order);
  return { status: 'completed' };
}

Cas d'usage : Orchestrer des processus métier longs (commandes, onboarding) nécessitant fiabilité et traçabilité.

Email déclenché par une action utilisateur (confirmation, facture, reset password) via un service dédié (SendGrid, Resend, SES). Distinct de l'email marketing.

Le reçu que la caissière vous imprime automatiquement après chaque achat.

import { Resend } from 'resend';
const resend = new Resend(process.env.RESEND_API_KEY);
await resend.emails.send({
  from: 'noreply@myapp.com',
  to: user.email,
  subject: 'Confirm your account',
  react: <ConfirmEmail url={confirmUrl} />,
});

Cas d'usage : Envoyer des emails de confirmation, reset password et factures avec un taux de délivrabilité élevé.

Temps entre la requête HTTP et la réception du premier octet de réponse. Mesure la latence serveur incluant DNS, connexion TLS et traitement backend.

Le temps entre la commande au restaurant et le moment où le serveur commence à apporter le plat.

// Measure TTFB
const { responseStart, requestStart } = performance.getEntriesByType('navigation')[0];
const ttfb = responseStart - requestStart;
console.log(`TTFB: ${ttfb}ms`); // Target: < 800ms

Cas d'usage : Diagnostiquer les problèmes de latence serveur (DB lente, absence de cache, serveur éloigné).

Outil de build incrémental pour monorepos qui cache les résultats de build et n'exécute que les tâches affectées par les changements. Créé par Vercel.

Un chef cuisinier qui ne recuit que les plats dont les ingrédients ont changé, servant les autres depuis le frigo.

// turbo.json
{
  "pipeline": {
    "build": { "dependsOn": ["^build"], "outputs": ["dist/**"] },
    "test": { "dependsOn": ["build"] },
    "lint": {},
    "dev": { "cache": false, "persistent": true }
  }
}

Cas d'usage : Accélérer les builds CI/CD d'un monorepo en ne rebuild que les packages modifiés.

API navigateur pour la communication peer-to-peer en temps réel (audio, vidéo, données) sans passer par un serveur central. Utilise STUN/TURN pour la traversée NAT.

Un talkie-walkie numérique qui connecte deux personnes directement sans passer par un standard téléphonique.

const pc = new RTCPeerConnection({ iceServers });
const stream = await navigator.mediaDevices.getUserMedia({
  video: true, audio: true
});
stream.getTracks().forEach(t => pc.addTrack(t, stream));
const offer = await pc.createOffer();
await pc.setLocalDescription(offer);

Cas d'usage : Visioconférence, partage d'écran, transfert de fichiers P2P dans le navigateur.

Protocole de communication bidirectionnelle persistante entre client et serveur sur une seule connexion TCP. Idéal pour les données temps réel.

Un appel téléphonique ouvert en continu plutôt que d'envoyer des SMS un par un.

const ws = new WebSocket('wss://api.example.com');
ws.onopen = () => ws.send(JSON.stringify({ type: 'subscribe', channel: 'prices' }));
ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  updateUI(data);
};

Cas d'usage : Chat en temps réel, cours de bourse, notifications live, jeux multijoueurs.

Technique Temporal pour déployer de nouvelles versions de code Workflow sans casser les exécutions en cours. Utilise patching ou Task Queue versioning.

Changer le moteur d'un avion en vol : les anciens passagers gardent l'ancien moteur, les nouveaux ont le nouveau.

import { patched } from '@temporalio/workflow';
if (patched('new-validation')) {
  await newValidation(order);
} else {
  await oldValidation(order);
}

Cas d'usage : Déployer des changements de logique métier en production sans interrompre les processus en cours.