The Art of Micro Frontends

Build websites using compositional UIs that grow naturally as your application scales

Florian Rappl

• Publisher: Packt Publishing
• Year: 2021
• Print ISBN: 9781800563568
• eBook ISBN: 9781800565609
• Edition: 1
• Topic: Design
• Subtopic: Systems Architecture

Apply your experience of web development with HTML and JavaScript to build micro frontends for large-scale web projects using frameworks such as React and popular web tooling such as Node.js with Express or webpack

Key Features

• Cut through the complexities of designing a monolithic web architecture using micro frontend architecture
• Explore architecture patterns for building large-scale applications
• Learn how to build, test, and secure your micro frontends efficiently

Book Description

Micro frontend is a web architecture for frontend development borrowed from the idea of microservices in software development, where each module of the frontend is developed and shipped in isolation to avoid complexity and a single point of failure for your frontend.

Complete with hands-on tutorials, projects, and self-assessment questions, this easy-to-follow guide will take you through the patterns available for implementing a micro frontend solution. You'll learn about micro frontends in general, the different architecture styles and their areas of use, how to prepare teams for the change to micro frontends, as well as how to adjust the UI design for scalability. Starting with the simplest variants of micro frontend architectures, the book progresses from static approaches to fully dynamic solutions that allow maximum scalability with faster release cycles. In the concluding chapters, you'll reinforce the knowledge you've gained by working on different case studies relating to micro frontends.

By the end of this book, you'll be able to decide if and how micro frontends should be implemented to achieve scalability for your user interface (UI).

What you will learn

• Understand how to choose the right micro frontend architecture
• Design screens for compositional UIs
• Create a great developer experience for micro frontend solutions
• Achieve enhanced user experiences with micro frontends
• Introduce governance and boundary checks for managing distributed frontends
• Build scalable modular web applications from scratch or by migrating an existing monolith

Who this book is for

This book is for software/solution architects or (mostly lead) developers as well as web developers and frontend engineers. Beginner-level knowledge of HTML and CSS along with a solid understanding of JavaScript programming and its ecosystem, including Node.js and NPM, is assumed.

Section 1: The Hive - Introducing Frontend Modularization

In this section, the readers will not only gain a deeper understanding of micro frontends and their primary applications but also get to grips with its various challenges and strategies to mitigate them.

In this section, we cover the following chapters:

• Chapter 1, Why Micro Frontends?
• Chapter 2, Common Challenges and Pitfalls
• Chapter 3, Deployment Scenarios
• Chapter 4, Domain Decomposition

Chapter 1: Why Micro frontends?

Every journey needs to start somewhere. Quite often, we'll find ourselves looking for a solution to a particular problem. Knowing the problem in depth is usually part of the solution. Without a detailed understanding of the various challenges, finding a proper way to handle the situation seems impossible.

After almost three decades of web development, we've reached a point where anything is possible. The boundaries between classical desktop applications, mobile native applications, and websites have been torn apart. These days, many websites are actually web applications and provide a tool-like character.

As developers, we find ourselves in a quite difficult situation. Very often, the cognitive load to handle the underlying complexities of code bases is way too high. Consequently, inefficiencies and bugs haunt us.

One possible way out of this dilemma is the architectural pattern of micro frontends. In this chapter, we'll discover the reasons why micro frontends have become quite a popular choice for projects of any kind.

We will cover the following key topics in this chapter:

• Evolution of web applications
• Everything becomes micro
• Emerging web standards
• Faster time to market (TTM)

Without further ado, let's get right into the topic.

Evolution of web applications

Before looking for reasons to use micro frontends, we should look at why micro frontends came to exist at all. How did the web evolve from a small proof of concept (POC) running on a NeXT computer in a small office at Conseil Européen pour la Recherche Nucléaire/The European Organization for Nuclear Research (CERN) to becoming a central piece of the information age?

Programming the web

My first contact with web development was in the middle of the 1990s. Back then, the web was mostly composed of static web pages. While some people were experienced enough to bring in some dynamic websites using the Common Gateway Interface (CGI) technology as shown in Figure 1.1, most webmasters did not have knowledge of this or want to spend money on server-side rendering (SSR). The term webmaster was commonly used for somebody who was in charge of a website. Instead of this, everything was crafted by hand upfront:

Figure 1.1 – The web changes from static to dynamic pages

To avoid duplication and potential inconsistencies, a new technology was used: frames declared in <frameset> tags. Frames allowed websites to be displayed within websites. Effectively, this enabled the reuse of things such as a menu, header, or footer on different pages. While frames have been removed from the HyperText Markup Language 5 (HTML5) specification, they are still available in all browsers. Their successor still lives on today: the inline frame (iframe) <iframe> tag.

One of the downsides of frames was that link handling became increasingly difficult. To get the best performance, the right target had to be selected explicitly. Another difficulty was encountered in correct Uniform Resource Locator (URL) handling. Since navigation was only performed on a given frame, the displayed page address did not change.

Consequently, people started to look for alternatives. One way was to use SSR without all the complexity. By introducing some special HTML comments as placeholders containing some server instructions, a generic layout could be added that would be dynamically resolved. The name for this technique was Server Side Includes, more commonly known as SSI.

The Apache web server was among the first to introduce SSI support through the mod_ssi module. Other popular web servers, such as Microsoft's Internet Information Services (IIS), followed quickly afterward. The progressive nature and Turing completeness of the allowed instructions made SSI an instant success.

It was around that time that websites became more and more dynamic. To tame the CGI, many solutions were implemented. However, only when a new programming language called PHP: Hypertext Preprocessor (PHP) was introduced did SSR become mainstream. The cost of running PHP was so cheap that SSI was almost forgotten.

The social web

With the rise of Web 2.0 and the capabilities of JavaScript—especially for dynamic data loading at runtime, known as Asynchronous JavaScript and XML (AJAX)—the web community faced another challenge. SSR was no longer a silver bullet. Instead, the dynamic part of websites had to live on the client—at least partially. The complexity of dividing an application into multiple areas (build, server, client), along with their testing and development, skyrocketed.

As a result, frameworks for client-side rendering (CSR) emerged. The first-generation frameworks such as Backbone.js, Knockout.js, and AngularJS all came with architecture choices similar to the popular frameworks for SSR. They did not intend to place the full application on the client, and they did not intend to grow indefinitely.

In practice, this looked quite different. The application size increased and a lot of code was served to the client that was never intended to be used by the current user. Images and other media were served without any optimizations, and the web became slower and slower.

Of course, we've seen the rise of tools to mitigate this. While JavaScript minification has become nearly as old as JavaScript itself, other tools for image optimization and Cascading Style Sheets (CSS) minification came about to improve the situation too.

The missing link was to combine these tools into a single pipeline. Thanks to Node.js, the web community received a truly magnificent gem. Now, we had a runtime that could not only bring JavaScript to the server side, but also allowed the use of cross-platform tooling. New task runners such as Grunt or Gulp started making frontend code easier to develop efficiently.

The web 2.0 movement also made the reuse of web services directly from the UI running in the browser, as shown in the following figure, popular:

Figure 1.2 – With the Web 2.0 movement, services and AJAX enter common architectures

Having dedicated backend services makes sense for multiple use cases. First, we can leverage AJAX in the frontend to do partial reloads, as outlined in Figure 1.2. Another use case is to allow other systems to access the information, too. This way, useful data can be monetarized as well. Finally, the separation between representation (usually using HTML) and structure (using formats such as Extensible Markup Language (XML) or JavaScript Object Notation (JSON)) allows reuse across multiple applications.

Separation of frontend and backend

The enhanced rendering capabilities on the frontend also accelerated the separation between backend and frontend. Suddenly, ...

Table of contents

• The Art of Micro Frontends
• Foreword
• Preface
• Section 1: The Hive - Introducing Frontend Modularization
• Chapter 1: Why Micro frontends?
• Chapter 2: Common Challenges and Pitfalls
• Chapter 3: Deployment Scenarios
• Chapter 4: Domain Decomposition
• Section 2: Dry Honey - Implementing Micro frontend Architectures
• Chapter 5: Types of Micro Frontend Architectures
• Chapter 6: The Web Approach
• Chapter 7: Server-Side Composition
• Chapter 8: Edge-Side Composition
• Chapter 9: Client-Side Composition
• Chapter 10: SPA Composition
• Chapter 11: Siteless UIs
• Section 3: Busy Bees - Scaling Organizations
• Chapter 12: Preparing Teams and Stakeholders
• Chapter 13: Dependency Management, Governance, and Security
• Chapter 14: Impact on UX and Screen Design
• Chapter 15: Developer Experience
• Chapter 16: Case Studies
• Other Books You May Enjoy