English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 9 Hours | 3.25 GB
Build incredibly scalable apps with a microfrontend architecture
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
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
Table of Contents
The Basics of Microfrontends
1 What is a Microfrontend
2 Application Overview
3 Understanding Build-Time Integration
4 A Build-Time Integration
5 Project Setup
6 Generating Products
7 Some Background on Webpack
8 A Touch More on Webpack
9 Finishing the Product List
10 Scaffolding the Container
The Basics of Module Federation
11 Implementing Module Federation
12 Understanding Module Federation
13 More on Module Federation
14 Understanding Configuration Options
15 Scaffolding the Cart
16 Cart Integration
17 The Development Process
Sharing Dependencies Between Apps
18 Using Shared Modules
19 Async Script Loading
20 Shared Module Versioning
21 Singleton Loading
22 Sub-App Execution Context
23 Refactoring Products
24 Consuming Remote Modules
25 Refactoring Cart
26 [Optional] A Funny Gotcha
Linking Multiple Apps Together
27 Application Overview
28 Tech Stack
29 Requirements That Drive Architecture Choices
30 Dependency Files
31 Dependency Installation
32 Initial Webpack Config
33 Creating and Merging Development Config
34 Running Marketing in Isolation
35 Wiring Up React
36 Marketing Components
37 Adding the Pricing and Landing Pages
Generic Ties Between Projects
38 Assembling the App Component
39 Assembling the Container
40 Integration of the Container and Marketing
41 Why Import the Mount Function
42 Generic Integration
43 Reminder on Shared Modules
44 Delegating Shared Module Selection
Implementing a CICD Pipeline
45 Requirements Around Deployment
46 The Path to Production
47 Initial Git Setup
48 Production Webpack Config for Container
49 Production Webpack Config for Marketing
50 Understanding CICD Pipelines
51 Creating the Container Action
52 Testing the Pipeline
Deployment to Amazon Web Services
53 S3 Bucket Setup
54 Authoring a Bucket Policy
55 Cloudfront Distribution Setup
56 A Bit More Cloudfront Configuration
57 Creating and Assigning Access Keys
58 Rerunning the Build
59 A Small Error
60 Webpacks PublicPath Setting
Microfrontend-Specific AWS Config
61 Manual Cache Invalidations
62 Automated Invalidation
63 Successful Invalidation
64 Setting Up the Marketing Deployment
65 Reminder on the Production Domain
66 Running the Deployment
67 Verifying Deployment
68 [Optional] A Production-Style Workflow
Handling CSS in Microfrontends
69 Header Component
70 Adding a Header
71 Issues with CSS in Microfrontends
72 CSS Scoping Techniques
73 Understanding CSS in JS Libraries
74 So Whats the Bug
75 Fixing Class Name Collisions
76 Verifying the Fix
Implementing Multi-Tier Navigation
77 Inflexible Requirements Around Navigation
78 A Few Solutions
79 Which History Implementation
80 Surveying Our Current History Setup
81 Using Memory History
82 Why the Strange Results
83 Communication Between Apps
84 Communicating Through Callbacks
85 Syncing History Objects
86 Running Memory History in Isolation
87 Container to Child Communication
88 Using Browser History in Isolation
Performance Considerations
89 Starting the Auth Project
90 Component Files
91 Adding Signin and Signup Forms
92 A Deeper Dive on PublicPath
93 Last Time for PublicPath
94 Integrating Auth into the Container
95 Adding Initial State to Memory History
96 Lazily Loading SubApps
97 Adding a Loading Bar
Authentication in Microfrontends
98 Important Notes on Authentication
99 Implementation Strategies
100 Communicating Auth Changes
101 Communicating Authentication State
102 Allowing Signout
103 Adding an Auth Deploy Config
104 Verifying Deployment
Using Other Frontend Frameworks
105 Initial Dashboard Setup
106 A Touch More Config
107 Component Files
108 Showing the Dashboard
109 Integration with the Container
110 Protecting Access to the Dashboard
111 Deploying the Dashboard
112 Verifying Deployment
113 Wrapup
Resolve the captcha to access the links!