Parte 9 — Móvil, escritorio y sin conexión#
Salir del navegador: una base de código, varias plataformas, y la red que deja de estar garantizada.
Clases 114 a 123 · 10 en total · 0 construidas · 13 tecnologías en juego.
🧭 De qué va esta parte#
Diez clases sobre lo que cambia cuando la aplicación no vive en una pestaña.
Móvil y escritorio comparten una pregunta de fondo: ¿dibujas tú los controles o usas los del sistema? Las dos respuestas tienen nombre, defensores y consecuencias medibles en apariencia, rendimiento y tamaño del artefacto.
Y una vez fuera del navegador aparece el problema más difícil de la parte: funcionar sin conexión. No es una funcionalidad que se añade: cambia el modelo de datos entero, porque el estado local pasa a ser una fuente y el servidor, un par con el que hay que reconciliar.
🎒 Qué da por sabido#
- La parte 6, porque casi todos estos frameworks son componentes con otro destino.
- La parte 8, porque sincronizar es trabajo en segundo plano con conflictos.
🎯 Qué sabrás hacer al terminarla#
- Llevar la misma pantalla a un móvil con dos enfoques distintos y comparar lo que se paga.
- Elegir entre dibujar propio y usar lo nativo con un criterio declarado.
- Guardar datos en el dispositivo y decidir qué es caché y qué es fuente.
- Hacer que la aplicación funcione sin red y sincronice después.
- Resolver un conflicto de sincronización con una política explícita, no con «el último que escribe».
- Distribuir y actualizar una aplicación que no está en un servidor tuyo.
🧵 Por qué en este orden#
Las tres primeras son la pantalla: llevarla al móvil (114), la decisión de fondo (115) y el acceso al dispositivo (116).
Las tres del medio son el problema difícil: almacenamiento local, funcionar sin conexión y sincronizar.
Las cuatro últimas son escritorio y distribución: incrustar o heredar el motor, notificaciones, actualización y cuántas plataformas caben en una base de código.
📚 Las clases#
| # | Clase | Qué resuelve | Nivel | Estado |
|---|---|---|---|---|
| 114 | La misma pantalla en móvil | Construir una lista con detalle en cada aproximación multiplataforma. | 🟡 intermedio | 🚧 Esqueleto |
| 115 | Dibujar propio o usar lo nativo | Entender qué se gana y qué se pierde con cada decisión de renderizado. | 🔴 avanzado | 🚧 Esqueleto |
| 116 | Acceso al dispositivo | Pedir un permiso y usar una capacidad del sistema. | 🟡 intermedio | 🚧 Esqueleto |
| 117 | Almacenamiento local | Guardar datos en el dispositivo y recuperarlos tras reiniciar. | 🟡 intermedio | 🚧 Esqueleto |
| 118 | Funcionar sin conexión | Seguir siendo útil cuando no hay red. | 🔴 avanzado | 🚧 Esqueleto |
| 119 | Sincronización y conflictos | Resolver dos cambios sobre el mismo dato. | 🔴 avanzado | 🚧 Esqueleto |
| 120 | Escritorio: incrustar el motor o heredarlo | Comparar el coste de llevar el navegador contra usar el del sistema. | 🟡 intermedio | 🚧 Esqueleto |
| 121 | Notificaciones | Avisar al usuario cuando la aplicación no está delante. | 🟡 intermedio | 🚧 Esqueleto |
| 122 | Distribución y actualización | Entender por qué actualizar no es desplegar. | 🔴 avanzado | 🚧 Esqueleto |
| 123 | Una base de código, cuántas plataformas | Decidir qué se comparte y qué no. | 🔴 avanzado | 🚧 Esqueleto |
🎬 Las tecnologías que aparecen#
Entre paréntesis, en cuántas clases de esta parte interviene cada una. Estar aquí no es una recomendación: es que el problema de esa clase existe de verdad para esa tecnología.
| Ecosistema | Tecnologías |
|---|---|
| JavaScript/TypeScript | React Native (9), Capacitor (5), Electron (3), Ionic (3), SvelteKit (1) |
| .NET | .NET MAUI (5), Avalonia (1), WPF (1) |
| Dart | Flutter (9) |
| Apple | SwiftUI (3) |
| Rust | Tauri (2) |
| Kotlin | Compose Multiplatform (1) |
| C++ | Qt (1) |
📖 Las palabras que esta parte define#
Sin conexión primero · Conflicto · Sincronización
Todas, con su definición, en el glosario.
✅ Cómo se ejecuta una clase de esta parte#
node scripts/run-class.mjs 114El verificador arranca cada implementación, la somete a su contrato.json y declara cuáles omitió por no encontrar su cadena de herramientas. Si te faltan cadenas, node scripts/doctor.mjs dice cuáles y cómo se instalan.
➡️ Y después#
La parte 10 pone todo lo anterior en producción y lo mide.