Microfrontends with React: A Complete Developer's Guide
- Descripción
- Currículum
- Reseñas
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.
-
1Join Our Community!Text lesson
-
2Course ResourcesText lesson
-
3What is a Microfrontend?Video lesson
-
4Application OverviewVideo lesson
-
5Understanding Build-Time IntegrationVideo lesson
-
6A Run-Time IntegrationVideo lesson
-
7Build-Time vs Run-Time IntegrationsCuestionario
-
8Important Versions Update / BoilerplateText lesson
-
9Project SetupVideo lesson
-
10Generating ProductsVideo lesson
-
11Some Background on WebpackVideo lesson
-
12A Touch More on WebpackVideo lesson
-
13Finishing the Product ListVideo lesson
-
14Important Versions Update for ContainerText lesson
-
15Scaffolding the ContainerVideo lesson
-
16Implementing Module FederationVideo lesson
-
17Understanding Module FederationVideo lesson
-
18More on Module FederationVideo lesson
-
19Module Federation TerminologyCuestionario
-
20Understanding Configuration OptionsVideo lesson
-
21Scaffolding the CartVideo lesson
-
22Cart IntegrationVideo lesson
-
23The Development ProcessVideo lesson
-
24Using Shared ModulesVideo lesson
-
25Async Script LoadingVideo lesson
-
26Shared Module VersioningVideo lesson
-
27Singleton LoadingVideo lesson
-
28Sub-App Execution ContextVideo lesson
-
29Refactoring ProductsVideo lesson
-
30Consuming Remote ModulesVideo lesson
-
31Refactoring CartVideo lesson
-
32[Optional] A Funny GotchaVideo lesson
-
33Application OverviewVideo lesson
-
34Tech StackVideo lesson
-
35Requirements That Drive Architecture ChoicesVideo lesson
-
36Dependency FilesText lesson
-
37Dependency InstallationVideo lesson
-
38Initial Webpack ConfigVideo lesson
-
39Creating and Merging Development ConfigVideo lesson
-
40Running Marketing in IsolationVideo lesson
-
41Wiring Up ReactVideo lesson
-
42Marketing ComponentsText lesson
-
43Adding the Pricing and Landing PagesVideo lesson
-
44Assembling the App ComponentVideo lesson
-
45Assembling the ContainerVideo lesson
-
46Integration of the Container and MarketingVideo lesson
-
47Why Import the Mount Function?Video lesson
-
48Generic IntegrationVideo lesson
-
49Reminder on Shared ModulesVideo lesson
-
50Delegating Shared Module SelectionVideo lesson
-
51Requirements Around DeploymentVideo lesson
-
52The Path to ProductionVideo lesson
-
53Initial Git SetupVideo lesson
-
54Production Webpack Config for ContainerVideo lesson
-
55Production Webpack Config for MarketingVideo lesson
-
56Understanding CI:CD PipelinesVideo lesson
-
57Required Change in the Container Action - Do not SkipText lesson
-
58Creating the Container ActionVideo lesson
-
59Testing the PipelineVideo lesson
-
60S3 Bucket SetupVideo lesson
-
61Authoring a Bucket PolicyVideo lesson
-
62Minor Changes in AWS CloudFront UIText lesson
-
63Cloudfront Distribution SetupVideo lesson
-
64A Bit More Cloudfront ConfigurationVideo lesson
-
65Key Creation Update + Reminder on AWS_DEFAULT_REGIONText lesson
-
66Creating and Assigning Access KeysVideo lesson
-
67Rerunning the BuildVideo lesson
-
68A Small ErrorVideo lesson
-
69Webpacks PublicPath SettingVideo lesson
-
70Manual Cache InvalidationsVideo lesson
-
71AWS Region with Automatic InvalidationText lesson
-
72Automated InvalidationVideo lesson
-
73Successful InvalidationVideo lesson
-
74Setting Up the Marketing DeploymentVideo lesson
-
75Reminder on the Production DomainVideo lesson
-
76Running the DeploymentVideo lesson
-
77Verifying DeploymentVideo lesson
-
78[Optional] A Production-Style WorkflowVideo lesson
-
79AWS Setup and Configuration CheetsheetText lesson
-
80Header ComponentText lesson
-
81Adding a HeaderVideo lesson
-
82Issues with CSS in MicrofrontendsVideo lesson
-
83CSS Scoping TechniquesVideo lesson
-
84Understanding CSS in JS LibrariesVideo lesson
-
85So Whats the Bug?Video lesson
-
86Fixing Class Name CollisionsVideo lesson
-
87Verifying the FixVideo lesson