Cómo se ejecutan los widgets
Un widget parece un componente de React normal y corriente, pero nunca se ejecuta en el marco. Blotch lo ejecuta en sus propios servidores, le saca una imagen y envía esa imagen al marco. Saber cómo funciona esto explica la mayoría de las reglas para escribir widgets.
Del código a la tinta electrónica
Poco antes de que una página tenga que aparecer en un marco, Blotch la prepara:
- Cada widget de la página se abre en su propia ventana del navegador, con el tamaño exacto de su caja en la página.
- El widget obtiene sus datos y se dibuja.
- Cuando todo ha cargado, Blotch le hace una captura de pantalla.
- La captura se convierte a blanco y negro, con patrones de puntos en lugar de tonos de gris, y se envía al marco.
Después, el marco muestra la imagen hasta la siguiente actualización. En Modo estándar, entre una y otra se queda en reposo.
Qué significa para tu código
Un widget es una imagen fija. Nadie puede tocarlo, desplazarlo ni verlo animarse. Los temporizadores, las transiciones y los controladores de clic no sirven de nada. Dibuja en el primer renderizado todo lo que quieras que se vea.
No hay estado de carga. Blotch espera a que tu widget tenga sus datos antes de sacar la imagen, así que el hook useFetch te da los datos sin más. Nunca tienes que dibujar un indicador de carga.
Los errores se muestran solos. Si tu widget lanza un error, por ejemplo porque una API no responde, el marco muestra el error en el lugar de tu widget. No necesitas una barrera de errores (error boundary) propia. Para mostrar un mensaje más amable ante un error que esperas, compruébalo y dibuja otra cosa.
Las solicitudes pasan por Blotch. useFetch envía cada solicitud a través de los servidores de Blotch. Por eso funcionan las API que bloquean las solicitudes de los navegadores, y por eso las respuestas se pueden guardar en caché y compartir entre marcos. También significa que un widget no puede llegar a un servidor de la red doméstica de nadie.
Los datos se obtienen con algo de antelación. Las páginas se preparan unos minutos antes de aparecer en pantalla, así que, cuando alguien ve los datos, ya tienen esos minutos de antigüedad. Pocas veces importa, pero cerca de la medianoche sí. Consulta Mostrar la fecha y la hora correctas.
El reloj se adelanta. Para que un widget muestre la hora correcta, new Date() te da el momento en que la página aparece en pantalla, no el momento en que se preparó. En la vista previa del Estudio de widgets, es simplemente la hora actual.
La zona horaria hay que pedirla. El navegador que dibuja tu widget no está en la zona horaria del marco. Obtén la zona del marco con useTimeZone y pásala siempre que formatees una hora. Si no lo haces, tu widget puede verse bien en la vista previa, que usa la zona de tu ordenador, y aun así estar mal en el marco.
Las fechas y los números siguen el idioma del marco. Las funciones de formato como toLocaleDateString usan el idioma que eligió el propietario del marco, salvo que indiques otro. Consulta Mostrar texto en el idioma del marco.
Todo llega a través de hooks
Tu componente Widget no recibe props. Todo lo que sabe sobre dónde se ejecuta le llega a través de los hooks de la biblioteca Blotch:
| Hook | Te da |
|---|---|
useInputs | Los ajustes que eligió quien lo instaló |
useAssets | Las imágenes que subiste |
useLayoutShape | El tamaño y la forma de su caja |
useTimeZone | La zona horaria del marco |
usePreferredLanguage | El idioma del marco |
useTheme | Si el marco usa su tema claro o el oscuro |
useBatteryLevel | El nivel de batería del marco |
Blanco y negro
La pantalla muestra dos colores: negro y blanco. Los estilos de los widgets se escriben con Tailwind CSS, configurado con solo dos colores, foreground y background, que se intercambian cuando el marco usa su tema oscuro. Las demás clases de color no hacen nada.
Los tonos se forman con patrones de puntos, que quedan bien en áreas grandes, como una barra rellena, pero hacen que las líneas finas y el texto pequeño se vean moteados. Usa text-foreground pleno para el texto y las líneas, y deja los tonos solo para los fondos.
Los componentes de la biblioteca Blotch ya siguen estas reglas, así que construir con ellos es la forma más fácil de que todo se vea bien.
Tamaños
La pantalla completa mide 960 por 680 píxeles, y un widget puede ocupar cualquier parte de ella, desde un cuadrado pequeño hasta la pantalla entera, en horizontal o en vertical. Además, el propietario del marco le añade un borde y un margen interior. Un widget tiene que verse bien en todos los tamaños. Consulta Diseñar para todos los tamaños.
Los widgets ocultos no se dibujan
Si otros widgets de la página tapan por completo un widget, Blotch no lo dibuja.