Principios SOLID, Código Limpio, DRY, KISS y YAGNI con React

Como desarrollador de software , es crucial crear código fácil de mantener, entender y escalar. Hoy exploraremos cinco principios esenciales: SOLID, Código Limpio, DRY, KISS y YAGNI. Aprenderemos estos conceptos con explicaciones sencillas, ejemplos prácticos en TypeScript, y destacaremos cuándo y por qué debe usarse cada principio.

Principios SOLID

SOLID es un grupo de cinco principios de diseño que ayudan a los programadores a escribir software más claro y mejor organizado. Veámoslos en detalle:

Principio de Responsabilidad Única (SRP)

Imagina una caja de juguetes donde cada juguete tiene su lugar especial. De igual forma, cada parte de tu código debe hacer una tarea específica.

Ejemplo:

// Mal ejemplo: hace dos cosas
class Libro {
  obtenerTitulo() {}
  guardarEnBaseDatos() {}
}

// Buen ejemplo
class Libro {
  obtenerTitulo() {}
}

class BaseDatosLibros {
  guardar(libro: Libro) {}
}

Principio Abierto/Cerrado (OCP)

Agrega nuevas características sin cambiar las existentes.

Ejemplo:

interface Forma {
  area(): number;
}

class Circulo implements Forma {
  constructor(private radio: number) {}
  area() {
    return Math.PI * this.radio ** 2;
  }
}

class Cuadrado implements Forma {
  constructor(private lado: number) {}
  area() {
    return this.lado ** 2;
  }
}

Principio de Sustitución de Liskov (LSP)

Una clase derivada debe poder sustituir su clase base sin romper el código.

Ejemplo:

class Ave {}

class AveVoladora extends Ave {
  volar() {}
}

class Gorrión extends AveVoladora {}
class Pingüino extends Ave {}

Principio de Segregación de Interfaces (ISP)

Crea interfaces pequeñas con propósitos específicos en lugar de interfaces grandes y generalizadas.

Ejemplo:

interface Impresora {
  imprimir(): void;
}

interface Escaner {
  escanear(): void;
}

Principio de Inversión de Dependencias (DIP)

Depende de abstracciones (interfaces) y no de implementaciones concretas.

Ejemplo:

interface BaseDatos {
  guardar(datos: string): void;
}

class BaseDatosMySQL implements BaseDatos {
  guardar(datos: string) {}
}

class ServicioDatos {
  constructor(private baseDatos: BaseDatos) {}
}

Documentación oficial SOLID

Código Limpio

El código limpio es fácil de leer y mantener. Escribe siempre tu código de forma clara y sencilla.

Ejemplo:

// Confuso
function c(x: number[]) {
  return x.reduce((a, b) => a + b, 0);
}

// Limpio
function calcularTotal(numeros: number[]) {
  return numeros.reduce((total, numero) => total + numero, 0);
}

Repositorio GitHub Código Limpio

DRY (Don't Repeat Yourself)

Nunca escribas el mismo código dos veces. Reutiliza código existente.

Ejemplo:

// Lógica repetida
function crearUsuario(usuario) {
  if (!usuario.nombre) throw new Error('Nombre requerido');
}

function actualizarUsuario(usuario) {
  if (!usuario.nombre) throw new Error('Nombre requerido');
}

// Enfoque DRY
function validarUsuario(usuario) {
  if (!usuario.nombre) throw new Error('Nombre requerido');
}

KISS (Keep It Simple, Stupid)

Siempre elige simplicidad sobre complejidad.

Ejemplo:

// Complejo
function multiplicar(a, b) {
  return Array(b)
    .fill(a)
    .reduce((suma, val) => suma + val, 0);
}

// Simple
function multiplicar(a, b) {
  return a * b;
}

YAGNI (You Aren't Gonna Need It)

No añadas funcionalidades hasta que realmente las necesites.

Ejemplo:

// Sobreingeniería
class Usuario {
  iniciarSesion() {}
  cerrarSesion() {}
  enviarEmail() {}
}

// YAGNI
class Usuario {
  iniciarSesion() {}
  cerrarSesion() {}
}
// Añadir enviarEmail() solo si se necesita después.

Tabla Comparativa

Principio	Pros	Contras
SOLID	Código organizado y mantenible	Puede parecer inicialmente complejo
Código Limpio	Fácil de leer y mantener	Requiere disciplina
DRY	Reduce repetición	Puede crear abstracciones complejas
KISS	Fácil depuración y entendimiento	Puede simplificar demasiado
YAGNI	Evita trabajo innecesario	Puede ignorar escalabilidad futura

Aplicando estos principios a React

Aplicar SOLID, Código Limpio, DRY, KISS y YAGNI en React mejora la mantenibilidad, legibilidad y escalabilidad de tus componentes.

Principios SOLID en React

SRP: Componentes con propósito único.
OCP: Composición sobre modificación.
LSP: Componentes derivados que sustituyen bases sin problemas.
ISP: Separar claramente responsabilidades mediante props.
DIP: Dependencias vía props o contextos.

Código Limpio en React

Componentes concisos y bien nombrados, evitando estructuras complejas.

DRY en React

Extraer lógica reutilizable en hooks personalizados.

KISS en React

Lógica simple evitando optimizaciones prematuras.

YAGNI en React

Implementa solo lo necesario hoy, añade funcionalidades después según surjan necesidades reales.

¿Cuándo usar cada principio?

SOLID: Aplicaciones grandes y complejas.
Código Limpio: Siempre, por legibilidad.
DRY: Con lógica repetitiva.
KISS: Prototipos rápidos y simples.
YAGNI: Entornos ágiles o startups.

Palabras clave SEO

Principios SOLID
Código Limpio
Principio DRY
Principio KISS
Principio YAGNI

Principios SOLID, Código Limpio, DRY, KISS y YAGNI con React