Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. JavaScript

Una guía para la gestión de dependencias en el desarrollo front-end

by
Difficulty:BeginnerLength:MediumLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Los administradores de paquetes, los ejecutores de tareas y los agrupadores de módulos son herramientas de compilación que puedes usar para la administración de dependencias. En este artículo, veremos en qué se diferencian entre sí y qué puedes conseguir con ellos en el desarrollo front-end.

¿Qué es la gestión de dependencias?

La administración de dependencias es el proceso de automatización de la instalación, actualización, configuración y eliminación de bibliotecas, paquetes y herramientas de las que depende una aplicación. Cada lenguaje de programación tiene sus propias herramientas de gestión de dependencias; desde Java, a PHP, o JavaScript.

Vamos a examinar el panorama de alto nivel de la gestión de dependencias en el desarrollo front-end. Respectivamente, hablaremos sobre los siguientes grupos de herramientas de construcción:

  1. Administradores de paquetes (npm, Yarn, pnpm).
  2. Ejecutores de tareas (Grunt, Gulp), aunque no son herramientas de administración de dependencias, veremos resumidamente en qué se diferencian entre sí.
  3. Cargadores de módulos JavaScript (RequireJS, Browserify).
  4. Agrupadores de módulos estáticos (Webpack, Parcel).

Ten en cuenta que este artículo no proporciona revisiones detalladas de las herramientas concretas, sino que tiene la intención de mostrar cómo se relacionan entre sí los distintos tipos de herramientas de administración de dependencias.

Gestión de dependencias en el front-end

En el front-end, usamos herramientas de administración de dependencias de JavaScript para mantenerlas bajo control. La mayoría de estas herramientas son módulos Node.js que se pueden instalar con npm: el administrador de paquetes predeterminado para Node.js, un entorno de tiempo de ejecución que te permite ejecutar scripts fuera del explorador web.

Con el progreso del desarrollo front-end, la gestión de dependencias se ha vuelto cada vez más complicada. Hay muchas herramientas de la competencia en el mercado, que realizan tareas similares, pero también difieren de alguna manera. A veces, las herramientas de administración de dependencias también se superponen en funcionalidad con otras herramientas de compilación, como los ejecutores de tareas automatizados.

Bower (R.I.P.)

Comencemos con algunas desalentadoras noticias que muestran lo rápido que está cambiando la administración de dependencias. Si sigues las tendencias de front-end, seguramente habrás oído hablar del desuso de Bower, el otrora popular administrador de paquetes front-end. Aunque Bower todavía es mantenido (por lo que no tienes que preocuparte por tus existentes proyectos), no es recomendable usarlo en nuevos proyectos.

En resumen, Bower perdió la competencia contra otras soluciones populares de gestión de dependencias como:

  • la poderosa combinación de npm y Browserify,
  • administradores de paquetes optimizados para el rendimiento, como Yarn y pnpm,
  • y empaquetadores automatizados de módulos estáticos como Webpack y Parcel.

Como resultado, ahora el equipo de Bower también recomienda Yarn, Webpack y Parcel, e incluso ayuda a realizar migraciones a partir de Bower.

RIP Bower

Gestores de paquetes

Los administradores de paquetes te permiten cargar en el orden correcto todas las dependencias (paquetes, bibliotecas, módulos) en las que se basa la aplicación. También te permiten administrar, actualizar, modificar y eliminar paquetes a medida que cambian las necesidades de la aplicación. La mayoría de los administradores de paquetes realizan un seguimiento de las dependencias con la ayuda de un árbol jerárquico de las mismas.

npm

El administrador de paquetes npm sirve como base para la mayoría del resto de herramientas de administración de dependencias de front-end. Esto se debe a que la mayoría de ellos son paquetes Node.js que pueden ser instalados mediante npm.

Es fácil empezar con npm, ya que está empaquetado con Node.js que puedes instalar en tu sistema operativo descargando el instalador adecuado (Windows, macOS, Linux) desde la página de descarga de Node.js. Una vez que Node.js esté instalado en el sistema, puedes ejecutar npm desde la interfaz de la línea de comandos.

Además de ser un administrador de paquetes, npm es también un registrador de paquetes de Node de código abierto. Desarrolladores de todo el mundo pueden cargar paquetes npm que puedes añadir a tu aplicación con un par de comandos. Así es como los desarrolladores front-end tienen un fácil acceso a herramientas avanzadas como PostCSS y el ejecutor de tareas Grunt.

Grunt package manager

Otra cosa importante a saber sobre npm es que está vinculado al ecosistema Node.js. Como resultado, sólo puedes usarlo para añadir paquetes Node.js a la aplicación.

A medida que npm crea su árbol de dependencias fuera del explorador web, debes añadir todas las dependencias a la aplicación en la carpeta node_modules. Debido a que esta carpeta puede contener cientos o incluso miles de archivos, npm se utiliza con frecuencia junto con un empaquetador de módulos JavaScript como Browserify que agrupa todas las dependencias y las sirve al explorador en forma de archivo estático.

Para que la administración de paquetes sea más eficiente, npm3 introdujo árboles de dependencia planos que reemplazaban los árboles anidados que npm usaban antes. Las nuevas característica conducen a una menor redundancia y una carpeta node_modules más elegante. Esta fue la estructura de dependencia que Bower usó, al adoptar la característica, Bower se volvió obsoleta.

Yarn y pnpm

Sin embargo, npm todavía tiene una fuerte competencia. La mayoría de los administradores de paquetes alternativos, como Yarn y pnpm, apuntan principalmente a un mejor rendimiento, y npm todavía tiene margen de mejora en ese sentido. Yarn y pnpm también son paquetes Node.js, por lo que puedes instalarlos con el comando npm install. Logran un tiempo de finalización más rápido utilizando diferentes técnicas.

Mientras Yarn almacena en caché paquetes y paraleliza las operaciones, pnpm vuelve a las dependencias anidadas pero de una manera diferente. Utiliza la combinación de enlaces duros y enlaces simbólicos para guardar una única versión de cada módulo, lo que resulta en una carpeta de node_modules mucho más pequeña.

Si estás interesado puedes leer una buena comparativa entre npm, Yarn y pnpm en el blog de Niccolo Borgioli y encontrar también algunos puntos de referencia de rendimiento relacionados en la página GitHub de pnpm. Además tenemos un artículo sobre las ventajas de Yarn escrito por Gigi Sayfan.

Ejecutores de tareas (no para la administración de dependencias)

Aunque los ejecutores de tareas como Grunt y Gulp no pueden manejar las dependencias, con frecuencia se confunden con los administradores de dependencias, así que veamos rápidamente en qué se diferencian. Los ejecutores de tareas y los gestores de dependencias son ambos herramientas de compilación, pero resuelven un conjunto de problemas distintos. Mientras que los administradores de dependencias crean el árbol de dependencias de una aplicación y cargan (y a veces agrupan) las dependencias, los ejecutores de tareas automatizan las tareas rutinarias.

Los procesos de compilación suelen consistir en las mismas tareas repetitivas que necesitas realizar con regularidad, como minificación, optimización de imágenes, colocación de prefijos automáticos CSS, linting, unidad de pruebas y otros. Los ejecutores de tareas automatizan este proceso y te permiten crear un conjunto de tareas automatizadas para ahorrarte trabajo manual.

La raíz de la confusión

La confusión con las herramientas de gestión de dependencias se debe principalmente al hecho de que los ejecutores de tareas también requieren que definas tus dependencias de alguna manera. Por ejemplo, si utilizas Grunt, debes añadir tus dependencias al archivo package.json de la siguiente manera:

Sin embargo, el archivo package.json no administra las dependencias, solo carga los módulos Node.js que Grunt necesitará para realizar la lista de tareas definida en el Gruntfile.

Si quieres entender mejor lo que puedes conseguir con los ejecutores de tareas, echa también un vistazo a nuestro tutorial sobre cómo personalizar los archivos Sass de Bootstrap con Grunt.

Cargadores de módulos JavaScript

Volvamos ahora a las herramientas de gestión de dependencias, en concreto a los cargadores de módulos JavaScript. Node.js tiene el útil método require() que te permite añadir fácilmente un módulo a tu aplicación. Sin embargo, como Node.js se ejecuta en el lado del servidor, no puedes requerir módulos Node directamente en el explorador. Los cargadores de módulos JavaScript como RequireJS y Browserify proporcionan una solución a este problema.

Los cargadores de módulos JavaScript te permiten cargar las dependencias de JavaScript en el lado del cliente. Esto significa una gran mejora del rendimiento, ya que el navegador del usuario es servido por un archivo JavaScript estático que incluye todas las dependencias y carga rápidamente.

RequireJS y Browserify

Es interesante tener en cuenta que RequireJS existía antes de Node.js. Trajo el método require() al navegador siguiendo la especificación del módulo AMD. Node.js implementa la funcionalidad require() siguiendo CommonJS, que es una especificación de módulo JavaScript diferente.

Con la aparición de npm, el uso de RequireJS ha empezado a disminuir, aunque todavía está en desarrollo. También es importante que, de forma predeterminada, RequireJS no es un módulo Node (aunque tiene una implementación para Node.js), por lo que también puedes utilizarlo en otros entornos JavaScript como Rhino.

De forma similar a Node.js, Browserify también es una implementación de la API de CommonJS. Al ser un módulo Node, Browserify utiliza el método require() de Node.js, por lo que se utiliza con frecuencia junto con npm. Para proporcionar a los usuarios dependencias estáticas, puedes cargar tu dependencia con npm, agruparlos con Browserify y, a continuación, añadir el paquete como etiqueta <script> a tu página HTML.

Paquetes de módulos estáticos

Mientras que los cargadores de módulos JavaScript solo pueden cargar módulos JavaScript, los empaquetadores de módulos estáticos como Webpack y Parcel pueden agrupar cualquier tipo de activos front-end, por ejemplo, imágenes, HTML, CSS, Sass y otros archivos. Su objetivo es crear activos estáticos que se ejecuten en el navegador del usuario como una brisa.

En la captura de pantalla de abajo, puedes ver la lógica de cómo funciona Webpack:

Webpack logic
Fuente: https://webpack.js.org/

Webpack y Parcel

Webpack inspecciona todo el proyecto, genera un gráfico de dependencias y crea uno o varios paquetes que puedes añadir al archivo HTML. Viene con muchas características avanzadas como la eliminación de código muerto, método require() para archivos CSS, división de código y mucho más. Webpack reemplaza a los gestores de paquetes, ejecutores de tareas y cargadores de módulos JavaScript, ya que proporciona las tres funcionalidades.

En el pasado, el mayor inconveniente de Webpack era la cantidad de configuración que requería. Se necesitaba mucho tiempo y conocimiento para configurar correctamente un proyecto de Webpack. A Parcel, un paquete de módulo estático más reciente se le ocurrió una solución a este problema. Introdujo un modelo de "configuración cero" que más tarde fue adoptado también por Webpack 4.0.0.

Para utilizar la característica de configuración cero, sólo necesitas ejecutar un comando (webpack o parcel build), pasar el archivo de entrada y el empaquetador pasa automáticamente por todo el proceso de compilación, lo que ahorra mucho tiempo y esfuerzo en comparación con cualquier otra solución de gestión de dependencias.

Conclusión

Actualmente, los paquetes de módulos estáticos como Webpack y Parcel son las herramientas de gestión de dependencias más avanzadas en el desarrollo de front-end, ya que le permiten agrupar rápidamente todos los activos que vas a necesitar. Sin embargo, para una aplicación o un sitio web más simple, no los vas a necesitar obligatoriamente.

Si tu herramienta de gestión de dependencias resuelve todo lo que necesitas, ¡todavía puede ser una buena decisión continuar utilizándola en lugar de escoger una nueva!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.