Patrones y principios de diseño de software: MVC, MVVM, SOLID y Atomic Design

Organizar el código también es parte del desarrollo

A medida que una aplicación crece, mantener todo el código junto puede dificultar su comprensión y mantenimiento. Por eso existen distintos patrones, arquitecturas y principios que ayudan a separar responsabilidades y organizar los componentes de un sistema.

MVC, MVVM, SOLID y Atomic Design no son equivalentes. Cada uno aborda un problema distinto y puede aplicarse en diferentes partes de una aplicación.

1. MVC

MVC significa Model-View-Controller.

Este patrón separa una aplicación en tres responsabilidades principales:

Model: representa los datos y la lógica relacionada con ellos.
View: representa la interfaz que observa el usuario.
Controller: recibe las acciones o solicitudes y coordina la interacción entre las otras partes.

De forma simplificada:

Usuario
  ->
Controller
  ->
Model
  ->
View
  ->
Usuario

La separación permite evitar que la lógica de datos y la presentación queden concentradas en un mismo componente.

2. MVVM

MVVM significa Model-View-ViewModel.

Su objetivo es separar la interfaz de la lógica que prepara y administra los datos que necesita esa interfaz.

Sus partes principales son:

Model: representa los datos y la lógica asociada.
View: representa la interfaz que se muestra al usuario.
ViewModel: mantiene el estado y la lógica que necesita la View para trabajar con el Model.

La relación puede representarse así:

View
  <->
ViewModel
  <->
Model

A diferencia de MVC, MVVM introduce un ViewModel como intermediario entre la interfaz y el modelo.

3. SOLID

SOLID no es un patrón de arquitectura como MVC o MVVM. Es un conjunto de cinco principios utilizados para diseñar software de forma que las responsabilidades y dependencias sean más fáciles de mantener.

Las cinco letras representan:

S, Single Responsibility Principle: una clase o módulo debe tener una responsabilidad principal.
O, Open/Closed Principle: una entidad de software debe estar abierta a extensión y cerrada a modificación.
L, Liskov Substitution Principle: una implementación derivada debe poder utilizarse donde se espera su tipo base sin romper el comportamiento esperado.
I, Interface Segregation Principle: los consumidores no deberían depender de interfaces con métodos que no necesitan.
D, Dependency Inversion Principle: los módulos de alto nivel no deberían depender directamente de detalles de bajo nivel; ambos deben depender de abstracciones.

Estos principios ayudan a reducir dependencias innecesarias y a mantener responsabilidades mejor delimitadas.

4. Atomic Design

Atomic Design es un enfoque para organizar interfaces mediante niveles de composición.

La idea consiste en construir elementos de interfaz pequeños y combinarlos progresivamente en estructuras mayores.

Sus niveles suelen organizarse de esta manera:

Átomos
  ->
Moléculas
  ->
Organismos
  ->
Plantillas
  ->
Páginas

Átomos: elementos básicos de la interfaz, como un botón o un campo.
Moléculas: combinaciones pequeñas de varios átomos.
Organismos: estructuras de interfaz compuestas por moléculas y átomos.
Plantillas: estructuras que definen la disposición general del contenido.
Páginas: instancias concretas de una interfaz utilizando las estructuras anteriores.

Atomic Design se centra principalmente en la organización y composición de interfaces, no en la arquitectura completa de una aplicación.

5. No cumplen la misma función

Una diferencia importante es que estos enfoques pueden coexistir porque resuelven problemas distintos.

MVC   -> separación de responsabilidades en una aplicación
MVVM  -> separación entre interfaz, estado y lógica de presentación
SOLID -> principios para diseñar clases y dependencias
Atomic Design -> organización y composición de interfaces

Por ejemplo, una aplicación podría seguir una arquitectura basada en MVVM, aplicar principios SOLID en su código y utilizar Atomic Design para estructurar sus componentes visuales.

Consideraciones

MVC y MVVM son patrones que organizan responsabilidades dentro de una aplicación. SOLID reúne principios de diseño orientados a mantener responsabilidades y dependencias bajo control. Atomic Design organiza una interfaz mediante distintos niveles de composición.

Por eso, conocer estos conceptos no consiste en elegir uno y descartar los demás. Su utilidad depende del problema que se intenta resolver y de la parte de la aplicación en la que se aplican.