Los beneficios de las aplicaciones de una sola página y las aplicaciones web progresivas: Mejora de CX

Publicado: 2019-06-06

Los beneficios de las aplicaciones de una sola página se han vuelto cada vez más claros, ya que la experiencia del cliente requiere que los proveedores de comercio electrónico brinden interacciones rápidas y confiables con ellos.

Durante los últimos 20 años, la mayoría de los sitios web se han creado de la misma manera: con el uso de HTML, CSS y JavaScript. Estas tecnologías se han vuelto más avanzadas con el tiempo, pero el principio se ha mantenido prácticamente igual: un usuario interactúa con una página web y el navegador del usuario realiza una llamada a un servidor web que, a su vez, responde con otro lote de HTML, CSS y JavaScript, que luego se carga y se muestra en el navegador.

(Vaya. Eso es mucho.)

Este proceso suele implicar la actualización de la página, aunque algunas tecnologías, como AJAX, permiten a los desarrolladores modificar parte del contenido sin actualizar toda la página. Debido a esto, la mayoría de los sitios web actúan y se comportan claramente como un sitio web, en lugar de una aplicación.

La mayoría de los sitios web también tienen un back-end y una capa de presentación estrechamente acoplados, lo que significa que no existe una separación real entre el front-end y el back-end de un sitio web, ya que ambos son parte de una sola aplicación monolítica.

Cómo las aplicaciones de una sola página y las aplicaciones web progresivas pueden mejorar la experiencia del cliente

Durante la última década, las aplicaciones nativas de iOS y Android se han convertido en un lugar común para casi todos nosotros. Estas aplicaciones se comportan de manera diferente a los sitios web reales, brindando a los usuarios una experiencia muy diferente y, a menudo, más satisfactoria.

Las páginas no se actualizan cuando se presiona un enlace o botón, los cambios se cargan mucho más rápido y la experiencia suele ser mucho mejor que la del sitio web móvil equivalente. En el caso de una aplicación nativa de comercio electrónico, cuando un usuario hace clic en un enlace, la aplicación realizará una llamada a un servidor de back-end, pero en lugar de que ese servidor devuelva la capa de presentación HTML, CSS y JavaScript, es simplemente enviando los datos sin procesar requeridos, y la aplicación administra cómo se muestra al usuario.

Por ejemplo, si un usuario hace clic en un producto para ver sus detalles, la aplicación llamará al servidor back-end solicitando los detalles de ese producto y el servidor responderá con una cadena de datos que contiene elementos como el nombre del producto, su precio y un enlace a una imagen, pero no es necesario enviar HTML, CSS o JavaScript para definir cómo se mostrará.

La aplicación en sí es la capa de presentación, por lo que no necesita nada de eso del servidor de back-end. Esto es mucho más rápido y permite que la aplicación muestre los detalles del producto al cliente sin actualizar una página. La tecnología brinda a los desarrolladores la libertad de crear una experiencia de cliente fluida y sin las limitaciones del modelo tradicional.

¿No sería genial si se pudiera proporcionar una experiencia similar a la de una aplicación a través de un navegador web para que la distinción entre una aplicación nativa y un sitio web se volviera borrosa?

Aquí es donde entran las aplicaciones de página única (SPA) y las aplicaciones web progresivas (PWA).

¿Qué es una solicitud de una sola página?

Un SPA es una aplicación escrita en JavaScript que se ejecuta en un navegador web y, por lo general, no requiere que se actualice la página para mostrar nueva información.

Cuando un usuario visita el sitio web por primera vez, la aplicación, junto con los recursos de presentación (HTML, CSS y algunos scripts) se cargan en el navegador. A partir de este momento, el usuario se encuentra en una sola página web y la aplicación carga el contenido relevante y modifica la visualización cuando es necesario.

Al igual que una aplicación nativa, cuando un usuario hace clic en un enlace, la aplicación llama al servidor de back-end, que a su vez envía los datos requeridos en una cadena, que generalmente no incluye ninguno de los recursos de presentación, como ya se ha hecho. cargada cuando el usuario visitó por primera vez el sitio web.

Debido a que el usuario está esencialmente en una sola página web, no existe realmente el concepto de actualizar una página. En cambio, la aplicación modifica la página para mostrar información diferente cuando es necesario.

Los SPA generalmente están completamente desacoplados de la aplicación y las interfaces de back-end al back-end a través de un conjunto de API. A menudo se ubicará en su propio servidor y se puede implementar por separado. En cierto modo, es bastante agnóstico con respecto a la aplicación de back-end, ya que simplemente envía y recibe datos hacia y desde ella, tratándolo como un sistema de terceros.

Todos hemos estado usando SPA por un tiempo, probablemente sin siquiera darnos cuenta. Facebook, Gmail, Twitter, LinkedIn e Instagram (entre muchos otros) utilizan SPA en lugar de sus sitios web.

Si visita alguno de esos sitios web ahora, notará que se comportan mucho más como una aplicación nativa que como un sitio web tradicional. Las páginas rara vez, o nunca, se actualizan cuando interactúas con ellas y son muy rápidas. Al hacer clic en enlaces y botones, cambia el contenido que está viendo, pero los elementos como el encabezado y el pie de página casi nunca se actualizan una vez que se cargaron inicialmente.

Beneficios de las aplicaciones de una sola página

La mayor y más obvia ventaja de un SPA es cómo se pueden usar para mejorar la experiencia del cliente al permitir que los diseñadores y desarrolladores brinden una experiencia similar a la de una aplicación y no se vean limitados por el enfoque tradicional de recargar páginas.

Esto requiere una nueva forma de diseñar y pensar, ya que las reglas normales ya no se aplican, pero los beneficios para la experiencia del usuario pueden ser enormes.

Los SPA generalmente cargan contenido mucho más rápido que los sitios web estándar, ya que gran parte de los recursos de presentación (HTML, CSS) se cargan solo una vez. Las interacciones con la aplicación solo requieren una llamada al servidor back-end para recuperar pequeñas cantidades de datos, en lugar de páginas HTML/CSS completamente formadas. La aplicación puede mostrar rápidamente los datos modificados sin tener que volver a cargar la página.

Debido a que un SPA está completamente desacoplado de la aplicación de back-end, se puede implementar por separado, lo que puede tener una gran ventaja. Un pequeño cambio de front-end no requerirá que se implemente toda la aplicación, lo que puede ser una tarea bastante grande y, a veces, requiere tiempo de inactividad.

Desventajas de un SPA

Uno de los mayores desafíos del uso de SPA es el impacto que tiene en el SEO. Como no siempre tienen la estructura tradicional de páginas distintas, cada una con una URL distinta, esto puede causar problemas con los motores de búsqueda que indexan el contenido. Sin embargo, esto se puede contrarrestar con el uso de técnicas como la representación del lado del servidor y garantizar que los clics generen direcciones URL únicas.

También se está convirtiendo en un problema menor con el tiempo, ya que los bots de los motores de búsqueda se están modificando para hacer frente a los SPA. Google es una de las empresas que los defiende, después de todo.

Algunos SPA tardan un poco en cargarse en la primera visita porque los recursos de la aplicación y la presentación se cargan en la vista de la primera página.

Esto es muy notable con SPA como Gmail, donde tienen una gran imagen de carga cuando visitas el sitio web por primera vez. Este problema se puede contrarrestar con el uso de la representación del lado del servidor y una programación eficiente para garantizar que la carga inicial de la aplicación y los recursos no sea demasiado grande.

¿Qué es una aplicación web progresiva?

Una PWA es un poco difícil de definir, ya que no es una tecnología específica, sino más bien una metodología de desarrollo o un conjunto de principios que juntos hacen que un sitio web o una aplicación sean más o menos PWA.

El término PWA fue acuñado originalmente por Google, quien creó una lista de verificación para definir lo que hace a un PWA. Entre otras cosas, Google ha definido que una PWA debe ser:

Seguro: servido bajo https
Sensible: se adapta a cualquier factor de forma
Capaz de trabajar sin conexión: usar trabajadores de servicio para almacenar páginas en caché
Rápido: capaz de cargar rápidamente en conexiones 3G
Similar a una aplicación: usa el modo de shell de la aplicación y el diseño para sentirse como una aplicación
Instalable: use un archivo de manifiesto para permitir que la aplicación se agregue a la pantalla de inicio
Interesante: uso de herramientas como notificaciones automáticas
Progresivo: funciona en todos los navegadores, pero es progresivamente mejor en los navegadores modernos

Como puede ver, algunos de los elementos de la lista de verificación son un poco vagos o subjetivos. También puede ver que algunos de ellos suenan similares a un SPA. Un sitio web HTML/CSS tradicional se puede convertir en una PWA al igual que un SPA. Un SPA no es automáticamente un PWA, pero tiene algunas características que lo impulsan en esa dirección.

¿Confundido todavía?

Ventajas de las PWA

Al igual que con un SPA, una de las mayores ventajas de un PWA es la mejora en la experiencia del cliente, dándole una sensación similar a la de una aplicación y cerrando la brecha entre un sitio web móvil tradicional y una aplicación nativa de iOS o Android.

Las características como la capacidad de guardar en la pantalla de inicio o la capacidad de almacenar páginas en caché a través de los trabajadores del servicio pueden hacer que el sitio web se vea y se sienta un poco como una aplicación nativa.

Los PWA también tienden a ser muy rápidos, ya que ese es uno de los principios clave en la lista de verificación.

El sistema operativo Android da acceso a los navegadores al hardware del dispositivo móvil. que permite cosas como notificaciones automáticas y el uso de escaneo NFC, lo que realmente puede mejorar la CX.

Desventajas de las PWA

La mayor desventaja de las PWA es la falta de soporte de Apple. Para obtener lo mejor de una PWA, realmente necesita ejecutarse en un dispositivo Android, ya que el sistema operativo Android brinda a los navegadores acceso a una cantidad significativa de funciones en el dispositivo, mientras que Apple lo restringe severamente. Esto está mejorando lentamente, pero aún queda un largo camino por recorrer.

Otra desventaja es la falta de una definición clara, que puede estar abierta a interpretación.

Los SPA y PWA son el futuro del desarrollo de sitios web

Aunque esta tecnología aún no es del todo convencional para la mayoría de los sitios web de comercio electrónico, sin duda es el futuro del desarrollo de sitios web.

Si bien los SPA son una tecnología específica que se puede usar para crear una aplicación de comercio electrónico, los PWA son generalmente sitios web que se han creado siguiendo una metodología establecida por Google, que consideran que brinda la mejor experiencia al cliente.

Cualquier persona que desarrolle un SPA debe intentar cumplir con la lista de verificación de PWA tanto como sea posible para proporcionar la mejor CX posible. Estas tecnologías brindan a los diseñadores y desarrolladores más libertad en la experiencia y los viajes del usuario, lo que les permite alejarse del modelo tradicional página por página.

Muchos proveedores de software como SAP e IBM están invirtiendo mucho en la creación de interfaces SPA para sus plataformas de comercio electrónico, y sospecho que dentro de unos años, la mayoría de los sitios web de comercio electrónico se construirán de esta manera, utilizando marcos de JavaScript como Angular, Vue o Reaccionar.

Se crearán cada vez menos sitios de comercio electrónico utilizando el modelo HTML/CSS tradicional, y la brecha entre los sitios web y las aplicaciones nativas se hará cada vez más pequeña, hasta el punto en que será difícil distinguir entre ellos.