The Art of Micro Frontends

This is the code repository for The Art of Micro Frontends, published by Packt.

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

What is this book about?

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).

This book covers the following exciting features:

• 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

If you feel this book is for you, get your copy today!

Instructions and Navigations

All of the code is organized into folders. For example, Chapter02.

The code will look like the following:

if (test expression)
{
  Statement upon condition is true
}

Cloning the Repository

This repository contains all repositories with sample codes. These repositories have been included as Git modules. In order to check them out at clone you should add the --recurse-submodules flag:

git clone --recurse-submodules https://github.com/PacktPublishing/The-Art-of-Microfrontends.git

Updating the Repository

Once the submodules are checked out the code is stuck at this point in time. Therefore, just like the repository itself, the submodules need to be pulled.

To do everything in a single command you can just use --recurse-submodules with git pull:

git pull --recurse-submodules

Using the Code

Each directory containing a sample repository has a README file with instructions on what is necessary and how to run the code.

For the samples of chapter 7 (Server-side composition) and chapter 11 (Siteless UIs) the code has been split across multiple repositories. This was done to illustrate the distributed nature of microfrontends in general, and in particular of the given approaches.

The recommendation here would be to start with the gateway (chapter 7) and app shell (chapter 11) before running the MF repositories. In case of chapter 11 you'll also need to run the feed server.

Pretty much all samples have been created exclusively using web technologies such as HTML and JavaScript. For the edge-side composition example (chapter 8) a Dockerfile running an nginx server was added.

If you'll encounter any problem or have some improvement in mind then don't hesitate to open an issue on GitHub.

Available Samples

• Chapter 5 - Types of Microfrontends
  • Direct build integration
  • Looser coupling via lookup table
• Chapter 6 - The Web Approach
  • Pattern example
• Chapter 7 - Server-Side Composition
  • Gateway to orchstrate MFs
  • Red MF bringing product page
  • Blue MF bringing purchase ability
  • Green MF bringing recommendations
• Chapter 8 - Edge-Side Composition
  • Pattern example
• Chapter 9 - Client-Side Compositionv
  • Pattern example
• Chapter 10 - SPA Composition
  • Pattern example
• Chapter 11 - Siteless UIs
  • App Shell to orchestrate MFs
  • Feed server to dynamically provision MFs
  • Balance MF bringing the balance sheet
  • Settings MF bringing the settings dialog
  • Tax MF offering an extension for the balance sheet

Following is what you need for this book: 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.

With the following software and hardware list you can run all code files present in the book (Chapter 1-16).

Software and Hardware List

We also provide a PDF file that has color images of the screenshots/diagrams used in this book. Click here to download it.

Code in Action

Click on the following link to see the Code in Action:

YouTube

Errata

• Page 160 (Pragraph 3,Line 18): URL has to monitored should be URL has to be monitored

Related products

• Svelte 3 Up and Running [Packt] [Amazon]

• Vue.js 3 By Example [Packt] [Amazon]

Get to Know the Author

Florian Rappl is a solution architect working on distributed web applications for digital transformation and IoT projects. His main interest lies in the implementation of micro frontends and their impact on teams and business models. As the lead architect he helped to create outstanding web applications for many industry leading companies. He regularly gives lectures on software design patterns and web development. Florian won multiple prizes for his work over the years and is recognized as a Microsoft MVP for development technologies. He started his career in software engineering before studying physics and helping to build an energy-efficient supercomputer. Florian currently lives in Munich, Germany, with his wife and two daughters.