MageObsidian: un frontend moderno para Magento sin salir de Magento
Reemplazar Luma, LESS y RequireJS con Vite, Tailwind 4 e islas Vue perezosas — sobre los layouts y templates nativos de Magento. Demo en vivo y cómo probarlo.
El frontend de Magento sigue atado a un toolchain de 2015: Luma, LESS, RequireJS, Knockout. Cada tienda nueva hereda un pipeline de build que pelea contra ti, megabytes de JavaScript que nadie pidió, y una experiencia de desarrollo que espanta a cualquiera que aprendió el oficio en esta década.
La salida habitual es un rebuild headless — válido, pero una apuesta grande que saca tu storefront de Magento por completo. MageObsidian toma otro camino: conservar los layouts, bloques, templates y view models nativos de Magento, y cambiar solo el toolchain que tienen debajo por uno moderno. Sin PWA, sin una segunda app que mantener sincronizada.
El enfoque
En lugar de reemplazar la arquitectura frontend de Magento, MageObsidian reemplaza su plomería. Los layouts, bloques y view models que ya conoces se quedan exactamente donde están. Lo que cambia es cómo se construyen y entregan los assets: Vite en vez del viejo pipeline de build de Magento, TailwindCSS 4 en vez de LESS escrito a mano, Vue para las partes interactivas, y módulos ES nativos en vez de RequireJS.
Los componentes Vue no se apoderan de la página — se montan como islas, hidratadas de forma perezosa solo donde hace falta interactividad (mini-carrito, autocompletado de búsqueda, switchers, drawers). El resto de la página queda como HTML estático renderizado por Magento, que es justo lo que quieres para un sitio de contenido y catálogo.
Los templates son la parte interesante: puedes seguir escribiendo .phtml, o sumarte a un motor Twig que coexiste con él — con herencia de templates real y auto-escaping de HTML, en vez del baile de escaping manual que los templates de Magento te obligan a hacer hoy.
Experiencia de desarrollo
Dos cosas cambian el día a día más que ninguna otra.
La primera es el HMR. Con el dev server de Vite, editar un componente .vue, una clase de Tailwind o un template Twig se refleja en el navegador al instante — sin rebuild completo, sin setup:static-content:deploy en el ciclo de trabajo. Si alguna vez esperaste el static deploy de Magento para ver un cambio de una línea de CSS, esto solo ya vale el viaje.
La segunda son las dependencias que simplemente funcionan. Sumar una librería de npm al storefront es un solo comando y una línea de configuración del theme — y luego la importas como en cualquier proyecto moderno. Sin shims de RequireJS, sin paths que mapear en requirejs-config.js, sin la indirección que el JS legacy de Magento te obliga a aprender primero. RequireJS, Knockout y compañía no eran malos para su época, pero la curva de entrada que le ponen enfrente a un dev nuevo es empinada y real — y esto la elimina. Un dev que sabe Vite y Vue es productivo desde el día uno.
Dos capas, re-tematizable
El theme se entrega como dos temas apilados. theme-base es la base técnica neutral; theme-default es la piel estilizada (el look “OBSIDIAN”) más una capa de demo reemplazable. Re-pintar es CSS-first: toda la paleta, las fuentes y los radios viven en un bloque @theme de Tailwind, así que cambiar un puñado de tokens re-fluye todo el storefront. Heredas de theme-base para un lienzo limpio, o de theme-default cuando quieres conservar el look y solo ajustarlo.
En qué se diferencia de irse a headless
Que quede claro — esto es disruptivo. MageObsidian reemplaza por completo el frontend legacy de Magento: no es compatible con Luma y no hereda nada de Blank ni de Luma. Rompe con el frontend viejo a propósito.
La diferencia frente a un rebuild headless es dónde rompe. Headless te saca de Magento — tu storefront pasa a ser una app aparte que habla con una API, con toda la sincronización y operación que eso implica. MageObsidian se queda dentro de Magento y reúsa su arquitectura de rendering nativa — los layouts, bloques, templates y view models que ya escribes — y solo cambia el toolchain de abajo por uno moderno (Vite, islas Vue, ESM nativo, un motor Twig opcional). Sigue siendo Magento renderizado en el servidor, solo que sin LESS, RequireJS ni Knockout, y sin una segunda app que mantener sincronizada. Encima reúsa los propios diccionarios de traducción de Magento para el i18n y emite datos estructurados (JSON-LD) de fábrica.
Un estado honesto
Es joven. Hoy apunta a Magento Open Source 2.4.7+; Adobe Commerce y Mage-OS todavía no están soportados, aunque ambos están en el roadmap. El theme por defecto cubre la superficie de Luma, pero todavía es nuevo y casi no se ha probado en tiendas reales en producción. Por eso publico esto: para que la comunidad lo use, lo ponga a prueba y me diga qué falta.
Pruébalo
- Demo en vivo: mage-obsidian-demo.jeanmarcos.dev
- Docs: mage-obsidian.jeanmarcos.dev
- Instalar:
composer require mage-obsidian/theme-default - Código: github.com/mage-obsidian
Si trabajas con frontends de Magento, valoraría de verdad tu feedback — qué le falta para tu tienda, y si el ángulo de “modernizar sin salir de Magento” aguanta contra un checkout del mundo real.