por Marie Morisi
El producto de ImVitro, EMBRYOLY, es una plataforma SaaS que asiste a los embriólogos en sus evaluaciones de embriones y ayuda a gestionar las necesidades de gestión de embriones de los centros de FIV. Con el aumento de la infertilidad y los crecientes retos y expectativas a los que se enfrentan los embriólogos en el laboratorio, hemos creado un producto que se adapta perfectamente a su flujo de trabajo.
Aunque este post puede ser leído por cualquier público, es más relevante para los compañeros desarrolladores web, incluidos aquellos que puedan estar interesados en unirse a nosotros en ImVitro. Soy Marie, la desarrolladora principal de front-end, y en este post os mostraré la aplicación de nuestro producto y cómo nos ayuda a alcanzar nuestros objetivos en ImVitro.
¿Qué es una aplicación de página única?
Las aplicaciones de una sola página (SPA) son aplicaciones web que cargan una sola página HTML y actualizan dinámicamente el contenido del cuerpo de esa página a medida que el usuario interactúa con la aplicación. En otras palabras, no es necesario recargar completamente las nuevas páginas desde el servidor y sólo hay que cargar el nuevo contenido.
Teniendo en cuenta que muchos sitios web muestran con frecuencia ciertos elementos en cada página, como la cabecera, el pie de página o el menú, disponer de una SPA es útil porque elimina la necesidad de recargar este contenido en cada página. La carga de la primera página puede tardar un poco más que en otras páginas, ya que el navegador debe descargar y ejecutar todo el código de la aplicación antes de que se muestre el contenido, pero una vez que la aplicación se haya cargado por completo, no será necesaria ninguna otra carga.
Con las SPA, la experiencia de navegación es rápida, lo que nos ayuda a ganar en rendimiento y a ofrecer una experiencia de usuario más fluida y dinámica.
Muchas grandes empresas de tecnología como Google (Gmail, Google Maps), Netflix, Airbnb, y muchos más optan por utilizar SPA para construir sus aplicaciones. Aunque el desarrollo de una SPA tiene muchas ventajas, puede que no sea la solución adecuada para todos los proyectos. Especialmente en el sector de la tecnología médica, las SPA pueden ser particularmente beneficiosas para mejorar la experiencia del usuario al aumentar la velocidad y la capacidad de respuesta, y permitir actualizaciones en tiempo real sin recargar la página. Exploremos a continuación las diferencias entre las SPA y el renderizado del lado del servidor (SSR):
Diferencias entre SPA y SSR
La diferencia clave entre SSR y SPA es que el primero obtiene el HTML del servidor para cada página. Cuando se solicita una nueva URL, el servidor crea una nueva página HTML y la devuelve al navegador del usuario, que entonces muestra la página HTML correspondiente. Si el usuario hace clic en un enlace, volverá a llamar al servidor para obtener el nuevo HTML de la página completa, y así sucesivamente.
SSR era una forma estándar de producir páginas web, ya que los primeros navegadores web actuaban principalmente como visores de documentos y era fácilmente indexable por los motores de búsqueda. Cuando se utiliza SSR, la carga inicial de la página puede ser más rápida porque el contenido estático es el que se carga primero. Sin embargo, el navegador debe descargar el archivo JavaScript para poder interactuar con la página. Los usuarios tendrán que esperar más tiempo antes de interactuar con la aplicación. Dado que las aplicaciones se han vuelto más complejas e interactivas, ya no se prefiere el SSR para este tipo de proyectos.
Esto no quiere decir que SSR esté obsoleto. En casos de uso específicos, SSR sería una mejor opción para un sitio web que quiera tener un buen posicionamiento en buscadores (SEO). En nuestro caso, no necesitamos tener en cuenta el SEO porque estamos desarrollando una plataforma SaaS a la que sólo pueden acceder nuestros clientes. Para enfatizar, esto es, por supuesto, independiente de la estrategia SEO y el desarrollo web del sitio web de nuestra empresa https://im-vitro.com/ donde se está leyendo este post.
¿Cómo funciona nuestro SPA?
- En el navegador
En EMBRYOLY, la aplicación y los recursos necesarios, como HTML, CSS y JavaScript, se cargan en cuanto los clientes llegan a la página de inicio de sesión. Un motor JavaScript genera el HTML de la página, y el navegador del usuario utiliza el HTML para crear la aplicación completa y renderizar visualmente la página.
Entonces, si el usuario navega de una página a otra, sólo se cargará el cuerpo de la nueva página ya que tenemos el mismo diseño en todas las páginas. Sólo obtendremos de la base de datos los datos que queramos mostrar y los mostraremos.
- En cuanto a la codificación
Las SPA deben crearse utilizando JavaScript y hemos optado por utilizar un framework Javascript llamado Vue.js. Este framework tiene muchas ventajas, ya que es ligero, tiene muchas características potentes para que los desarrolladores trabajen con él y hace que el código sea fácil de mantener y depurar.
Todas estas ventajas nos permiten crear y distribuir con frecuencia nuevas funciones en EMBRYOLY para que los embriólogos tengan una experiencia de usuario dinámica.
Ventajas adicionales de las ZPE
Además de la velocidad de carga, las SPA ofrecen otras muchas ventajas:
- Mejor capacidad de almacenamiento en caché: en caso de mala conexión a Internet, podemos almacenar en caché los datos recuperados del servidor y utilizarlos.
- Mobile-friendly: podemos utilizar SPAs para construir una aplicación móvil sin dejar de utilizar el backend de la aplicación web.
- Desarrollo rápido: cuando se construye un SPA, el código del frontend y del backend están separados, lo que significa que varios desarrolladores pueden trabajar en diferentes aspectos de la misma función al mismo tiempo.
Conclusión
En ImVitro, queremos ofrecer a los embriólogos la mejor experiencia de usuario para ayudarles en sus tareas diarias. Por eso optamos por crear una SPA: una aplicación fácilmente desplegable y escalable, que nos permite introducir con frecuencia nuevas funciones en nuestra aplicación y satisfacer sistemáticamente las necesidades de los centros de FIV.