PWA & Magento 2 - Deity, otro punto de vista.
•0 likes•130 views
Report
Share
Download to read offline
Deity: - ¿Qué es? - Principios - ¿Por qué está compuesto? - Estructura - Estado de desarrollo - ¿Por dónde empezar?
More Related Content
Similar to PWA & Magento 2 - Deity, otro punto de vista.
Similar to PWA & Magento 2 - Deity, otro punto de vista.(20)
Recently uploaded
Recently uploaded(9)
PWA & Magento 2 - Deity, otro punto de vista.
- 1. PWA & Magento 2 RUBÉN RODRÍGUEZ Deity, otro punto de vista
- 2. Rubén Rodríguez INTERACTIV4 @_rubenR rubenRP @_rubenR Lead Magento Front-End Architect
- 4. ¿Qué es Deity? • App web basada en NodeJS • SPA en React • Redux para manejo de estados • Apollo GraphQL
- 8. ¿De qué está formado Deity? ¿Qué es Deity? Módulo para Magento 2 - 19 nuevos endpoints - 6 endpoints sobreescritos Funcionalidades relativas al usuario y direcciones Deity Magento Api Generador de boilerplate con Yeoman - Crea la estructura básica de la app - Añade las dependencias (deity-core) - Genera el package.json y el development.json Deity Generator Implementa las funcionalidades a nivel de front - Webpack 4 - React 16 - Redux - GraphQL - Babel - ESlint - React i18 Next - MultipleCSS modules - Bootstrap 3/4 Deity Core
- 9. Ventajas
- 10. Ventajas • Documentación • Comunidad • Fast Development
- 12. Arquitectura
- 14. Flujo de la aplicación CLIENT.JS ARQUITECTURA
- 15. CLIENT.JS ROUTES.JS Flujo de la aplicación ARQUITECTURA
- 16. CLIENT.JS APP.JSROUTES.JS Flujo de la aplicación ARQUITECTURA
- 17. CLIENT.JS APP.JSROUTES.JS CONTAINER.JS COMPONENT.JS Flujo de la aplicación ARQUITECTURA
- 18. CLIENT.JS APP.JSROUTES.JS CONTAINER.JS COMPONENT.JS STYLES.SAS S Flujo de la aplicación ARQUITECTURA
- 19. CLIENT.JS APP.JSROUTES.JS CONTAINER.JS COMPONENT.JS STYLES.SAS S SERVER.JS Flujo de la aplicación ARQUITECTURA
- 20. CLIENT.JS APP.JSROUTES.JS CONTAINER.JS COMPONENT.JS STYLES.SAS S REDUCER.JSSERVER.JS Flujo de la aplicación ARQUITECTURA
- 21. CLIENT.JS APP.JSROUTES.JS CONTAINER.JS COMPONENT.JS STYLES.SAS S REDUCER.JS QUERY.JSSERVER.JS Flujo de la aplicación ARQUITECTURA
- 22. CLIENT.JS APP.JSROUTES.JS CONTAINER.JS COMPONENT.JS STYLES.SAS S REDUCER.JS QUERY.JS RESOLVER.J S SERVER.JS Flujo de la aplicación ARQUITECTURA
- 23. CLIENT.JS APP.JSROUTES.JS CONTAINER.JS COMPONENT.JS STYLES.SAS S REDUCER.JS QUERY.JS RESOLVER.J S API.JSSERVER.JS Flujo de la aplicación ARQUITECTURA
- 24. Resumen Consideraciones • Deity Moses OSL - Octubre 2018 • Funcionalidades cubiertas >= 70% • Listo para proyectos simples • Deity mirror client: https://bitbucket.org/deity-core/deity-mirror-client/
- 25. MADRID - BARCELONA - NEW YORK - SANTO DOMINGO ¡Gracias! @_rubenR rubenRP @_rubenR
Editor's Notes
- HOLA!
- Antes de echar un vistazo al código y a la estructura lo primero…¿Qué es Deity?
- Más allá de temas comerciales y como resumen Deity es una aplicación web basada en NodeJS que implementa un front con React en una sola página. Incorpora Redux para el manejo de estados y Apollo GraphQL como implementación de GraphQL.
- Deity pretende y permite con su aplicación implementar una arquitectura headless para Magento 2. Pero no es el objetivo único. Con un frontend único se puede conectar a diferentes de entrada, como Wordpress para la gestión de páginas estáticas y blog, Algolia para nutrir los resultados de búsqueda, Paypal para los pagos, o cualquier plataforma que tenga una API sobre la que se pueda operar. Esto permite, y sobre todo con la integración de Apollo Client intercambiar un servicio por otro a nivel de backend con mínimos cambios en el frontend. De modo que la plataforma o app del cliente esté viva y se pueda manejar un roadmap diferente para back y front.
- Deity pretende y permite con su aplicación implementar una arquitectura headless para Magento 2. Pero no es el objetivo único. Con un frontend único se puede conectar a diferentes de entrada, como Wordpress para la gestión de páginas estáticas y blog, Algolia para nutrir los resultados de búsqueda, Paypal para los pagos, o cualquier plataforma que tenga una API sobre la que se pueda operar. Esto permite, y sobre todo con la integración de Apollo Client intercambiar un servicio por otro a nivel de backend con mínimos cambios en el frontend. De modo que la plataforma o app del cliente esté viva y se pueda manejar un roadmap diferente para back y front.
- Deity pretende y permite con su aplicación implementar una arquitectura headless para Magento 2. Pero no es el objetivo único. Con un frontend único se puede conectar a diferentes de entrada, como Wordpress para la gestión de páginas estáticas y blog, Algolia para nutrir los resultados de búsqueda, Paypal para los pagos, o cualquier plataforma que tenga una API sobre la que se pueda operar. Esto permite, y sobre todo con la integración de Apollo Client intercambiar un servicio por otro a nivel de backend con mínimos cambios en el frontend. De modo que la plataforma o app del cliente esté viva y se pueda manejar un roadmap diferente para back y front.
- Deity ha dividido el proyecto en varios elementos para poder conectar la aplicación en JavaScript con Magento2 o Wordpress. Estos son: Deity Magento Api (Deity Wordpress Api) Deity Generator Deity Core Deity Magento Api Módulo para Magento 2. Este módulo básicamente implementa 19 nuevos endpoints y sobreescribe 6. Sobre todo completa la parte de “mi cuenta” y gestión de usuarios, direcciones, del cliente, etc… Deity Generator App basada en Yeoman para generar aplicaciones PWA basadas en Deity (deity-core). Yeoman genera la estructura de una app en Node, genera el servidor, cliente, el fichero para trabajar con el service worker. Todo ello basado en un boilerplate guarda los valores de configuración mediante preguntas en el terminal, etc… Esto no quiere decir que sea el único modo de levantar Deity. Puedes generar o utilizar tu propio boilerplate e importar deity como un módulo de npm, pero seguramente tendrías que retocarlo para hacerlo funcionar. No sería tan transparente, pero en cualquier caso una de las cosas buenas de trabajar con JavaScript es que puedes cambiar módulos y funcionalidades del proyecto como si fueran partes intercambiables. Deity Core Este es el módulo clave de todo Deity, la madre del cordero. El módulo que implementa todas las funcionalidades necesarias en un ecommerce. Para ello utiliza las siguientes tecnologías (a día de hoy): - Webpack 4, para generar los assets y las acciones a nivel de ejecución. - React 16 - Redux, para controlar el estado de la aplicación de modo consistente y sin tener que propagar los estados entre componentes, lo cual sería un jaleo. - GraphQL para interactuar con las APIs. - Babel para compilar el código de ES6 a Javascript que entiendan todos los navegadores. - ESlint para la validación de estilos y código. - React i18 Next para las traducciones. De cara a la maquetación usa. - MultipleCSS Modules, para poder aislar los estilos a nivel de componente, pero a su vez poder compartirlos. - Bootstrap 3/4, mediante bootstrap-loader.
- Documentación y comunidad. Las librerías que utiliza Son bastante comunes y tienen mucha documentación. Deity no deja de ser un proyecto basado en React en el que trabajan miles de desarrolladores. Puede que no encuentres la respuesta exacta a tu problema en Deity, pero es muy probable que haya respuestas a preguntas similares. Fast Development
- El flujo de ejecución de Deity es similar a la de cualquier app en nodeJS, con un servidor y un cliente. Pongamos como punto de partida el cliente y la llamada a la home de la tienda X (por ejemplo la demo). Una vez cargado el cliente y reconocida una petición pasamos al router.
- Lanzamiento oficial de Deity como Open Source -> Reacticon, octubre de este año. Opinión personal: 70% de funcionalidades cubiertas, de las cuales no todas son relevantes…muchas son crear endpoints para configuraciones sencillas en system config (lo típico que se guarda en core_config_data). Así que Un buen modo de comenzar a tocar código en PWA es usar Deity Mirror Client. Es una aplicación muy sencillita hecha con react-create-app que muestra un par de listados de productos. Se conecta directamente con el Magento que Deity usa de demostración demo.deity.io así que no es necesario ni instalar el módulo en ningún magento.