https://github.com/microfront/microfront
Monorepo for @microfront - a solution for a microfrontend architecture
https://github.com/microfront/microfront
microfrontend typescript
Last synced: about 1 year ago
JSON representation
Monorepo for @microfront - a solution for a microfrontend architecture
- Host: GitHub
- URL: https://github.com/microfront/microfront
- Owner: microfront
- License: mit
- Created: 2019-03-14T14:13:50.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T17:50:21.000Z (over 3 years ago)
- Last Synced: 2024-10-31T17:04:07.838Z (over 1 year ago)
- Topics: microfrontend, typescript
- Language: TypeScript
- Homepage: https://microfront.github.io/microfront/
- Size: 1.29 MB
- Stars: 10
- Watchers: 3
- Forks: 0
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Microfront(end)
An ideal solution for a microfrontend architecture should make no differentiation between microfrontend and component, but at the same time should be technology agnostic without compromising on performance. Established best practices for web applications like PWA, caching, offline support, SSR and SSO should not be sacrificed for an architectural pattern that benefits the architects without bringing any benefit to the user of the end product.
The same can be said of the UX aspect that should not be influenced in a bad way by the choice of architecture.
Not all requirements can be achieved by mere solutions in code but by enforcing conventions like a (code) style guide and a design-system.
`define MFC = Microfrontend/Component`
ATTENTION: still very much WIP currently. No working solution yet, see project status:
https://github.com/microfront/microfront/projects/1
## Features (WIP - no working solution yet)
- `@microfront/layout-router` loads a layout definition and renders the layout
- `@microfront/layout-router` is initialized by controller and handles route changes and triggers (re)layout and MFC loading
- `@microfront/client-controller` initializes `@microfront/layout-router` and loads MFCs (aka routed applications) in the route-regions defined in layout
- `@microfront/client-controller` and MFCs communicate via events and payloads are formatted in GraphQL as lingua franca
- `@microfront/graphql-client` is initialized by controller and handles GraphQL requests triggered by the events of the MFCs
- `@microfront/auth` is initialized by controller and handles authentication and session management
- `@microfront/ssr-controller` leverages the `@microfront/layout-router` to request and compose the data, HTML and CSS from the MFCs own respective ssr microservices
## Principles
- MFCs are developed in isolation and define their own interfaces that comply with their own backend and some minimal requirements of the controller
- MFCs may use any SPA framework
- MFCs are composable
- application state is synchronized/shared across microfrontends
- MFCs can be developed and deployed separately
- MFCs can define their own data requirements and authorization policies
- routing is implemented framework agnostic and as thin as possible
- MFCs are lazy loaded
- the architecture should be pluggable so you possibly could exchange apollo-client with your desired flavour of e.g. relay by implementing the same interface defined by the controller
## Special Thanks
### This project was inspired by:
- the talk about microfrontend architectures by Manfred Steyer [@manfredsteyer on gh](https://github.com/manfredsteyer) [@manfredsteyer on twitter](https://twitter.com/ManfredSteyer) at JS-Kongress in Munich 2019.
- the talk about independent deployment of the frontend by Monica Lent [@mlent on gh](https://github.com/mlent) [@monicalent on twitter](https://twitter.com/monicalent) at JS-Kongress in Munich 2019.
- See videos in this playlist: https://www.youtube.com/playlist?list=PL1qIp0pQfjQ1q_Hb42IBvVQNt0WVrZXrG
### The following resources helped me greatly:
- Setting up this monorepo [Monorepo setup with Lerna and Yarn workspaces](https://medium.com/trabe/monorepo-setup-with-lerna-and-yarn-workspaces-5d747d7c0e91)