Micro Frontend for Web Development: Scalability and Reliability with Firebase Multi Site Hosting
Welcome!
In this tutorial, we will explore the concept of micro front-end, its benefits, and how it can be implemented in a project. We will also discuss the use of single-page applications (SPA) and progressive web apps (PWA) to enhance the performance and reliability of micro front-end architectures. Additionally, we will introduce Firebase as a powerful tool to improve data reliability and optimize rendering. Let’s dive in!
Introduction
Micro frontends are an architectural approach that enables the development of large-scale web applications by breaking them down into smaller, independent and reusable parts. In this tutorial, we will explore the concept of micro frontends, their benefits, and how to implement them. We will also discuss the use case of an e-commerce platform and demonstrate how micro frontends can enhance its development process.
Understanding Micro Frontends
Micro frontends are an extension of the microservices architectural pattern, applied to the frontend layer of an application. They allow teams to work independently on different parts of the user interface, enabling faster development and scalability. The key concepts of micro frontends include:
Monolithic Frontend: In traditional web development, the frontend is often a monolithic application where all features are tightly coupled. This can lead to slower development, longer test times, and increased complexity.
Micro Frontends: With micro frontends, the frontend is divided into smaller, self-contained units that can be developed and deployed independently. Each micro frontend has its own responsibilities and can be built using different technologies or frameworks.
Benefits of Micro Front-End Architecture
- Scalability and faster development.
Micro front-ends can be individually scaled based on demand, allowing for better resource utilization and improved performance. It also enables incremental updates and reduces the risk of a single change affecting the entire application. - Flexibility in using multiple frameworks.
Different micro front-ends can be developed using different technologies or frameworks that best suit their requirements. This flexibility allows teams to choose the right tools and technologies for their specific needs. - Independence and isolation of components.
Micro front-ends enable multiple teams to work independently on different parts of an application. This reduces dependencies and allows for faster development and deployment cycles. - Improved testing and automation capabilities.
With micro front-end architecture, different teams can work autonomously on their respective micro front-ends, making development more efficient. Collaboration between teams can be facilitated through well-defined interfaces and contracts. - Reusability and maintainability
Micro front-ends encourage reusability of components and services across applications. Common UI elements, styles, and functionalities can be shared, reducing duplication and improving maintainability. - Stability and reliability in large-scale projects.
Micro front-end architecture enables gradual migration from a monolithic frontend to a more modular and scalable architecture. Existing functionality can be incrementally replaced or refactored, reducing the risk and complexity associated with large-scale rewrites.
Implementation
Splitting UI Rendering
Talking about Micro frontend, we will talk about how we can split the UI for user to render from their end.
Assume we have 2 micro frontends :
1. Navbar micro frontend
2. Content micro frontend
Normally without SPA, let’s say we render 2 micro frontends built using native website with html file, we will definitely load these 2 micro frontends 2 times when there is a data change from database since we need to refresh the page.
Since micro frontend will fetch and render frontends from many servers, it might be doubling the cost and usage too!
So what we can do to minimize this usage and the cost ?
Leveraging Single-Page Applications (SPA)
In order to have more optimization, we can use SPA!
We will reduce the number of a page will be loaded or rendered, because SPA only refresh components that is really need to be refreshed or re-rendered if there is any changed data or state, and left the other component stay as it is.
Talking about optimization, we can have more enhancement! We can also implement PWA!
Enhancing Performance with Progressive Web Apps (PWA)
With PWA we can have a Service Worker instance where it can manage the network and resources that we need for our websites!
In short, it can provides :
- Offline Mode Website
- Caching assets and pages
- Push Notification
- Install to our device
Normally if we implement SPA Only, we can have 3 Times Load / Render
But if we implement SPA and PWA, we will reduce the usage / cost down to 50%! from 4 times into 2 times load / render!
Which also same as not using any micro frontend, in other words we can take off the usage or cost aspects, which makes micro frontend as a good answer!
Firebase for Data Reliability and Rendering Optimization
Yess, our web has been so optimized! but then how about the data ?
Firebase
Now if we talked about Data we will talk about Backend, it means we are talking about Firebase!
Why we should use Firebase in this case ? first thing first let’s talk about the problem.
What we should use to have a reliable data flow ?
We can use Firebase Cloud Firestore or Firebase Realtime Database!
Improving Data Reliability
With Cloud Firestore we can have an Offline Support Operation! which means we can still have our web make a database operation during offline, at least not impacting our user flow. the changes made during offline will be applied to the Cloud Firestore after the connection come back online!
Technically the data will be put in cache or storage and once the data has been online again, the data will be stored into Firebase and process asynchronously without impacting user journey.
With these :
- Firebase can enhance the reliability of data retrieval and storage.
- Firebase Realtime Database or Firestore can have a seamless data synchronization between database and offline data in our storage
Where we should deploy our Modern micro frontend website with ease ?
With that being said, last but not least as our final steps to make this real into production is Deployment!
We can deploy our micro frontends using Multi Site Hosting, with Multi Site Hosting we can deploy multiple websites in 1 Firebase Project!
Which is what we need for our micro frontend Architecture!
Micro frontend Deployment to Firebase
1. Create a new site in Firebase Console
2. Whitelist the Micro frontend Container Host
In order for the micro frontend can be fetched to the browser through the Container Host (the website that we expose to the user directly), we need to whitelist that in firebase.json
3. Deployment Target Binding
After that, to deploy, we need to bind the target with the relevant micro frontend.
We can bind the deployment alias target with the site that we just created in the console, using :
firebase target:apply hosting <alias_target_name> <firebase_site_name>
firebase target:apply hosting mf-codelabs mf-codelabs-indonesia-firebase
After that we can just hit “firebase deploy” to deploy our Micro frontends to Firebase!
Now we can check the deployed micro frontend in the browser https://mf-indonesia-firebase.web.app
If we check it in the Chrome developer console, we will see that the particular section is loaded from the other domain!
As a bonus from me, I have this micro frontend-generator CLI for you guys, so that you can generate your micro frontend in short time! feel free to see the video of how I can generate it, here is the npm url that i publish!
Micro Frontends in Practice: Use Case Example
For a use case example, there is an e-commerce platform, The goal is to implement micro frontends to improve scalability, development speed, and reliability. The architecture consists of a monolithic frontend and multiple microservices for different aspects of the platform.
Start with Monolithic Frontend: Initially, the website has a monolithic frontend where all features are tightly coupled. This causes long test times and slower development.
Identifying Micro Frontend Boundaries: Analyze the frontend components and identify areas that can be divided into separate micro frontends. In this case, we can have micro frontends for the navbar, dashboard, and product listings.
Migration, Splitting the Frontend: Refactor the monolithic frontend into separate micro frontends, ensuring each micro frontend has its own responsibilities and can be developed independently.
After the enhancement, the development can be easier, the test case running so much faster and the deployment can be independent between frontend!
Improving and Enhancing
Implementing Single-Page Application (SPA): Utilize a single-page application approach for each micro frontend to provide a seamless user experience without full page reloads. This can be achieved using frameworks like React or Angular.
Leveraging Progressive Web Apps (PWA): Enhance the micro frontends with Progressive Web App features to enable offline capabilities and provide a more native-like experience. PWAs can be installed on users’ devices and provide fast, reliable access to the platform, even in low-connectivity scenarios.
Summary
Micro frontend development is a powerful approach to handling large-scale web projects. By embracing modularity and employing techniques such as SPAs and PWAs, developers can enhance scalability, streamline development, and improve user experiences. Combining these practices with platforms like Firebase further ensures data reliability, making micro frontends a compelling solution for web development at scale.
3 Pillars of Powers
Single Page Applications (SPA)
Micro frontends can be further optimized through the use of SPAs. SPAs enable dynamic content rendering without refreshing the entire page. By implementing SPAs, developers can improve traffic optimization and enhance the user experience.
Progressive Web Apps (PWA)
PWAs provide an additional layer of optimization for micro frontends. They offer a more native app-like experience to users and enable offline capabilities. With PWAs, developers can reduce traffic and ensure that the website remains accessible even in low or no connectivity situations.
Firebase for Data Reliability
While micro frontend development and SPAs enhance the front-end experience, data reliability remains crucial. The talk briefly mentioned using Firebase, a backend platform, to improve data reliability and rendering optimization.
WebXR Compatibility ?
Are you curious how we can implement this for XR ?
Coming soon!
Conclusion
In this tutorial, we have explored the concept of micro front-end and its benefits in web development. We discussed the implementation of micro front-end using SPA and PWA to improve performance and reduce server load. Additionally, we introduced Firebase as a powerful tool to enhance data reliability and optimize rendering. With this knowledge, you are well-equipped to implement micro front-end architectures and create efficient and scalable web applications.
Thanks and see you on the next one!
