[28/07/2021] Parece que cada año es un año excelente para JavaScript, y el 2021 no es la excepción. En particular, una nueva generación de agrupadores y herramientas de construcción está desafiando la inercia de las herramientas "suficientemente buenas”. Mejor velocidad, una mejor experiencia de desarrollo y mayor calidad en las construcciones de producción son áreas de interés de la nueva generación.
[Reciba lo último de CIO Perú suscribiéndose a nuestro newsletter semanal]
Siga leyendo para obtener una descripción general del nuevo conjunto de herramientas JavaScript. ESM, esbuild, Parcel, pnpm, Rollup, Snowpack y Vite son las nuevas estrellas que facilitan el desarrollo de JS.
Módulos ECMAScript (ESM)
Los módulos ECMAScript, también conocidos como módulos ES o ESM, son la sintaxis oficial del módulo JavaScript. Como tal, técnicamente no es una herramienta, pero tiene amplias implicaciones para el desarrollo y las herramientas de JS. Hemos visto una gran cantidad de caos e incertidumbre en el uso del módulo de JavaScript durante un tiempo (con Node.js aterrizando en la sintaxis CommonJS). Pero con la reciente aprobación de ESM, y su implementación general en navegadores, se abren nuevas posibilidades.
La forma general de la sintaxis de ESM se ve en el Listado 1. La primera línea es la sintaxis para importar una exportación por defecto. El segundo usa la desestructuración para especificar miembros dentro del módulo.
Listado 1. Sintaxis de ESM
import aModule from 'module-name';
import { moduleMember, anotherMember } from 'module-name';
Incluso Microsoft Edge soporta ESM ahora, por lo que todos los navegadores principales ahora lo soportan.
Hay dos formas en que el navegador utiliza los módulos: ya sea en los scripts de JavaScript que incluye, o directamente en la etiqueta de script especial "module”, que se muestra en el Listado 2.
Listado 2. Importación a través del módulo de secuencia de comandos
<script type="module" src="https://unpkg.com/browse/react@17.0.1/">
<script type="module">
import React from 'react';
</script>
<script type="module" src="../my-module.js"></script>
En el Listado 2, las dos primeras etiquetas de secuencia de comandos muestran cómo apuntar a una URL absoluta. Observe que en la primera instancia usa el atributo src, y en la segunda ejecuta la importación de JavaScript. La tercera etiqueta de secuencia de comandos muestra una importación relativa servida desde el mismo dominio. Tenga en cuenta que cuando extrae un script de otro dominio, se aplican restricciones de CORS.
Durante muchos años, se ha utilizado una variedad de paquetes (más comúnmente Webpack en estos días) para agrupar scripts destinados a evitar las limitaciones del navegador con módulos. El amplio soporte del navegador para ESM cambia eso, y la nueva generación de herramientas se ha desarrollado con el fin aprovechar este soporte.
Sin embargo, verá que la agrupación todavía tiene un papel que desempeñar, porque permitir que el navegador solicite ingenuamente todos los módulos para una aplicación conduciría al rendimiento deficiente de una multitud de solicitudes. La agrupación, la minificación, la división de código inteligente/CSS, etc., siguen siendo importantes para un buen rendimiento.
Puede ver la compatibilidad del navegador con ESM aquí.
esbuild
esbuild es una entrada relativamente nueva en el campo del empaquetado. Como otros, su fama se debe a su velocidad. Está escrito en Go, en lugar de JavaScript, y se beneficia del paralelismo integrado de Go. También se basa en el uso de memoria compartida inteligente durante el análisis y la generación de código.
Puede tener una idea de la velocidad de esbuild al verificar los puntos de referencia del proyecto. Los puntos de referencia muestran aumentos de rendimiento 100 veces superiores a los de otros paquetes.
De forma predeterminada, esbuild se agrupa para el navegador, pero también es capaz de agruparse para Node.js. Funciona de manera similar a otras herramientas de compilación, al vincularse a NPM a través de package.json y node_modules. También ofrece una API de JavaScript, la cual puede usar para acumular comandos de compilación si, para el uso de la línea de comandos, sus necesidades se vuelven demasiado complejas y difíciles de manejar. El Listado 3 muestra un ejemplo del uso de esta API.
Esbuild se centra en la agrupación y no incluye un servidor en modo de desarrollo. Algunas características, como la separación code/CSS, todavía están en proceso. Otras herramientas pueden usar esbuild para sus capacidades de agrupación de producción; consulte Vite a continuación.
En mayo del 2021, esbuild tiene ~25K estrellas GitHub, y ~570K descargas semanales de NPM. Esto hace que esbuild sea el más pequeño de los proyectos descritos aquí, pero está experimentando un rápido aumento en el uso y sus promesas de rendimiento lo convierten en una opción tentadora.
Listado 3. Usando la API de JavaScript esbuild
require('esbuild').build({
entryPoints: ['app.jsx'],
bundle: true,
outfile: 'out.js',
}).catch(() => process.exit(1))
Esbuild genera un paquete totalmente autónomo, que incorpora el código de su aplicación y todas las dependencias. Muchos complementos están disponibles para manejar una variedad de casos de uso, desde Svelte hasta PostCSS y YAML. Desde el inicio, esbuild soporta tipos comunes como TypeScript, JSX y JSON.
Parcel
Sería negligente si no mencionara a Parcel, que es una herramienta similar en espíritu a Webpack y Rollup (ver más abajo). Además de reducir la sobrecarga de configuración, Parcel afirma mejorar el rendimiento, aunque no puede igualar las afirmaciones de esbuild a ese respecto.
El paquete incluye división de código sin configuración y reemplazo de módulo caliente (HMR, por sus siglas en inglés) listo para usar. También incorpora muchos tipos de archivos (como imágenes) de forma predeterminada y puede manejarlos sin configuración adicional.
Parcel tiene alrededor de ~38K estrellas en GitHub y ~64K descargas semanales de NPM (las descargas semanales parecen estar nivelándose). Estas estadísticas lo convierten en una opción viable de tamaño mediano.
¿Qué es el reemplazo del módulo caliente?: A menudo abreviado a HMR, el reemplazo de módulo caliente es la capacidad de un sistema de tiempo de ejecución de desarrollo para actualizar solo aquellas partes de la aplicación que han experimentado un cambio de estado, en lugar de volver a cargar la aplicación completa. HMR permite actualizaciones más rápidas y una experiencia de desarrollo más optimizada porque la mayoría del estado de la aplicación se mantiene entre las actualizaciones y se evitan, en gran medida, las recargas completas.
pnpm
pnpm no es un paquete ni una herramienta de compilación. En cambio, es un reemplazo directo de la herramienta de dependencia NPM. Esto hace que sea similar a Yarn en propósito, pero pnpm tiene un enfoque diferente: se utiliza enlaces duros para aplanar el árbol de node_modules, lo que simplifica la gestión de la dependencia y evita dependencias duplicadas. Puede leer más sobre esta ingeniosa ingeniería aquí.
Además de ahorrar espacio en el disco, esta estructura abre algunas mejoras de rendimiento, como se ve en estos puntos de referencia, que muestran que pnpm supera a otros administradores de paquetes en la mayoría de las tareas.
Pnpm también incluye pnpx, una herramienta similar a npx, para ejecutar paquetes.
Pnpm tiene ~11K estrellas de GitHub y ~191K descargas semanales de NPM. Es el administrador de paquetes predeterminado para SvelteKit y está experimentando un fuerte crecimiento en el uso. pnpm parece ser un competidor líder para el próximo administrador de dependencias estándar de facto.
Rollup
Rollup es un paquete que le permite utilizar la sintaxis de ESM en todas partes. Suaviza las diversas sintaxis que se ven en uso (CJS, AMD, UMD, EMS, etc.) y agrupa su código en una sintaxis que simplemente funciona. Además, Rollup ofrece "agitación de árboles”, que es la capacidad de analizar su base de código y eliminar las importaciones no utilizadas. Esto tiene ventajas de rendimiento obvias.
Al igual que esbuild y otros paquetes, Rollup se vincula con package.json y node_modules a través de NPM.
Al usar Rollup, usted básicamente puede olvidarse de la sintaxis del módulo y simplemente usar ESM. En general, Rollup tiene como objetivo brindarle la experiencia del futuro desarrollo de JS, donde todo está unificado en ESM ahora.
En funcionamiento, Rollup es bastante similar a Webpack, pero a diferencia de Webpack, tiene soporte para la salida de Node.js. Además, algunos desarrolladores informan de una experiencia más sencilla y fluida con Rollup.
El paquete acumulativo no soporta la sustitución del módulo caliente de forma inmediata.
Rollup tiene una comunidad activa y un ecosistema de complementos completo. En mayo del 2021, tiene ~20K estrellas de GitHub y ~4.8 millones de descargas semanales de NPM.
Vite
Vite era originalmente una herramienta de compilación específicamente para Vue, pero ahora es compatible con el uso general. Se ha convertido en la solución de compilación oficial para SvelteKit, por lo que su uso es cada vez más amplio.
Vite se centra en manejar dos requisitos para el desarrollo de JS: ejecutar el modo de desarrollo y compilar para la producción. Vite no es un agrupador y, en cambio, transfiere las tareas de agrupación de producción a Rollup.
Con la intención de ser rápido (vite significa rápido en francés), Vite promociona su servidor de desarrollo de inicio rápido y reemplazo de módulo caliente. La experiencia confirma las afirmaciones de Vite -estas funciones funcionan bastante rápido en comparación con algo como Webpack.
Las mejoras de velocidad de Vite se basan en el aprovechamiento de ESM y el uso de esbuild para el empaquetado previo. El uso de ESM significa que Vite puede descargar el trabajo de empaquetar al navegador durante el desarrollo y lograr una mayor granularidad al determinar qué archivos se sirven durante los cambios.
Actualmente, Vite utiliza Rollup para las compilaciones de producción (para obtener funciones como la división de CSS), pero puede cambiar a esbuild en el futuro.
La experiencia de desarrollo de Vite es su punto más fuerte -la sustitución del módulo caliente es muy rápida. Actualmente tiene ~27K estrellas de GitHub y ~124K descargas semanales de NPM, con un fuerte aumento en las descargas observadas en los últimos meses.
Snowpack
Snowpack es otro paquete y servidor de desarrollo centrado en la velocidad. Cuenta con un inicio rápido del servidor, compatibilidad con ESM con almacenamiento en caché inteligente, reemplazo rápido de módulos calientes y compatibilidad con configuraciones bajas de una variedad de tipos de archivos. Snowpack es similar en espíritu a Rollup y Parcel.
Snowpack soporta el reemplazo de módulos calientes específicos para JavaScript, módulos CSS, así como CSS listos para usar. También cuenta con una sólida comunidad de complementos.
Snowpack tiene ~18K estrellas de GitHub y ~55K descargas semanales de NPM.
El futuro de las herramientas de JS
Webpack ha sido un estándar de facto maravilloso, pero está empezando a mostrar su edad. Las herramientas más nuevas, con el panorama más nuevo en mente, seguramente ofrecerán un mejor rendimiento y una mejor experiencia para el desarrollador en el futuro.
JavaScript sigue siendo un mundo emocionante, y en rápida evolución, en el cual desarrollarse. La vida sigue mejorando para los desarrolladores de JavaScript.
Basado en el artículo de Martin Tyson (InfoWorld) y editado por CIO Perú