Micro Frontend using Single SPA and Qiankun

It's been a while since I last posted a technical blog. Recently, I had the chance to explore micro-frontend solutions and discovered a UI framework that fits my client's team perfectly.

In my current role, the client I'm working with has several applications that mostly operate as standalone microservices. Each app serves a specific business purpose, has its own users, and is managed by different teams.

The Problem

Different development teams have independently created and delivered various React-based front-end applications, and the same group of users accesses different application endpoints to carry out their business tasks.

Our client's business relationship management team feels that having to bookmark each application and go through authentication every time is cumbersome. It would be much smoother if we could consolidate all applications under one endpoint with a single authentication process.

Architecture Options

Monolithic Architecture

Monolithic and monorepo architectures have long been the standard for creating web applications. However, there are some downsides:

• Build times can be significantly longer
• Increased chances of merge conflicts
• Tough to maintain clear ownership of the code
• Debugging and maintenance harder

Hosting Strategies

This approach allows each micro frontend to be served from distinct paths within the main domain. It's relatively simple to set up while ensuring a consistent brand and user experience.

Microfrontends

Micro-frontends bring benefits like:

• Scalability and flexibility
• Quicker development cycles
• Technology experimentation
• Easier testing

Options Explored

1. Module Federation: Technique mainly used with Webpack for sharing code between JavaScript applications
2. Bit.dev: Platform for composition and management of front-end applications
3. SystemJS: Universal dynamic modular loader
4. Single SPA: JavaScript framework for frontend microservices
5. Piral: Framework for portal applications with micro frontends
6. Luigi: Micro frontend JavaScript framework for administrative user interfaces
7. Qiankun: Comprehensive solution for micro-frontends built on single-spa

Module Federation

We tried out Webpack module federation in Webpack 5. However, we did run into some downsides:

• Dynamically loading remote modules can complicate testing
• Need to rebuild and redeploy the entire application for every update
• Limited community support

Single SPA

Single SPA is a JavaScript framework designed for frontend microservices. Benefits:

• Single-page applications load quickly and boost user engagement
• They enhance server performance by only loading essential data
• Gives developers the freedom to integrate various frameworks on a single page
• Allows for independent deployment of micro frontends

Qiankun

Qiankun is essentially a framework for Micro Frontends, built on single-spa but fine-tuned for real-world use. Benefits:

• Micro-apps can be deployed on their own
• Code can be lazy-loaded to speed up initial load time
• Not tied to any specific tech stack
• Effective for sharing data between parent and child apps

How It Works

Qiankun apps consist of a primary application along with several sub-applications:

1. Main application: Where you install the Qiankun dependency and register the sub-applications
2. Register sub-applications: The main app needs to register the sub-apps
3. Export lifecycle hooks: Each sub-application must export bootstrap, mount, and unmount hooks
4. Add configuration: Sub-applications should include configuration in the bundler

Implementation Steps

1. Create the main app using create-react-app named "main-react-app"
2. Set up two React sub-apps: "micro-react1" and "micro-react2"
3. Configure the sub-apps (no Qiankun dependencies needed in sub-apps)
4. Create public-path.js in the src folder
5. Configure Webpack dev server for cross-origin access

Conclusion

We thought we had found the perfect solution with extreme flexibility, so we rolled out both Angular and ReactJS applications across various cloud platforms. Everything ran smoothly under a single domain URL, with a unified authentication system.

However, there was a significant shake-up in the client's organizational structure which led us to scrap the whole concept.

But I'm not giving up. I started exploring how many JavaScript frameworks Qiankun could support. I worked on the repository qiankun-multi-framework-micro-frontend, where I integrated various frameworks like ReactJS, Angular, VueJS, Svelte, Preact, jQuery, and Solid JS.

I'm not here to promote Qiankun; it's a small community-driven library from China. Single-spa already meets our basic needs and comes with a solid support system. Still, as a front-end developer who enjoys working with different JavaScript frameworks, I was intrigued by Qiankun's flexibility.