Udemy

Platform

English

Language

Web Development

Category

Microfrontends with React: A Complete Developer's Guide

Build incredibly scalable apps with a microfrontend architecture

4.73 (1179 reviews)

10389

Students

9 hours

Content

Apr 2021

Last Update
$94.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.


Screenshots

Microfrontends with React: A Complete Developer's Guide
Microfrontends with React: A Complete Developer's Guide
Microfrontends with React: A Complete Developer's Guide
Microfrontends with React: A Complete Developer's Guide

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



Reviews

M
Mdesilvio4 December 2020

excellent course; good speed; very well explained concepts; applicable in a number of ways; great instructor.

A
Andrew4 December 2020

Very knowledgeable and gret presentation in terms of breaking down complex topics into simple and understandable sections.

K
Kus29 November 2020

One of the best courses I have taken so far on Udemy. You'll end up with a general idea of ​​how MFEs work and the considerations to keep in mind when working with them. My only complaint is about not mentioning Web Components as one of the technologies that we can use to have scoped styles. In any case, it's a totally recomendable course, direct and focused in one theme.

J
Josh28 November 2020

Very thorough on relevant / current technologies. Was happy to see Material UI styles covered, and all the little "gotchas" that the Stephen thought to include, rather than leave out and have people confused afterwards. I've been looking for a good solution to scale our front-end for some time, and I'm so glad I decided to purchase this course. The presenter truly did a stellar job.

S
Sreekumar27 November 2020

The course is detailed , but the author does not seem to answer questions of the students who are stuck with various lessons. If you want your students to succeed with your course, you should be interacting with them and clearing the doubts especially when it is a complex topic like webpack module federation and micro front-ends.

K
Ken25 November 2020

Excellent course. I really enjoyed it. I have a fair bit of experience with microservices in the backend, so naturally was curious about microfrontends and how they might apply to that architecture. I did some initial research and decided it was not worth pursuing. However, I saw this course and have enjoyed Stephen's courses in the past, so decided it was worth the investment of time. Sure enough, I now feel pretty confident to go ahead and apply the lessons here and see what I can build on my own. Stephen tames complexity like few others can. Good job!

P
Phill24 November 2020

Excellent course! I need to update our microfrontend architecture at work as it is a pain to update and deploy. This course is exactly what I needed and I learnt a lot along the way. Highly recommend this instructor!

J
Joel15 November 2020

Any of Stephen's courses are always a good choice. He gives thorough explanations of every thing we are doing. Can't wait for the next one.

J
Joseph-aristide13 November 2020

Great, I will now start with Microfrontends, for the future perhaps you can add some automatics tests?

M
Marcelo12 November 2020

It is perfect, because we are starting using this kind of architecture and methodology to build apps in our company, and is perfect to understand how it works and how could that make a benefit for the teams involved and the final product

B
Bruce12 November 2020

Based on my pervious experience of what Stephen has done in the Micro Services course, I am very excited about what lies ahead. Great work Stephen for tackling the difficult parts and making it easy to understand and very useful in practice.

N
Nate11 November 2020

I have been hearing about Microfrontends for a while now but never really dug into how they work. This course is a great introduction to the architectural pattern that includes concrete examples of how to implement it and the problems a developer may face along the way. I have taken a few of Stephen Grider's courses and his teaching style is clear and comprehensive.

B
Brian11 November 2020

Another great course by Stephen Grider. Stephen has done a great job of finding the most effective way of implementing microfrontends and deep-diving it, even though it is one of the more complex ones. I am a senior lead software engineer and system architect for a mature SaaS company, tasked with converting a large monolith PHP webapp into serverless React with microservice backends and microfrontends. This course will save me a lot of time in R&D learning how to stitch together the front end!

S
Sebastian11 November 2020

Excellent detail and pace as always. Still able to watch at 2x speed and understand what is happening.

S
Sean11 November 2020

I normally wait until I finish a course before reviewing, however in this instance I'm already sure that I am going to LOVE writing my frontends in this matter from now on. I pretty much insta-buy Stephen's courses on blind faith these days since he has taught me so much over the years.



Coupons

StatusDateDiscount
Expired11/11/202095% OFF
Expired11/18/202095% OFF
Expired1/15/202195% OFF
Expired2/17/202194% OFF

3604434

Udemy ID

10/30/2020

Course created date

11/11/2020

Course Indexed date
Bot
Course Submitted by