Scaling Micro-Frontends With Orchestrators
A traditional micro-frontend provides the opportunity for independence and isolation among micro-frontends. Learn why it is an excellent choice.
Join the DZone community and get the full member experience.
Join For FreeMulti-divisional organizations and team-building web applications with distributed teams are adopting micro-frontend architectures for front-end development similar to microservices. Large enterprises are seeing massive value in shifting from sequential to parallel development by architecting web experiences as independent, re-deployable, micro-frontend components.
What Are Micro-Frontends?
Micro-frontends are frontend components packaged as a mini-app to deliver a functional capability and web experience to end users. Each micro-frontend is deployable on its own and comprises user interactions and events representing a set of logical use cases for a given ecosystem. Micro-frontends share standard building blocks in the form of design system elements and dependencies in the form of self-contained packaged libraries. Micro-frontends are modular and contribute to scaling development to build parallel web experiences within an ecosystem. From a high-level skeleton code standpoint, here is a simple Micro-frontend with its package.json reflecting dependencies or scripts consumed by the micro-frontend as below.
//package.json
{
"name": "micro-frontend1",
"version": "1.0.0",
"description": "Micro frontend1 with shared dependencies",
"main": "index.js",
"scripts": {
"start": "http-server"
},
"dependencies": {
"http-server": "^0.12.3", // Library for a local server
"redux": "^4.1.1", // Library for state management
"lerna": "^4.0.0", // Library for managing multiple packages
"storybook": "^6.4.3", // Library for shared UI component library
"jest": "^27.4.0", // Library for testing
"cypress": "^9.1.0", // Library for end-to-end testing
"auth0-js": "^9.16.2", // Library for authentication
"webpack": "^5.62.3", // Library for building and code splitting
"babel-core": "^6.26.3" // Library for transpiling code
}
}
index.html