Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

PWA & Magento 2 - Deity, otro punto de vista.

75 views

Published on

Deity:
- ¿Qué es?
- Principios
- ¿Por qué está compuesto?
- Estructura
- Estado de desarrollo
- ¿Por dónde empezar?

Published in: Software
  • Be the first to comment

  • Be the first to like this

PWA & Magento 2 - Deity, otro punto de vista.

  1. 1. PWA & Magento 2 RUBÉN RODRÍGUEZ Deity, otro punto de vista
  2. 2. Rubén Rodríguez INTERACTIV4 @_rubenR rubenRP @_rubenR Lead Magento Front-End Architect
  3. 3. ¿Qué es Deity?
  4. 4. ¿Qué es Deity? • App web basada en NodeJS • SPA en React • Redux para manejo de estados • Apollo GraphQL
  5. 5. Headless ¿Qué es Deity? FRONT- END API BACK-END
  6. 6. ¿Qué es Deity? FRONT- END API BACK-END Headless
  7. 7. ¿Qué es Deity? FRONT- END API BACK-END Headless
  8. 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. 9. Ventajas
  10. 10. Ventajas • Documentación • Comunidad • Fast Development
  11. 11. Fast Development VENTAJAS
  12. 12. Arquitectura
  13. 13. Estructura de ficheros ARQUITECTURA
  14. 14. Flujo de la aplicación CLIENT.JS ARQUITECTURA
  15. 15. CLIENT.JS ROUTES.JS Flujo de la aplicación ARQUITECTURA
  16. 16. CLIENT.JS APP.JSROUTES.JS Flujo de la aplicación ARQUITECTURA
  17. 17. CLIENT.JS APP.JSROUTES.JS CONTAINER.JS COMPONENT.JS Flujo de la aplicación ARQUITECTURA
  18. 18. CLIENT.JS APP.JSROUTES.JS CONTAINER.JS COMPONENT.JS STYLES.SAS S Flujo de la aplicación ARQUITECTURA
  19. 19. CLIENT.JS APP.JSROUTES.JS CONTAINER.JS COMPONENT.JS STYLES.SAS S SERVER.JS Flujo de la aplicación ARQUITECTURA
  20. 20. CLIENT.JS APP.JSROUTES.JS CONTAINER.JS COMPONENT.JS STYLES.SAS S REDUCER.JSSERVER.JS Flujo de la aplicación ARQUITECTURA
  21. 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. 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. 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. 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. 25. MADRID - BARCELONA - NEW YORK - SANTO DOMINGO ¡Gracias! @_rubenR rubenRP @_rubenR

×