• Cours et TP /

    • Thread et asynchronicité

    Technologie web 2

    Johan Girod

    Synchrone ou asynchrone

    Synchrone ou asynchrone

    Execution synchrone

    • Chaque tache est exécutées l'une après l'autre
    • Le déroulé est bloqué tant qu'une tache n'est pas terminée

    Synchrone ou asynchrone

    Execution asynchrone

    • Plusieurs tâches peuvent être lancées en même temps
    • Elles ne bloquent pas le déroulé, et d'autres événements peuvent être traités

    Synchrone ou asynchrone

    Asynchrone ou synchrone

    Quelques exemples

    • Une conversation téléphonique ? synchrone
    • Une conversation par messagerie ? asynchrone
    • Un paiement à la caisse ? synchrone
    • Une préparation de repas ? asynchrone

    Quelques exemples

    Code synchrone ou asynchrone ?

    Quelques exemples

    Code synchrone ou asynchrone ?

    Quelques exemples

    Code synchrone ou asynchrone ?

    Quelques exemples

    Code synchrone ou asynchrone ?

    Thread en JavaScript

    Qu'est-ce qu'un thread ?

    • Un thread est un fil d'exécution
    • Un programme peut avoir plusieurs threads
    • Chaque thread ne peut exécuter qu'une instruction à la fois

    Thread et JavaScript

    • Un programme JavaScript est executé dans un unique thread principal (« main thread »)
      Les instructions sont exécutées l'une après l'autre
    • Ce thread est non bloquant (asynchrone)
      Les instructions asynchrones ne bloquent pas le déroulé et sont exécutées en parallèle
    • Les fonctions fonction de callback sont placées dans la file d'attente (« event loop ») Elles sont exécutées dès que le thread principal est disponible, dans l'ordre d'arrivée

    `setTimeout`

    Le code est exécuté dans l'ordre A, D, C, B

    `setTimeout`

    Le code est exécuté dans l'ordre B, C, D, A

    Perfomance

    Si on effectue une tâche longue dans le thread principal, cela peut bloquer l'interface utilisateur, car les événements ne sont plus traités

    Dans ce cas, il vaut mieux effectuer la tâche dans un autre thread : c'est le rôle des Web Workers

    Callback hell

    Lorsqu'on imbrique trop de fonctions de rappel, le code devient illisible

    Pour cela, il existe une fonctionnalité du langage : les promesse et les fonctions async/await

    ...que vous verrez l'année prochaine

    TP 5 : Balatro simplifié

    Créer une version simplifiée du jeu de cartes Balatro en JavaScript, où le but est de former les meilleures combinaisons de poker possible.

    Principes du jeu

    • Le joueur reçoit une main de 5 cartes piochées aléatoirement dans un deck de 52 cartes standard.
    • À chaque manche, le joueur dispose de 3 échanges pour améliorer sa main en remplaçant des cartes individuelles.
    • Une fois satisfait de sa main (ou après avoir utilisé tous ses échanges), le joueur valide sa main et un score est calculé en fonction de la combinaison de poker obtenue.
    • Les combinaisons reconnues sont (du plus faible au plus fort) :
      • Paire (5 points) : deux cartes de même valeur
      • Double Paire (10 points) : deux paires différentes
      • Brelan (15 points) : trois cartes de même valeur
      • Suite (25 points) : cinq cartes consécutives
      • Couleur (30 points) : cinq cartes de la même couleur (♠, ♥, ♦, ♣)
      • Full (40 points) : un brelan + une paire
      • Carré (60 points) : quatre cartes de même valeur
      • Quinte Flush (100 points) : une suite de la même couleur
    • Le score total s’accumule au fil des manches.

    Partie 1 : le moteur de jeu

    Wip