Introducció
Els patrons de disseny en JavaScript continuen evolucionant per satisfer les demandes d'aplicacions web cada cop més complexes. Aquest article explora els patrons arquitectònics més rellevants el 2025 que tot desenvolupador hauria de dominar per crear codi mantenible, escalable i testejable.
"Els bons patrons de disseny no només resolen problemes actuals, sinó que preparen el codi per adaptar-se als desafiaments futurs."
Importància dels patrons de disseny
Els patrons de disseny són fonamentals en el desenvolupament modern perquè:
- Ofereixen solucions provades a problemes recurrents
- Proporcionen un vocabulari comú per als equips
- Faciliten la creació de codi mantenible i escalable
- Milloren la testabilitat de les aplicacions
- Redueixen la complexitat en sistemes grans
La diferència entre codi que simplement funciona i codi que és mantenible a llarg termini sol estar en l'aplicació adequada de patrons de disseny.
Patrons creacionals en JavaScript
Els patrons creacionals se centren en els mecanismes de creació d'objectes, adequant-los a cada situació específica.
Patró Factory
// Implementació moderna del patró Factory amb JavaScript
class UIFactory {
static create(type, options) {
switch(type) {
case 'button':
return new Button(options);
case 'input':
return new Input(options);
case 'dropdown':
return new Dropdown(options);
default:
throw new Error(`Tipus de component no suportat: ${type}`);
}
}
}
// Ús amb sintaxi moderna const primaryButton = UIFactory.create('button', { text: 'Enviar', theme: 'primary', onClick: () => console.log('Formulari enviat') }); `
Singleton en l'era dels mòduls ES
El patró Singleton ha evolucionat significativament amb els mòduls ES:
// config.js - Un singleton modern usant mòduls ES
class Configuration {
constructor() {
this.settings = {
apiUrl: 'https://api.example.com',
theme: 'light',
debugMode: false
};
}
getSetting(key) { return this.settings[key]; }
updateSetting(key, value) { this.settings[key] = value; return this.settings[key]; } }
// Exportem una única instància export default new Configuration(); `
Nota: Amb els mòduls ES, els singletons són més naturals ja que el sistema de mòduls garanteix que només existeixi una instància per defecte, simplificant considerablement la implementació.
Patrons estructurals moderns
Els patrons estructurals se centren en com es composen les classes i objectes per formar estructures més grans mantenint la flexibilitat.
Patró Composite per a interfícies d'usuari
Aquest patró és particularment rellevant en el desenvolupament d'interfícies basades en components:
// Implementació del patró Composite per a UI basada en components
class Component {
constructor(name) {
this.name = name;
this.state = {};
}
setState(state) { this.state = { ...this.state, ...state }; this.render(); }
render() { console.log(Renderitzant ${this.name}); } }
class CompositeComponent extends Component { constructor(name) { super(name); this.children = []; }
add(component) { this.children.push(component); return this; }
remove(component) { this.children = this.children.filter(c => c !== component); return this; }
render() { console.log(Renderitzant compost ${this.name}); this.children.forEach(child => child.render()); } } `
El patró Composite s'ha convertit en la base de molts frameworks moderns, on els components poden contenir altres components formant arbres d'UI complexos però mantenibles.
Patrons de comportament moderns
Els patrons de comportament defineixen com els objectes interactuen i distribueixen responsabilitats.
Patró Observer i la programació reactiva
// Implementació moderna del patró Observer
class Observable {
constructor() {
this.observers = new Set();
}
subscribe(observer) { this.observers.add(observer); return () => this.observers.delete(observer); // Funció de neteja }
notify(data) { this.observers.forEach(observer => observer(data)); } }
// Exemple d'ús amb funcions fletxa i promeses const userService = new Observable();
// Subscriure observadors const unsubscribe = userService.subscribe(async userData => { try { await saveToDatabase(userData); console.log('Usuari guardat correctament'); } catch (error) { console.error('Error en guardar usuari:', error); } }); `
Patró Mediator en arquitectures de microserveis frontend
// Implementació del patró Mediator per a microserveis frontend
class EventBus {
constructor() {
this.topics = {};
}
subscribe(topic, callback) { if (!this.topics[topic]) { this.topics[topic] = []; }
const index = this.topics[topic].push(callback) - 1;
// Retorna funció per cancel·lar subscripció return { unsubscribe: () => { this.topics[topic].splice(index, 1); if (this.topics[topic].length === 0) { delete this.topics[topic]; } } }; }
publish(topic, data) { if (!this.topics[topic]) { return; }
this.topics[topic].forEach(callback => { setTimeout(() => callback(data), 0); }); } } `
Nota: El patró Mediator s'ha convertit en essencial per a la comunicació entre micro-frontends, permetent que components totalment desacoblats puguin comunicar-se sense crear dependències directes entre ells.
Arquitectures modernes basades en patrons
El 2025, veiem arquitectures que combinen diversos patrons per crear solucions robustes:
- Arquitectura Flux/Redux: Combina els patrons Observer, Command i Store per crear un flux de dades unidireccional previsible.
- Arquitectura de Components Compostos: Utilitza els patrons Composite i Context per crear APIs declaratives flexibles.
- Arquitectura de Micro-frontends: Empra patrons com Module, Mediator i Facade per gestionar aplicacions distribuïdes mantenint la coherència.
Les tendències del 2025 estan marcades pels patrons reactius que combinen programació funcional amb reactivitat, inspirats per frameworks com React, Vue i Svelte.
Anti-patrons a evitar
Tan important com conèixer els patrons a seguir és identificar els anti-patrons que hem d'evitar:
Callback Hell
Substituït per promeses, async/await i observables:
// Anti-patró:
doSomething(param1, function(err, result1) {
if (err) handleError(err);
doSomethingElse(result1, function(err, result2) {
if (err) handleError(err);
andThen(result2, function(err, result3) {
// Continua anidant...
});
});
});
// Patró modern amb async/await: try { const result1 = await doSomething(param1); const result2 = await doSomethingElse(result1); const result3 = await andThen(result2); // Codi pla, fàcil de seguir } catch (error) { handleError(error); } `
Prop Drilling
Substituït per Context API, Redux o hooks personalitzats:
// Anti-patró - Passar props a través de múltiples components
function App() {
const [user, setUser] = useState(null);
return <Main user={user} setUser={setUser} />;
}
// Patró modern - Context API const UserContext = React.createContext();
function UserProvider({ children }) { const [user, setUser] = useState(null); return (`
Conclusions
Els patrons de disseny en el JavaScript modern han madurat significativament, permetent crear aplicacions web més mantenibles, escalables i robustes. El 2025, la combinació d'aquests patrons amb les capacitats del llenguatge i l'ecosistema d'eines ens permet construir arquitectures sofisticades amb codi més simple i declaratiu.
Els desenvolupadors frontend que dominin aquests patrons podran crear solucions elegants a problemes complexos, millorar la col·laboració en equip gràcies a un vocabulari comú i anticipar-se a les necessitats d'escalabilitat futures.
Invertir temps en comprendre i aplicar correctament aquests patrons arquitectònics no només millora la qualitat del codi actual, sinó que prepara el terreny per adaptar-se a les evolucions de l'ecosistema JavaScript, que continua transformant-se a un ritme accelerat.
Necessites millorar l'arquitectura de les teves aplicacions JavaScript? Oferim consultoria i formació especialitzada en patrons de disseny per a equips de desenvolupament.
