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!