Vue Storefront, la Aplicación Web Progresiva para cualquier e-commerce

Vue Storefront es una aplicación web progresiva de comercio electrónico (PWA) headless e independiente de la plataforma BackEnd, escrita en Vue.js. El hecho de que esté usando arquitectura headless permite a Vue Storefront conectarse con cualquier plataforma de eCommerce para que pueda ser un PWA de frontend para Magento, Shopify, BigCommerce, WooCommerce y otros. Antes de leer sobre Vue Storefront, podría interesarte saber más sobre qué son las Aplicaciones Web Progresivas.

El objetivo es construir un gran producto basado en microservicios y arquitectura headless.

Algunas de sus ventajas:

  • Excepcional rendimiento
    Gracias a la tecnología de Vue Storefront puedes mejorar significativamente sus tasas de conversión y compromiso reduciendo las tasas de rebote. El rendimiento significa mejor experiencia de usuario, significa mejor posicionamiento SEO y, por supuesto, una mayor tasa de conversión y por tanto más ROI, más beneficio neto para el negocio.
  • Funcionalidades nativas
    Al ser una PWA, tenemos disponibles las notificaciones push, el acceso a la pantalla de inicio y el modo de pantalla completa. La tienda funcionará en modo offline, con mala conexión, y en cualquier dispositivo.
  • Todos los dispositivos y plataformas
    Permite ofrecer una experiencia de compra 100% efectiva y sin complicaciones sin necesidad de desarrollar aplicaciones para diferentes navegadores y plataformas web como iOS y Android. Para cualquier empresa, pero sobre todo para una Startup, esto es un sueño hecho realidad.
  • Comercio de voz
    Conectar tiendas con interfaces de usuario de voz, como Amazon Alexa y Google Assistant

Es un proyecto de código abierto muy popular con una comunidad fuerte y en crecimiento.

Características principales de Vue Storefront:

  • Para cualquier Backend
  • Diseñada para el mejor rendimiento
  • Mobile first
  • Tecnología de vanguardia
  • Sin limitaciones de diseño
  • Código abierto con licencia MIT
  • Agradable experiencia de desarrollo
  • Renderización SSR, del lado del servidor lista para usar (para SEO)
  • Modo offline

¿Cómo se conecta con las plataformas backend?

Vue Storefront consigue ser compatible con cualquier plataforma gracias a los conectores vue-storefront-api y API dedicados para plataformas de comercio electrónico. El formato de datos en vue-storefront-api es siempre el mismo para cualquier plataforma, lo que significa que no importa qué backend de eCommerce utilice, su frontend sigue siendo el mismo.

Es una gran estrategia para las migraciones, ya que puede migrar fácilmente de una plataforma a otra (o de una versión a otra, por ejemplo, Magento 1 a 2) sin tocar el frontend.

Esquema de arquitectura

El conector API funciona en dos fases:

 

  • Data Pump: (mage2nosql en la imagen) está solicitando datos estáticos (catálogo, pedidos, etc.) de su plataforma de eCommerce a Vue Storefront Elasticsearch y cambia su formato al consumido por vue-storefront-api. Una vez finalizada la extracción de los datos, puede visualizar el catálogo de productos en Vue Storefront. Después de transferir los datos a Elasticsearch, permanecerá sincronizado con los cambios realizados en la plataforma de backend y actualizará su contenido en consecuencia.
  • Worker pool: es un proceso de sincronización de las llamadas dinámicas (sesiones de usuario, reglas de carro, etc.) que no pueden ser almacenadas en la base de datos y necesitan ser llamadas por vue-storefront-api directamente desde la plataforma backend.

Algunas de las plataformas backend más populares ya tienen sus integraciones (Magento 2, Magento 1, CoreShop, BigCommerce, WooCommerce…), pero usted puede fácilmente hacer las suyas propias con la plantilla de integración.

Las partes azules del diagrama son responsables de la caché offline.

¿Cómo funciona?

  • Vue Storefront Core (carpeta principal) es el pegamento para todas las funciones que permiten que Vue Storefront funcione. Contiene todos los puntos de entrada, el comportamiento de SSR, el proceso de compilación, y los Service Workers. No debe tocar esta carpeta directamente al crear sus propias implementaciones para mantenerse al día con sus características y seguridad.
  • Módulos Vue Storefront (núcleo/módulos y src/módulos) son las características del comercio electrónico. Cada módulo es una característica encapsulada (como carrito, lista de deseos, catálogo y algunas integraciones de terceros). Puede añadir/quitar/editar estos módulos como desee y componer su tienda Vue Storefront con sólo las características que necesite. También se utilizan para extensiones de terceros.
  • Los Temas de Vue Storefront (src/themes) son la implementación real de la tienda. En los temas, puede utilizar y ampliar toda la lógica de los módulos registrados / núcleo y añadir su marcación HTML y estilos. Vue Storefront proporciona un tema predeterminado totalmente personalizable.

Ir a la página de vuestorefront.io

© 2019 Pulpo Privacidad| Aviso legal