#mm17es - theming en magento 2 usando un framework de front-end

@_rubenR

Theming en Magento 2 usando un framework de front-end

@_rubenR

@_rubenR

rubenRP

@_rubenR

Rubén RodríguezSenior front-end developer

Interactiv4

@_rubenR

Menú del día

● Motivación● Propuestas● Instalación● Estructura de ficheros● Herramientas de compilación● Herencia● Layout● PHTML● Librerías JS● Performance

@_rubenR

¿Por qué?

● Necesidad del cliente

● Desarrollo complejo inviable en M2

● Solución intermedia hasta PWA Studio

@_rubenR

¿Por qué?

@_rubenR

¿Qué framework elegir?

● Bootstrap

● Foundation

● Materialize CSS

● Semantic UI

● Pure by Yahoo!

● UIkit

@_rubenR

Instalación

https://getbootstrap.com

@_rubenR

Instalación

@_rubenR

Creación de un tema

https://goo.gl/NFBWnd

@_rubenR

Estructura de ficheros -> SASS

● Base: estilos globales (a, ul, li,

body…)

● Layout: específicos por página

● Modules: unidades reutilizables

● Vendor: librerías

@_rubenR

Estructura de ficheros -> SASS

● Base: estilos globales (a, ul, li,

body…)

● Layout: específicos por página

● Modules: unidades reutilizables

● Vendor: librerías

@_rubenR

Frontools

● Facilita la compilación de .scss

● Watcher & live reload

● Minificación

● Herencia

● ES6

https://github.com/SnowdogApps/magento2-frontools

@_rubenR

Frontools

● Src

● Dest

● Locale

● Parent

● Stylesdir

● Ignore

● Modules

@_rubenR

Herencia

@_rubenR

Override vs Extend

Extend

● Situación más habitual

● Añade funcionalidad a la ya existente

Override

● Grandes modificaciones

● Bloques estructurales

@_rubenR

Recapitulemos

@_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

@_rubenR

PHTML - BEM

Ventajas

● Modular

● Reusable

● Estructurado

bloque__elemento--modificador

http://getbem.com

@_rubenR

JavaScript

● deps: Primer js en cargar● paths: Rutas● map: Implementación específica de paths● shim: Dependencias

https://goo.gl/mMG74M

@_rubenR

JavaScript

● deps: Primer js en cargar● paths: Rutas● map: Implementación específica de paths● shim: Dependencias

https://goo.gl/mMG74M

@_rubenR

Performance

● Bootstrap

● Minificación

● AMP

● Fastclick

@_rubenR

¡Gracias!