Introducing micro-app: A Lightweight Micro‑Frontend Framework for Easy Integration

Preface

micro-app is a micro‑frontend framework released by JD Retail iPaaS front‑end team. Built on a class‑WebComponent model, it aims to lower the learning curve, improve development efficiency, and remain agnostic to any front‑end stack.

The framework has been used in several internal JD projects, has been iterated for half a year, and is now stable and open‑sourced.

What is a Micro‑Frontend

The micro‑frontend concept, proposed by ThoughtWorks in 2016, borrows ideas from micro‑services: a large front‑end application is split into independent, small applications that can be developed, run, and deployed separately, then composed into a complete product.

It mainly solves two problems: (1) difficulty maintaining ever‑growing applications, and (2) low efficiency when multiple teams collaborate across projects.

Micro‑frontends reduce coupling, improve extensibility, and make the front‑end codebase smaller and simpler.

How to Implement Micro‑Frontends

Two common approaches are iframe and dedicated micro‑frontend frameworks.

Iframe creates an isolated window, offering natural style and script isolation, but suffers from performance overhead, double scrollbars, and loss of routing state on refresh.

Framework‑based solutions load child app resources into a base app, sharing the same page while isolating styles and scripts. Examples include single‑spa and its richer successor qiankun, which adds style isolation, JS sandbox, and htmlEntry.

In summary, iframe is simple but limited; framework solutions are more powerful but require more integration effort.

Advantages of micro‑app

Unlike single‑spa, micro‑app adopts WebComponent ideas, using CustomElement and ShadowDom to encapsulate each micro‑frontend as a component. This eliminates the need for child apps to expose bootstrap/mount/unmount methods or modify webpack configs.

micro‑app provides JS sandbox, style isolation, element isolation, pre‑loading, resource URL completion, plugin system, and data communication, all with a tiny bundle (~10 KB gzipped) and zero third‑party dependencies.

How to Use micro‑app

We demonstrate integration by creating a Vue base app (via vue‑cli) and a React child app (via create‑react‑app), then embedding the React app into Vue using micro‑app.

Vue base app

React child app

Modify Vue base app

1. Install the dependency:

yarn add @micro-zoe/micro-app

2. Import it in main.js (see image).

3. Use the micro-app component in App.vue (see image).

Modify React child app

Add CORS support in /config/webpackDevServer.config.js (see image).

After these steps, the micro‑frontend runs successfully, as shown below:

The integration is simple, low‑impact, and does not affect existing code.

In real‑world scenarios, micro‑frontends can become complex; refer to the official documentation for detailed configurations.

Conclusion

micro‑app is a newly released framework that will continue to evolve based on developer feedback, aiming to improve development efficiency and experience. Users are encouraged to star the GitHub repository and contribute.

Related links: source code https://github.com/micro-zoe/micro-app, official site https://zeroing.jd.com/micro-app, iPaaS portal http://ipaas.jd.com.