Micro-frontend Architecture
---

Flutter is one of the best frameworks to apply micro frontend architecture into a project. Widget based build system in Flutter makes most of the work easier for us. There are 4 significant steps to follow to apply this architecture into project successfully.

1. Design reusable & configurable widgets
We need to design out widgets as reusable and configurable from its constructor, so that we can configure(hiding/displaying them, design customizations, runtime routing configurations etc.) them from APIs. In this approach; design, frontend and backend teams should act synchronously about the data model to determine what can be displayed in the widget.

2. Give Unique ID to Each Components
IDs are the crucial part to build widgets from API response. We need to write a widget builder from dynamic response and register it to json widget builder registry. [Custom Widget Builders](https://hackmd.io/4U1hPHrsS628lenln4AHyQ)

3. Write an API to Fetch Component Details
We need to fetch related data about the components to display a fully functional widget from the API. Request and response models should be designed for that widget's requirements.

4. Hande State Management of the Component
Widgets should be able to handle their own state managements. For example; while fetching widget's UI model from the API, loading indicator or skeleton loading should be displayed to the user. After successfully fetching the response, we should display widget with a success state by applying retrieved data. On the other hand, if there is an error occured while fetching the UI model, we may need to display proper error state to notify user, hide the widget or allow user to retry.
To sum up, we should consider all the possible states of widgets and design them according to these states.

> Read more about micro-frontend architecture here: https://martinfowler.com/articles/micro-frontends.html