Hace unos meses, empecé a trabajar en un proyecto de desarrollo de aplicaciones web de un año de duración, y me di cuenta de cómo muchos desarrolladores no son muy conscientes de las mejores prácticas industriales en el desarrollo front-end de aplicaciones web. Incluso yo mismo desconocía algunas prácticas. Así que decidí escribir este artículo para compartir lo que sé y lo que he aprendido sobre las mejores prácticas a seguir cuando se desarrolla una aplicación web.

Este artículo se centrará en las mejores prácticas en el desarrollo front-end porque la calidad del código front-end es el factor más decisivo de una gran aplicación web en mi experiencia, pero la mayoría de los desarrolladores no siguen estas prácticas y desarrollan sus componentes individuales. Si los desarrolladores de front-end no siguen estas prácticas, será realmente difícil gestionar el código, no habrá consistencia en el diseño y la velocidad de la aplicación web también tendrá un impacto negativo. Seguir estas prácticas hará que el código sea más limpio y fácil de gestionar, y aumentará la productividad de todos los desarrolladores.

En este artículo, voy a hablar de las mejores prácticas a seguir a la hora de estructurar la arquitectura del front-end del proyecto, escribir el código del front-end y preparar el despliegue. Así que vamos a empezar.

Cuando se empieza con el proyecto, lo primero es estructurar la arquitectura del código front-end de forma adecuada. Y estas son las mejores prácticas que cada desarrollador front-end del proyecto debe seguir.

Estructurar el código de estilos

Dentro de la carpeta de estilos, crea carpetas separadas para configuraciones, base, diseño, componentes y páginas dependiendo de tu aplicación web. Utilice un archivo de tipografía separado para definir los tamaños y colores de todas las etiquetas de texto HTML (como h1,h2,…) utilizadas en la aplicación web. Los colores deben ser definidos en un archivo de variables y asignar los colores a las variables con nombres adecuados y utilizar esas variables cuando los colores deben ser aplicados en todo el sitio web. Incluya estos archivos de estilo dentro de las carpetas creadas de forma similar a la siguiente imagen.

A continuación, puede importar estos archivos en el archivo de estilo principal. Si estás usando scss en tu aplicación web entonces el archivo main.scss sería similar al código de abajo.

Estructurar el código JS

Básicamente, estructurar tu JavaScript significa dividir tus archivos y separar tu propio JavaScript del que viene de otros lugares. Plugins, vendor y scripts son las tres carpetas principales en las que podemos dividir los archivos JS. Los plugins incluirían piezas de código útiles que usamos en cualquier parte de la aplicación web como los plugins de jQuery, los proveedores serían código JavaScript de terceros como Frameworks y Bibliotecas como la biblioteca slick, y la carpeta de scripts incluiría los scripts que escribimos para la lógica de nuestra aplicación web.