Discover Single-spa: the JavaScript framework for microfrontends that simplifies web development.

Single-spa is a JavaScript framework with great potential that will give you a hand in avoiding what has been done for decades: developing monolithic applications with dozens, if not hundreds, of features inside them, pages grafted inside each other and dozens of classes. 

In the world of web development you have been hearing about microfrontends for a few years now. If you are a web designer like me, this term might give you mixed feelings because you still don't know exactly what they are, but after studying them a bit it is all clearer: small applications that do a specific thing, the smaller the better. 

Today the buzzword is micro-applications, separate from each other, that can be developed by different teams without them stepping on each other's toes and maybe even using different web technologies, all of which can coexist on the same page.

Index

1. SIngle-spa:One page, several frameworks
   1. Turn your App into Microfrontend in just two easy steps
   2. Different development teams? no problem with single-spa framework
2. Pros and cons of single-spa framework
   1. There are the pro...
   2. ... And the cons

One page, several frameworks

The request from a Ulixe customer that made me lean toward studying this solution was that they wanted to use different frameworks (Angular and React) in the same site.

The two JS frameworks both allow routing, that is, a change in page content without actually moving to a new URL; however, these cannot be used at the same time because they both require a dedicated environment. 

Some frameworks compatible with Single SPA

In this way, you are forever bound to the use of a single framework, and the moment the application starts to grow or different needs arise, you move in stride toward the famous monolith: a large application on which perhaps several teams work, which over time becomes really complicated to maintain. 

The JavaScript framework Single-spa, on the other hand, takes charge of performing the routing between different applications (now microfrontends), freeing itself from the use of a single technology. 

Below, you can see a schematic and concise representation of the operation of a classic site versus a web application developed in SPA.

Operation of a classic site versus SPA

Now that we understand what a SPA application is, let's go on to see how we can create an application in microfrontend: there are two basic steps.

Turn your app into a microfrontend in just two easy steps

In order to create microfronts and make them coexist with each other, one must have an infrastructure that contains them, a kind of "container app" that serves as a skeleton for loading Single-spa and at least a navigation bar, a homepage, and maybe even a footer. Under the hood, as they say in the jargon, Single-spa does nothing more than point to a page element identified by id, within which it will load the microfrontend defined by us, on the dedicated route. 

For example, putting it on a practical level, pointing to the URL mysite.com/app/showcase could have a microfrontend loaded in React, while on the URl mysite.com/app/cart there could be another completely separate application developed in Angular. 

One remarkable thing is the ability to run any existing application without changing a line of code, except for some simple configurations that allow you, via Single-spa, to convert an Angular (or Vue, React, etc.) application into a Single-spa microfrontend in just a few steps.

Obviously the framework you use must be supported by Single-spa but no problem, currently the major existing JavaScript frameworks are supported including Angular, React, Vue, Svelte, Dojo and many others. 

Here you can find the official documentation to perform all operations, while on Git Hub you can find a project with an example of a Container App with two microfrontends already configured!

Different development teams? no problem with single-spa framework!

Oh yes, with no technology constraints, it is possible to entrust tasks of the same project to different teams, since in the development and release of applications there are no interdependencies. This also means that in case there is some development problem, the whole site would not be affected, but a single part. 

Not only that. The microfrontends do not even have to be uploaded to the same server, creating effective null interdependence between the parts: the teams entrusted with the different parts of the site can be located anywhere in the world, and the skills may even be different because each will develop its own part that will then be passively uploaded where required by Single-spa. 

Pros and cons of single-spa framework

To conclude, let's look at some pros and cons to consider if you want to develop an application with a single-spa-based microfrontend approach.

There are the pro...

In case you choose to approach microfrontends, Single-spa can be a good solution under certain conditions:  

• in case you want to develop different applications loaded on the same page, perhaps existing applications that you want to bring together in a single "context." A practical example might be an old monolithic application that is disassembled and from which multiple Angular applications are born, which you choose to make available in the same domain. 
• The moment you need to use different frameworks for different parts of your site. You can opt for a super fast showcase developed in React, while for the shopping cart and the customer's private area you can rely on the stability of Angular.
• Finally, single-spa proved easy to integrate into existing projects with just a few commands from the development console, without disrupting the original application, as happens using other approaches. 

... And the cons

Of course, like all solutions there are also disadvantages: 

• the very fact of using an additional framework in addition to the frameworks necessary for the existence of the site itself, requires loading additional files, potentially slowing down navigation.
• Applications converted to single-spa can no longer run individually, but only within the context of the container app.
• Single-spa implementation definitely involves more effort and sometimes not much sense, since there are more integrated solutions when using a single framework to build microfrontends (Angular for example with its Angular Module Federation).

And that's it for this time too, thank you for your attention! 

Until next time from the world of web design.