Come vengono eseguiti i widget
Un widget sembra un normale componente React, ma non viene mai eseguito sulla cornice. Blotch lo esegue sui propri server, ne scatta un’immagine e la invia alla cornice. Sapere come funziona spiega la maggior parte delle regole per scrivere i widget.
Dal codice all’inchiostro elettronico
Poco prima che una pagina debba comparire su una cornice, Blotch la prepara:
- Ogni widget della pagina viene aperto in una finestra del browser tutta sua, grande esattamente quanto il suo riquadro nella pagina.
- Il widget recupera i suoi dati e si disegna.
- Quando tutto è caricato, Blotch ne fa uno screenshot.
- Lo screenshot viene convertito in bianco e nero, con motivi di puntini al posto delle sfumature di grigio, e inviato alla cornice.
La cornice mostra poi l’immagine fino all’aggiornamento successivo. In Modalità standard, tra un aggiornamento e l’altro va in sospensione.
Cosa significa per il tuo codice
Un widget è un’immagine statica. Nessuno può toccarlo, scorrerlo o vederlo animarsi. Timer, transizioni e gestori dei clic non servono a niente. Disegna tutto ciò che vuoi far vedere già al primo rendering.
Non esiste uno stato di caricamento. Blotch aspetta che il tuo widget abbia i suoi dati prima di scattare l’immagine, quindi l’hook useFetch ti dà semplicemente i dati. Non devi mai disegnare un indicatore di caricamento.
Agli errori pensa Blotch. Se il tuo widget genera un errore, per esempio perché un’API non risponde, la cornice mostra l’errore al posto del widget. Non ti serve un error boundary tuo. Per mostrare un messaggio più gentile per un errore che ti aspetti, controlla se si è verificato e disegna qualcos’altro.
Le richieste passano da Blotch. useFetch invia ogni richiesta attraverso i server di Blotch. Per questo funzionano anche le API che bloccano le richieste dai browser, e per questo le risposte possono essere memorizzate nella cache e condivise tra le cornici. Significa anche che un widget non può raggiungere un server sulla rete di casa di qualcuno.
I dati vengono recuperati con un po’ di anticipo. Le pagine vengono preparate alcuni minuti prima di andare sullo schermo, quindi quando qualcuno le vede i dati sono vecchi di altrettanto. Raramente importa, ma intorno a mezzanotte sì. Consulta Mostrare la data e l’ora giuste.
L’orologio viene spostato in avanti. Perché un widget mostri l’ora giusta, new Date() ti dà il momento in cui la pagina va sullo schermo, non quello in cui è stata preparata. Nell’anteprima dello Studio dei widget è semplicemente l’ora attuale.
I fusi orari vanno richiesti. Il browser che disegna il tuo widget non si trova nel fuso orario della cornice. Ottieni il fuso della cornice da useTimeZone e passalo ogni volta che formatti un orario. Se non lo fai, il tuo widget può sembrare giusto nell’anteprima, che usa il fuso del tuo computer, ed essere comunque sbagliato sulla cornice.
Date e numeri seguono la lingua della cornice. Le funzioni di formattazione come toLocaleDateString usano la lingua scelta dal proprietario della cornice, a meno che tu non ne indichi una. Consulta Mostrare il testo nella lingua della cornice.
Tutto arriva dagli hook
Il tuo componente Widget non riceve props. Tutto ciò che sa del contesto in cui viene eseguito arriva dagli hook della libreria Blotch:
| Hook | Cosa ti dà |
|---|---|
useInputs | Le impostazioni scelte da chi lo ha installato |
useAssets | Le immagini che hai caricato |
useLayoutShape | Le dimensioni e la forma del suo riquadro |
useTimeZone | Il fuso orario della cornice |
usePreferredLanguage | La lingua della cornice |
useTheme | Se la cornice usa il tema chiaro o quello scuro |
useBatteryLevel | Il livello della batteria della cornice |
Bianco e nero
Lo schermo mostra due colori: nero e bianco. Lo stile dei widget si definisce con Tailwind CSS, configurato con due soli colori, foreground e background, che si scambiano quando la cornice usa il tema scuro. Le altre classi di colore non hanno effetto.
Le sfumature nascono da motivi di puntini, che funzionano bene per le aree grandi come una barra piena, ma fanno sembrare puntinati le linee sottili e il testo piccolo. Per testo e linee usa sempre text-foreground pieno, e riserva le tinte agli sfondi.
I componenti della libreria Blotch seguono già queste regole, quindi costruire con quelli è il modo più semplice per ottenere un aspetto corretto.
Dimensioni
L’intero schermo misura 960 per 680 pixel, e a un widget può toccarne una parte qualsiasi, da un piccolo quadrato allo schermo intero, in orizzontale o in verticale. Il proprietario della cornice aggiunge anche un bordo e un margine interno intorno al widget. Un widget deve avere un bell’aspetto a ogni dimensione. Consulta Progettare per ogni dimensione.
I widget nascosti non vengono disegnati
Se un widget è completamente coperto da altri widget della pagina, Blotch non lo disegna affatto.