Motivation:
We were having two applications one of them is React and the other one is Angular, the challenge here is that we want to run the Angular app inside our React app.
I came across the Micro frontends Architecture, and I found it may be helpful in my case and after investigations and reading in-depth about the concept and the architecture, I came up with three solutions
- Revamp the whole Angular application to React.
- Change all the Angular components to web components using Angular elements.
- Implementing Micro frontend using single SPA.
Just Kidding 🤓
The revamp solution will take a lot of efforts and time and we don't have the luxury of time, So we decided to go for the third solution because we were having some limitations in the Angular to split the components, and we will need to bring them back together again inside the React application, and this will take some efforts and time due to the complexity of our Angular application, as it is containing routing, lazy loading modules, and authentication.
What is the single SPA?
From single SPA docs:
Single-spa is a framework for bringing together multiple JavaScript micro frontends in a frontend application. Architecting your frontend using single-spa enables many benefits, such as:
- Use multiple frameworks on the same page without page refreshing (React, AngularJS, Angular, Ember, or whatever you're using)
- Deploy your micro frontends independently.
- Write code using a new framework, without rewriting your existing app.
- Lazy load code for improved initial load time.
Single SPA main types of applications
Root Config
Considered as a container and the parent for all the single SPA applications, and also as a router from your root config application, you can
- Register your single SPA application.
- Determine when to load or unload the single SPA.
In the next parts, we will do some practical examples.
- Migrating the React app to work as a single SPA and root application at the same time.
- Migrating the Angular application to a single SPA.
- Bring all together in one application.
Top comments (0)