Fa gràcia com, de vegades, un nom aparentment senzill acaba amagant un projecte bastant més complet del que sembla. vite-vanillajs podria sonar com una plantilla mínima per començar amb Vite i JavaScript sense framework, però en realitat és una base molt més treballada.
El repositori és aquí:
🔗 cuquet/vite-vanillajs a GitHub
La idea general
El que m’interessa d’aquest projecte és que no intenta convertir Vanilla JS en una còpia d’un framework gran. Va en una altra direcció: mantenir un entorn simple d’entendre, però prou estructurat per créixer.
Aquí hi conviuen diverses peces:
- Vite com a servidor de desenvolupament i empaquetador
- SCSS per organitzar estils i variables
- Handlebars per generar pàgines i partials
- JavaScript modular per inicialitzar components segons el DOM
- una estructura multipàgina, no només una SPA
Dit d’una altra manera: és un entorn per treballar còmode amb HTML, CSS i JS moderns, sense haver de passar necessàriament per React, Vue o similars.
No és només una demo
Mirant el projecte de prop, el que es veu és una base bastant rica:
- pàgines a
src/site/pages - partials a
src/site/partials - estils a
src/scss - components JS a
src/js/components - un sistema d’inicialització centralitzat a
src/js/main.jsisrc/js/modules/initComponents.js
També hi ha una col·lecció notable de demos i peces reutilitzables: formularis, taules, navegació, modals, dialogs, toasts, lightbox, slideshow, selector de tema, command palette i més.
Per això, més que una simple plantilla de Vite, jo ho veig com una base de treball per prototips i interfícies multipàgina.
Algunes captures
Per entendre millor l’abast del projecte, unes quantes captures parlen soles. Les deixo en format compacte i, si hi fas clic, s’obren a mida completa.
El detall que m’ha semblat més útil
La part més interessant és probablement la combinació de Handlebars + script de compilació + Vite.
El fitxer build-pages.mjs fa una feina molt concreta i molt pràctica:
- registra els partials Handlebars
- compila les pàgines de
src/site/pages - escriu l’HTML generat dins
src - actualitza un fitxer
vite.entries.json
Després, vite.config.js aprofita això per:
- regenerar pàgines abans de servir el projecte
- recompilar només la part afectada quan canvien pages o partials
- controlar quines entrades es construeixen en mode
build
Aquest punt m’agrada perquè resol una necessitat bastant real: voler treballar amb un lloc multipàgina, fragments reutilitzables i HTML final net, però sense muntar una infraestructura massa pesada.
Inicialització de components sense embolics
Una altra decisió bona és el sistema d’inicialització de components.
En lloc d’escampar codi per tot arreu, el projecte defineix una llista d’entrades com:
- selector CSS
- mòdul on viu el component
- funció
init - dependències opcionals
- classes que cal exposar globalment
Això permet que initComponents() llegeixi el DOM i inicialitzi només el que toca. És una solució molt neta per a projectes Vanilla JS amb moltes peces reutilitzables.
No és màgia, però precisament per això funciona bé: és explícit, fàcil de seguir i relativament senzill de mantenir.
Per a què el trobo especialment útil
Jo diria que vite-vanillajs encaixa bé quan vols:
- construir una UI multipàgina sense entrar en una SPA
- tenir parcials HTML reutilitzables
- mantenir components JavaScript independents
- fer demos o catàlegs interns de components
- tenir una base visual i tècnica que pugui evolucionar
També és una bona opció quan et ve més de gust treballar a prop del navegador i del DOM real, en lloc de començar directament amb una capa extra d’abstracció.
El que em sembla més honest del projecte
Hi ha projectes que venen la idea de simplicitat però després amaguen una complexitat molt dispersa. Aquí passa més aviat el contrari: el repositori és ampli, sí, però l’estructura deixa bastant clar què fa cada part.
Per això em sembla un projecte útil no només per fer-lo servir, sinó també per pensar com organitzar un entorn front-end sense framework.
Tancant
vite-vanillajs m’ha semblat una base ambiciosa però encara propera. No intenta demostrar que Vanilla JS és superior a res; simplement mostra que, amb una mica d’ordre, es poden fer entorns molt aprofitables sense renunciar a Vite, a una bona estructura de fitxers i a components modulars.
I això, per a molts projectes petits o mitjans, ja és molt.