Slides de la charla charla de Meet Magento España 2017 sobre la integración de un framework de front-end con Magento 2. En ella se habla sobre la instalación de un framework de frontend basado en SASS, su instalación y su uso utilizando Frontools. También se tratarán temas como la instalación de librerías, maquetado y performance.

1. @_rubenR
Theming en Magento 2 usando un
framework de front-end

2. @_rubenR
@_rubenR
rubenRP
@_rubenR
Rubén Rodríguez
Senior front-end developer
Interactiv4

3. @_rubenR
Menú del día
● Motivación
● Propuestas
● Instalación
● Estructura de ficheros
● Herramientas de compilación
● Herencia
● Layout
● PHTML
● Librerías JS
● Performance

4. @_rubenR
¿Por qué?
● Necesidad del cliente
● Desarrollo complejo inviable en M2
● Solución intermedia hasta PWA Studio

5. @_rubenR
¿Por qué?

6. @_rubenR
¿Qué framework elegir?
● Bootstrap
● Foundation
● Materialize CSS
● Semantic UI
● Pure by Yahoo!
● UIkit

7. @_rubenR
Instalación
https://getbootstrap.com

8. @_rubenR
Instalación

9. @_rubenR
Creación de un tema
https://goo.gl/NFBWnd

10. @_rubenR
Estructura de ficheros -> SASS
● Base: estilos globales (a, ul, li,
body…)
● Layout: específicos por página
● Modules: unidades reutilizables
● Vendor: librerías

11. @_rubenR
Estructura de ficheros -> SASS
● Base: estilos globales (a, ul, li,
body…)
● Layout: específicos por página
● Modules: unidades reutilizables
● Vendor: librerías

12. @_rubenR
Frontools
● Facilita la compilación de .scss
● Watcher & live reload
● Minificación
● Herencia
● ES6
https://github.com/SnowdogApps/magento2-frontools

13. @_rubenR
Frontools
● Src
● Dest
● Locale
● Parent
● Stylesdir
● Ignore
● Modules

14. @_rubenR
Herencia

15. @_rubenR
Override vs Extend
Extend
● Situación más habitual
● Añade funcionalidad a la ya existente
Override
● Grandes modificaciones
● Bloques estructurales

16. @_rubenR
Recapitulemos

17. @_rubenR
PHTML - BEM
● Bloque: Entidad independiente con
sentido.
● Elemento: Parte del bloque, no
independiente.
● Modificador: Cambian la apariencia de un
elemento.
bloque__elemento--modificador
http://getbem.com

18. @_rubenR
PHTML - BEM
Ventajas
● Modular
● Reusable
● Estructurado
bloque__elemento--modificador
http://getbem.com

19. @_rubenR
JavaScript
● deps: Primer js en cargar
● paths: Rutas
● map: Implementación específica de paths
● shim: Dependencias
https://goo.gl/mMG74M

20. @_rubenR
JavaScript
● deps: Primer js en cargar
● paths: Rutas
● map: Implementación específica de paths
● shim: Dependencias
https://goo.gl/mMG74M

21. @_rubenR
Performance
● Bootstrap
● Minificación
● AMP
● Fastclick

22. @_rubenR
¡Gracias!