Microfrontends with React: A Complete Developer's Guide

Build incredibly scalable apps with a microfrontend architecture

4.64 (7417 reviews)
Udemy
platform
English
language
Web Development
category
instructor
51,961
students
9 hours
content
Mar 2024
last update
$109.99
regular price

What you will learn

Use microfrontends to architect an app that dozens of teams can work on at the same time

Structure your apps to scale to millions of users

Understand how to divide a monolithic app into multiple sub-apps

Coordinate data exchanged between your microfrontends

Apply a production-style workflow with a full CI/CD pipeline

Deploy your microfrontends to Amazon Web Services with CloudFront

Isolate rules styling by applying CSS-scoping techniques

Judge whether microfrontends are an appropriate choice for your application

Description

Congratulations! You've found the most popular, most complete, and most up-to-date resource online for learning how to use microfrontends!

Thousands of other engineers have learned microfrontends, and you can too. This course uses a time-tested, battle-proven method to make sure you understand exactly how microfrontends work, and will get you a new job working as a software engineer or help you build that app you've always been dreaming about.

The difference between this course and all the others: you will understand the design patterns used by top companies to build massively popular web apps.

Microfrontends are used to divide a large app into a series of smaller apps. This provides a set of unique benefits to any frontend:

  1. Author smaller, easier to understand codebases

  2. Use a different set of libraries for each sub-app - bring the best tool for the job!

  3. Deploy each portion separately - limit the chance of interrupting your users

  4. Allow each of your engineering teams to work independently

This new architecture is popular, but there is a lot of misinformation online. This course has been developed with input from top engineers to ensure total technical accuracy. Additionally, you'll learn how to evaluate whether microservices are a good choice for your application.

----------------------

What will you build?

This course features hundreds of videos with dozens of custom diagrams to help you understand how microfrontends work. No prior experience is necessary. Through tireless, patient explanations and many interesting practical examples, you'll learn the fundamentals of building dynamic and live web apps using microfrontends.

Each topic included in this course is added incrementally, to make sure that you have a solid foundation of knowledge. You'll find plenty of discussion added in to help you understand exactly when and where to use each aspect of microfrontends.

Below is a partial list of the topics you'll find in this course:

  • Learn design patterns used by the largest companies in the world

  • Understand when to use microfrontends

  • Link multiple apps together using a tiered routing system

  • Scope CSS on your page to prevent cross-app contamination

  • Avoid sharing state between apps to promote isolation

  • Deploy each portion of your app independently to avoid production bugs

  • Scaffold a CI/CD pipeline to automate your release process

  • Utilize multiple front-end frameworks in the same app

  • Maximize performance by using module federation

I built this course to save you hundreds of hours of self study. I've put years of my own experience into this course to save you time. Sign up today and join me in mastering microfrontends.

Content

The Basics of Microfrontends

What is a Microfrontend?
Application Overview
Understanding Build-Time Integration
A Build-Time Integration
Build-Time vs Run-Time Integrations
Project Setup
Generating Products
Some Background on Webpack
A Touch More on Webpack
Finishing the Product List
Scaffolding the Container

The Basics of Module Federation

Implementing Module Federation
Understanding Module Federation
More on Module Federation
Module Federation Terminology
Understanding Configuration Options
Scaffolding the Cart
Cart Integration
The Development Process

Sharing Dependencies Between Apps

Using Shared Modules
Async Script Loading
Shared Module Versioning
Singleton Loading
Sub-App Execution Context
Refactoring Products
Consuming Remote Modules
Refactoring Cart
[Optional] A Funny Gotcha

Linking Multiple Apps Together

Application Overview
Tech Stack
Requirements That Drive Architecture Choices
Dependency Files
Dependency Installation
Initial Webpack Config
Creating and Merging Development Config
Running Marketing in Isolation
Wiring Up React
Marketing Components
Adding the Pricing and Landing Pages

Generic Ties Between Projects

Assembling the App Component
Assembling the Container
Integration of the Container and Marketing
Why Import the Mount Function?
Generic Integration
Reminder on Shared Modules
Delegating Shared Module Selection

Implementing a CI/CD Pipeline

Requirements Around Deployment
The Path to Production
Initial Git Setup
Production Webpack Config for Container
Production Webpack Config for Marketing
Understanding CI:CD Pipelines
Creating the Container Action
Testing the Pipeline

Deployment to Amazon Web Services

S3 Bucket Setup
Authoring a Bucket Policy
Cloudfront Distribution Setup
A Bit More Cloudfront Configuration
Creating and Assigning Access Keys
Rerunning the Build
A Small Error
Webpacks PublicPath Setting

Microfrontend-Specific AWS Config

Manual Cache Invalidations
Automated Invalidation
Successful Invalidation
Setting Up the Marketing Deployment
Reminder on the Production Domain
Running the Deployment
Verifying Deployment
[Optional] A Production-Style Workflow

Handling CSS in Microfrontends

Header Component
Adding a Header
Issues with CSS in Microfrontends
CSS Scoping Techniques
Understanding CSS in JS Libraries
So Whats the Bug?
Fixing Class Name Collisions
Verifying the Fix

Implementing Multi-Tier Navigation

Inflexible Requirements Around Navigation
A Few Solutions
Which History Implementation?
Surveying Our Current History Setup
Using Memory History
Why the Strange Results?
Communication Between Apps
Communicating Through Callbacks
Syncing History Objects
Running Memory History in Isolation
Container to Child Communication
Using Browser History in Isolation
Assembling Multiple Routers Together

Screenshots

Microfrontends with React: A Complete Developer's Guide - Screenshot_01Microfrontends with React: A Complete Developer's Guide - Screenshot_02Microfrontends with React: A Complete Developer's Guide - Screenshot_03Microfrontends with React: A Complete Developer's Guide - Screenshot_04

Reviews

Júlio
November 20, 2023
Awesome course, I leaned a lot about Module Federation. Thanks Stephen for teach us with your knowledge
Rick
June 23, 2023
Stephen's ability to simplify complex topics and make them understandable is truly impressive. Thank you for being such a skilled instructor!
Ankit
June 8, 2023
Awesome course and an amazing community that answers if you get stuck anywhere. Totally up-to-date course. Highly recommended.
Vasilis
June 8, 2023
I find that you speak quite rapidly. At certain points, I have difficulty understanding you, and you do not provide sufficient explanations of your actions. I have only learned a few things from what you have done. I apologize for the one-star rating.
Yauheni
June 7, 2023
Very good course for those who have never faced micro-fe before. Sometimes a lot of theor. info, but video speed toggle helps) Also thanks a bunch for zip archives with diff-s - this is really helpful to understand the root changes and to not type every time the code manually. P.S.: and finally a brilliant English pronunciation in course (not indian, etc.)! ☺️
Daniel
May 25, 2023
Avanza de manera organizada y permite ir incorporando lo que va enseñando , es muy detallista en compartir todo lo que esta sucediendo sin asumir que uno ya lo sabe. Excelente curso y excelente el profesor!
Jovana
May 21, 2023
Really screams for updating. In 2023, if you're using React - use React 18, please! Videos should be updated, re-recorded. Leaving notes between them on what we should change in the next video, really doesn't cut it.
Kavindu
May 20, 2023
Course is full of knowledge. I had great time learning it and coding along with Stephen throughout the course. He explains all the aspects of Micro frontend architecture. More importantly he explains how these things are executed in industry and follows the best practices. I can recommend this course to anyone. Thanks Stephen!
Elane
May 14, 2023
I am serious, Stephen is the best instructor on the Udemy, this is the very 1st course I have ever completed, that explains all! This MFE course is very well designed, I am a frontend developer with 5 yrs experience, not a beginner, I still feel l learnt lots of knowledge about how to build a micro front end application and there was soooo much fun along the way! I recommend this course to anyone who is interested in learning more about mfe, I promise you will not regret
Christopher
April 25, 2023
This is pretty good so far. A little concerned about the update to include shinyinc/action-aws-cli@v1.2 as a replacement for someone else's AWS action that was no longer valid/working/maintained. I would like to know how to create this part as well. That being said, this course seems to be good for a lot of reasons. One main reason being the requirements driven design choices and explanations as to why.
Vincent
April 17, 2023
it's pretty good thinking bout deployment and stuff , but i really think this course lack of knowledge about scalability when it comes into real projects. Stephen should teach us how enterprise project using MFE to share their dependencies, and complex interact in between using callback or you can called ancient ways interactions
Nicole
April 10, 2023
This is my 3rd course of Stephen's that I am taking. He does a phenomenal job of explaining concepts that makes it easy to follow along and understand. The projects we create a very hands-on which I enjoy because I learn best that way. I've learned so much about React with Stephen's courses; he is an excellent instructor and I highly recommend any of his courses to anyone.
Huda
April 6, 2023
Nice course, in-depth, and covered well for Micro Front-End. But eventually got stuck inside AWS Deployment (Cloudfront). Indeed very nice course.
Rodion
April 2, 2023
The Microfrontend Course on Udemy is a comprehensive and informative course on micro-frontends, their architecture, and best practices. The instructor, Luiz Gustavo Martins, has done an excellent job of breaking down complex concepts into digestible chunks, making it easy for learners to follow along. The course covers a wide range of topics, from the basics of micro-frontends to the more advanced concepts like deployment and scalability. The video lectures are well-structured and engaging, and the quizzes and assignments help learners reinforce their understanding of the material. Overall, the Microfrontend Course is an excellent resource for anyone looking to learn about micro-frontends and how to implement them in real-world scenarios. Highly recommended!
Ruben
March 21, 2023
Very interesting course, going to try this for my new personal project and maybe even apply it for my work. Thanks for the nice course!

Coupons

DateDiscountStatus
11/11/202095% OFF
expired
11/18/202095% OFF
expired
1/15/202195% OFF
expired
2/17/202194% OFF
expired
8/14/202194% OFF
expired
3/31/202294% OFF
expired

Charts

Price

Microfrontends with React: A Complete Developer's Guide - Price chart

Rating

Microfrontends with React: A Complete Developer's Guide - Ratings chart

Enrollment distribution

Microfrontends with React: A Complete Developer's Guide - Distribution chart
3604434
udemy ID
10/30/2020
course created date
11/11/2020
course indexed date
Bot
course submited by