Master
Techniques

Import maps for micro frontends

Published: Apr 13, 2021
Apr 2021
Assess?

When composing an application out of several micro frontends, some part of the system needs to decide which micro frontends to load and where to load them from. So far, we've either built custom solutions or relied on a broader framework like single-spa. Now there is a new standard, import maps, that helps in both cases. Our first experiences show that using import maps for micro frontends allows for a neat separation of concerns. The JavaScript code states what to import and a small script tag in the initial HTML response specifies where to load the frontends from. That HTML is obviously generated on the server side, which makes it possible to use some dynamic configuration during its rendering. In many ways this technique reminds us of linker/loader paths for dynamic Unix libraries. At the moment import maps are only supported by Chrome, but with the SystemJS polyfill they're ready for wider use.