Revisión de Vue Storefront: todo lo que necesita saber

El futuro ya está aquí!

Bueno, dejemos todo por un momento y escuchemos esto. Imaginemos una aplicación de comercio electrónico gratuita que pudiera mejorar drásticamente la experiencia del usuario de su tienda en línea y también su clasificación SEO. Un sistema revolucionario que es tan flexible que puede ejecutarse cómodamente en cualquier backend de comercio electrónico.

Un poco exagerado, ¿crees?

Sí, sé cómo suena eso porque yo también he estado allí. Bueno, al menos hasta que finalmente probé esta locura que llaman Progressive Web Apps, o PWA en resumen.

Ahora, hay buenas razones por las cuales las empresas se están enamorando cada vez más de PWA. Los revelaré todos en breve. Sin embargo, por ahora, permítame presentarle una aplicación específica que lo ayudará a comprender todo el concepto de aprovechar PWA.

¿Has oído hablar de Vue Storefront?

Es una nueva aplicación de comercio electrónico, pero su arquitectura no se parece en nada a lo que ya estamos acostumbrados. Y aquí está el trato: Vue Storefront resulta ser la PWA más grande y completa hasta ahora.

Pero, ¿qué significa eso para el comercio electrónico?

Este Tienda Vue La revisión revela todo lo que necesita saber: qué diablos es una aplicación web progresiva, cómo Vue Storefront está conectado a todo eso, además, por supuesto, de las características y capacidades de comercio electrónico que lo acompañan.

¿Qué es una aplicación web progresiva? 

Recuerda cuando dijimos el móvil apenas comienza? Resulta que hemos tenido razón todo el tiempo. Y aquí está la prueba.

El móvil llegó primero y posteriormente nos presentó las aplicaciones móviles. Luego, con el tiempo, las aplicaciones comenzaron a fusionarse con PC y plataformas web a medida que los desarrolladores continuaron mejorando la experiencia del usuario para hacerlo más fluido.

Los avances cada vez mayores en todas estas áreas nos han llevado al borde de un comercio electrónico verdaderamente revolucionario. En otras palabras, bienvenidos a la era de las PWA.

Ahora, una aplicación web progresiva ofrece lo mejor de ambos mundos: aplicaciones web y móviles. Más específicamente, un PWA se basa en tecnologías web típicas, con algunas de las últimas funciones de JavaScript que actúan como condimento. El resultado final es una aplicación web cuya intuición general se parece mucho a una aplicación nativa de iOS o Android.

Eche un vistazo a este vídeo Starbucks página web. ¿Notas algo inusualmente extraño en comparación con los sitios web normales? Ahora, intente cargarlo nuevamente pero desde su teléfono móvil.

Aparentemente se comporta como una aplicación nativa, ¿verdad? Suave, sin costuras y sorprendentemente rápido. Bueno, ahí está el poder de PWA.

¿Y cómo es esto relevante para el comercio electrónico?

Bueno, considera esto. Las aplicaciones web progresivas generalmente contienen los datos del dispositivo del usuario y los archivos descargados en un caché. Eso esencialmente significa que los datos se aprovechan instantáneamente tan pronto como se generan solicitudes desde el dispositivo.

¿Y la mejor parte? Puede apostar que la carga de la página siempre es súper rápida, incluso cuando se trata de velocidades de Internet extremadamente lentas.

Todo el marco es facilitado por un trabajador de servicio, que básicamente actúa como un puente entre el servidor y la aplicación. Para procesar una solicitud, por lo tanto, aprovecha los datos que ya estaban almacenados en la memoria caché del dispositivo mientras sincroniza simultáneamente todo con los datos del servidor correspondiente.

Luego, debido a un simple archivo JSON conocido como Manifiesto de aplicación web, Las aplicaciones web progresivas normalmente se muestran en pantalla completa para proporcionar una experiencia de inmersión constante. Esta pequeña característica esencialmente interactúa con su navegador y lo dirige a mostrar la aplicación web a través de la misma interfaz que las aplicaciones de teléfonos inteligentes.

Y eso no es todo. Los trabajadores del servicio de caché combinados con las API Push y la tecnología avanzada del navegador han hecho posible instalar PWA directamente en la pantalla de inicio de su dispositivo. En consecuencia, puede proceder a usarlo incluso después de que su dispositivo se desconecte. Además de eso, los PWA también pueden recibir notificaciones push.

Ahora, ¿adivina qué? Google ha estado a la vanguardia de Progressive Web Apps desde el principio, junto con Mozilla más Microsoft.

Y después de probar todo en numerosos proyectos una y otra vez, esto es lo que concluyeron acerca de Progressive Web Apps:

• Son confiables- Los PWA son capaces de cargar extremadamente rápido incluso en condiciones de red deficientes, gracias a sus trabajadores de servicios de almacenamiento previo de recursos críticos.
• Ellos son rápidos - Las PWA son admirablemente responsive cuando interactúas con ellos. Mantienen consistentemente animaciones nítidas y un desplazamiento suave.
• Se están comprometiendoLa experiencia del usuario aquí es, sin duda, bastante inmersiva. Las PWA se comportan como aplicaciones móviles nativas en el navegador, y pueden integrarse fácilmente en su pantalla de inicio. Además, si necesita volver a involucrar a los usuarios que ejecutan sus PWA, siempre puede enviar notificaciones push.

Una compañía que ha visto estos beneficios de primera mano es Yesca. Anteriormente, su tiempo promedio de carga de aplicaciones era 11.91 segundos. Pero, después de presentar una versión PWA que resultó ser 90% más ligera que su aplicación nativa de Android, el tiempo de carga disminuyó considerablemente. Y como resultado, sus niveles de participación de los usuarios se dispararon significativamente.

Si eso no te convence, tal vez Ubers La historia lo hará. Al aprovechar el poder de los PWA, la compañía pudo crear una aplicación que tiene grandes velocidades de carga incluso en 2G. ¿Y su tiempo de carga correspondiente? Bueno, su 50kb PWA consistentemente se carga en menos de 3 segundos.

Ahora, apenas hemos arañado la superficie aquí. Hay muchos más historias de éxito de una amplia gama de marcas. Todo gracias a las revolucionarias capacidades de Progressive Web Apps.

Dicho esto, pasemos ahora a la parte práctica.

Entonces, qué es exactamente Tienda Vue?

Vue Storefront Review - Descripción general

Vue Storefront, para empezar, es una aplicación web progresiva de código abierto desarrollada para negocios en línea. Su objetivo principal es ayudar a los comerciantes digitales y las empresas a aumentar sus niveles de experiencia del cliente.

Afortunadamente, no necesita un sistema de comercio electrónico especializado para usar Vue Storefront. Dado que todo su marco está construido utilizando la arquitectura Headless, debería poder configurar su propia integración de back-end. En resumen, eso significa que Vue Storefront es una aplicación holísticamente flexible capaz de integrarse con cualquier plataforma de comercio electrónico para servir como front-end.

Hasta ahora, sus desarrolladores lo han integrado con Magento, Spree Commerce, Sylius y Shopify, Vue Storefront Core Team, en estrecha colaboración con Shopware Team, desarrolló la integración nativa de Shopware PWA, y Vue Storefront se convierte en una parte crucial de commercetools Accelerator como una interfaz de código abierta recomendada para commercetools y miembro de MACH Alliance, el grupo de empresas de tecnología fundadas por commercetools, Contentstack, EPAM Systems y Valtech, para difundir el conocimiento sobre el potencial de la tecnología sin cabeza.

Y considerando que está respaldado por más de 70 socios oficiales, más de 100 proyectos en vivo una extensa comunidad de más de 3000 desarrolladores, puede esperar que se implementen integraciones adicionales muy pronto. Parece que Vue Storefront solo está comenzando.

Pero, de nuevo, aunque su tasa de innovación es encomiable, no tiene que esperar a que el equipo de Vue Storefront presente una integración para su plataforma de comercio electrónico actual. Este PWA está codificado fundamentalmente en Vue.js, y se basa en Elasticsearch para su base de datos, así como Node.js cuando se trata de la API del servidor.

Si eres un desarrollador experimentado, por lo tanto, supongo que ya puedes decir que configurar un nuevo front-end no debería ser un desafío en absoluto. Pero, en caso de alguna dificultad, Tienda Vue viene con múltiples tutoriales y documentación de soporte integral. Puede usar todo eso para descubrir cómo ajustar su código de código abierto.

Si eso suena como algo que le gustaría hacer, se puede acceder a Vue Storefront en GitHub. Y, curiosamente, hasta ahora ha atraído a más de 7,000 estrellas a la plataforma.

Ok, no está mal en absoluto. Pero, ¿qué disfrutan exactamente los comerciantes? Tienda Vue? ¿Realmente tiene las características que podrían impulsar su negocio al siguiente nivel?

Permítame responder eso al guiarlo a través de varios atributos de Vue Storefront.

Vue Storefront Review - Características principales

Experiencia de usuario

Lo primero es lo primero. Teniendo en cuenta que la experiencia del usuario es el enfoque principal aquí, ¿cómo funciona exactamente la interfaz de Vue Storefront?

Bueno, una cosa que puede esperar de Vue Storefront es romper la barrera del dispositivo. Como se trata de una aplicación web, debería poder iniciarla y ejecutarla en cualquier dispositivo. Eso significa que Vue Storefront elimina el desafío de desarrollar múltiples aplicaciones nativas para cada sistema operativo del dispositivo.

Otro problema que puede resolver a través de Vue Storefront es el volumen de las aplicaciones nativas. Las aplicaciones de Android, iOS y PC se vuelven más pesadas cada día con cada nueva característica que los desarrolladores presentan. Es por eso que las actualizaciones de aplicaciones son notoriamente famosas por ocupar más espacio en la memoria.

Con Vue Storefront, sin embargo, es casi como si hubiéramos vuelto a la era de las aplicaciones Symbian. Utiliza muchos menos datos en comparación con las aplicaciones nativas.

Y la mejor parte es que el cliente de su tienda no necesita descargar nada. Pueden acceder a la experiencia nativa directamente a través de sus navegadores web.

De hecho, ni siquiera tienen que conectarse a Internet. Tienda Vue les permite comprar cómodamente incluso cuando sus dispositivos están desconectados.

Entonces consigue esto. Aunque su sitio de comercio electrónico termina comportándose como una aplicación nativa, Google todavía lo considera un sitio web. Entonces, por supuesto, su tienda en línea se indexará en consecuencia, al igual que otros sitios regulares.

Y aquí está la cosa. Lo más probable es que su sitio tenga una gran ventaja en el ranking de otros regulares, porque Google tiende a favorecer a los sitios web con velocidades de carga rápidas. Además, vale la pena señalar que los motores de búsqueda están cambiando cada vez más a la indexación móvil primero.

Hablando de eso, un gran tiempo de carga significa más tráfico. A estas alturas, probablemente haya notado que las bajas velocidades de carga de la página web provocan altas tasas de rebote, ya que los consumidores de Internet odian esperar. Por lo tanto, con un mayor flujo de tráfico, debería poder mejorar su tasa de conversión general a largo plazo.

Otra táctica que podría emplear para impulsar aún más es enviar notificaciones push. Vue Storefront le permite mantener a sus clientes potenciales comprometidos al comunicarse con ellos a través de mensajes push. Puede aprovechar eso para realizar promociones, así como vender y vender varios productos.

Cómo Empezar

El equipo detrás de Vue Storefront aparentemente comenzó con Magento porque es una de las plataformas de comercio electrónico más grandes del mundo en la actualidad. Además, es un sistema de código abierto que combina excelentes funcionalidades con una flexibilidad ilimitada. Es por eso que, de hecho, las empresas y las empresas se están uniendo en gran medida al Magento carro.

Si es uno de los muchos, puede comenzar de inmediato aprovechando las ventajas de Vue Storefront Magento solicitud. Sin embargo, el proceso no es tan simple como imagina.

Al principio, debe confiar en talleres para planificar su proyecto en consecuencia. Eso significa especificar no solo el alcance de su proyecto, sino también el presupuesto y el tiempo correspondientes.

Luego está la prueba de concepto y su objetivo es confirmar el impacto que Vue Storefront tendrá en sus negocios. En consecuencia, es posible que deba ejecutar una breve instancia del Tienda Vue marco mientras se realizan varias pruebas de experiencia del usuario.

Eso solo podría resultar bastante útil cuando necesite convencer a las partes interesadas para que inviertan en la aplicación. Además, también tendrá la oportunidad de tomar decisiones informadas sobre el próximo lanzamiento basado en cómo los usuarios responden a la nueva versión de la tienda.

En general, la prueba de concepto debería llevarle algunas semanas, tal vez 4-6 como máximo. Luego, utilizando los datos que ha reunido, puede proceder a implementar una versión completa de PWA de su sitio de comercio electrónico utilizando Vue Storefront. Y, a medida que pasa el tiempo, puede trabajar gradualmente en el código fuente subyacente para alinear su negocio con las necesidades cambiantes del mercado.

Componentes de la bolsa de equipaje

Tienda Vue viene con dos tipos de componentes diferentes.

En la fundación, tenemos el Componentes principales. Se basan en las estructuras comerciales fundamentales de las tiendas en línea típicas. Entonces, en cierto modo, le ahorran la molestia de crear todo desde cero.

Dicho esto, los componentes principales pueden ser adoptados por los temas de su sitio. Todo lo que se necesita es simplemente diseñar y definir el marcado HTML que lo acompaña.

Y mientras lo hace, notará que cada componente principal ofrece una interfaz distinta, que puede modificar fácilmente a través de su tema.

Bueno, si está listo para la tarea, debe encontrar los componentes principales en la carpeta de componentes de cada módulo. Luego, una vez que lo hagas, aplícalos a tus temas como mixins.

Hablando de eso, apuesto a que probablemente ya hayas adivinado el segundo tipo de componentes. Y sí, tienes razón. Son Componentes del tema, que representan el diseño de front-end que finalmente muestra en la aplicación.

Si bien puede colocar sus propios componentes especializados dentro de un tema, el método más fácil para aplicar la lógica empresarial siempre es aprovechar los componentes principales.

Temas de escaparate

Aunque Vue Storefront sigue utilizando temas prediseñados, no tiene que usarlos en absoluto. En su lugar, puede crear sus propios temas de comercio electrónico y luego combinarlos con la lógica comercial central de la aplicación para una experiencia de comercio electrónico completa.

Pero necesitará habilidades de HTML y CSS para lograrlo. O, alternativamente, simplemente contrate a un desarrollador experimentado para manejar todo el proceso. Vue Storefront incluso le permite personalizar aún más sus componentes principales si es necesario.

Ahora que lo pienso, sin embargo, construir su propio tema desde cero parece un proceso engorroso. Además, Tienda Vue viene con sus propios temas sólidos en el src / themes carpeta.

Últimas noticias Theme 2.0, por ejemplo, se ha creado usando Google UX Retail Playbook. Eso se traduce en una experiencia de usuario bien optimizada. Pero eso no es todo. Dado que es dinámicamente flexible, puede modificarlo de muchas maneras diferentes para crear su propio diseño especializado.

Funciones de comercio electrónico

Estas son algunas de las características de comercio electrónico que encontrará en Vue Storefront:

• Exploración de catálogo
• Navegación del producto
• Soporte de gestión de catálogos
• Cuentas de clientes
• Servicio de atención al cliente
• Gestión de pedidos
• Promociones de marketing
• Análisis e informes
• SEO
• Pago, pago y envío.

Revisión de Vue Storefront - Precios

Adquirir Tienda Vue No te costará nada. Ni siquiera un centavo. Los costos solo comienzan a acumularse cuando se trata de las etapas de personalización posteriores.

A menos que tenga experiencia en la codificación, se verá obligado a contratar a un equipo de desarrolladores para integrar Vue Storefront con su sitio de comercio electrónico, así como ajustar sus componentes y temas principales.

¿Quién debería considerar usar Vue Storefront? 

No se puede negar que Vue Storefront es una herramienta revolucionaria para mejorar la experiencia de usuario de sus clientes. Y, considerando que es una aplicación web progresiva de código abierto, está disponible para todos de forma gratuita.

Sin embargo, el problema con Vue Storefront es el proceso de implementación. Incrustar la aplicación en su sitio de comercio electrónico es un proceso técnicamente complejo que requiere una gran codificación. Ciertamente, no es algo que pueda administrar sin habilidades de codificación.

Pero, eso no es nada en comparación con los beneficios de los PWA. Vue Storefront vale la pena el esfuerzo. Por lo tanto, puede considerar contratar a un desarrollador experimentado para ejecutarlo en consecuencia. Además, su arquitectura sin cabeza la convierte en una aplicación flexible que puede integrarse con cualquier plataforma de comercio electrónico.

Con todo, por lo tanto, Tienda Vue es para todo tipo de negocios y empresas en línea. Siempre que esté ejecutando un sitio de comercio electrónico, vale la pena considerar esta aplicación web progresiva si desea mejorar su experiencia general del cliente.

Es una declaración de salud limpia de nosotros aquí en ecommerce-platforms.com. Ahora, hacia ti, ¿cuáles son tus pensamientos?