Cómo convertirse en un midler: 5 hábitos que mejorarán tu código

Cuando escribes código no solo por el bien de la tarea, sino con miras a la escala, la legibilidad y el trabajo en equipo, ya te estás acercando al nivel medio. En este artículo, analizaremos los 5 principios clave que distinguen el código de un principiante de un enfoque de proyecto maduro.

🛠 1. Estructura del proyecto: desglosar por significado

Proyecto malo es cuando todo está en una carpeta: componentes, utilidades, estilos, pruebas.

Enfoque intermedio es una arquitectura bien pensada:

• src/components — componentes reutilizables

• src/pages — páginas

• src/utils — funciones auxiliares

• src/styles — estilos globales

• src/services — trabajo con API

💬 2. Documentación directamente en el código

Un buen código se explica por sí mismo, pero eso no significa que los comentarios no sean necesarios. Son necesarios, pero no obvios, y explicativos:

❌ // Aumentamos el contador
✅ // Actualizamos el contador para reflejar la nueva acción del usuario en la interfaz de usuario

También vale la pena describir:

• comportamiento de soluciones no estándar

• parámetros de entrada/salida de las funciones

• tipos, especialmente si usas JS sin TS

📚 Los midles suelen hacer README.md al menos en la base: cómo ejecutar, cómo compilar, dónde están las configuraciones.

🧪 3. Añade pruebas (incluso simples)

Escribir código sin pruebas es como montar en bicicleta sin frenos. No es necesario comenzar con TDD, pero esto es lo que distingue a los midle:

• pruebas unitarias para la lógica empresarial

• pruebas de casos extremos

• un enfoque consciente de la capacidad de prueba

// utils/calc.js
export function sum(a, b) {
  return a + b;
}

// utils/calc.test.js
import { sum } from './calc';
test('Adds two numbers', () => {
  expect(sum(2, 3)).toBe(5);
});

🧼 4. Limpieza del código y estilo uniforme

Middle no solo se preocupa por lo que funciona, sino también sobre cómo se ve.

📎 Usa:

• lint (ESLint, Flake8, Pylint)

• formateador (Prettier, Black)

• ganchos de pre-commit de git

• acuerdos de nomenclatura

💡 Adhiérete a KISS y DRY. Si repites un fragmento de código 3 veces, es hora de sacarlo.

🔁 5. Separación de la lógica empresarial de la interfaz de usuario

Middle entiende dónde está la lógica y dónde la presentación. Un ejemplo sencillo:

// useTodoList.js
export const useTodoList = () => {
  const [todos, setTodos] = useState([]);
  useEffect(() => {
    fetchTodos().then(setTodos);
  }, []);
  return todos;
};

// TodoList.jsx
const TodoList = ({ todos }) => (
  <ul>{todos.map(todo => <li key={todo.id}>{todo.text}</li>)}</ul>
);

🚀 Todo esto no son «reglas», sino hábitos de un buen desarrollador

Si quieres entrenar estos hábitos en la práctica, echa un vistazo a nuestra aplicación Kodik. Aquí encontrarás proyectos reales, tareas con verificación automática, módulos en JavaScript, Python, TypeScript e incluso práctica en arquitectura. Todo esto con explicaciones paso a paso y apoyo de la comunidad en Telegram.

¿Aplicas estos principios en tus proyectos? ¿O tal vez quieres un artículo separado sobre arquitectura de front-end o estructura de carpetas?

Escríbelo en los comentarios y lo analizaremos juntos 💬