7.1 Synchronní vs asynchronní programování

Výuka

Proč asynchronita vůbec existuje?

Centrální část počítače (procesor) je velmi rychlá při vykonávání běžných operací v paměti - třeba sčítání čísel, práce s řetězci nebo běh cyklů. Program probíhá jedna instrukce za druhou, jak je naprogramováno.

Ale mnoho programů komunikuje s něčím mimo procesor - například:

• 🌐 Síť (stahování dat z internetu)
• 💾 Pevný disk (čtení/zápis souborů)
• 🗄️ Databáze (dotazy na data)

Problém: Tyto operace jsou MNOHEM pomalejší než práce s pamětí. Zatímco procesor spočítá miliony operací za vteřinu, síťová odpověď může trvat klidně sekundu nebo víc.

Představ si to jako restauraci:

• 🍳 Synchronní kuchař: Přijme objednávku → vaří → dokončí jídlo → teprve PAK vezme další objednávku. Pokud vaření trvá 10 minut, ostatní hosté čekají!
• 🔄 Asynchronní kuchař: Přijme objednávku → pustí ji vařit → MEZITÍM bere další objednávky. Efektivně využívá čas čekání.

Synchronní model

V synchronním modelu program běží jedna operace po druhé (jedna za všemi):

1. Spusť operaci A
2. ⏸️ ČEKEJ, až A skončí
3. Spusť operaci B
4. ⏸️ ČEKEJ, až B skončí
5. Spusť operaci C

Výhody:

• ✅ Jednoduchý na pochopení
• ✅ Vidíš přesně, v jakém pořadí věci proběhnou
• ✅ Snadné sledování flow programu

Nevýhody:

• ❌ Při pomalých operacích (síť, disk) je procesor nečinný
• ❌ Program "zamrzne" během čekání
• ❌ Špatné využití zdrojů

Asynchronní model

V asynchronním modelu můžeš spustit operaci a pokračovat dál, aniž bys čekal na dokončení:

1. Spusť operaci A (trvá 3 sekundy)
2. ⏭️ POKRAČUJ hned dál (NEČEKEJ!)
3. Spusť operaci B
4. Až A skončí → dostaneš oznámení
5. Zpracuj výsledek A

Výhody:

• ✅ Efektivní využití procesoru
• ✅ Program nepřestává reagovat během čekání
• ✅ Můžeš dělat více věcí "najednou"

Nevýhody:

• ❌ Složitější na pochopení
• ❌ Musíš řešit, co dělat, až operace skončí
• ❌ Možné problémy s pořadím (race conditions)

JavaScript je single-threaded s Event Loop

JavaScript běží v jednom vlákně (single-threaded) - to znamená, že v jednu chvíli probíhá jen JEDNA operace.

"Ale počkat, říkáš, že async běží víc věcí najednou!"

Ne přesně. JavaScript simuluje paralelismus pomocí Event Loop (smyčky událostí):

┌─────────────────────────┐
│   Call Stack            │ ← Synchronní kód (běží HNED)
│   (hlavní program)      │
└──────────┬──────────────┘
           │
           ↓
┌─────────────────────────┐
│   Task Queue            │ ← Async callbacky čekají
│   (fronta událostí)     │    (setTimeout, events...)
└─────────────────────────┘
           │
           ↓
┌─────────────────────────┐
│   Microtask Queue       │ ← Promises (prioritní!)
│   (Promises)            │
└─────────────────────────┘

Jak Event Loop funguje:

1. ✅ Provede všechen synchronní kód (call stack)
2. ✅ Když je call stack prázdný, vezme první callback z fronty
3. ✅ Provede ho
4. ✅ Opakuj krok 2

Důležité: I když nastavíš setTimeout(() => {}, 0), callback se provede AŽ PO dokončení synchronního kódu!

JavaScript

Synchronní kód (blokující)

// Synchronní - program čeká
console.log('Start');

// Simulace pomalé operace (BLOKUJE 3 sekundy!)
function slowOperation() {
  const start = Date.now();
  while (Date.now() - start < 3000) {
    // Aktivní čekání - ŠPATNĚ! Blokuje vše!
  }
  return 'Hotovo';
}

console.log('Volám pomalou operaci...');
const result = slowOperation();  // ⏸️ Tady program ČEKÁ 3s
console.log(result);
console.log('Konec');

// Výstup (až po 3 sekundách):
// Start
// Volám pomalou operaci...
// Hotovo
// Konec

Co se stalo? Program byl zamrzlý 3 sekundy. Nemohl dělat nic jiného!

Asynchronní kód (neblokující)

// Asynchronní - program pokračuje dál
console.log('Start');

// setTimeout - asynchronní funkce
setTimeout(() => {
  console.log('Hotovo po 3 sekundách');
}, 3000);

console.log('Konec');

// Výstup (okamžitě):
// Start
// Konec
// (po 3s): Hotovo po 3 sekundách

Co se stalo? setTimeout naplánoval callback na později a program OKAMŽITĚ pokračoval dál!

Event Loop v akci

console.log('1');

setTimeout(() => {
  console.log('2 - async');
}, 0);  // i 0ms jde do FRONTY!

console.log('3');

// Výstup:
// 1
// 3
// 2 - async

// Proč?
// 1. Provede synchronní kód (1, 3)
// 2. Call stack je prázdný
// 3. Event loop vezme callback z fronty (2)

Klíčové: I když je timeout 0ms, callback se provede AŽ PO synchronním kódu!

Reálné příklady asynchronity

// ❌ Synchronní čtení souboru (Node.js) - BLOKUJE
const fs = require('fs');
const data = fs.readFileSync('big-file.txt');  // ⏸️ Čeká
console.log(data);
console.log('Další kód');  // Čeká na soubor

// ✅ Asynchronní čtení souboru - NEBLOKUJE
fs.readFile('big-file.txt', (err, data) => {
  console.log(data);  // Provede se až je soubor načtený
});
console.log('Další kód');  // Běží OKAMŽITĚ!

TypeScript

TypeScript má stejné chování jako JavaScript, ale pomáhá s typy pro async operace.

Synchronní funkce

// Synchronní funkce vrací hodnotu přímo
function syncOperation(): string {
  return 'Výsledek okamžitě';
}

const result: string = syncOperation();  // Okamžitý výsledek
console.log(result);

Asynchronní funkce vrací Promise

// Asynchronní funkce vrací Promise<T>
function asyncOperation(): Promise<string> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Výsledek po čekání');
    }, 1000);
  });
}

// Použití s .then()
asyncOperation().then((result: string) => {
  console.log(result);  // Výsledek až po 1s
});

// Nebo async/await (modernější)
async function main(): Promise<void> {
  const result = await asyncOperation();  // Počká na výsledek
  console.log(result);
}

TypeScript kontroluje typy:

• ✅ Promise - TS ví, že výsledek bude string
• ✅ Promise - výsledek bude number
• ✅ Promise - výsledek bude objekt typu User

Rozdíl JS vs TS

JavaScript:

• Asynchronní funkce vracejí Promise (runtime)
• Žádná typová kontrola async kódu
• Nevíš, co dostaneš z Promise, dokud to nezkoušíš

TypeScript:

• Explicitní typy pro Promise
• Kontrola typů i v async kódu
• TS ti řekne, co dostaneš z Promise PŘED spuštěním
• Lepší autocomplete pro async operace

// TS ví, že result je string
async function example() {
  const result = await asyncOperation();  // Promise<string>
  result.toUpperCase();  // ✅ TS ví, že je to string
  // result.toFixed();    // ❌ Error - string nemá toFixed()
}

Tip

💡 Kdy použít async:

// ❌ Synchronní pro I/O = ŠPATNĚ (blokuje program!)
const data = fs.readFileSync('file.txt');

// ✅ Asynchronní pro I/O = DOBŘE (neblokuje)
fs.readFile('file.txt', (err, data) => {
  // zpracuj data
});

// ✅ Nebo async/await (modernější)
const data = await fs.promises.readFile('file.txt');

💡 Běžné async operace:

• 🌐 HTTP requesty (fetch, axios)
• 💾 Čtení/zápis souborů
• 🗄️ Databázové dotazy
• ⏱️ Časovače (setTimeout, setInterval)
• 🎬 Animace, DOM události

💡 Event Loop vizualizace:

┌───────────────────────────┐
│    Call Stack (synch)     │ ← Synchronní kód (běží hned)
└───────────────────────────┘
           │
           ↓
┌───────────────────────────┐
│   Task Queue (async)      │ ← setTimeout, setImmediate
├───────────────────────────┤
│ Microtask Queue (async)   │ ← Promises (vyšší priorita!)
└───────────────────────────┘

Promises mají PRIORITU před setTimeout callbacky!