Cuando trabajas con frameworks de JavaScript, la calidad de tu código no depende solo de la herramienta que elijas. La organización de tus archivos y la arquitectura de tu aplicación determinan si podrás escalar sin dolor o si terminarás atrapado en un código imposible de mantener. Entender cómo estructurar componentes, separar lógica de interfaz y elegir el modelo de carpetas adecuado es una habilidad fundamental para cualquier desarrollador frontend.
¿Qué es la deuda técnica y por qué afecta tu productividad?
Un código desorganizado, donde todo vive en un solo archivo gigante sin separación de responsabilidades, se convierte rápidamente en lo que se conoce como código espagueti [0:14]. Puede parecer funcional al principio, pero a medida que la aplicación crece, agregar nuevas características o darle mantenimiento se vuelve extremadamente difícil.
Este fenómeno se llama deuda técnica [1:05]: cuando en el pasado priorizamos la velocidad sobre la escalabilidad, el futuro nos cobra con intereses. Cada cambio pequeño toma mucho más tiempo del esperado porque la base sobre la que construimos no es sólida. Por eso, aunque invertir tiempo al inicio en una buena organización parezca lento, a largo plazo permite avanzar mucho más rápido [1:37].
¿Cómo separar lógica e interfaz con componentes contenedores y presentacionales?
En React, por ejemplo, existe un patrón muy popular que divide los componentes en dos categorías [2:05]:
- Componentes contenedores: se encargan de toda la lógica, los llamados al API, la conexión con la capa de datos y el manejo del estado. No renderizan interfaz directamente.
- Componentes presentacionales: reciben propiedades desde el componente contenedor y se limitan a mostrar la interfaz. No contienen lógica de negocio ni se conectan con datos.
Esta separación entre capa de UI y capa de datos [1:55] permite que cada parte funcione de manera independiente. Los cambios en la lógica no rompen la interfaz y viceversa. Es una práctica que facilita el testing, la reutilización y el mantenimiento.
¿Qué estrategias de organización de carpetas existen para tu proyecto?
Con la separación de componentes clara, el siguiente paso es decidir cómo organizar los archivos y carpetas del proyecto. Existen tres enfoques principales.
¿Cuándo usar file type first o folder by types?
En este modelo [2:45], cada carpeta representa un tipo de archivo: una carpeta para componentes presentacionales, otra para contenedores, otra para rutas, otra para estilos. Es intuitivo porque siempre sabes a qué carpeta ir según el tipo de componente que necesitas crear. Sin embargo, cada carpeta termina con muchísimos archivos y cuando alguno no encaja perfectamente en su categoría, la confusión aparece rápido.
¿Qué ventajas ofrece feature first?
Con feature first [3:17], cada componente o funcionalidad de la aplicación se convierte en su propia carpeta. Sí, habrá más carpetas, pero cada una funciona de forma independiente. No necesitas entender toda la aplicación para comprender un componente: basta con revisar su carpeta y los archivos que contiene [4:09]. Esto resulta especialmente útil en aplicaciones grandes y equipos donde los nuevos integrantes necesitan orientarse rápidamente.
La clave es que cada carpeta siga un patrón predecible, pero con la flexibilidad de adaptarse si una funcionalidad requiere una nomenclatura o estructura diferente.
¿Cómo organizar productos grandes con dominios separados?
Cuando tu producto crece tanto que se divide en subproductos [4:30], lo ideal es crear una carpeta para cada dominio. Dentro de cada dominio puedes aplicar la organización que mejor funcione, incluso diferentes estrategias en cada uno.
Por ejemplo, en una plataforma educativa podrías tener [5:00]:
- Una carpeta de estudiantes con client-side routing y single page application.
- Una business platform con server-side rendering para que cargue rápido.
- Una sales landing con archivos estáticos simples sin necesidad de un framework completo.
Esta arquitectura por dominios ofrece máxima flexibilidad: cada equipo puede trabajar con las herramientas y patrones que mejor se adapten a su subproducto sin afectar al resto.
La forma en que organizas tus archivos y componentes define la salud a largo plazo de cualquier proyecto. Si tienes otra estrategia de organización que te haya funcionado, compártela en los comentarios.
