Smart TV in Qwik
La stessa interfaccia TV della versione React, riscritta in Qwik. Stesso markup, stessi stili, stesso motore di navigazione: cambia solo il framework.
Apri la versione React →Demo Smart TV
Race Condition
Due promise, un solo stato. Vince chi arriva per ultimo.
Continua a guardare
Thriller del frontend
Documentari
Commedie
Entra con Tab o con il telecomando qui sotto, poi usa le frecce, Invio per aprire e Backspace/Esc per tornare indietro.
Cosa cambia
- React idrata il componente: prima che la demo risponda, il browser scarica ed esegue il runtime e il codice dell’isola.
- Qwik riprende lo stato dall’HTML (resumability): al caricamento nessun componente viene eseguito, gira solo il piccolo loader che intercetta gli eventi.
- Il JavaScript scaricato non è zero: l’integrazione precarica il runtime di Qwik con modulepreload e, dopo il load, il preloader scarica i chunk che probabilmente serviranno. Vengono scaricati ma non eseguiti finché un’interazione non li richiede.
- Il blocco dello scroll delle frecce usa sync$: è serializzato nell’HTML e funziona prima che arrivi qualsiasi chunk.
- Il motore di spatial navigation è lo stesso file della versione React: in Qwik viene creato al primo focus o tasto, non al caricamento.
- Entrambe le pagine sono caricate senza ClientRouter, così il misuratore conta solo il JavaScript della pagina.
- Alla prima interazione Qwik riconcilia il DOM generato dal server: l’integrazione inserisce preload e script nel primo elemento del componente, e riconciliandoli staccherebbe lo schermo TV facendogli perdere il focus. Un elemento vuoto in testa al componente li raccoglie, e il motore usa comunque event.target come punto di partenza se il focus va perso.
Qwik 2 è ancora in release candidate (2.0.0-rc.2): è l’unica versione compatibile con Astro 7 e Vite 8.
Risultati misurati
| Metrica | React | Qwik |
|---|---|---|
| JavaScript scaricato (compresso) | 78,7 KB | 49,1 KB |
| JavaScript eseguito al caricamento | 61 ms | 43 ms |
| JavaScript alla prima interazione (Tab + freccia) | 13 ms | 30 ms |
Build di produzione, Chrome con CPU rallentata 4×, cache disattivata, mediana di 5 caricamenti. Misurati il 9 ottobre 2026: i valori assoluti cambiano da macchina a macchina, il rapporto tra le due versioni è quello che conta.
Su una demo così piccola il bilancio è vicino al pareggio: Qwik scarica quasi il 40% in meno e sposta parte del lavoro dal caricamento alla prima interazione, dove paga la ripresa. Il vantaggio cresce con la quantità di componenti interattivi nella pagina, perché quelli mai usati non vengono mai eseguiti.
Lezione imparata: il primo porting, un unico grande componente tradotto dalla versione React, costava circa mezzo secondo alla prima interazione con CPU 4×. In Qwik conviene dividere l’interfaccia in componenti piccoli che leggono solo lo stato che serve loro: spostare il focus aggiorna soltanto il riquadro in evidenza.
Codice sorgente: src/pages/lab/qwik-tv