¿Cómo desarrollar aplicaciones web “super eficientes” del Front?

Aprende cómo desarrollar un front de aplicaciones web super eficientes con las últimas tendencias y técnicas. Mejora la eficiencia con estas prácticas.

Cuando nos solicitan implementar aplicaciones web “super eficientes” parece ser un requisito muy simple que basta con pedirlo en las especificaciones.

Cuando hablamos de eficiencia en una aplicación web, podemos hacer referencia al impacto de diferentes factores en proyectos informativos. Nos centraremos en describir aquellos que nos permitan poder “hacer volar la app web de forma robusta” con una cantidad de recursos limitados. Las recomendaciones que vamos a proponer van a ser para aplicaciones web masivamente utilizadas.

Hay muchas circunstancias que engloban a los factores de eficiencia en aplicaciones de la “parte Front” y factores de eficiencia de la “parte Back”. Estas aplicaciones tienen la capacidad de presentar una óptima experiencia de usuario y para ello se requiere de  que nos permita mover las vistas e interactuar con los componentes de formar rápida y ágil.

Eficiencia en la parte Front

Las aplicaciones web actuales actúan del mismo modo que lo hacen las aplicaciones de nuestros móviles, pero con una tecnología distinta y de forma mucho más abierta y con unas diferencias clave:

• Las aplicaciones de nuestros móviles, actualmente, requieren en la mayoría de los casos de un proceso de instalación previo, mientras que las aplicaciones web suelen tener que ser operativas desde el primer momento, lo que las hace más eficientes.
• Las aplicaciones móviles suelen contener todas las operativas previstas en un único paquete, en las aplicaciones web resulta más apropiado dividir las operativas en distintas páginas.
• La instalación de nuevas versiones de las aplicaciones móviles no siempre se realiza de manera automática y aunque lo sea, depende de múltiples factores que no garantizan que el usuario esté empleando la última disponible. En las aplicaciones web es posible controlar el proceso de actualización de forma remota.

El modelo sigue siendo un modelo cliente/servidor de 3 capas, en estas aplicaciones web modernas la parte cliente cobra mucho más protagonismo.

A medida que las aplicaciones web han ido trasladando cada vez más interactividad y funcionalidad a la parte del cliente, se han ido complicando el mantenimiento de esta parte. El camino a construir este tipo de aplicaciones modernas está lleno de retos.

Aunque al principio es muy sencillo empezar a añadir alguna funcionalidad a una página web mediante algunas líneas de JavaScript. A medida que crece esta funcionalidad, también lo hace la dificultad de su mantenimiento posterior y esto puede suponer problemas de rendimiento donde cobra importancia el seguimiento de calidad, la monitorización y la seguridad.

En CaixaBank Tech consideramos prioritario el trabajo en el gobierno del desarrollo de aplicaciones web, estableciendo estándares de calidad y haciendo el seguimiento del cumplimiento. Nuestra apuesta es intentar aprovechar al máximo lo que ya se está empleando y ha demostrado funcionar, tanto a lo que se refiere a soluciones como a metodologías.

Respecto al cliente, hay un fuerte impacto por el cambio de paradigma. Hemos pasado de un renderizado en servidor que proporcionaba vistas individuales en el front con la información solicitada y los enlaces a otras vistas, a un modelo en el que se proporcionan aplicaciones cliente que deben cargarse en el navegador y que son capaces de recuperar información de los servidores, interaccionar con el usuario y mostrar distintas vistas.

Medición de eficiencia en aplicaciones web

En el aspecto del rendimiento percibido por el usuario, es importante tener en cuenta el impacto de este modelo en los tiempos de respuesta:

• ttfp: Time To First Paint corresponde al tiempo transcurrido desde que el usuario realiza una acción hasta que ve algún cambio en el front.
• ttfcp: Time To First Contentful Paint es el tiempo desde que el usuario realiza una acción hasta que la página empieza a mostrar contenido útil vinculado a la acción realizada.
• tti: Time To Interaction es el tiempo que transcurre desde que el usuario realiza una acción hasta que puede volver a interactuar con la página.

Parte de estos tiempos vienen condicionados por las comunicaciones entre el cliente en la parte del front y el back-end.

Consejos prácticos para la eficiencia del tiempo de carga inicial

Optimizar aplicaciones web: Tamaño y número de recursos

Minimizar los scripts: eliminar redundancias, comentarios y optimizar el contenido antes de distribuirlo, aplicar transcodificaciones …, -no hace falta que el código publicado sea legible por un humano-, adecuar resolución y calidad de las imágenes al uso que van a tener, escoger los formatos de ficheros adecuados, agrupar distintos scripts que normalmente se cargan de forma conjunta, eliminar reglas de estilos que no tienen uso real…

Optimizar aplicaciones web: camino crítico

Identificar los elementos imprescindibles para la primera interacción y separarlos del resto para qué se pueden cargar de forma prioritaria.

Optimizar aplicaciones web: Posponer la carga de aquello que no necesitamos todavía en el front

Cargar elementos y datos que no necesitamos puede interferir en la carga de elementos que sí necesitamos, por lo que aplicar una carga perezosa de los elementos y datos todavía no visibles suele mejorar la percepción de velocidad.

Optimizar aplicaciones web: Anticipar necesidades

Una vez ya tenemos cargados los elementos prioritarios, podemos aprovechar los tiempos muertos para iniciar o preparar la carga de elementos que todavía no necesitamos, pero que especulamos podríamos necesitar en breve.

Rendimiento cuasi nativo de la aplicación web

WebAssembly, a veces abreviado como Wasm, consiste en un formato de código binario portable concebido originalmente como una evolución de JavaScript, cuya función es permitir la ejecución de código originalmente escrito en otros lenguajes de programación compilados (como JAVA, C, C++, Rust, Phyton, …) dentro de máquinas virtuales en un motor JavaScript.

El principal logro de WebAssembly es permitir la ejecución de aplicaciones web de alto rendimiento: la mayor parte de los motores de ejecución de JavaScript empleados por los principales navegadores web actuales soportan este formato, lo que unido a su mayor eficiencia frente al JavaScript tradicional puede facilitar la ejecución de procesos en las aplicaciones web con un rendimiento similar al del código nativo.

Los ServiceWorkers y los proxy de tu aplicación web

Un serviceworker es un script que se ejecuta en segundo plano ligado a una aplicación web que puede seguirse ejecutando incluso una vez cerrada la página a la que están dando soporte.

Estos scripts no pueden acceder directamente al DOM de la página, pero pueden comunicarse con ella mediante eventos. Su principal función es intermediar en las comunicaciones de la aplicación web, el navegador y los servicios remotos.

Permiten, por ejemplo, hacer una gestión inteligente de datos cacheados, o proporcionar soporte a la gestión de mensajes y notificaciones push, y todo ello en un hilo JavaScript distinto del de la parte visual.

Evolución de la aplicación web: SPA’s, MPA’s y Microfrontends

Todo lo dicho anteriormente hace referencia a la percepción del usuario. También es importante de cara a la evolución de la aplicación web, si esta se construye como una única página, como un conjunto de páginas, o de un ecosistema dentro del cual conviven un conjunto de micro-aplicaciones que cooperan entre ellas.

Tradicionalmente, se suele asociar aplicación web moderna con una única página web que engloba todas las vistas y toda la funcionalidad. Este modelo suele resultar muy conveniente en un primer momento, pero suele escalar mal y supone un reto en la gestión de cambios, a veces imposible en equipos y aplicaciones grandes. A menudo, el modelo SPA puro adolece de tiempos iniciales de carga elevados y de grandes costes de mantenimiento. Las SPAs necesitan que las aplicaciones Back sean robustas e independientes. Y con ello, tenemos los microservicios que también profundizaremos más adelante.

Otro modelo es dividir la aplicación en varias páginas distintas enlazadas entre ellas, sería el caso del modelo MPA (Multiple Page Application). Este modelo facilita el mantenimiento, en especial cuando las distintas páginas que forman la aplicación están bastante desacopladas entre ellas, pero adolecen de tiempos elevados en el cambio de página y resulta complicado gestionar el estado de la aplicación.

El modelo Microfrontend viene a ser una evolución de las MPA en la que varias micro-aplicaciones web conviven en una página contenedora, estas micro-aplicaciones están desacopladas entre sí, pero disponen de mecanismos eficientes para comunicarse entre ellas y su desarrollo suele estar ligado a una visión vertical de negocio.

Resumen de aplicaciones web “super eficientes en el front”

Construir una aplicación web “super eficiente” no depende de una única persona, es un compromiso en el que es preciso involucrar el equipo de Front, el equipo de Back, y también el resto de la organización. La eficiencia absoluta es un objetivo muy caro de alcanzar que se puede ver comprometido por cualquier pequeño cambio ajeno a los equipos de desarrollo.

Ahora ya sabes todo lo que hay que tener en cuenta para la super eficiencia de la parte Front. Descubre es el siguiente artículo cómo conseguir la eficiencia en el desarrollo de aplicaciones web mediante la optimización de la parte Back.