Leanpub Header

Skip to main content
Go to Leanpub.com

An Opinionated Introduction to Micro-frontends

with React, Vue, and Svelte

Damiano Fusco

A gentle and opinionated introduction to micro-frontends

Minimum price

$19.99

$24.99

You pay

$24.99

Author earns

$19.99
$

...Or Buy With Credits!

You can get credits with a paid monthly or annual Reader Membership, or you can buy them here.
PDF
EPUB
WEB
About

About

About the Book

A gentle and opinionated introduction to micro-frontends.

Dive into the world of micro-frontends with this practical and insightful introduction. Designed for teams looking to adopt a modular approach to front-end development, this book demystifies the core concepts, advantages, and challenges of micro-frontends. Through a hands-on project, we'll explore a combination of Custom Dynamic Loading and Service-Oriented Architecture (SOA), illustrating how to integrate different JavaScript frameworks like Vue, Svelte, and React.

Discover how to build scalable and flexible applications by breaking them down into independently deployable micro-frontends. This guide provides a step-by-step approach to constructing a sample project, enabling you to make informed decisions and tackle common obstacles in real-time.

Whether you're part of a large team or working on a complex application, this book offers the strategies and insights needed to enhance your project's architecture and streamline your development process.

Share this book

Categories

JavaScriptComputers and ProgrammingVue.jsTypeScriptReactSoftwareSoftware ArchitectureSoftware Engineering

Feedback

Email the Author

Author

About the Author

Damiano Fusco

Web Developer with 20 years of experience.

Specialties: VueJS, Svelte, React, TypeScript, JavaScript, HTML, SCSS, Microfrontends, and more.

Working as a freelance consultant, after 20 years of employment work. Hire my services to help your company get unstuck from the drawbacks of your current legacy frontend, and start moving forward at much higher speed and quality.

Follow me on GitHub, Twitter (X), LinkedIn

Personal website: www.damianofusco.com

Applications:

Contents

Table of Contents

AN OPINIONATED INTRODUCTION TO MICRO-FRONTENDS

Preface

  1. Goal
  2. About Me
  3. Audience
  4. Text Conventions

Prerequisites

Companion Code

Chapter 1 - Definitions and Architecture Overview

  1. Overview of Possible Architecture Solutions
  2. Summary

Chapter 2 - Sample Project Architecture

  1. The Container App (container-app)
  2. Microfrontend1 (Built with React)
  3. Microfrontend2 (Built with Svelte)
  4. Microfrontend3 (Built with Vue)
  5. Integration Strategy
  6. Conclusion

Chapter 3 - Microfrontend1 Project (React)

  1. Directory Structure
  2. Create Project Wizard
  3. Chapter 3 Recap

Chapter 4 - Microfrontend2 Project (Svelte)

  1. Create Project Wizard
  2. Chapter 4 Recap

Chapter 5 - Microfrontend3 Project (Vue)

  1. Create Project Wizard
  2. Chapter 5 Recap

Chapter 6 - Setting Up The Container App

  1. Create Project Wizard
  2. Chapter 6 Recap

Chapter 7 - Types and Utils

  1. MicroFrontend Interface
  2. MicroFrontendLoader Utility
  3. Container-app Configuration
  4. App.vue changes
  5. Chapter 7 Recap

Chapter 8 - Getting the Microfrontends Ready

  1. Microfrontend1 (React app)
  2. Microfrontend2 (Svelte app)
  3. Microfrontend3 (Vue app)
  4. Adding a global package.json
  5. Chapter 8 Recap

Chapter 9 - CSS Styles

  1. Root Styles Project
  2. Chapter 9 Recap

Chapter 10 - Structuring the Layout

  1. Structuring the Initial Container-App Layout
  2. Chapter 10 Recap

Chapter 11 - Postbox - intermodule communication

  1. Create Project Wizard
  2. Test it
  3. Chapter 11 Recap

Chapter 12 - Monorepo Orchestration with NX

  1. What NX brings to this project
  2. Installing NX
  3. Configuring NX — nx.json
  4. Adding project.json to each package
  5. Understanding the dependency graph
  6. Updating the root package.json
  7. Running the full development stack
  8. How caching works in practice
  9. .gitignore additions
  10. Chapter Recap

Chapter 13 - Error Handling & Resilience

  1. Common failure scenarios
  2. Updating useLoadScript
  3. Updating MicroFrontendLoader
  4. Error state in the container-app UI
  5. React error boundaries in Microfrontend1
  6. Publishing errors via postbox
  7. Chapter 13 Recap

Chapter 14 - Testing

  1. Setting up Vitest in postbox
  2. Unit testing postbox
  3. Unit testing MicroFrontendLoader
  4. Component testing the container-app
  5. Running all tests from the root with NX
  6. Chapter 14 Recap
  7. Chapter 14 Recap

Chapter 15 - Authentication & Shared State Across Micro-frontends

  1. Extending the MicroFrontend interface
  2. Passing context from the container
  3. Receiving context in each micro-frontend
  4. Broadcasting auth changes via postbox
  5. Feature flags and locale
  6. Chapter 15 Recap
  7. Chapter 15 Recap

Chapter 16 - Production Build & Deployment

  1. Environment-based configuration
  2. Enabling production optimisations
  3. Building for production with NX
  4. Serving the output
  5. CI with NX affected (GitHub Actions)
  6. Chapter 16 Recap
  7. Chapter 16 Recap

More chapters coming soon

Get the free sample chapters

Click the buttons to get the free sample in PDF or EPUB, or read the sample online here

Download Sample PDFDownload Sample EPUB

The Leanpub 60 Day 100% Happiness Guarantee

Within 60 days of purchase you can get a 100% refund on any Leanpub purchase, in two clicks.

Now, this is technically risky for us, since you'll have the book or course files either way. But we're so confident in our products and services, and in our authors and readers, that we're happy to offer a full money back guarantee for everything we sell.

You can only find out how good something is by trying it, and because of our 100% money back guarantee there's literally no risk to do so!

So, there's no reason not to click the Add to Cart button, is there?

See full terms...

Earn $8 on a $10 Purchase, and $16 on a $20 Purchase

We pay 80% royalties on purchases of $7.99 or more, and 80% royalties minus a 50 cent flat fee on purchases between $0.99 and $7.98. You earn $8 on a $10 sale, and $16 on a $20 sale. So, if we sell 5000 non-refunded copies of your book for $20, you'll earn $80,000.

(Yes, some authors have already earned much more than that on Leanpub.)

In fact, authors have earned over $14 million writing, publishing and selling on Leanpub.

Learn more about writing on Leanpub

Free Updates. DRM Free.

If you buy a Leanpub book, you get free updates for as long as the author updates the book! Many authors use Leanpub to publish their books in-progress, while they are writing them. All readers get free updates, regardless of when they bought the book or how much they paid (including free).

Most Leanpub books are available in PDF (for computers) and EPUB (for phones, tablets and Kindle). The formats that a book includes are shown at the top right corner of this page.

Finally, Leanpub books don't have any DRM copy-protection nonsense, so you can easily read them on any supported device.

Learn more about Leanpub's ebook formats and where to read them

Write and Publish on Leanpub

You can use Leanpub to easily write, publish and sell in-progress and completed ebooks and online courses!

Leanpub is a powerful platform for serious authors, combining a simple, elegant writing and publishing workflow with a store focused on selling in-progress ebooks.

Leanpub is a magical typewriter for authors: just write in plain text, and to publish your ebook, just click a button. (Or, if you are producing your ebook your own way, you can even upload your own PDF and/or EPUB files and then publish with one click!) It really is that easy.

Learn more about writing on Leanpub