URL Driven Development with Importmaps

What are importmap(s)?

Import maps are a new feature in modern web browsers that allow developers to define how their web application imports JavaScript modules. Essentially, an import map is a file that maps a module specifier (i.e., the name of a JavaScript module) to a URL where that module is located.

Without importmap

For example, imagine that you are building a web application that uses the React.js library.

<body>
  <main></main>

  <script type="module">
    import * as React from 'https://jspm.dev/react';
    import { createRoot } from 'https://jspm.dev/react-dom/client';

    function Dom() {
      return (React.createElement("h1", null, "Hello, World!"));
    }

    const container = document.querySelector('main');
    const root = createRoot(container);
    root.render(React.createElement(Dom, null));

  </script>
</body>

With importmap

Instead of importing React.js from a URL like
https://jspm.dev/react you can use an import map to define the name react as the specifier for the React.js library.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JSPM and Importmap</title>
  <!-- Generated by @jspm/generator - https://github.com/jspm/generator -->
  <script async src="https://ga.jspm.io/npm:es-module-shims@1.7.0/dist/es-module-shims.js" crossorigin="anonymous"
    integrity="sha384-5EZJV0UmAhHNaAT/HHsswzqHZGNDxkrRoxmoUGxS+LVSr65S7G3SJSVQvESz3Nhf"></script>
  <script type="importmap">
  {
    "imports": {
      "react": "https://ga.jspm.io/npm:react@18.2.0/index.js",
      "react-dom/client": "https://ga.jspm.io/npm:react-dom@18.2.0/client.js"
    },
    "scopes": {
      "https://ga.jspm.io/": {
        "react-dom": "https://ga.jspm.io/npm:react-dom@18.2.0/index.js",
        "scheduler": "https://ga.jspm.io/npm:scheduler@0.23.0/index.js"
      }
    }
  }
  </script>
  <link rel="modulepreload" href="https://ga.jspm.io/npm:react-dom@18.2.0/client.js"
    integrity="sha384-oDMyZFpVWD767Ur6EQHr1C2P6lk1GAQ5xrPE5nZSgYkPszCM1wvTOe9qwxxbf7bm" />
  <link rel="modulepreload" href="https://ga.jspm.io/npm:react-dom@18.2.0/index.js"
    integrity="sha384-WbMGocd5YxbJII/+Md/PDaG7XSvFXU0WI+D1p5Ukkqt3tijr72ZT68qnNUUCwwYw" />
  <link rel="modulepreload" href="https://ga.jspm.io/npm:react@18.2.0/index.js"
    integrity="sha384-i6bD4Fz1JxnWeeJ6W+zAMk/LgkWeHJ/B+22ykUkjaKgPupuM4UDtOU/2bSE8sEyC" />
  <link rel="modulepreload" href="https://ga.jspm.io/npm:scheduler@0.23.0/index.js"
    integrity="sha384-ZZNv5o2gWlto4y6eC5xFNxa+sLU9nIJLIzFxfaR9j/1tSGRif+Xan+DBSkhmR4C5" />
</head>

<body>
  <main></main>

  <script type="module">
    import * as React from 'react';
    import { createRoot } from 'react-dom/client';

    function Dom() {
      return (React.createElement("h1", null, "Hello, Importmap!"));
    }

    const container = document.querySelector('main');
    const root = createRoot(container);
    root.render(React.createElement(Dom, null));
  </script>
</body>

</html>

Then, whenever your application imports react the browser will automatically load the correct version of the library from the URL specified in the import map.

How do import maps work?

Import maps are implemented as part of the browser's native module loading system. When a web application imports a module, the browser checks the import map to determine the URL where that module is located. If the module has not been loaded yet, the browser will download the module from the specified URL and cache it for future use.

Import maps are defined using JSON syntax and can be loaded directly in a web application using a script tag or a special HTTP header. Here's an example of an import map that maps the react module to the URL for the React.js library.

<script type="importmap">
  {
    "imports": {
      "react": "https://ga.jspm.io/npm:react@18.2.0/dev.index.js"
    }
  }
</script>

JSPM

Despite the fact that importmaps are official web standards, a lot of web developer tooling is still not prepared to support existing and future of eco system and developer community.

JSPM is committed towards its goal to fill the gap of missing tooling, which support latest web standards.

JSPM pre-compiles whole of NPM using JSPM builder and serves them over production grade CDN.

While importmaps are not yet widely supported by all browsers, it can be
used with es-module-shims.

Why are import maps useful for designers?

Import maps can be particularly useful for web developers who are also interested in design because they enable more flexible and modular web development. By using import maps to manage module dependencies, developers can create more organized and maintainable code that is easier to debug and test.

In addition, import maps can help reduce the amount of code that needs to be loaded by a web application, which can improve performance and speed up load times. This is especially important for designers who are interested in creating fast and responsive user interfaces.

Sharing design tokens over importmaps are real thing.

<script type="importmap">
  {
    "imports": {
      "#design-token": "https://design.example.com/design-token@v0.1.1"
    }
  }
</script>

Conclusion

Import maps are a powerful new tool for web developers who are interested in building modern, modular web applications. By using import maps to manage module dependencies, developers can create more organized, maintainable code that is easier to debug and test. For designers, import maps can help improve the performance and user experience of their web applications. If you're interested in learning more about import maps, we encourage you to explore the official documentation and experiment with them with help of JSPM generator in your own web projects.

Last but not least join JSPM discord and file your issues on JSPM Github.

Blog