Mejora del rendimiento front-end de Magento con ReactJS

Magento

Magento es una plataforma de código abierto basada en PHP para crear soluciones de comercio electrónico. Construido por la compañía Magento (ahora parte de Adobe), es utilizado por más de 350,000 desarrolladores en todo el mundo. Permite la creación de escaparates digitales altamente personalizables para fines de empresa a cliente y de empresa a empresa. Magento 2, la versión transformada de la plataforma de comercio electrónico Magento, viene con una nueva arquitectura, estructura de codificación y diseño de base de datos.

a) Descripción general

La plataforma de Magento está construida sobre PHP y MySQL. Durante su vida útil de 10 años (la versión 1.0 lanzada en marzo de 2008 y la versión 2.0 en noviembre de 2015, ha sufrido cambios en términos de estructura y patrones de desarrollo y ahora está en su segunda versión principal, Magento 2.

La estructura de Magento se compone de dos partes principales, una de ellas es el back-end, con la base de datos y MySQL, y las interfaces de Modelo, Datos y Servicio, como se puede ver en la figura 3. Estas están directamente conectadas y utilizadas en los Bloques, Diseños de Magento, y Plantillas, que se definirían como el front-end de la aplicación.

b) Búsqueda de productos

Una de las características destacadas en cualquier sitio web es la función de búsqueda de productos, que permite a los usuarios escribir términos para buscar productos. Una vez que se recopilan los resultados de la búsqueda, el usuario generalmente puede ordenarlos o filtrarlos por categorías o atributos del producto.

En Magento, la búsqueda generalmente usa MySQL, Solr o Elasticsearch para indexar el catálogo. La indexación de catálogo determina qué resultados se devuelven al escaparate al ingresar un nuevo término de búsqueda o al cambiar las opciones de filtrado de los resultados ya recopilados.

c) ElasticSearch

Elasticsearch es un motor de búsqueda gratuito y de código abierto construido en Apache Lucene. Se utiliza particularmente cuando se trata con grandes cantidades de datos y cuando se necesita recuperar rápidamente esos datos. Cuando se usa MySQL, la consulta de datos puede llevar mucho tiempo cuando se tienen muchos datos. Por lo tanto, el principal punto de venta de Elasticsearch es multiplicar las velocidades de consulta por cientos. Funciona indexando datos en documentos que tienen claves y valores y viene con una API que permite recuperar estos documentos indexados.

Cuando se usa en una tienda Magento, el catálogo se indexa en un nodo Elasticsearch. Es fácilmente configurable simplemente habilitándolo y especificando desde el panel de administración de la tienda, la dirección IP y el puerto del host donde se encuentra el nodo Elasticsearch.

d) API de búsqueda

Magento tiene una buena cantidad de puntos finales API REST, de los cuales se pueden usar para buscar productos. Este punto final de la API de búsqueda toma como datos enviados una matriz llamada criterio de búsqueda, que tiene la siguiente estructura

Para realizar una solicitud, el cliente debe enviar una solicitud GET a una ruta específica adjunta a la URL base de la tienda. La ruta es / rest / V1 / search /? a lo que se añaden los criterios de búsqueda.

2. ReactJS

a) Reaccionar como una herramienta

React es una biblioteca de JavaScript creada por Facebook y diseñada para crear interfaces de usuario. Se basa en el uso de componentes y estados para representar contenido dinámico en páginas web sin la necesidad de cargar páginas. Es una de las bibliotecas JavaScript más populares y compatibles para interfaces de interfaz de usuario en estos días.

A diferencia de las soluciones de JavaScript anteriores, que implicaban activar manualmente los cambios en la página, React "sabe" cuándo la interfaz de usuario debe actualizarse y volver a representarse en la página cuando cambian los estados de los componentes. La idea principal que diferencia a React de otras bibliotecas o marcos (por ejemplo, AngularJS, Knockout) es el uso de un "DOM virtual", que mejora el rendimiento al reducir la cantidad de cambios que ocurren en el DOM.

b) Reaccionar el DOM virtual

El DOM virtual de React es técnicamente lo que parece. Es un DOM que se crea cuando los componentes se procesan y cuando los estados cambian. El enfoque utilizado es crear un nuevo DOM virtual cuando algún elemento necesita ser renderizado nuevamente y compararlo con otra representación DOM virtual del estado anterior de la aplicación, haciendo que el "diff" use un algoritmo y renderizado nuevamente en el DOM solamente. elementos que necesitan ser cambiados.

El DOM virtual es una representación completa del DOM sin ser un DOM real, lo que significa que el proceso de creación de un nuevo DOM virtual es mucho más rápido que la creación del DOM de la página real. En consecuencia, dado que React crea un nuevo DOM virtual cada vez que algo necesita volver a representarse, en realidad no necesita saber qué ha cambiado. Esto significa que los desarrolladores no necesitan controlar el proceso de representación, ya que React cambiará el DOM de la página solo cuando se necesite un cambio real. En cuanto al rendimiento, es uno de los mejores y más inteligentes métodos para volver a representar parte del DOM que necesita cambios.

c) Biblioteca de gestión estatal

Cuando se usa una biblioteca de JavaScript, como React, los desarrolladores crean componentes que en la mayoría de los casos tienen estado, lo que significa que cada componente tiene estados que pueden cambiar y que desencadenan actualizaciones de componentes. Cuando la aplicación se hace grande con muchos componentes interconectados, puede volverse engorrosa y los estados pueden necesitar pasar de padres a hijos y viceversa. Para solucionar este problema, existen bibliotecas de administración de estado. Permiten mantener los estados de la aplicación en un solo lugar para facilitar la administración del estado. Las dos bibliotecas más populares utilizadas junto con React son Redux y MobX.

3. Reaccionar y Magento

Magento 2.3 utiliza una nueva herramienta llamada PWA Studio. Es una herramienta de aplicación web progresiva que permitirá a los desarrolladores trabajar con Magento de forma "sin cabeza", lo que significa que el frontend no está directamente vinculado al backend y la comunicación se realiza a través de API.

Hasta ahora, la interfaz de usuario de Magento se creó utilizando los llamados "bloques" que tienen una plantilla (archivo phtml) y un bloque PHP. Los datos a menudo se procesan en la carga de la página a través de estos bloques y modelos e interfaces que vienen del backend.

PWA Studio utiliza React, Redux y webpack para el desarrollo.

a) ¿Qué es la aplicación web progresiva (PWA)?

Progressive Web App es una aplicación web que aplica capacidades web (HTML, CSS, Javascript) para ofrecer una excelente experiencia de usuario que imita las aplicaciones nativas. Más específicamente, PWA puede funcionar como una aplicación nativa con un ícono en la pantalla de inicio móvil, página de inicio (después de abrir la aplicación), pantalla completa, notificaciones push, etc.

Todos los PWA deben garantizar tres criterios esenciales: Rápido (responder a las interacciones del usuario casi instantáneamente), Confiable (poder trabajar en condiciones de red deficientes) e Involucrar (brindar una experiencia similar a la de una aplicación).

Existen algunas diferencias importantes entre una PWA y una aplicación nativa:

• Una aplicación nativa solo puede ejecutarse en un determinado sistema operativo (iOS o Android) mientras que PWA funciona con navegadores móviles y es compatible con iOS y Android.
• Tienes que descargar las aplicaciones nativas de una tienda de aplicaciones; Mientras tanto, PWA se puede instalar rápidamente después de agregarlo a la pantalla de inicio.
• Los usuarios deben acceder a sus tiendas de aplicaciones para obtener la última versión de las aplicaciones nativas, pero deben actualizarse para obtener actualizaciones de PWA.
• Dado que PWA se ejecuta directamente en un navegador web, es más fácil para los propietarios de tiendas compartir y promover los PWA que las aplicaciones nativas. Los PWA funcionan bajo demanda sin ocupar la memoria del dispositivo como las aplicaciones nativas

b) Magento y PWA

En 2017, Magento colaboró ​​con Google para llevar lo mejor de las funciones de PWA a la plataforma Magento para fines de 2018. Magento 2.3 se lanzó el 28 de noviembre de 2018, con un montón de actualizaciones impresionantes y Magento PWA fue una de ellas.

De hecho, Magento es una de las primeras plataformas de comercio electrónico que permite a sus usuarios aprovechar al máximo el potencial de las APA. Magento también ha presentado PWA Studio, que ofrece las herramientas necesarias para que los desarrolladores creen y mantengan con éxito un escaparate PWA sobre Magento.

c) ¿Por qué deberíamos aplicar PWA en Magento 2?

La integración progresiva de aplicaciones web ha atraído una gran atención de los usuarios de Magento, especialmente cuando se lanzó Magento 2 PWA Studio. A continuación se presentan tres motivaciones principales para convertir su sitio web a Magento PWA:

• Experiencia de usuario mejorada en dispositivos móviles: Obtener el PWA en el móvil de los usuarios es fácil, no requiere descarga, pero es solo la puerta antes de que experimenten funciones sorprendentes como el modo fuera de línea (acceder a la aplicación incluso cuando pierden su conectividad a Internet), sincronización en segundo plano (posponer acciones hasta que la conexión de red sea estable) y otras características similares a las aplicaciones.
• Menor costo de desarrollo y mantenimiento en comparación con las aplicaciones nativas: para las aplicaciones nativas, tendrá que desarrollar dos aplicaciones separadas (una para iOS y otra para Android), lo que lleva a duplicar el tiempo y el esfuerzo para el desarrollo y mantenimiento de la aplicación. Por otro lado, se necesita una única base de código para crear un PWA que pueda ejecutarse independientemente del sistema operativo.
• PWA en el sitio web de Magento 2 no es simplemente una tendencia acalorada, será el futuro de las aplicaciones: muchas tiendas de Magento han adoptado esta tecnología y encontraron que su satisfacción del usuario móvil mejoró significativamente.

d) ¿Por qué se concentra Magento en PWAs?

El gráfico anterior muestra que el 63.5% de las ventas de comercio electrónico en 2018 se realizaron a través de teléfonos móviles y tabletas. En 2019, se espera que las ventas a través de dispositivos portátiles alcancen el 67.2%.

Dado que m-commerce está impulsando más ventas en línea, Magento ha hecho un movimiento inteligente para llevar tendencias avanzadas como PWA a su plataforma.

e) ¿Cómo puede Magento PWA mejorar el negocio en línea?

Velocidad notable: el único factor vital para todas las tiendas en línea es la velocidad. Si un sitio móvil tarda más de tres segundos en cargarse, habrá una caída del 53% en las visitas móviles. En otras palabras, el 53% de los clientes abandonarán un sitio web si tarda más de tres segundos en cargarse. Los PWA desempeñarán un papel importante aquí, ya que son increíblemente rápidos. La razón para que los PWA sean más rápidos es el almacenamiento en caché a nivel de navegador, que es posible gracias a los trabajadores de servicio. Los PWA utilizan trabajadores del servicio para almacenar previamente en caché parte de la aplicación web para cargarla instantáneamente cuando el usuario la abre la próxima vez.

Compatibilidad multiplataforma : los PWA pueden ejecutarse sin problemas en casi todos los navegadores y plataformas móviles ampliamente utilizados. Esto incluye navegadores como Chrome, Safari, Edge y Firefox. La base de código web única es suficiente para ejecutarse en múltiples plataformas, incluidos los escritorios. Por lo tanto, las empresas no tienen que desarrollar y mantener aplicaciones para diferentes plataformas. Además, los PWA no tienen que actualizarse desde la tienda de aplicaciones. Las actualizaciones se pueden entregar en tiempo real al igual que un sitio web.

Diseño receptivo: la implementación de PWA dará como resultado una experiencia consistente en dispositivos como computadoras de escritorio, teléfonos móviles y tabletas. Esto ayudará a mejorar la experiencia del cliente. Google ha dicho que los sitios con diseño web receptivo se clasificarán mejor en los resultados de búsqueda de Google. Por lo tanto, la implementación de PWA puede hacer que el sitio se clasifique más alto en los resultados de búsqueda de Google.

Soporte sin conexión : se puede hacer que una parte del sitio completo de PWA funcione sin conexión. Por ejemplo, los clientes pueden navegar por los productos de su sitio de comercio electrónico y agregarlos al carrito sin conexión a Internet, siempre que hayan visitado las páginas anteriormente. Los clientes pueden incluso hacer pedidos fuera de línea, una vez que Internet esté conectado, el pedido será procesado.

Compatible con SEO : dado que los sitios de PWA son altamente atractivos y confiables, los visitantes pueden quedarse por más tiempo del habitual. Además, factores como la velocidad, el soporte fuera de línea, etc. contribuirán a un alto compromiso del usuario. Otra ventaja significativa de usar PWA en términos de SEO es el "índice móvil primero". Google anunció recientemente que la versión móvil de un sitio se indexaría primero. Esto significa que los sitios que no tienen una versión optimizada para dispositivos móviles no funcionarían bien en las clasificaciones.

Notificaciones push: las notificaciones push son los mensajes que se envían como notificaciones desde la aplicación. Se dice que aumentan el compromiso hasta en un 88%. Las notificaciones push son importantes para las empresas de comercio electrónico para mantener a los clientes informados sobre las últimas ofertas, ofertas y actualizaciones de pedidos.

Agregar a la pantalla de inicio : el ícono de la aplicación, que parece un ícono de aplicación nativa, de los sitios de PWA se puede agregar a la pantalla de inicio de los teléfonos inteligentes. Los usuarios pueden hacer clic en el icono y visitar el sitio directamente en lugar de ir al navegador y luego al sitio web. Esto aumentará el tiempo que pasa el usuario en la aplicación, lo que eventualmente resultará en una tasa de conversión más alta.

f) ¿Qué beneficios pueden prometer los PWA para las empresas de comercio electrónico?

Dado que los PWA combinan lo mejor de dos mundos: la aplicación nativa y la web móvil, resuelven dos problemas importantes que enfrenta la industria del comercio electrónico al mismo tiempo:

ü Mayor tasa de conversión: las conversiones en la web móvil son menores en comparación con las conversiones en aplicaciones móviles. Los PWA brindan una experiencia similar a la de una aplicación y se combinan con características como soporte fuera de línea, velocidad y compatibilidad multiplataforma; las tasas de conversión pueden subir.

ü Aumento en el número de usuarios: los clientes descargan solo las aplicaciones móviles de negocios de comercio electrónico bien establecidos. Con los PWA, los clientes pueden agregar el PWA de la tienda en línea a la pantalla de inicio de su teléfono con solo hacer clic en un botón.

g) ¿Métodos para convertir un sitio web de Magento 2 a PWA?

• Instalar extensiones de Magento 2 PWA
• Cree su propio PWA con Magento 2 PWA Studio
• Convierta el sitio a PWA usando el tema Magento 2 PWA

h) Estudios de caso de PWA

AliExpress

AliExpress es uno de los negocios de comercio electrónico más grandes, no solo en China sino a nivel mundial. Una vez que implementaron PWA, vieron resultados en días. Hubo un aumento del 74% en el tiempo dedicado a su sitio web, y las visitas a la página se duplicaron.

Flipkart

Flipkart es la tienda de comercio electrónico más grande de la India y lanzó Flipkart Lite como su PWA.

El tiempo de los usuarios en el sitio aumentó a 3.5 minutos con PWA, antes era de 70 segundos en el caso de la aplicación nativa. La tasa de interacción aumentó a 40% y los clientes que llegaron a través de la función Agregar a la pantalla de inicio vieron una conversión 70% mayor. El uso de datos también se redujo a un tercio.

OLX

OLX es un mercado líder en India, y las tasas de rebote fueron altas para la web móvil. La mitad de su tráfico provenía de la web móvil, y eligieron PWA para resolver sus problemas.

Después de implementar PWA, la tasa de rebote se redujo en un 80% y la tasa de clics (CTR) en los anuncios aumentó en un 146%. Con la ayuda de las notificaciones push, la tasa de interacción aumentó en un 250%.

Jumia

Jumia es una tienda de comercio electrónico popular en África, y después de presenciar los beneficios de PWA, han aplicado PWA a sus otras operaciones, como Jumia Travel. El tráfico a su PWA aumentó 12 veces más que el tráfico combinado de aplicaciones nativas, tanto Android como iOS. El uso de datos se redujo cinco veces y se requirieron 2 veces menos datos para completar la primera transacción. Además de eso, el almacenamiento de datos requerido se redujo en 25x.

Konga

Konga es un gran jugador en Nigeria, y utilizaron PWA para reducir el consumo de datos. Al implementar PWA, la carga inicial tomó un 92% menos de datos y para completar la primera transacción se requirió un 82% menos de datos.

Empresas que utilizan funciones limitadas de PWA

Para utilizar todo el potencial de PWA, el sitio debe construirse desde cero. Esto puede ser bastante costoso. Sin embargo, también es posible integrar solo las características PWA requeridas en el sitio web existente.
Las empresas pueden concentrarse en las características que crearán el máximo impacto e implementarlo. Esto también aumentará significativamente la experiencia del cliente. Veamos ejemplos de algunas empresas que utilizan funciones seleccionadas de PWA.

Airberlin

AirBerlin utilizó la funcionalidad fuera de línea de PWA para ofrecer soporte fuera de línea confiable a sus clientes en los aeropuertos. Se agregó soporte sin conexión y el tiempo de carga inicial se redujo a menos de un segundo. Esto permitió a sus pasajeros acceder a la tarjeta de embarque y a los detalles del viaje sin conexión a Internet.

El puesto de washington

The Washington Post creó una versión simple de PWA utilizando la demostración de PWA para sus principales noticias. Se centraron en la velocidad. El tiempo de carga de la página se redujo a 80 ms. Puede ver la demostración en vivo de este producto en WAPO.com/PWA. Como vieron un resultado increíble, decidieron usar PWA para su experiencia web móvil central.