Consigna: Desafíos y Soluciones
Se te pide que implementes una funcionalidad para que los datos del periodontograma se guarden automáticamente cada 10 segundos y que se sincronicen en tiempo real si otro colega está revisando el mismo registro.
¿Qué tipo de base de datos utilizarías (relacional como PostgreSQL o no relacional como Firestore)?
¿Qué patrón de diseño o herramienta de frontend usarías para manejar la sincronización y actualización del estado de la UI sin recargar la página?
¿Cómo te asegurarías de que la interfaz de usuario no se "congele" durante el proceso de guardado automático?
Respuesta
Sincronización en tiempo real: Si es una aplicación multiusuario, los datos deben sincronizarse entre dispositivos. Esto requeriría el uso de bases de datos en tiempo real como Firestore o Supabase.
No sé qué patroón de frontend usar para actualizar la UI sin recargar la página. Tampoco sé cómo asegurarme de que la UI no se "congele" durante el proceso de guardado automático.
Devolución de la respuesta
¡Excelentes preguntas! Has identificado los dos desafíos más complejos en el desarrollo de una aplicación como esta: la gestión de la interactividad y el manejo del rendimiento. Vamos a abordar tus dudas.
Sincronización en Tiempo Real
Tienes toda la razón. Si la aplicación es multiusuario (por ejemplo, para que un higienista y un odontólogo trabajen en el mismo paciente a la vez), necesitas una base de datos en tiempo real. Firestore y Supabase son opciones perfectas para esto.
El concepto clave aquí es la escucha de cambios (listeners). En lugar de que tu aplicación pida datos al servidor constantemente, la base de datos te "avisa" cada vez que un dato cambia.
Registro de datos: Cuando un usuario introduce un valor (por ejemplo, en el punto de medición 5 del diente 14), tu aplicación guarda ese dato en Firestore.
Notificación automática: Firestore envía una notificación a todos los dispositivos que están "escuchando" los datos de ese paciente.
Actualización de la UI: Tu aplicación recibe la notificación con el dato nuevo y, de forma inmediata, actualiza la visualización del periodontograma en la pantalla de todos los usuarios conectados, sin necesidad de recargar la página.
Patrón de Frontend para Actualizar la UI
El patrón de frontend que buscas se llama "Declarative UI" (Interfaz de Usuario Declarativa). En lugar de decirle al programa "cambia el color de este elemento", le dices "este es el estado actual de mi aplicación, por favor, renderiza la UI que lo represente".
Librerías como React están diseñadas para este patrón. Tú gestionas el estado (por ejemplo, en un objeto de Zustand), y React se encarga de que la interfaz de usuario siempre se vea como el estado le dice que debe verse. Cuando el estado cambia (por ejemplo, por un dato nuevo de Firestore), React automáticamente y de forma eficiente recalcula lo que debe mostrar, sin recargar toda la página.
Evitar que la UI se Congele durante el Guardado
El "congelamiento" de la interfaz de usuario ocurre cuando una tarea pesada (como guardar muchos datos en la base de datos) bloquea el hilo principal del navegador, que es el encargado de renderizar la UI.
La solución es realizar operaciones asincrónicas. Esto significa que la tarea de guardar se ejecuta "en segundo plano" sin detener la interfaz. En JavaScript, esto se logra fácilmente con las palabras clave async y await.
Para el guardado automático, una técnica adicional muy útil es el debouncing. En lugar de guardar los datos cada vez que se presiona una tecla, el debouncing espera un corto período (por ejemplo, 500 milisegundos) después de la última entrada del usuario. Si el usuario sigue escribiendo, el temporizador se reinicia. El guardado solo se ejecuta una vez que el usuario ha hecho una pausa, lo que reduce drásticamente las operaciones de guardado y libera recursos.