one-spa 5
Today we released [email protected].
Here are the highlights:
- Performance focus: 35% decrease in library size.
- A CLI for one-spa: create-one-spa
- New framework-specific example repositories - React example, Vue example, Multiple frameworks example, Full list
- Massively improved documentation, including Concept: Microfrontends and The Recommended Setup.
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 one-spa@5. The breaking changes listed in the release notes are the removal of features that were never documented.
If installing from npm, you can simply npm install --save [email protected] or yarn add [email protected].
Alternatively, one-spa is available on cdnjs, jsdelivr, and unpkg.
The one-spa core team is committed to treating our users well, which includes not introducing massive breaking changes. The core one-spa API has not seen massive breaking changes since one-spa@3 in August 2016. We have added features and improved things, but one-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 one-spa@4 was 23.8kb (7.2kb gzipped). That was improved in one-spa@5 to 15.5kb (5.1kb gzipped). We did this by optimizing our build process and removing unused features.
one-spa CLI
Since one-spa's inception, bundler configuration has been a huge source of user pain. We have heard this pain and implemented create-one-spa, which creates (and sometimes can update) repositories that are ready to be used as one-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.
New example repositories
What started out as one company'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, 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 one-spa.
An example of these new documentation pages for error codes is found here.
Governance
The project is fully managed by the open source community.
This change does not mean anything drastic for one-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 one-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.