Skip to main content

single-spa 5

· 5 min read
Joel Denning

Today we released single-spa@5.0.0.

Here are the highlights:

Release notes here

Migration from 4 to 5​

For every user we're aware of, you do not need to change anything in your code in order to upgrade to single-spa@5. The breaking changes listed in the release notes are the removal of features that were originally used by Canopy Tax, but were never documented.

If installing from npm, you can simply npm install --save single-spa@5.0.0 or yarn add single-spa@5.0.0.

Alternatively, single-spa is available on cdnjs, jsdelivr, and unpkg.

The single-spa core team is committed to treating our users well, which includes not introducing massive breaking changes. The core single-spa API has not seen massive breaking changes since single-spa@3 in August 2016. We have added features and improved things, but single-spa is a stable technology. We are committed to maintaining it, documenting it, and adjusting it as technologies like in-browser modules become more and more popular and viable.

Performance improvements​

The ESM version of single-spa@4 was 23.8kb (7.2kb gzipped). That was improved in single-spa@5 to 15.5kb (5.1kb gzipped). We did this by optimizing our build process and removing unused features.

single-spa CLI​

Since single-spa's inception, bundler configuration has been a huge source of user pain. We have heard this pain and implemented create-single-spa, which creates (and sometimes can update) repositories that are ready to be used as single-spa microfrontends. For Angular and Vue, the official CLIs are used with a few extra plugins automatically installed. For React, a default webpack config with decent eslint / prettier defaults is set up.

Additionally, we have added a lot of documentation for webpack in The Recommended Setup.

Tutorial videos​

We understand that single-spa is more than just a library - it is an architecture. The single-spa library itself is the core, but the surrounding ecosystem of concepts and libraries are equally important to successfully migrating to single-spa and having it work for you. As such, we have created a Youtube playlist, currently consisting of seven videos, to help you get started.

Youtube playlist / Bilibili space

The videos currently cover the following topics:

  • What are Microfrontends?
  • In-browser vs build-time JavaScript modules
  • Import Maps
  • Local Development with single-spa and import maps
  • Deploying Microfrontends / Continuous Integration (CI)
  • SystemJS intro
  • Lazy Loading
  • Bundlers, webpack, and rollup.

New example repositories​

What started out as Canopy Tax's special sauce for independently deployed frontend microservices is now fully accessible to the public with our new set of example repos. We have a React example, a Vue example, and a polyglot (multiple framework) example. We hope to add an Angular example, after we achieve support for Angular 9. These example repositories are actively watched and maintained by the single-spa core team, and reflect our current opinions on the best, production-viable way to do microfrontends.

Furthermore, we have deployed each of the examples to our new domains:

Documentation overhaul​

We removed several dated documentation pages, and added several that were very much lacking. Here are a few pages that give you the most bang for your buck:

Development builds and error codes​

Taking inspiration from the react development and production builds, we now publish to NPM both development and production builds in the following formats: UMD, ESM, and System.register.

You can see the published build files here. The .dev.js files provide full debugging information in the browser console, whereas the .min.js files give you a numeric error code and a link to a documentation page that explains the error. We hope that these error codes and documentation for them will improve discoverability of relevant documentation when you're setting up single-spa.

An example of these new documentation pages for error codes is found here.

Governance​

Some of you may have noticed that we recently moved all github repos from https://github.com/CanopyTax to https://github.com/single-spa. Canopy Tax was the company where single-spa was first authored, but as a core team we asked to move ownership and governance of the projects to an organization fully managed by the open source community. In agreement with Canopy, we made that change.

This change does not mean anything drastic for single-spa. Its license was and is MIT, and we have no plans to do anything with the project besides make it better.

Where next?​

We are actively translating the single-spa documentation to Chinese, and hope to add other languages soon. We will add full Angular 9 support soon, and hope to add server rendering in an upcoming release.

Please contribute to our code and ecosystem, join our single-spa slack channel, follow our official Twitter account, and contribute to our open collective. The single-spa core team all have full-time jobs and maintain this project on a volunteer basis.