Sorry guys, I was little busy in other things could not post for a while. Now those things are sorted so back here.
When we are talking about the series of designing software architecture, how can we miss the micro frontend. The term seems derived from the micro service architecture, which we had already discussed. Another reason of picking micro frontend architecture is I have started first time on this around 5 years back in late 2018 [Creating my small codes in vanilla JS to provide cross JS library and framework support; being little late to join the group].
Micro frontends have gain a good popularity as a solution to improve frontend application's modularity, maintainability and scalability. This architectural approach enables teams to work independently on distinct areas of a frontend application, making huge and complicated codebases easier to manage and faster to deploy. However, like with any technology, there are best practises, problems and tools to help you get the most out of micro frontends.
In this blog article, we will look at the DOs and DON'Ts of micro frontends, provide some tools for creating a repository of micro frontends and talk about techniques for scaling and monitoring your micro frontend architecture.
The DO's of Micro Frontends
Most of the DOs are common like other paradigms of programming still, I am mentioning them as a few of you might be setting up this as your first project.
1. Decompose Wisely
Divide your application into reasonable, self-contained chunks, but don't go overboard. Micro frontends should be narrow in scope and self-contained.
2. Consistent UI
Maintaining a consistent user interface and user experience across micro frontends is essential. To achieve visual harmony, use design systems and style guidelines.
3. Deployment Independence
Each micro frontend should be deployable separately, allowing for more frequent and quicker changes.
4. Cross-Team Collaboration
Encourage collaboration among teams working on various micro frontends. Encourage open dialogue and the sharing of excellent practises. I recommend at least 1 hour all dev meeting every week along with shared documentation with clear use case of components and utilities. Automating documentation will be bonus to and boon. [Drop in comment which tool do you use for auto documentation, I need this for my repo]
5. Version Control
Version control should be used for each micro frontend. This allows you to keep track of changes, roll them back if required, and assure the dependability of your programme.
6. Load on Demand
Load micro frontends on-demand, minimising user load time and enhancing performance.
7. Testing
Conduct thorough testing on each micro frontend to guarantee quality and compatibility.
8. Error Handling
Handle mistakes compassionately, and put a plan in place to manage failures that may arise in micro frontends. I would recommend proper error segregation like blocking error, non blocking error, network errors etc and handle them from a common place.
The DON'Ts of Micro Frontends
1. Over Engineering
Avoid creating an excessive number of micro frontends. It is critical to strike a balance between modularity and complexity.
2. Shared State Complexity
Avoid too complicated shared state management. Consider Redux, MobX, or shared state libraries as solutions. You can create your own pub sub or post message service. Implementation/state planning matters more than the tool to transfer states.
3. Inadequate Version Control
Failure to provide version control might result in compatibility concerns and code clashes amongst micro frontends.
4. Inconsistent UI
Inconsistent UI can mislead users and degrade the overall user experience. It will force developers to re create same thing multiple time, cause burden to your development cost.
5. Communication breakdown
Do not segregate teams working on various micro frontends. Encourage communication and teamwork. Missing communication might lead duplication of work.
6. Failure to Test
Failure to test your project will lead to a fail project, too bold but true. For those who want to read it in light tone - Failure to test might result in faulty micro frontends and compatibility concerns.
Tools for Micro Frontends
In last 5 years we have developed a lot in this domain and lot of open source tools are doing well.
1. Module Federation (Webpack 5+)
Module Federation in Webpack allows you to load micro frontends on demand and efficiently share dependencies.
2. Single-SPA
Single-SPA is a JavaScript framework that allows you to manage many micro frontends on a single page.
3. qiankun
A toolkit for developing dependable and maintainable micro frontend apps.
4. SystemJS
SystemJS is a dynamic ES module loader that may be used to dynamically load micro frontends.
5. Lerna
Lerna is a tool for organising multi-package JavaScript projects.
Scaling and Monitoring Micro Frontends
Scaling
Automation
To accommodate increased demand, use automated deployment and scaling solutions. Kubernetes and Docker are very useful tools for on demand scaling up.
Caching
To speedy delivery of your code and optimise the distribution of micro frontends to users, employ a content delivery network (CDN) or caching layer.
Load Balancing
It is must for balancing requests to separate micro frontends to guarantee balanced traffic distribution on all PODs.
Service Discovery
Implement service discovery techniques to assist micro frontends in locating and communicating with one another.
Monitoring
Monitoring is the critical part of software engineering as things are not visible physically so the data evidences are needed for debugging, managing and taking decisions. Here are a few important things to setup the system wide monitoring.
1. Centralised Logging
Collect logs from all micro frontends and store them in a centralised logging system to aid debugging and troubleshooting.
2. Error Tracking
Use error tracking software to track and analyse mistakes in real time. I am not going to name them here.
3. Performance Monitoring
Performance monitoring tools may be used to discover and fix performance bottlenecks.
4. User Analytics
Collect user analytics to obtain insights into user behaviour and improve user experiences.
5. Security Monitoring
Continuously monitor security-related issues in order to detect and remediate vulnerabilities.
Wrapping Up!
Micro frontends may significantly improve the scalability and maintainability of frontend apps, but they need careful planning and the proper tools. You may effectively develop and grow a micro frontend architecture by following best practises, avoiding common errors and using the correct technologies. Monitoring and scaling procedures guarantee that as your application expands, it stays performant and dependable.
Remember that the precise tools and tactics you use will be determined by the unique requirements and limits of your application. As your application matures, remain open to modifying and refining your strategy. If you feel stuck feel free to connect me for solution.
Thoughts or questions, are welcome in comment box...
Till the next time keep Learning-Coding-and-Growing.
Top comments (3)
Thanks for the write up, planning to dive more into SystemJS and Lerna in the near future.
I wonder how you would actually use Redux or Mobx with multiple micro-front-ends without coupling them too much?
Glad you like it, I have never used this with Redux so for now I have no concrete knowledge to share.
But still if you want to use Redux, Mobx or any other state management library, you have to treat one micro frontend's data into another as external data source. I have been using my custom pub sub, I call it databus to transfer data to and fro.
Yea a general pub sub seams like the ideal approach, because then we don't need an external data source, each micro front-end can maintain its own state, and just sync by subscribing to events