#mm17es - theming en magento 2 usando un framework de front-end
TRANSCRIPT
@_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
@_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!