Desarrollando PWAs con Magento y Vue Storefront

Javier Villanueva

Acerca de mi...

Javier Villanueva

@jahvi

https://jahvi.dev

javier@medialounge.co.uk

kateandtoms.com

¿Por qué PWAs?

Probabilidad de rebote

1s a 3s la probabilidad aumenta un 32%

1s a 5s la probabilidad aumenta un 90%

1s a 6s la probabilidad aumenta un 106%

1s a 10s la probabilidad aumenta un 123%

Google/SOASTA Research, 2017

Conexión 3G

¿Respuesta de Magento?

PWA Studio

PWA Buildpack

Peregrine

UPWARD

Venia

¿Respuesta de la comunidad?

Vue Storefront

PWA ultrarrápida, con soporte sin conexión y multi plataforma. Siempre libre y de código abierto bajo la licencia MIT.

Conexión 3G

Conexión WiFi

Caracteristicas Principales

PWA como estándar

Permite desarrollar aplicaciones mobiles y de escritorio al mismo tiempo.

Tecnologías de primer nivel

Incrementa el desempeño basados en la arquitectura de microservicios.

Stack JS moderno

Utiliza VueJS, el framework más flexible para desarrollar sitios rápidos en menos tiempo.

Plataforma-agnóstica

Desarrolla su proyecto rápidamente manteniéndolo escalable y flexible.

Arquitectura headless

Conexión a través de API permite cambiar backend en cualquier momento.

Listo para producción

Todas las funciones estándar de e-commerce disponibles por defecto.

Rápido y confiable

Instalable

Optimizado

Tecnologías de primer nivel

VueJS

Elastic Search

Express

GraphQL

Plataforma-agnóstica

Magento

BigCommerce

Pimcore

WooCommerce

Experiencia de Desarrollo

Código abierto bajo licencia MIT

Últimas tecnologías en el front-end y back-end

Sin límites para plantillas o personalizaciones

Soporte por defecto para SSR

Excelente documentación

Estructura modular

interface VueStorefrontModuleConfig {
  key: string;
  store?: {
    modules?: { key: string, module: Module<any, any> }[],
    plugin?: Function,
  };
  router?: {
    routes?: RouteConfig[],
    beforeEach?: NavigationGuard,
    afterEach?: NavigationGuard,
  };
  beforeRegistration?: (VSF) => void;
  afterRegistration?: (VSF) => void;
}