4.73 (1179 reviews)
☑ 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
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.
The Basics of Microfrontends
What is a Microfrontend?
Understanding Build-Time Integration
A Build-Time Integration
Build-Time vs Run-Time Integrations
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
The Development Process
Sharing Dependencies Between Apps
Using Shared Modules
Async Script Loading
Shared Module Versioning
Sub-App Execution Context
Consuming Remote Modules
[Optional] A Funny Gotcha
Linking Multiple Apps Together
Requirements That Drive Architecture Choices
Initial Webpack Config
Creating and Merging Development Config
Running Marketing in Isolation
Wiring Up React
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?
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
Setting Up the Marketing Deployment
Reminder on the Production Domain
Running the Deployment
[Optional] A Production-Style Workflow
Handling CSS in Microfrontends
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
excellent course; good speed; very well explained concepts; applicable in a number of ways; great instructor.
Very knowledgeable and gret presentation in terms of breaking down complex topics into simple and understandable sections.
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.
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.
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.
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!
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!
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.
Great, I will now start with Microfrontends, for the future perhaps you can add some automatics tests?
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
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.
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.
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!
Excellent detail and pace as always. Still able to watch at 2x speed and understand what is happening.
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.