Qué son los import maps en desarrollo Frontend

En el desarrollo web moderno con JavaScript, trabajar con módulos se ha hecho prácticamente indispensable, los módulos de JavaScript nos permiten organizar nuestro código en archivos que tienen su propio alcance y que a la vez pueden importar o exportar de otros módulos.

Los módulos comenzaron a popularizarse en Node.js a través de librerías como common.js cuya sintaxis nos permitía importar módulos de la siguiente manera:

const lodash = require('lodash');

Eventualmente, se introdujo una sintaxis usando import que usamos más comúnmente, un ejemplo de esta alternativa sería el siguiente bloque de código:

import React from 'react';

Aunque esta sintaxis es similar a la del estándar que introduce la web, no es precisamente la misma. Este tipo de imports son resueltos comúnmente por un bundler como Webpack.

La sintaxis con import, y con requir tienen algo en común, nos permiten usar lo que se conoce como “bare import specifiers”, cuyo concepto refiere a que el lado derecho del import incluye apenas lo necesario para resolverlo.

A diferencia de un import para un módulo en la especificación, el bare import specifier no incluye ni la ruta para encontrar el paquete, ni la extensión. Webpack, Common.js y otros manejadores de dependencias implementan reglas de búsqueda para encontrar estos paquetes sin la necesidad de los detalles omitidos, por ejemplo buscando en la carpeta node_modules.

En la sintaxis del estándar web (que no depende de ninguna librería) la instrucción import contiene lo que llamamos module specifier o especificador de módulo, en donde colocamos una URL en la que se debe buscar el módulo, por ejemplo:

import { name } from './modulo_dos.mjs'

En otras palabras, el especificador de módulo indica en qué archivo podemos encontrar el elemento a importar. Hasta la introducción de import maps, no era posible usar bare import specifiers al usar módulos en el frontend sin el uso de una librería externa como webpack.

Import maps

Imort maps introduce una sintaxis para asociar estos bare import specifiers con una ruta válida para el estándar, por lo que para que podamos importar React con la sintaxis a la que estamos acostumbrados, necesitamos un import map asociado:

import React from 'react';

Necesitamos un importmap como este:

 <script type="importmap">
  {
    "imports": {
      "react": "https://ga.jspm.io/npm:[email protected]/dev.index.js",
    }
  }
</script>

El importmap definido dentro de una etiqueta <script>con el type importmap nos permite definir un JSON de configuración donde, entre otras cosas, podemos asociar bare import specifiers con las rutas donde debe ser resueltos, para este ejemplo definos que al importar react debe buscarse el paquete en esta ruta: "https://ga.jspm.io/npm:[email protected]/dev.index.js". Esto nos permitirá hacer uso de la sintaxis tradicional antes mencionada y que repito aquí:

import React from 'react';

En este ejemplo, cuando el especificador de módulo no es una ruta, el navegador intentará buscar un importmap que le indique donde debe buscar dicho paquete.

Esto nos permite crear aplicaciones sin la necesidad de Webpack, NPM, o alguna herramienta externa, considera por ejemplo la siguiente página de React hecha sin Webpack:

See the Pen Untitled by Uriel Hernández (@urielhdz-the-looper) on CodePen.

¿Cuáles son las ventajas de import maps?

Las ventajas son muchas, en una edición de HTTP 203 se repasan algunos de estos beneficios, te sorprenderá la cantidad de cosas que puedes hacer gracias a importmaps:

Principalmente gracias a la introducción de importmaps podrás utilizar y manejar módulos sin la necesidad de herramientas como webpack o NPM, sin instalar Node.js ni herramientas adicionales, solamente escribir HTML, CSS, y JavaScript.

Al ser un estándar, tanto la sintaxis como el uso de importmaps son muy estables, por lo que los proyectos que desarrolles con esta herramienta no necesitarán muchos cambios para mantenerse vigentes, a diferencia del uso de librerías externas que son menos estables que los estándares.

Cabe mencionar que importmaps no es un sustituto directo para herramientas como webpack, ya que no cubren todas las características de estas herramientas, sobre todo procesos de automatización. Importmaps nos permite únicamente manejar nuestros módulos y las dependencias de estos módulos.

¿Cómo genero mis importmaps?

Mencionamos que un importmap es un JSON de configuración que especifica los paquetes que necesitamos, y sus dependencias, así como las rutas donde estos paquetes deben ser resueltos, ¿pero cómo construyo estos archivos?

El trabajo de generar importmaps normalmente no será de un desarrollador, si no de una herramienta externa que lo haga por ti, ya que además de enlistar los paquetes que necesitas, debes enlistar sus dependencias, y manejar posibles conflictos entre ellos.

JSPM ofrece una CDN para descargar los paquetes de JavaScript desde una URL, y además, tiene una herramienta para generar tus importmaps, puedes acceder a la herramienta en esta dirección: https://generator.jspm.io/

En esta plataforma sólo deberás indicar las dependencias que necesitas, y la plataforma generará el importmap correspondiente que sólo necesitas copiar para tu página web:

via GIPHY

Conclusiones

Importmaps es increíble, ahora podrás aprovechar todos los beneficios del ecosistema de JavaScript, sin configuraciones complejas para desarrollar páginas web, sobre todo en proyectos pequeños/medianos que no necesitan de la complejidad de webpack.

Algunas herramientas como Ruby on Rails, han adoptado importmaps como la manera en que puedes introducir y manejar dependencias de JavaScript en tus proyectos web. Si quieres ver importmaps en acción, considera revisar este clase de Ruby on Rails y Hotwire: https://codigofacilito.com/videos/primera-practica-importmap-en-rails

Así mismo, recuerda que importmaps no sustituye a otras herramientas, aún hay muchos proyectos para los que importmaps no es suficiente, y necesitas herramientas más complejas como webpack, vite, entre otros.

¿Planeas probar importmaps? Cuéntanos en los comentarios.