Las actividades diarias de un desarrollador web van mucho más allá de la escritura de código. Para asegurar que un proyecto web funcione de manera eficiente, debemos aprender a organizar sus elementos. Por ello, en este post te enseñaremos cómo organizar archivos de un proyecto frontend para que mantengas una lógica constante.
¿Cómo organizar archivos de un proyecto frontend?
El proceso de organizar archivos de un proyecto frontend es muy personal y depende del proyecto. Aspectos como la lógica de visualización y el tamaño del proyecto afectarán a este proceso. A continuación, te enseñaremos cómo nos aproximaríamos desde KeepCoding a una organización de un proyecto frontend pequeño, pero con varias pantallas.
Para este tipo de proyectos, te recomendamos utilizar carpetas como forma de organización. Además, te sugerimos crear estas carpetas en función de las pantallas que tengas.
Entonces, suponiendo que tenemos una pantalla de login, crearemos una carpeta con el mismo nombre. Aquí es donde estaría nuestro archivo login.html, que nos ha permitido crear una pantalla de login en HTML. En esta misma carpeta irían los distintos archivos que nos permiten gestionar el formulario de inicio de sesión. En el caso de estar usando un patrón como el modelo vista controlador, estarían archivos como LoginController.js (encargado de gestionar los datos para mandarlos a la vista) y LoginService.js (encargado de hacer las peticiones necesarias a la API y al endpoint correspondiente). Además, podría existir un archivo de estilo de tipo CSS.
A la hora de crear carpetas e insertar archivos dentro de ellas, ten presente que los enlaces para acceder a las distintas pantallas cambiarán. Es decir, deberás insertar el nombre de la carpeta antes del nombre del archivo para acceder a un enlace. Por ello, en el caso de pantallas de inicio como login o signup, te recomendamos mantener el HTML fuera de la carpeta para facilitar su acceso. Todos los demás archivos de esta pantalla sí pueden estar dentro de la carpeta.
Siguiendo la lógica de carpetas por pantallas, te aconsejamos ir trasladando todos los archivos que tengan que ver con una pantalla a la misma carpeta. En este sentido, la carpeta signup podría contener archivos como signup.js, SignupService.js y SignupController.js. Estos archivos son declarados con mayúsculas o no en función del tipo de objeto que declaran: una clase se representa en mayúsculas.
Además de las carpetas en función de las pantallas, podemos crear carpetas que se dediquen a agrupar archivos que ejecutan funciones similares. ¿A qué nos referimos con esto? A ese tipo de archivos que contienen código útil para múltiples piezas o pantallas, como lo sería el patrón PubSub (que puedes encontrar en nuestro post sobre implementar patrón PubSub con clase en JavaScript) o el código para decodificar JWT desde JavaScript. A esta carpeta la llamaremos utils.
Una vez termines el proceso para organizar archivos de un proyecto frontend, notarás que tu proyecto ha dejado de funcionar por completo. Esto se debe a que las direcciones a archivos internos han cambiado. Por ejemplo, ahora el archivo de JavaScript que habías enlazado en tu HTML está dentro de una carpeta, por lo que la forma de acceder a él cambiará. Para entender cómo cambia esta estructura en enlaces internos dentro del proyecto, te invitamos a leer nuestro post sobre las rutas de archivos HTML.
Normalmente, los editores de código tienen la habilidad de enrutar estos enlaces para que funcionen. Sin embargo, no siempre es así. Por ello, es fundamental conocer cómo crear las rutas apropiadas con el estándar que te enseñamos en el post mencionado anteriormente.
¿Te animas a seguir aprendiendo?
Has aprendido un aspecto importante del proceso diario de un desarrollador web: cómo organizar archivos de un proyecto frontend. Para aprender aún más sobre la creación y el desarrollo de este tipo de proyectos, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva e íntegra donde aprenderás a dominar los conceptos, lenguajes y herramientas fundamentales para este ejercicio. ¿Te animas a seguir aprendiendo para convertirte en un experto? ¡Solicita más información ahora!
