![Page 1: #MM17ES - Theming en Magento 2 usando un framework de front-end](https://reader033.vdocuments.site/reader033/viewer/2022050900/5a64b3897f8b9ac21c8b48ed/html5/thumbnails/1.jpg)
@_rubenR
Theming en Magento 2 usando un framework de front-end
![Page 2: #MM17ES - Theming en Magento 2 usando un framework de front-end](https://reader033.vdocuments.site/reader033/viewer/2022050900/5a64b3897f8b9ac21c8b48ed/html5/thumbnails/2.jpg)
@_rubenR
@_rubenR
rubenRP
@_rubenR
Rubén RodríguezSenior front-end developer
Interactiv4
![Page 3: #MM17ES - Theming en Magento 2 usando un framework de front-end](https://reader033.vdocuments.site/reader033/viewer/2022050900/5a64b3897f8b9ac21c8b48ed/html5/thumbnails/3.jpg)
@_rubenR
Menú del día
● Motivación● Propuestas● Instalación● Estructura de ficheros● Herramientas de compilación● Herencia● Layout● PHTML● Librerías JS● Performance
![Page 4: #MM17ES - Theming en Magento 2 usando un framework de front-end](https://reader033.vdocuments.site/reader033/viewer/2022050900/5a64b3897f8b9ac21c8b48ed/html5/thumbnails/4.jpg)
@_rubenR
¿Por qué?
● Necesidad del cliente
● Desarrollo complejo inviable en M2
● Solución intermedia hasta PWA Studio
![Page 5: #MM17ES - Theming en Magento 2 usando un framework de front-end](https://reader033.vdocuments.site/reader033/viewer/2022050900/5a64b3897f8b9ac21c8b48ed/html5/thumbnails/5.jpg)
@_rubenR
¿Por qué?
![Page 6: #MM17ES - Theming en Magento 2 usando un framework de front-end](https://reader033.vdocuments.site/reader033/viewer/2022050900/5a64b3897f8b9ac21c8b48ed/html5/thumbnails/6.jpg)
@_rubenR
¿Qué framework elegir?
● Bootstrap
● Foundation
● Materialize CSS
● Semantic UI
● Pure by Yahoo!
● UIkit
![Page 8: #MM17ES - Theming en Magento 2 usando un framework de front-end](https://reader033.vdocuments.site/reader033/viewer/2022050900/5a64b3897f8b9ac21c8b48ed/html5/thumbnails/8.jpg)
@_rubenR
Instalación
![Page 10: #MM17ES - Theming en Magento 2 usando un framework de front-end](https://reader033.vdocuments.site/reader033/viewer/2022050900/5a64b3897f8b9ac21c8b48ed/html5/thumbnails/10.jpg)
@_rubenR
Estructura de ficheros -> SASS
● Base: estilos globales (a, ul, li,
body…)
● Layout: específicos por página
● Modules: unidades reutilizables
● Vendor: librerías
![Page 11: #MM17ES - Theming en Magento 2 usando un framework de front-end](https://reader033.vdocuments.site/reader033/viewer/2022050900/5a64b3897f8b9ac21c8b48ed/html5/thumbnails/11.jpg)
@_rubenR
Estructura de ficheros -> SASS
● Base: estilos globales (a, ul, li,
body…)
● Layout: específicos por página
● Modules: unidades reutilizables
● Vendor: librerías
![Page 12: #MM17ES - Theming en Magento 2 usando un framework de front-end](https://reader033.vdocuments.site/reader033/viewer/2022050900/5a64b3897f8b9ac21c8b48ed/html5/thumbnails/12.jpg)
@_rubenR
Frontools
● Facilita la compilación de .scss
● Watcher & live reload
● Minificación
● Herencia
● ES6
https://github.com/SnowdogApps/magento2-frontools
![Page 13: #MM17ES - Theming en Magento 2 usando un framework de front-end](https://reader033.vdocuments.site/reader033/viewer/2022050900/5a64b3897f8b9ac21c8b48ed/html5/thumbnails/13.jpg)
@_rubenR
Frontools
● Src
● Dest
● Locale
● Parent
● Stylesdir
● Ignore
● Modules
![Page 14: #MM17ES - Theming en Magento 2 usando un framework de front-end](https://reader033.vdocuments.site/reader033/viewer/2022050900/5a64b3897f8b9ac21c8b48ed/html5/thumbnails/14.jpg)
@_rubenR
Herencia
![Page 15: #MM17ES - Theming en Magento 2 usando un framework de front-end](https://reader033.vdocuments.site/reader033/viewer/2022050900/5a64b3897f8b9ac21c8b48ed/html5/thumbnails/15.jpg)
@_rubenR
Override vs Extend
Extend
● Situación más habitual
● Añade funcionalidad a la ya existente
Override
● Grandes modificaciones
● Bloques estructurales
![Page 16: #MM17ES - Theming en Magento 2 usando un framework de front-end](https://reader033.vdocuments.site/reader033/viewer/2022050900/5a64b3897f8b9ac21c8b48ed/html5/thumbnails/16.jpg)
@_rubenR
Recapitulemos
![Page 17: #MM17ES - Theming en Magento 2 usando un framework de front-end](https://reader033.vdocuments.site/reader033/viewer/2022050900/5a64b3897f8b9ac21c8b48ed/html5/thumbnails/17.jpg)
@_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
![Page 18: #MM17ES - Theming en Magento 2 usando un framework de front-end](https://reader033.vdocuments.site/reader033/viewer/2022050900/5a64b3897f8b9ac21c8b48ed/html5/thumbnails/18.jpg)
@_rubenR
PHTML - BEM
Ventajas
● Modular
● Reusable
● Estructurado
bloque__elemento--modificador
http://getbem.com
![Page 19: #MM17ES - Theming en Magento 2 usando un framework de front-end](https://reader033.vdocuments.site/reader033/viewer/2022050900/5a64b3897f8b9ac21c8b48ed/html5/thumbnails/19.jpg)
@_rubenR
JavaScript
● deps: Primer js en cargar● paths: Rutas● map: Implementación específica de paths● shim: Dependencias
https://goo.gl/mMG74M
![Page 20: #MM17ES - Theming en Magento 2 usando un framework de front-end](https://reader033.vdocuments.site/reader033/viewer/2022050900/5a64b3897f8b9ac21c8b48ed/html5/thumbnails/20.jpg)
@_rubenR
JavaScript
● deps: Primer js en cargar● paths: Rutas● map: Implementación específica de paths● shim: Dependencias
https://goo.gl/mMG74M
![Page 21: #MM17ES - Theming en Magento 2 usando un framework de front-end](https://reader033.vdocuments.site/reader033/viewer/2022050900/5a64b3897f8b9ac21c8b48ed/html5/thumbnails/21.jpg)
@_rubenR
Performance
● Bootstrap
● Minificación
● AMP
● Fastclick
![Page 22: #MM17ES - Theming en Magento 2 usando un framework de front-end](https://reader033.vdocuments.site/reader033/viewer/2022050900/5a64b3897f8b9ac21c8b48ed/html5/thumbnails/22.jpg)
@_rubenR
¡Gracias!