Cours JavaScript - Partie 5 : Lead Developer & Advanced Architecture

1. Architecture Micro-frontends Lead

Découpez votre application en plusieurs applications indépendantes.

// Module Federation (Webpack 5)
// webpack.config.js
module.exports = {
    plugins: [
        new ModuleFederationPlugin({
            name: 'app1',
            filename: 'remoteEntry.js',
            exposes: {
                './Button': './src/Button'
            },
            shared: ['react', 'react-dom']
        })
    ]
};

// Import dynamique d'un micro-frontend
const loadRemoteModule = async (remoteUrl, scope, module) => {
    await __webpack_init_sharing__('default');
    const container = window[scope];
    await container.init(__webpack_share_scopes__.default);
    const factory = await container.get(module);
    return factory();
};
                

🧩 Simulation Micro-frontend

2. Design de Compilateur & AST

Comprenez comment JavaScript est parsé et transformé.

// Exemple de transpileur simple
function tinyTranspiler(code) {
    // Remplacer const par var
    let transpiled = code.replace(/const/g, 'var');
    
    // Remplacer les fonctions fléchées
    transpiled = transpiled.replace(/(\w+) => (\w+)/g, 'function($1) { return $2; }');
    
    return transpiled;
}

// AST (Abstract Syntax Tree) simplifié
const ast = {
    type: 'Program',
    body: [{
        type: 'VariableDeclaration',
        kind: 'const',
        declarations: [{
            type: 'VariableDeclarator',
            id: { type: 'Identifier', name: 'x' },
            init: { type: 'Literal', value: 42 }
        }]
    }]
};
                

⚙️ Mini-transpileur

3. Service Worker & Offline-first

Applications qui fonctionnent sans connexion internet.

// Background Sync
self.addEventListener('sync', event => {
    if (event.tag === 'sync-requests') {
        event.waitUntil(syncRequests());
    }
});

// Periodic Background Sync
self.addEventListener('periodicsync', event => {
    if (event.tag === 'update-weather') {
        event.waitUntil(fetchAndUpdateWeather());
    }
});

// Push Notifications
self.addEventListener('push', event => {
    const options = {
        body: event.data.text(),
        icon: '/icon.png',
        badge: '/badge.png'
    };
    event.waitUntil(
        self.registration.showNotification('Nouvelle notification', options)
    );
});
                

📱 Mode Offline & Notifications

4. WebAssembly Avancé (WAT)

Écrivez du WebAssembly directement au format texte.

;; WebAssembly Text Format (WAT)
(module
    (func $add (param $a i32) (param $b i32) (result i32)
        local.get $a
        local.get $b
        i32.add)
    (export "add" (func $add))
)

// Instanciation JS
const wasmCode = new Uint8Array([0x00, 0x61, 0x73, 0x6d]);
WebAssembly.instantiate(wasmCode).then(module => {
    const add = module.instance.exports.add;
    console.log(add(5, 3)); // 8
});
                

⚡ Calcul haute performance WASM

5. WebGPU - Graphiques Nouvelle Génération

API succédant à WebGL pour des performances GPU maximales.

// WebGPU (nouvelle API graphique)
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

const canvas = document.getElementById('gpu-canvas');
const context = canvas.getContext('webgpu');
const format = navigator.gpu.getPreferredCanvasFormat();
context.configure({ device, format });

// Compute shader
const shaderCode = `
    @group(0) @binding(0) var data: array;
    @compute @workgroup_size(64)
    fn main(@builtin(global_invocation_id) id: vec3) {
        data[id.x] = data[id.x] * 2.0;
    }
`;
                

🎮 WebGPU - Calcul parallèle (simulation)

6. Temporal API - Dates Modernes

La nouvelle API de manipulation des dates (proposée pour ES2024).

// Temporal - Alternative moderne à Date()
const date = Temporal.Now.plainDateISO();
const zoned = Temporal.Now.zonedDateTimeISO();

// Calculs de durée précis
const duration = Temporal.Duration.from({ days: 5, hours: 12 });
const result = Temporal.Now.plainDateTimeISO().add(duration);

// Fuseaux horaires avancés
const paris = Temporal.TimeZone.from('Europe/Paris');
const ny = Temporal.TimeZone.from('America/New_York');
                

📅 Temporal API (Simulation)

7. ShadowRealms - Isolation de code

Exécutez du code JavaScript dans un environnement isolé.

// ShadowRealm API (proposition)
const realm = new ShadowRealm();

// Exécuter du code dans un contexte isolé
const result = realm.evaluate(`
    let x = 10;
    let y = 20;
    x + y
`);
console.log(result); // 30

// Évaluation asynchrone
const asyncResult = await realm.importValue('./module.js', 'function');

// Les ShadowRealms ont leur propre global object
realm.evaluate(`
    // Ceci n'affecte pas le scope parent
    window.myVariable = 'isolated';
`);
                

🏝️ Sandbox avec ShadowRealm (simulation)

8. Import Assertions & Dynamic Imports

Importez différents types de ressources (JSON, CSS, etc.).

// Import Assertions (ES2023)
import data from './data.json' assert { type: 'json' };

// Importer du CSS
import styles from './styles.css' assert { type: 'css' };

// Import conditionnel
if (condition) {
    const module = await import(`./modules/${dynamicModule}.js`);
}

// Import assertions pour la sécurité
import config from './config.json' assert { 
    type: 'json',
    integrity: 'sha384-...'
};
                

📦 Import Dynamique & Assertions

9. Performance Profiling & Optimization

Techniques de profilage pour applications haute performance.

// User Timing API avancé
performance.mark('start-task');
// ... opération ...
performance.mark('end-task');
performance.measure('task-duration', 'start-task', 'end-task');

// Observer les longues tâches
const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
        console.log(`Longue tâche: ${entry.duration}ms`);
    }
});
observer.observe({ entryTypes: ['longtask'] });

// Layout Shift
new LayoutShift().observe((entries) => {
    console.log('Layout shift détecté');
});
                

📊 Profiling Performance

10. Design System & Web Components Avancés

Créez des libraries de composants réutilisables.

🎨 Composants Design System

11. Préparation Entretiens Techniques Lead/Staff

Questions fréquentes pour Lead Developer & Architecte.

❓ Question 1 : Comment designeriez-vous une application évolutive à très fort trafic ?

Réponse Lead/Architecte :
1. Micro-frontends pour l'indépendance des équipes
2. Module Federation pour le partage de code
3. Lazy loading et code splitting
4. CDN pour les assets statiques
5. Service Workers pour l'offline-first
6. Web Workers pour les tâches lourdes
7. Monitoring avec Performance API
8. Cache stratégique (Redis, etc.)

❓ Question 2 : Expliquez l'Event Loop en détail et comment optimiser la performance.

Réponse Lead/Architecte :
L'Event Loop gère l'exécution asynchrone. Ordre d'exécution:
1. Code synchrone (call stack)
2. Microtasks (Promise callbacks, queueMicrotask)
3. Macrotasks (setTimeout, setInterval, I/O)
4. Animation frame (requestAnimationFrame)
5. Idle callbacks (requestIdleCallback)
Optimisation: éviter les longues tâches (>50ms), utiliser Web Workers, décomposer les opérations lourdes.

❓ Question 3 : Quelle architecture choisiriez-vous pour une application temps réel ?

Réponse Lead/Architecte :
- WebSockets pour la communication bidirectionnelle
- Server-Sent Events (SSE) pour les notifications serveur→client
- WebRTC pour le peer-to-peer
- Protocol Buffers ou MsgPack pour la sérialisation
- Backpressure handling
- Reconnection strategies avec exponential backoff
- Message queues (RabbitMQ, Kafka) pour la scalabilité

❓ Question 4 : Comment garantir la sécurité d'une application JavaScript ?

Réponse Lead/Architecte :
1. CSP (Content Security Policy) pour prévenir XSS
2. Subresource Integrity (SRI) pour les CDN
3. ShadowRealms pour le sandboxing
4. Input sanitization et output encoding
5. HTTP-only cookies pour les tokens
6. CSRF tokens pour les formulaires
7. Rate limiting
8. Audit régulier des dépendances (npm audit)

12. Mini-projet : Framework React-like

Implémentation d'un système de rendu reactif simplifié.

⚛️ Micro-framework JS

🏁 Récapitulatif - Architecture Lead/Staff

🎯 Compétences de niveau Lead Developer

✅ Architecture Micro-frontends
✅ Design de Compilateur & AST
✅ Service Workers Avancés
✅ WebAssembly & Performance
✅ WebGPU & Calcul parallèle
✅ Temporal API
✅ ShadowRealms & Sandboxing
✅ Import Assertions
✅ Performance Profiling
✅ Design Systems
✅ System Design
✅ Sécurité avancée

🚀 Vous êtes prêt pour :
• Poste de Lead Developer / Staff Engineer
• Architecture de scaling d'applications complexes
• Contribution à des projets Open Source majeurs
• Création de frameworks et bibliothèques
• Mentoring et coaching d'équipes techniques