Microfrontends with React: A Complete Developer's Guide

Microfrontends with React: A Complete Developer's Guide, available at $119.99, has an average rating of 4.66, with 128 lectures, 2 quizzes, based on 7969 reviews, and has 56110 subscribers.

You will learn about 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 This course is ideal for individuals who are Engineers looking to scale frontend apps It is particularly useful for Engineers looking to scale frontend apps.

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

Summary

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

Price: $119.99

Average Rating: 4.66

Number of Lectures: 128

Number of Quizzes: 2

Number of Published Lectures: 123

Number of Published Quizzes: 2

Number of Curriculum Items: 130

Number of Published Curriculum Objects: 125

Original Price: $199.99

Quality Status: approved

Status: Live

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

Who Should Attend

Engineers looking to scale frontend apps

Target Audiences

Engineers looking to scale frontend apps

Congratulations! You’ve found the mostpopular, mostcomplete, and mostup-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:

Author smaller, easier to understand codebases
Use a different set of libraries for each sub-app – bring the best tool for the job!
Deploy each portion separately – limit the chance of interrupting your users
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 listof 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.

Course Curriculum

Chapter 1: The Basics of Microfrontends

Lecture 1: Join Our Community!

Lecture 2: Course Resources

Lecture 3: What is a Microfrontend?

Lecture 4: Application Overview

Lecture 5: Understanding Build-Time Integration

Lecture 6: A Run-Time Integration

Lecture 7: Project Setup

Lecture 8: Generating Products

Lecture 9: Some Background on Webpack

Lecture 10: A Touch More on Webpack

Lecture 11: Finishing the Product List

Lecture 12: Scaffolding the Container

Chapter 2: The Basics of Module Federation

Lecture 1: Implementing Module Federation

Lecture 2: Understanding Module Federation

Lecture 3: More on Module Federation

Lecture 4: Understanding Configuration Options

Lecture 5: Scaffolding the Cart

Lecture 6: Cart Integration

Lecture 7: The Development Process

Chapter 3: Sharing Dependencies Between Apps

Lecture 1: Using Shared Modules

Lecture 2: Async Script Loading

Lecture 3: Shared Module Versioning

Lecture 4: Singleton Loading

Lecture 5: Sub-App Execution Context

Lecture 6: Refactoring Products

Lecture 7: Consuming Remote Modules

Lecture 8: Refactoring Cart

Lecture 9: [Optional] A Funny Gotcha

Chapter 4: Linking Multiple Apps Together

Lecture 1: Application Overview

Lecture 2: Tech Stack

Lecture 3: Requirements That Drive Architecture Choices

Lecture 4: Dependency Files

Lecture 5: Dependency Installation

Lecture 6: Initial Webpack Config

Lecture 7: Creating and Merging Development Config

Lecture 8: Running Marketing in Isolation

Lecture 9: Wiring Up React

Lecture 10: Marketing Components

Lecture 11: Adding the Pricing and Landing Pages

Chapter 5: Generic Ties Between Projects

Lecture 1: Assembling the App Component

Lecture 2: Assembling the Container

Lecture 3: Integration of the Container and Marketing

Lecture 4: Why Import the Mount Function?

Lecture 5: Generic Integration

Lecture 6: Reminder on Shared Modules

Lecture 7: Delegating Shared Module Selection

Chapter 6: Implementing a CI/CD Pipeline

Lecture 1: Requirements Around Deployment

Lecture 2: The Path to Production

Lecture 3: Initial Git Setup

Lecture 4: Production Webpack Config for Container

Lecture 5: Production Webpack Config for Marketing

Lecture 6: Understanding CI:CD Pipelines

Lecture 7: Required Change in the Container Action – Do not Skip

Lecture 8: Creating the Container Action

Lecture 9: Testing the Pipeline

Chapter 7: Deployment to Amazon Web Services

Lecture 1: S3 Bucket Setup

Lecture 2: Authoring a Bucket Policy

Lecture 3: Minor Changes in AWS CloudFront UI

Lecture 4: Cloudfront Distribution Setup

Lecture 5: A Bit More Cloudfront Configuration

Lecture 6: Key Creation Update + Reminder on AWS_DEFAULT_REGION

Lecture 7: Creating and Assigning Access Keys

Lecture 8: Rerunning the Build

Lecture 9: A Small Error

Lecture 10: Webpacks PublicPath Setting

Chapter 8: Microfrontend-Specific AWS Config

Lecture 1: Manual Cache Invalidations

Lecture 2: AWS Region with Automatic Invalidation

Lecture 3: Automated Invalidation

Lecture 4: Successful Invalidation

Lecture 5: Setting Up the Marketing Deployment

Lecture 6: Reminder on the Production Domain

Lecture 7: Running the Deployment

Lecture 8: Verifying Deployment

Lecture 9: [Optional] A Production-Style Workflow

Lecture 10: AWS Setup and Configuration Cheetsheet

Chapter 9: Handling CSS in Microfrontends

Lecture 1: Header Component

Lecture 2: Adding a Header

Lecture 3: Issues with CSS in Microfrontends

Lecture 4: CSS Scoping Techniques

Lecture 5: Understanding CSS in JS Libraries

Lecture 6: So Whats the Bug?

Lecture 7: Fixing Class Name Collisions

Lecture 8: Verifying the Fix

Chapter 10: Implementing Multi-Tier Navigation

Lecture 1: Small Required Change to historyApiFallback

Lecture 2: Inflexible Requirements Around Navigation

Lecture 3: A Few Solutions

Lecture 4: Which History Implementation?

Lecture 5: Surveying Our Current History Setup

Instructors

Stephen Grider
Engineering Architect

Rating Distribution

1 stars: 32 votes
2 stars: 35 votes
3 stars: 336 votes
4 stars: 2066 votes
5 stars: 5502 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

Menu