When to go for Micro Frontends? How to use them?

What are Micro Frontends?

An architecture that allows you to deliver powerful frontend applications that have rich features. The concept is creating web apps as a structure of features maintained by independent teams. Develop systems that have complete control using these microservices. It is the perfect solution to shift applications and their code from the server to the web browser. There are three main components in micro frontends, a host/container, and a micro-frontend framework.

Few famous companies that use Micro Frontends are as follows:

1. IKEA- a European furniture company provides an online store experience.
2. DAZN – a sports streaming service of Europe that expanded in nine countries.
3. Upwork – a platform for freelancing, it connects independent business professionals across the globe.
4. Spotify – this online streaming media service uses frontend microservices to assemble the desktop applications.
5. SouthCloud – a European music sharing website and an online audio distribution platform that delivers a reliable experience across all the platforms.

How do Micro Frontends work?

1. Be Technology Dependent: Team should choose and upgrade the stack independently. Without revealing implementation details if they provide a neutral interface to others. The custom elements help to keep the implementation details within the team members.
2. Isolate Code: Build independent apps that do not rely on the shared global variables. They use the same framework but never share a runtime.
3. Create Team Prefixes: Elucidate ownership with Namespace CSS, events, and local storage to isolate apps. It gives better control experience to the team members. Team members experience better control.
4. Build robust Web design: Apparently, it should improve the performance of an application. Feature enhancements should execute efficiently.
5. Favor Native Browser Features Over Custom APIs: While building cross-team API keep it really simple. Use browser events for communication in place of a global PubSub system.

Architecture and benefits of Micro Frontends:

This architecture splits the entire application by business domains across the stacks. It enables the frontend teams to have the same level of velocity, flexibility, and testability.

1. Speedy Work: The team members can upgrade the stack without any dependence on other members. No sharing of runtime due to code isolation lets them focus on creating independent applications. The neutral interface offered to different teams helps in masking implementation details. The large monolithic projects, are fragmented into small and manageable pieces developed by teams.
2. Ownership: Multiple teams have ownership of separate styling, forms, and validations due to frontend microservices. For large projects you can have managers that take care of different features.
3. Debugging Problems: Huge monolithic applications become unmaintainable. Rebooting applications in a local environment was not easy. With each project having its own server and isolated development environment resolving bugs is simpler.
4. Small Codebases: Coherent and controllable codebases of small size are great if you wish you avoid complexities.
5. Decentralization: Large organizations can maintain a certain speed of innovative solutions by keeping the team size small. A team size of over 10-12 people is actually difficult to work together and even manage.
6. Data Replication: The team own their database but when they need other team’s data, replication is a resolution. The access is unaffected and data security issues get addressed.

Challenges of Micro Frontends:

1. Communication: The APIs for communication should simplify inter-team communication. The microservice exposes a self-reliantly deployable API.
2. Efficiency: The scalability can suffer if a universal application uses both frontend and backend.
3. Redundancy: The systems built have no shared libraries so the teams are responsible to install and deploy the fixes.
4. Data: Requirement of replication involves costs and time. They also introduce latency.
5. Technology: Several technology stacks are barriers for developers while switching teams. Hiring people that know about multiple technologies is an additional cost to the company.

Problems that Micro Frontends can solve:

During feature development, each involved team plans its work and schedules for release. Implementation happens in a planned manner and reduces ambiguities. Team working on a single codebase for frontend enables focal working. A smaller codebase is easy to replace or refactor. The risks of failure are restricted to small areas due to isolation. Managing applications is quite naïve as the scope is narrower. The costs associated with the redundancies are affordable compared to the costs of inter-team dependencies.

Implementing Micro Frontends:

There are different methods to deploy the Micro Frontends for efficient development. The integration is a principal key between the host/container and micro frontends.

1. Build-Time Integration: The container installs the components as libraries just like you install from npm. Few issues on syncing different versions of libraries are experienced. For any changes, redeployment is a must as dependencies change.
2. Run-Time Integration: This integration includes Server-side, Edge-side, and client-side composition.
   • Server-side composition: The functionality stored in the backend decided which Micro-Frontend to be loaded and when. The server decides through URL the request to route.
   • Edge-side composition: The orchestration happens on the CDN itself. It can take care of active backends that the server is usually in charge of. It can also deliver static content.
   • Client-side composition: The containers decide the version of frontends to deploy as both of them are de-coupled. The host can fetch needed microservices as needed.

How to adopt Micro Frontend Architecture?

1. Integration in the Browser: Web components allows us to create fragments of frontends that can be imported into web-based applications. You can pack the logical and visual presentations together.
2. Web Components: They allow the conception of reusable components being imported into Web applications. Custom Elements, Shadow DOM, HTML Imports and HTML Templates can be used together or separately. Page composition can be written using different frameworks.

Best Practices of Micro Frontends:

Things before you choose Micro Frontends for the type of applications you are about to build.

1. Single SPA is a tool that you need in every application you develop using frontend microservices. This framework combines multiple frameworks on the same page.
2. Reusability of codes in multiple places help teams if it is available for different teams.
3. Multiple single-page applications have different URLs for shared functionalities.
4. Modules working in their own framework handle incoming and outgoing events as they communicate over shared events.

Conclusion

Micro Frontends are the right choice for you when you have a huge application or multiple teams that have independent deployment cycles. Micro Frontends have full control of their technology stack and improve decision-making. To change your approach on development and technical overheads focus on delivering high-quality software. To know more contact us.