Quan reviso eines i plantilles per arrencar projectes, torno sovint a una idea molt simple: em convé tenir una base lleugera, ràpida d’aixecar i que no em faci perdre temps abans de començar a maquetar o a programar.
En aquest context, Vite és una de les opcions que més m’agrada. L’entorn de desenvolupament és àgil, el build és directe i, sobretot, em permet començar amb una estructura mínima i anar afegint només el que necessito.
Per què Vite
Hi ha molts entorns vàlids, però Vite encaixa molt bé quan vols:
- arrencar un projecte ràpidament
- evitar configuracions massa pesades
- treballar còmodament amb components, JS modern i CSS preprocessat
- tenir un build final net per publicar
No és només una qüestió de velocitat. També m’agrada perquè no força una arquitectura massa rígida des del principi.
L’opció vite-codyframe
Quan el projecte demana una base de components, variables ben pensades i una manera de maquetar amb criteri, CodyFrame és una molt bona companyia.
La combinació vite-codyframe em sembla útil quan vull:
- una base visual coherent des del primer moment
- treballar amb SCSS i tokens de disseny
- reaprofitar components UI sense començar de zero
- mantenir una estructura clara entre estils globals i peces reutilitzables
En aquest tipus d’entorn, el que em resulta més pràctic és que CodyFrame ja aporta una manera d’organitzar la interfície. No parteixes d’un desert, però tampoc et lliga tant com un tema complet.
Un exemple clar és quan comences a muntar pantalles internes amb molts controls, selectors i variants de formulari. Aquí una base de components et treu molta feina repetitiva:
Una base mínima podria començar així:
npm create vite@latest
npm install
npm install codyframe
Després, el més important no és tant la instal.lació com l’ordre intern del projecte: decidir quins fitxers governen la configuració, quins components són propis i quins venen del framework. Jo faig servir la meva implementació de codyframe amb js escrit amb classes amb un enfoc “més modern”.
L’opció vite-tailwind
Si el que busco és més velocitat mental i menys capa visual predefinida, llavors em sento més còmode amb Tailwind.
vite-tailwind és una bona base quan vull:
- prototipar pantalles de pressa
- construir interfícies molt específiques
- evitar massa CSS separat al principi
- tenir control directe sobre espaiats, tipografia i layout
Amb Tailwind, el flux de feina és diferent. En lloc de pensar tant en components d’estil preexistents, vas component utilitats fins que la interfície pren forma. És un enfocament que pot anar molt bé per a backoffices, eines internes o projectes que canvien sovint.
També és pràctic quan vols prototipar interaccions ràpides, com diàlegs, capes superposades o petites eines d’edició sense haver de construir tota una abstracció abans d’hora:
Una arrencada típica seria:
npm create vite@latest
npm install
npm install tailwindcss @tailwindcss/vite
El punt interessant aquí és que la corba inicial és molt ràpida. En poca estona pots tenir una base funcional i començar a iterar.
Quan trio una opció o l’altra
No ho veig com una batalla entre frameworks, sinó com dues eines que resolen necessitats diferents.
Trio vite-codyframe quan:
- vull una base UI més estructurada
- sé que reutilitzaré patrons visuals
- prefereixo treballar més des de SCSS i components
Trio vite-tailwind quan:
- vull prototipar ràpid
- la interfície encara no està del tot definida
- prefereixo iterar dins del mateix HTML o component
El que m’interessa de debò
Al final, la gràcia d’aquests entorns no és la tecnologia per si sola, sinó el temps que et fan guanyar. Si una base et permet començar abans, equivocar-te més ràpid i ordenar millor el projecte, ja està fent bona feina.
Per això m’interessa anar construint i mantenint petits entorns com aquests: no tant per tenir la plantilla perfecta, sinó per reduir la fricció cada vegada que començo una idea nova.