--- title: Building a cross-framework UI with single-spa in MAAS 2.8 description: 'A new machine list, and a new framework In MAAS 2.8, we’re shipping a new machine list, built from the ground up in React and Redux. We’ve also implemented a few new features: persisting UI state for grouping, new grouping options, bookmarkable urls with filter and search parameters, and many performance improvements.  In my last […]' url: https://canonical.com/blog/building-a-cross-framework-ui-with-single-spa-in-maas-2-8?format=md --- 1. [Blog](https://canonical.com/blog) 2. Article --- [Kit Randel](https://canonical.com/blog/author/blr "More about Kit Randel") 4 June 2020 # Building a cross-framework UI with single-spa in MAAS 2.8 [angularjs](https://canonical.com/blog/tag/angularjs) [front-end](https://canonical.com/blog/tag/front-end) [javascript](https://canonical.com/blog/tag/javascript) [MAAS](https://canonical.com/blog/tag/maas) [react](https://canonical.com/blog/tag/react) [sc:snap:maas](https://canonical.com/blog/tag/scsnapmaas) --- Share the article ## A new machine list, and a new framework In MAAS 2.8, we’re shipping a new machine list, built from the ground up in [React](https://reactjs.org/) and [Redux](https://redux.js.org/). We’ve also implemented a few new features: persisting UI state for grouping, new grouping options, bookmarkable urls with filter and search parameters, and many performance improvements. In my last post, [Migrating the MAAS UI from AngularJS to React](https://ubuntu.com/blog/migrating-the-maas-ui-from-angularjs-to-react), I touched upon our decision to avoid building a single hybridised UI using tools such as [react2angular](https://github.com/coatue-oss/react2angular) and instead create a new react-redux application. This was the correct decision in retrospect, however it poses some new challenges, particularly around ensuring good user experience while navigating between both React and AngularJS apps. ## Single-spa In order to provide a single, unified experience as we continue our migration to React beyond the new machine list, we’ve employed a framework called [single-spa](https://single-spa.js.org/), “a javascript router for front-end microservices”. Single-spa allows us to create a single production build for the MAAS UI, while preserving our independent React and AngularJS projects, each with their own distinct codebase, build, configuration and CI. As users navigate between React and AngularJS routes in the MAAS UI, each respective app is lazily loaded. Once loaded, both apps remain in memory, and navigating between the two feels relatively seamless without any loss of state. Single-spa was originally conceived to address essentially the same issue that MAAS faces, a means of migrating from a legacy AngularJS monolith to an AngularJS and React polyglot application. Since then, it has grown in scope to provide tooling for building [frontend microservices](https://martinfowler.com/articles/micro-frontends.html). Frontend microservices, or [micro-frontends](https://martinfowler.com/articles/micro-frontends.html) are an advanced architectural pattern, allowing for independent deployment and scaling of web application development across disparate teams. Many of the benefits conferred by micro-frontends are not relevant for MAAS, which our simpler use of single-spa reflects. ### Migrating our apps to single-spa Single-spa delivers on its promise, however adopting it for an existing application can be a complex process as the tools are flexible and support a variety of build and deployment scenarios. New applications, particularly those wanting to adopt the frontend microservices pattern, should consider using the [recommended setup](https://single-spa.js.org/docs/recommended-setup) with the SystemJS module loader and the [create-single-spa](https://single-spa.js.org/docs/create-single-spa/) cli tool. SystemJS allows for importing of independently deployed bundles via an import map, a map of import names to urls. As MAAS is a packaged product, rather than a publically deployed web service, we choose not to introduce this additional complexity and instead import modules directly from within our [monorepo](https://github.com/canonical-web-and-design/maas-ui/). Single-spa introduces lifecycle events such as mounting and unmounting of applications, similar to those in React, and provides helper libraries for popular frameworks to make your applications lifecycle aware (e.g. [single-spa-angularjs](https://github.com/single-spa/single-spa-angularjs), [single-spa-react](https://github.com/single-spa/single-spa-react)). While implementing single-spa lifecycle functions are straightforward, changes to your build to support single-spa can be complex, particularly if you’re using [create-react-app](https://create-react-app.dev/). Additionally, single-spa applications are html-less, and the lack of an *index.html* to bootstrap your application may mean a bit of leg-work to get css, fonts and external script dependencies working again. Fortunately, the open-source community and single-spa core team are very responsive to questions and [happy to help](https://single-spa.js.org/help/). ## Next steps With the single-spa implementation complete, we’ll be continuing our migration to React, and building new features, such as support for [LXD VMs](https://ubuntu.com/blog/lxd-4-0-lts-stable-release-is-now-available). In the short to mid term, our intention is to migrate the entirety of the MAAS UI to React-Redux, however single-spa gives us the flexibility to adopt new tools should we need them in the future. Finally, I’d like to thank [Joel Denning](https://github.com/joeldenning), a tireless advocate for open-source and the single-spa project, for his kind support. [Get in touch Interested in running Ubuntu in your organization?](https://ubuntu.com/about/contact-us/form) ## Sign up for our newsletter Get the latest Canonical news and updates in your inbox. Work email: \*I agree to receive information about Canonical's products and services. By submitting this form, I confirm that I have read and agree to [Canonical's Privacy Policy](https://canonical.com/legal/dataprivacy). Sign up ## Share on --- ## Related posts [### MAAS installation: bare metal provisioning is easier than ever](https://canonical.com/blog/maas-installation-bare-metal-provisioning-is-easier-than-ever) MAAS brings cloud-like automation to physical servers. It helps teams discover, commission, deploy, and repurpose machines from a central control plane, turning bare metal into... [David Beamonte](https://canonical.com/blog/author/dbeamonte) 14 July 2026 [### Managing Ubuntu on bare metal at scale](https://canonical.com/blog/managing-ubuntu-on-bare-metal-at-scale) Modern infrastructure teams are expected to deliver cloud-like speed, consistency, and reliability, even when their workloads run on physical servers. Bare metal remains... [David Beamonte](https://canonical.com/blog/author/dbeamonte) 9 July 2026 [### Ubuntu Server: a platform made for enterprise scale](https://canonical.com/blog/ubuntu-server-a-platform-made-for-enterprise-scale) A platform is an environment that allows software to run smoothly across the infrastructure, runtime, and application layers. The key word there is “smoothly”: a good platform... [Rhys Knipe](https://canonical.com/blog/author/rhysknipe) 7 July 2026 [### VMware hypervisor deployment using MAAS](https://canonical.com/blog/vmware-hypervisor-deployment-using-maas) Most modern datacenters are inherently heterogeneous. VMware environments coexist with container platforms, databases, and other bare-metal workloads, often on the same... [David Beamonte](https://canonical.com/blog/author/dbeamonte) 28 May 2026