JSPM and Importmap

--- title: URL Driven Development with Importmaps published: true description: URLs are magical tools at disposal for Web Developers. Frontend development is particularly interesting for possibility to get benefited from adopting new web standards "importmap". Importmap is built around principles of Web, where dependency management needs of a webpage is treated as a separate concern and URLs are used to solve it. tags: webdev, javascript, importmap, jspm # cover_image: https://direct_url_to_image.jpg # Use a ratio of 100:42 for best results. # published_at: 2023-03-11 08:44 +0000 --- ## 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](https://github.com/facebook/react) library. ```html

``` ### 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. ```html JSPM and Importmap

``` 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. ```html ``` ## 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](https://www.jspm.org) 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](https://github.com/guybedford/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. ```html ``` ### 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap) and experiment with them with help of [JSPM generator](https://github.com/jspm/generator) in your own web projects. Last but not least [join JSPM discord](https://discord.gg/dNRweUu) and file your issues on [JSPM Github](https://github.com/jspm/project).

fusionstrings

URL Driven Development with Importmaps

Join Our Newsletter. No Spam, Only the good stuff.