Microfrontends with React: A Complete Developer's Guide

Focused View

Stephen Grider

9:00:55

220 View

01 - The Basics of Microfrontends

001 Join Our Community!.html

002 What is a Microfrontend.mp4

04:47

003 Application Overview.mp4

02:52

004 Understanding Build-Time Integration.mp4

03:59

005 A Run-Time Integration.mp4

02:59

006 Webpack CLI version update - Class constructor ServeCommand error.html

007 006-mfe.zip

007 Project Setup.mp4

02:52

008 007-mfe.zip

008 Generating Products.mp4

02:39

009 Some Background on Webpack.mp4

05:37

010 009-mfe.zip

010 A Touch More on Webpack.mp4

07:03

011 010-mfe.zip

011 Finishing the Product List.mp4

01:28

012 Webpack CLI version update.html

013 Scaffolding the Container.mp4

05:57

02 - The Basics of Module Federation

001 012-mfe.zip

001 Implementing Module Federation.mp4

08:11

002 Understanding Module Federation.mp4

05:49

003 More on Module Federation.mp4

06:10

004 Understanding Configuration Options.mp4

08:29

005 016-mfe.zip

005 Scaffolding the Cart.mp4

06:44

006 017-mfe.zip

006 Cart Integration.mp4

03:17

007 The Development Process.mp4

03:07

03 - Sharing Dependencies Between Apps

001 019-mfe.zip

001 Using Shared Modules.mp4

05:51

002 020-mfe.zip

002 Async Script Loading.mp4

04:00

003 021-mfe.zip

003 Shared Module Versioning.mp4

04:34

004 022-mfe.zip

004 Singleton Loading.mp4

04:51

005 023-mfe.zip

005 Sub-App Execution Context.mp4

05:01

006 024-mfe.zip

006 Refactoring Products.mp4

06:48

007 025-mfe.zip

007 Consuming Remote Modules.mp4

04:08

008 026-mfe.zip

008 Refactoring Cart.mp4

04:03

009 [Optional] A Funny Gotcha.mp4

09:26

04 - Linking Multiple Apps Together

001 Application Overview.mp4

05:18

002 Tech Stack.mp4

02:14

003 Requirements That Drive Architecture Choices.mp4

11:32

004 Dependency Files.html

004 mfp.zip

005 Dependency Installation.mp4

01:09

006 Initial Webpack Config.mp4

07:12

007 Creating and Merging Development Config.mp4

03:15

008 007-app.zip

008 Running Marketing in Isolation.mp4

03:02

009 008-app.zip

009 Wiring Up React.mp4

06:49

010 Marketing Components.html

010 marketing-components.zip

011 009-app.zip

011 Adding the Pricing and Landing Pages.mp4

01:10

05 - Generic Ties Between Projects

001 010-app.zip

001 Assembling the App Component.mp4

05:14

002 011-app.zip

002 Assembling the Container.mp4

07:21

003 012-app.zip

003 Integration of the Container and Marketing.mp4

08:35

004 Why Import the Mount Function.mp4

04:49

005 014-app.zip

005 Generic Integration.mp4

05:44

006 015-app.zip

006 Reminder on Shared Modules.mp4

05:05

007 016-app.zip

007 Delegating Shared Module Selection.mp4

06:04

06 - Implementing a CICD Pipeline

001 Requirements Around Deployment.mp4

07:31

002 The Path to Production.mp4

05:33

003 Initial Git Setup.mp4

04:06

004 004-dep.zip

004 Production Webpack Config for Container.mp4

11:45

005 005-dep.zip

005 Production Webpack Config for Marketing.mp4

04:46

006 Understanding CICD Pipelines.mp4

04:11

007 007-dep.zip

007 Creating the Container Action.mp4

09:55

008 Testing the Pipeline.mp4

03:17

07 - Deployment to Amazon Web Services

001 S3 Bucket Setup.mp4

06:40

002 Authoring a Bucket Policy.mp4

02:59

003 Cloudfront Distribution Setup.mp4

03:54

004 A Bit More Cloudfront Configuration.mp4

02:30

005 Creating and Assigning Access Keys.mp4

07:47

006 Rerunning the Build.mp4

00:58

007 A Small Error.mp4

05:16

008 016-dep.zip

008 Webpacks PublicPath Setting.mp4

03:21

08 - Microfrontend-Specific AWS Config

001 Manual Cache Invalidations.mp4

05:23

002 018-dep.zip

002 Automated Invalidation.mp4

06:48

003 Successful Invalidation.mp4

01:51

004 020-dep.zip

004 Setting Up the Marketing Deployment.mp4

03:06

005 021-dep.zip

005 Reminder on the Production Domain.mp4

05:48

006 022-dep.zip

006 Running the Deployment.mp4

00:58

007 023-dep.zip

007 Verifying Deployment.mp4

04:19

008 024-dep.zip

008 [Optional] A Production-Style Workflow.mp4

08:41

09 - Handling CSS in Microfrontends

001 Header Component.html

001 header.zip

002 Adding a Header.mp4

03:34

003 Issues with CSS in Microfrontends.mp4

04:21

004 CSS Scoping Techniques.mp4

10:40

005 Understanding CSS in JS Libraries.mp4

06:29

006 So Whats the Bug.mp4

06:47

007 006-mfp.zip

007 Fixing Class Name Collisions.mp4

06:03

008 Verifying the Fix.mp4

01:44

10 - Implementing Multi-Tier Navigation

001 Inflexible Requirements Around Navigation.mp4

08:25

002 A Few Solutions.mp4

02:45

003 Which History Implementation.mp4

06:15

004 Surveying Our Current History Setup.mp4

02:13

005 Using Memory History.mp4

03:57

006 Why the Strange Results.mp4

04:42

007 Communication Between Apps.mp4

02:53

008 Communicating Through Callbacks.mp4

04:09

009 Syncing History Objects.mp4

07:09

010 Running Memory History in Isolation.mp4

02:12

011 Container to Child Communication.mp4

07:22

012 Using Browser History in Isolation.mp4

03:18

11 - Performance Considerations

001 001-wrap.zip

001 Starting the Auth Project.mp4

06:25

002 Component Files.html

002 components.zip

003 002-wrap.zip

003 Adding Signin and Signup Forms.mp4

03:36

004 A Deeper Dive on PublicPath.mp4

11:56

005 Last Time for PublicPath.mp4

03:45

006 005-wrap.zip

006 Integrating Auth into the Container.mp4

04:32

007 006-wrap.zip

007 Adding Initial State to Memory History.mp4

07:51

008 007-wrap.zip

008 Lazily Loading SubApps.mp4

07:52

009 008-wrap.zip

009 Adding a Loading Bar.mp4

04:42

12 - Authentication in Microfrontends

001 Important Notes on Authentication.mp4

04:48

002 Implementation Strategies.mp4

01:31

003 Communicating Auth Changes.mp4

04:58

004 Communicating Authentication State.mp4

05:48

005 Allowing Signout.mp4

01:40

006 Adding an Auth Deploy Config.mp4

03:15

007 Verifying Deployment.mp4

01:36

13 - Using Other Frontend Frameworks

001 Initial Dashboard Setup.mp4

07:13

002 002-dash.zip

002 A Touch More Config.mp4

03:14

003 Component Files.html

003 components.zip

004 003-dash.zip

004 Showing the Dashboard.mp4

05:35

005 Integration with the Container.mp4

06:01

006 005-dash.zip

006 Protecting Access to the Dashboard.mp4

06:00

007 006-dash.zip

007 Deploying the Dashboard.mp4

02:34

008 Verifying Deployment.mp4

01:08

009 Wrapup.mp4

03:19

14 - Bonus!

001 Bonus!.html

Description

Build incredibly scalable apps with a microfrontend architecture

What You'll 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 is this for?

Engineers looking to scale frontend apps

What You Need to Know?

Basic understanding of React

More details

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:
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 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.
Who this course is for:
Engineers looking to scale frontend apps

User Reviews

Rating

average 0

Total votes0

Focused display

Stephen Grider has been building complex Javascript front ends for top corporations in the San Francisco Bay Area. With an innate ability to simplify complex topics, Stephen has been mentoring engineers beginning their careers in software development for years, and has now expanded that experience onto Udemy, authoring the highest rated React course. He teaches on Udemy to share the knowledge he has gained with other software engineers. Invest in yourself by learning from Stephen's published courses.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.