Cours JavaScript - Partie 4 : Architecture & Performance

1. Métaprogrammation Avancée Architect

Interceptez, modifiez et étendez le comportement fondamental de JavaScript.

// Proxy avancé pour validation et logging
const validator = {
    set(target, prop, value) {
        if (prop === 'age' && (value < 0 || value > 150)) {
            throw new Error('Âge invalide');
        }
        console.log(`[${new Date().toISOString()}] ${prop} = ${value}`);
        target[prop] = value;
        return true;
    }
};

const person = new Proxy({}, validator);

// Reflect API pour opérations avancées
const obj = { a: 1, b: 2 };
Reflect.set(obj, 'c', 3);
console.log(Reflect.get(obj, 'a')); // 1
                

🪄 Proxy Intelligent

2. Web Workers & Multithreading

Exécutez du code JavaScript en arrière-plan sans bloquer l'interface utilisateur.

// Création d'un Worker
const worker = new Worker('worker.js');

// Envoi de données
worker.postMessage({ operation: 'calculate', data: largeArray });

// Réception des résultats
worker.onmessage = (event) => {
    console.log('Résultat:', event.data);
};

// Gestion des erreurs
worker.onerror = (error) => {
    console.error('Erreur worker:', error);
};
                

🧵 Calcul intensif avec Web Worker

Sans Worker

Avec Worker

Worker inactif

3. SharedArrayBuffer & Atomics

Partagez de la mémoire entre plusieurs workers pour des performances maximales.

// Création d'un buffer partagé
const sharedBuffer = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT * 4);
const sharedArray = new Int32Array(sharedBuffer);

// Opérations atomiques (thread-safe)
Atomics.store(sharedArray, 0, 42);
const value = Atomics.load(sharedArray, 0);
Atomics.add(sharedArray, 1, 5);
Atomics.compareExchange(sharedArray, 2, 0, 100);
                

🔄 Mémoire partagée entre workers

4. Gestion de la Mémoire & Performance

WeakMaps, WeakSets, et techniques d'optimisation mémoire.

// WeakMap - permet le garbage collection
const weakMap = new WeakMap();
let obj = { data: 'sensible' };
weakMap.set(obj, 'valeur secrète');
// Quand obj n'est plus référencé, la paire est supprimée automatiquement

// WeakSet - idem pour les sets
const weakSet = new WeakSet();
weakSet.add(obj);

// Performance measurement
performance.mark('start');
// ... opération ...
performance.mark('end');
performance.measure('MonOp', 'start', 'end');
const measure = performance.getEntriesByName('MonOp')[0];
console.log(`Durée: ${measure.duration}ms`);
                

📊 Moniteur de mémoire

0%

5. Internationalization (i18n) Avancée

Formatez dates, nombres et textes selon les locales.

// Formater des nombres selon la locale
const numberFormat = new Intl.NumberFormat('fr-FR', {
    style: 'currency',
    currency: 'EUR'
});
console.log(numberFormat.format(1234.56)); // 1 234,56 €

// Formater des dates
const dateFormat = new Intl.DateTimeFormat('fr-FR', {
    dateStyle: 'full',
    timeStyle: 'long'
});
console.log(dateFormat.format(new Date()));

// Relative Time Format
const rtf = new Intl.RelativeTimeFormat('fr', { numeric: 'auto' });
console.log(rtf.format(-1, 'day')); // "hier"
                

🌍 Internationalisation

6. Programmation Réactive avec Observables

Implémentation d'un système réactif type RxJS.

// Observable simple
class Observable {
    constructor(subscribe) {
        this._subscribe = subscribe;
    }
    
    subscribe(observer) {
        return this._subscribe(observer);
    }
    
    map(transform) {
        return new Observable(observer => {
            return this.subscribe({
                next: value => observer.next(transform(value)),
                error: err => observer.error(err),
                complete: () => observer.complete()
            });
        });
    }
}

// Utilisation
const observable = new Observable(observer => {
    observer.next(1);
    observer.next(2);
    observer.complete();
});
                

🔄 Observable en action

7. WebAssembly (WASM)

Exécutez du code haute performance compilé (C/C++/Rust) dans le navigateur.

// Chargement d'un module WASM
async function loadWasm() {
    const response = await fetch('module.wasm');
    const bytes = await response.arrayBuffer();
    const module = await WebAssembly.instantiate(bytes);
    return module.instance.exports;
}

// Simulation WASM
const wasmExports = {
    add: (a, b) => a + b,
    fibonacci: (n) => n <= 1 ? n : wasmExports.fibonacci(n-1) + wasmExports.fibonacci(n-2)
};
                

⚡ Simulation WebAssembly (haute performance)

8. Gestion d'Erreurs Avancée et Recovery

Patterns pour des applications robustes et résilientes.

// Circuit Breaker Pattern
class CircuitBreaker {
    constructor(fn, options = {}) {
        this.fn = fn;
        this.failureThreshold = options.failureThreshold || 3;
        this.timeout = options.timeout || 5000;
        this.failures = 0;
        this.state = 'CLOSED';
    }
    
    async execute(...args) {
        if (this.state === 'OPEN') {
            throw new Error('Circuit breaker OPEN');
        }
        
        try {
            const result = await this.fn(...args);
            this.onSuccess();
            return result;
        } catch (error) {
            this.onFailure();
            throw error;
        }
    }
    
    onSuccess() {
        this.failures = 0;
        this.state = 'CLOSED';
    }
    
    onFailure() {
        this.failures++;
        if (this.failures >= this.failureThreshold) {
            this.state = 'OPEN';
            setTimeout(() => this.state = 'HALF_OPEN', this.timeout);
        }
    }
}
                

🔌 Circuit Breaker Pattern

9. Patterns de Modules Avancés

Revealing Module Pattern, Singleton, et Dependency Injection.

// Revealing Module Pattern
const shoppingCart = (function() {
    let items = [];
    
    function addItem(item) {
        items.push(item);
    }
    
    function getTotal() {
        return items.reduce((sum, item) => sum + item.price, 0);
    }
    
    return {
        add: addItem,
        total: getTotal
    };
})();

// Dependency Injection Container
class Container {
    constructor() {
        this.services = new Map();
    }
    
    register(name, factory) {
        this.services.set(name, factory);
    }
    
    get(name) {
        const factory = this.services.get(name);
        return factory(this);
    }
}
                

📦 Module Pattern & DI

10. Mini-projet : Système de Monitoring

Surveillance des performances et erreurs en temps réel.

📈 Dashboard Performance

CPU Usage

0%

Memory Usage

0%

Frame Rate

60

FPS

11. Opérations Bitwise Avancées

Optimisations bas niveau pour des performances extrêmes.

// Flags et masquage
const PERMISSIONS = {
    READ: 1 << 0,    // 1
    WRITE: 1 << 1,   // 2
    DELETE: 1 << 2,  // 4
    ADMIN: 1 << 3    // 8
};

let userPerms = PERMISSIONS.READ | PERMISSIONS.WRITE;

// Vérifier permission
if (userPerms & PERMISSIONS.READ) {
    console.log('Peut lire');
}

// Ajouter permission
userPerms |= PERMISSIONS.DELETE;

// Retirer permission
userPerms &= ~PERMISSIONS.WRITE;
                

⚙️ Gestion de permissions avec bits

12. Event Loop & Microtasks

Compréhension approfondie de la boucle d'événements JavaScript.

console.log('1'); // Sync

setTimeout(() => console.log('2'), 0); // Macro-task

Promise.resolve().then(() => console.log('3')); // Micro-task

queueMicrotask(() => console.log('4')); // Micro-task

requestAnimationFrame(() => console.log('5')); // Animation frame

// Output: 1, 3, 4, 2, 5

🔄 Visualisation Event Loop

🏁 Récapitulatif - Architecture JavaScript

✨ Compétences acquises dans cette partie :

✅ Métaprogrammation avec Proxy/Reflect
✅ Web Workers & Multithreading
✅ SharedArrayBuffer & Atomics
✅ Gestion mémoire avancée
✅ Internationalization API
✅ Programmation réactive
✅ WebAssembly
✅ Circuit Breaker Pattern
✅ Dependency Injection
✅ Monitoring performance
✅ Bitwise operations
✅ Event Loop deep dive

🎯 Niveau Architecte atteint !
Vous maîtrisez maintenant les concepts les plus avancés de JavaScript. Prochaines étapes : contributeur Open Source, création de frameworks, ou spécialisation en systèmes distribués !