The Art of Micro Frontends E-Book

Florian Rappl

• Herausgeber: Packt Publishing
• Kategorie: Fachliteratur
• Sprache: Englisch

Seitenzahl: 364

Veröffentlichungsjahr: 2021

Beschreibung

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

Leseprobe

The Art of Micro Frontends

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

Florian Rappl

BIRMINGHAM—MUMBAI

The Art of Micro Frontends

Copyright © 2021 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Associate Group Product Manager: Pavan Ramchandani

Publishing Product Manager: Rohit Rajkumar

Senior Editor: Sofi Rogers

Content Development Editor: Rakhi Patel

Technical Editor: Deepesh Patel

Copy Editor: Safis Editing

Project Coordinator: Manthan Patel

Proofreader: Safis Editing

Indexer: Manju Arasan

Production Designer: Jyoti Chauhan

First published: June 2021

Production reference: 1180621

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham

B3 2PB, UK.

ISBN 978-1-80056-356-8

www.packt.com

To my family, for their continuous support and dedication. My life would not be so colorful without you and it would be hard to keep following the right path. Thanks for your guidance and dedication!

– Florian Rappl

Foreword

I have known and worked with Florian Rappl over the last 5 years. Florian is one of those rare architects who also loves to write code. In those 5 years, I’ve witnessed many projects where Florian took the lead architect role – introducing a micro frontend solution and guiding the teams to a successful implementation. He is one of the worldwide .NET and micro frontend community leading experts. In this book, The Art of Micro Frontends, Florian takes you on a learning journey that covers implementation ideas, scalability aspects, organizational issues, as well as security aspects. This will help you to successfully launch your own micro frontend solution – either from scratch or using one of the established frameworks.

For a long time, even large-scale systems have been developed as so-called monoliths, where the entire functionality has been implemented as a single and tightly integrated solution. For the backend part, the architecture pattern of microservices has become a very popular choice for addressing some of the downsides of a monolithic solution, such as the strong coupling of components, complex deployment scenarios, or large code bases managed by a single development team. Nowadays, microservice architectures build the foundation for many modern backend implementations.

Only in recent years have similar architectural approaches found their way into frontend solutions. One of the key requirements for flexible and extendable user interfaces is the modularization of components, especially for scenarios in which the layout and available features strongly depend on the user context or in which contained frontends for microservices need to be exposed seamlessly as a unified application.

The decoupling of functionality blocks is already a broadly applied aspect of modern monolithic frontend solutions, but together with the freedom of selecting the appropriate technology and the ability to independently develop in smaller teams, the micro frontend architecture pattern replicates further key benefits of microservice architectures also to the frontend. In particular, the capability of loading individual modules dynamically into the frontend enables the development, testing, and provisioning of features in shorter and self-contained release cycles. This makes the architecture pattern of micro frontends an excellent choice for large-scale and complex web development.

As for selecting microservices as the basis for the backend architecture, applying the approach of micro frontends might not be the ideal and canonical choice for every frontend solution. The isolation and decoupling of functional building blocks of the user interface introduce another layer of complexity, hence a well-designed and modularized monolithic web application might be a valuable or even a better fit for a given usage scenario. It is essential to evaluate and assess the advantages and disadvantages upfront as part of the solution concept. In this context, this book will also support you in the process of designing the right frontend solution architecture.

Become a developer superhero and build scalable web applications leveraging micro frontends.

Lothar Schöttner

Founder and CEO of smapiot, previously a solution architect for Accenture and Microsoft

Contributors

About 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. In this area, he has led several teams realizing many successful projects over the last years.

As the lead architect, he has helped to create outstanding web applications for many industry-leading companies. He regularly gives lectures on software design patterns and web development. Florian has 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 their two daughters.

About the reviewer

Rahul Gaur is a software engineer with a passion for enterprise software development. Rahul has over 8 years of successful experience in engineering large-scale complex software applications. Rahul currently specializes in frontend technologies and works as director of engineering at Innovaccer. Rahul oversaw the launch of the first version of the healthcare platform and later also oversaw the company-wide transition to micro frontend architecture in 2018, accelerating the growth of the company’s healthcare platform, elevating the ambitious start-up to unicorn status in early 2021. A strong believer in the power of free and open source software, Rahul regularly contributes to multiple open source projects.

Table of Contents

Preface

Section 1: The Hive - Introducing Frontend Modularization

Chapter 1: Why Micro frontends?

Evolution of web applications

Programming the web

The social web

Separation of frontend and backend

Everything becomes micro

From SOA to microservices

Advantages of microservices

Disadvantages of microservices

Micro and frontend

Emerging web standards

Isolation via Web Components

Frame communication

Web workers and proxies

Faster TTM

Decreasing onboarding time

Multiple teams

Isolated features

A/B testing

Summary

Chapter 2: Common Challenges and Pitfalls

Performance

Resource caching

Bundle size

Request optimizations

Security

Central user management

Individual user management

Script execution

Knowledge sharing

Reliability

User experience

Wording

Pattern libraries

Summary

Chapter 3: Deployment Scenarios

Central deployments

Using a monorepo

Joining multiple repositories

Distributed deployments

Using a monorepo

Using dedicated pipelines

Hybrid solutions

Scheduled releases

Triggering on change

Summary

Chapter 4: Domain Decomposition

Principles of DDD

Modules

Bounded context

Context map

Strategic domain design versus tactical design

SoC

Technical split

Functional split

Example decomposition

Architectural boundaries

Shared capabilities

Choosing the right level of freedom

Accessing the DOM

Universality of micro frontends

Summary

Section 2: Dry Honey - Implementing Micro frontend Architectures

Chapter 5: Types of Micro Frontend Architectures

Technical requirements

The micro frontend landscape

Static versus dynamic micro frontends

Horizontal- versus vertical-composed micro frontends

Backend- versus frontend-driven micro frontends

Summary

Chapter 6: The Web Approach

Technical requirements

Basics of the web approach

The architecture

Sample implementation

Potential enhancements

Advantages and disadvantages

Links

Central linking directory

Local linking directory

Iframes

Security

Accessibility

Layout

Summary

Chapter 7: Server-Side Composition

Technical requirements

Basics of server-side composition

The architecture

Sample implementation

Potential enhancements

Advantages and disadvantages

Introducing Mosaic 9

Introducing Podium

Known users

Creating a composition layout

Understanding layout responsibilities

Using SSI

Using ESI

Using JS template strings

Setting up micro frontend projects

Podlets

Examining the life cycle

Summary

Chapter 8: Edge-Side Composition

Technical requirements

Basics of edge-side composition

The architecture

Sample implementation

Potential enhancements

Advantages and disadvantages

SSI and ESI

SSI

ESI

Stitching in BFFs

Summary

Chapter 9: Client-Side Composition

Technical requirements

Basics of client-side composition

The architecture

Sample implementation

Potential enhancements

Advantages and disadvantages

Diving into Web Components

Understanding Web Components

Isolating styles with shadow DOM

Composing micro frontends dynamically

Using a micro frontend registry

Updating micro frontends at runtime

Summary

Chapter 10: SPA Composition

Technical requirements

Basics of SPA composition

The architecture

Sample implementation

Potential enhancements

Advantages and disadvantages

Building a core SPA shell

Activating pages

Sharing dependencies

Integrating SPA micro frontends

Declaring the lifecycle

Using cross-framework components

Exploring communication patterns

Exchanging events

Sharing data

Extending components

Summary

Chapter 11: Siteless UIs

Technical requirements

The basics of siteless UIs

The architecture

Sample implementation

Potential enhancements

Advantages and disadvantages

Comparing with serverless

Developing locally

Publishing modules

Creating a runtime

Building a runtime with Piral

Deploying a runtime with Piral

Writing modules

Looking at a pilet's life cycle

Implementing framework-agnostic components

Summary

Section 3: Busy Bees - Scaling Organizations

Chapter 12: Preparing Teams and Stakeholders

Communicating with C-level stakeholders

Managing expectations

Writing executive summaries

Handling product owners and steering committees

Team organization

Understanding possible team setups

Changing team organizations

Summary

Chapter 13: Dependency Management, Governance, and Security

Sharing all or nothing

What about change management?

Establishing a governance model

Sandboxing micro frontends

General security concerns and mitigations

Summary

Chapter 14: Impact on UX and Screen Design

Always adding one

Learning to start at zero

Sharing designs efficiently

Creating designs without designers

Summary

Chapter 15: Developer Experience

Providing a minimum developer experience

Supporting development in standard IDEs

Improving the scaffolding experience

Establishing a decent developer experience

Centralizing code documentation

Documenting with videos

Assisting with code analysis

Improving testability

Achieving the best developer experience

Integrating error codes

Providing an offline-first development environment

Customizing via browser extensions

Implementing a developer portal

Summary

Chapter 16: Case Studies

A user-facing portal solution

Problem description

Team setup

Solution

Impact

An administration portal solution

Problem description

Team setup

Solution

Impact

A healthcare management solution

Problem description

Team setup

Solution

Impact

Summary

Epilogue

Why subscribe?

Other Books You May Enjoy

Preface

The pattern of micro frontends 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.

Who this book is for

This book is for solution architects, software architects, developers, and frontend engineers. Basic frontend knowledge of HTML and CSS, with decent knowledge of JavaScript and its ecosystem, including Node.js with NPM, is assumed.

What this book covers

Chapter 1, Why Micro Frontends?, covers micro frontends in general, their primary areas of use, as well as the challenges and problems they bring. This includes what strategies can be used to mitigate these problems and challenges.

Chapter 2, Common Challenges and Pitfalls, discusses the most important challenges and pitfalls when implementing micro frontends, together with a path leading to a proper solution.

Chapter 3, Deployment Scenarios, looks at the scalability of micro frontends with respect to their deployment. This includes examples of CI/CD pipelines and their ideal use cases.

Chapter 4, Domain Decomposition, reveals a way of thinking that can be used when deciding what should be placed in a micro frontend. This chapter introduces the use of methods from domain-driven design to make these decisions.

Chapter 5, Types of Micro Frontend Architectures, introduces the phase space for creating micro frontend architectures, including the most popular patterns out there. This chapter outlines the advantages and disadvantages of the extremes within the phase space.

Chapter 6, The Web Approach, discusses the simplest approach of handling micro frontends by leveraging existing web technologies such as iframes and links.

Chapter 7, Server-Side Composition, discusses a popular backend method of combining frontend fragments coming from different servers into a single website.

Chapter 8, Edge-Side Composition, takes an even more simplified approach than server-side composition to compose a website on the edge using a reverse proxy setup.

Chapter 9, Client-Side Composition, shows how to leverage Web Components to compose one website from different fragments in the user’s browser.

Chapter 10, SPA Composition, discusses a way of bringing together different SPA websites in a joint solution composed within the user’s browser.

Chapter 11, Siteless UIs, introduces a micro frontend pattern that brings popular properties of serverless functions to the frontend.

Chapter 12, Preparing Teams and Stakeholders, deals with the organizational shift that is necessary when introducing micro frontends.

Chapter 13, Dependency Management, Governance, and Security, provides some guidance on dependency sharing and general micro frontend governance for projects of any kind. This chapter also touches on the topic of security from deployment to runtime.

Chapter 14, Impact on UX and Screen Design, reveals the most critical aspects that need to be handled when creating designs for micro frontend solutions with practically unlimited scalability.

Chapter 15, Developer Experience, lists the most crucial properties to include for satisfying internal or external developers of the project. This is crucial for keeping up a high level of productivity.

Chapter 16, Case Studies, lists three different real-world micro frontend projects with their background, core decisions, and overall architecture used.

To get the most out of this book

All the examples in the book have been created with simplicity in mind. They all work similarly and only require knowledge of core frontend technologies such as JavaScript with HTML and CSS. The tooling to make the code run uses the most popular frontend toolchain based on Node.js. As such, if you know how to work with JavaScript and have used Node.js with NPM beforehand, you’ll have no problems following the examples presented in this book.

For the code in Chapter 8, Edge-Side Composition, you’ll need to run Docker. Alternatively, you may just set up a local nginx server, even though that would be a lot more complicated than just running the provided Docker file.

If you are using the digital version of this book, we advise you to type the code yourself or access the code via the GitHub repository (link available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.

Download the example code files

You can download the example code files for this book from your account at www.packt.com. If you purchased this book elsewhere, you can visit www.packtpub.com/support and register to have the files emailed directly to you.

You can download the code files by following these steps:

Log in or register at www.packt.com.Select the Support tab.Click on Code Downloads.Enter the name of the book in the Search box and follow the onscreen instructions.

Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:

WinRAR/7-Zip for WindowsZipeg/iZip/UnRarX for Mac7-Zip/PeaZip for Linux

The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/The-Art-of-Micro-Frontends. In case there’s an update to the code, it will be updated on the existing GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Code in Action

Code in Action videos for this book can be viewed at https://bit.ly/3cbhbL7.

Download the color images

We also provide a PDF file that has color images of the screenshots/diagrams used in this book. You can download it here: https://static.packt-cdn.com/downloads/9781800563568_ColorImages.pdf.

Conventions used

There are a number of text conventions used throughout this book.

Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: “So, instead of requesting fragment-1.html directly from the absolute URL, we request it from the same CDN – leading to a pre-evaluated version, which does not contain any ESI directives.”

A block of code is set as follows:

// index.html (original)

<esi:include src=”http://example.com/fragment1.html” />

// fragment1.html

<esi:include src=”http://example.com/fragment2.html” />

// fragment2.html

<div>...

Any command-line input or output is written as follows:

npm run build

npm pack

Bold: Indicates a new term, an important word, or words that you see on screen. For example, words in menus or dialog boxes appear in the text like this. Here is an example: “For instance, the My messages button in the header is coming from the messages micro frontend.”

Tips or important notes

Appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: If you have questions about any aspect of this book, mention the book title in the subject of your message and email us at [email protected].

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata, selecting your book, clicking on the Errata Submission Form link, and entering the details.

Piracy: If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.

Share Your Thoughts

Once you've read The Art of Micro Frontends, we'd love to hear your thoughts! Please https://packt.link/r/1800563566 for this book and share your feedback.

Your review is important to us and the tech community and will help us make sure we're delivering excellent quality content.

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 PitfallsChapter 3, Deployment ScenariosChapter 4, Domain Decomposition