Overview
In the past few years, microservices have become insanely popular. Many organizations have adopted this architectural style to break free from the limitations of big, monolithic backends. We’ve seen plenty of discussions about building server-side software using microservices – you can find multiple articles about this topic in this blog, but here’s the thing: lots of companies are still struggling with massive frontend codebases.
As all we know what it’s like when you want to create a cool progressive or responsive web app, but you’re stuck because integrating those features into your existing code seems like a nightmare. And let’s not forget about the desire to use new JavaScript language features or other languages that compile to JavaScript. It’s a struggle to fit all the necessary build tools into your current build process.
And hey, maybe you just want to scale up your development so that multiple teams can work on a single product at the same time. But guess what? The tight coupling and complexity of the existing monolith means everyone ends up stepping on each other’s toes. Real problems, my friend. These problems seriously mess with your ability to efficiently deliver top-notch experiences to your customers.
So, it’s time to address these challenges head-on and find better solutions.
Breifing about Software Architecture Evolution
The frontend can take different forms, such as a mobile app or a web-based application accessed through a browser. The backend, on the other hand, holds the main business logic and handles data storage and retrieval. Initially, both frontend and backend components were bundled together in what we now call a monolithic application. This meant that the frontend and backend code lived in one repository and were managed by a single large team.
However, the industry soon recognized the benefits of separating frontend and backend code. Frontend development became a specialized area that required dedicated skills, especially as the frontend code and its maintenance became more complex. For instance, a frontend team building web applications needed to navigate the nuances between different browsers to ensure a consistent user experience. The increasing complexity of backend systems also contributed to the decision to split frontend and backend. The business logic couldn’t be hidden behind a single frontend anymore; it needed to be shared with other applications through specialized backend skills, APIs, and services.
While separating the frontend and backend improved matters, backend systems eventually faced scalability issues as the business logic, functionality, and data grew. Backend systems and teams had to expand to handle the increasing demands. When one backend system had to serve multiple frontends, such as web and mobile applications, the scaling challenges became more apparent. To address these issues, microservices architecture came to the rescue. Large monolithic backend applications were split into smaller services and APIs, each with well-defined responsibilities. Each microservice had a dedicated team specializing in its domain knowledge, allowing for focused maintenance and development.
The frontend application and team would interact with different APIs for different parts of the application, often through an API Gateway or a Backend for Frontend API. This decoupling of frontend and backend solved many scaling problems on the backend side. However, it became evident that the frontend still suffered from the monolithic application approach. To overcome these challenges, microservice design principles were applied to frontend architecture, giving rise to micro frontends architecture.
Micro frontends architecture extends the same principles that solved backend issues to the frontend layer. It advocates for breaking down the frontend monolith into smaller, self-contained units. In the next section of this module, we will delve into the specific microservices design principles and explore how they can be applied to address the challenges in our frontend monolithic application.
New paradigm for Frontend
Micro frontends architecture takes inspiration from the success of microservices and applies it to the frontend. By breaking down the frontend monolith into smaller, independent parts, each with its own dedicated team and specific responsibilities, we can overcome the limitations and challenges of a monolithic frontend application.
With micro frontends, different parts of the frontend application can be developed and maintained separately, allowing for more agility and scalability. Each micro frontend can be built using different technologies or frameworks, based on the specific requirements of that part of the application. This flexibility enables teams to choose the most suitable tools and technologies for their respective areas, without being constrained by a monolithic structure.
Furthermore, the use of micro frontends enhances collaboration and parallel development. Multiple teams can work on different micro frontends simultaneously, independently deploying their changes. This not only speeds up development but also minimizes conflicts and bottlenecks that often occur in large, tightly-coupled monolithic codebases.
Micro frontends also provide a way to encapsulate functionality and user interfaces within specific contexts. Instead of having one massive frontend codebase where all functionalities are intertwined, micro frontends allow for more modular and loosely-coupled components. This modularity facilitates reusability, as different micro frontends can be composed and combined to create new user experiences or even be shared across multiple applications.
Just as microservices architecture revolutionized the backend, micro frontends architecture holds the promise of transforming frontend development. It introduces a more scalable, flexible, and collaborative approach to building user interfaces, aligning with the principles of decoupling, autonomy, and specialization that have proven successful on the backend.
In the upcoming content, we will dive deeper into the specific design principles and practices of micro frontends architecture. We’ll explore how micro frontends can address the challenges of frontend development, improve maintainability, foster collaboration, and ultimately deliver high-quality user experiences.
microfrontends Born
As mentioned earlier, micro frontend architecture is essentially an expansion of the microservices architecture style. It aims to apply the same design principles used in the backend to the frontend, in order to achieve the same benefits that microservices have brought to backend software architecture. So, let’s take a moment to recap the core principles of microservices and how they can be applied to the frontend:
High Cohesion
Microservices are all about breaking down the software into smaller components, such as services and APIs, with each component having a specific responsibility and focus. This high cohesion means that each microservice does one thing and does it well. Now, imagine if our frontend application was also composed of smaller components, or micro frontends, with each having a single focus.
Autonomous
Autonomy is another important principle in microservices design. It means that each microservice can be changed and deployed independently, without impacting other microservices. What if the same autonomy was applied to our frontend? Imagine having micro frontends that can be deployed and modified independently, without affecting other parts of the UI.
Bounded & Business Domain Centric
Microservices design also emphasizes the importance of being business domain-centric. Each microservice represents a specific business domain or function within the organization. Similarly, what if our frontend was composed of micro frontends, each dedicated to a different area within the business?
Resiliency
Resilience is a key aspect of microservices. When a failure occurs, the system should be resilient and gracefully handle the failure, either by defaulting to alternative functionality or degrading gracefully. What if we could achieve the same resilience on the frontend, where if a specific part fails, we seamlessly replace it without disrupting the entire page?
Observable
Observability is another crucial principle of microservices. Through centralized logging and monitoring, we can gain insights into the behavior and health of each microservice. Similarly, imagine having transparency and observability at the frontend level, where we can monitor and understand the actions and health of each micro frontend application.
Automation
Automation is vital for microservices to enable efficient testing and deployment. Each microservice component can be independently tested and deployed using automation tools. Likewise, envision having the same advantages at the frontend level, where each micro frontend that contributes to the complete user interface can be independently tested and deployed using automation tools.
By applying these design principles of microservices to the frontend, we can enjoy the same advantages that our backend systems have benefited from.
MONOLITHIC FRONTENDS dRAWbACKS
let’s now review the potential drawbacks of not modularizing your frontend applications using a micro frontend architecture. If you choose to stick with a monolithic approach, several issues can arise over time, making maintenance and scalability more challenging.
One of the main problems you’ll encounter with a monolithic frontend is scaling. Both the frontend application itself and the team responsible for its development and maintenance will face difficulties as the codebase grows larger. Making small changes becomes time-consuming due to the intricate nature of the intertwined code. This issue applies to various types of frontend applications, from modern single-page applications (SPAs) built with JavaScript frameworks to server-side web applications or even mobile apps. When specific performance problems arise, scaling becomes a challenge because it’s hard to scale a specific part of the application independently. Instead, you may end up scaling the entire application, even if only a fraction of it requires additional resources.
A large codebase intertwined with various frontend features requires a larger team to maintain it. This combination of a large codebase and a large team means that every change requires extensive coordination within the team to ensure its success. Communication slowdowns can occur when coordinating changes between the frontend team and the backend teams responsible for the APIs and services that power the frontend features. Such coordination delays result in a loss of time overall for the project.
Another challenge stems from the differing priorities of the frontend and backend teams. The frontend team focuses heavily on delivering a customer-centric user experience, as they are closely aligned with UX designs. On the other hand, the backend team primarily prioritizes optimizing the backend system. When coordinating changes, the backend team may not fully grasp the frontend team’s goals and objectives in terms of user experience.
Complexity also affects testing in monolithic frontends. Since all features are intertwined, changing one feature can have an unintended negative impact on another feature within the frontend application. As a result, managing testing and mitigating risks becomes more challenging. This increased risk aversion can slow down continuous delivery, as there will be hesitation to release updates due to the fear of breaking something in front of customers.
The only notable advantage of a monolithic frontend is the presence of a single codebase, which simplifies setup for testing and development purposes. However, as we will explore in the next section, these advantages diminish as the monolithic application grows larger.
In conclusion
In summary, micro frontends architecture presents a paradigm shift in frontend development, bringing the advantages of modularity, scalability, maintainability, and collaboration that have been proven successful in microservices architecture. By embracing micro frontends, organizations can unlock the full potential of their frontend applications, delivering efficient, high-quality user experiences while empowering development teams to work more effectively.
In the next article we will explore main design principles for microfrontends
That´s all for today, happy building !