Mô tả

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:

  1. Author smaller, easier to understand codebases

  2. Use a different set of libraries for each sub-app - bring the best tool for the job!

  3. Deploy each portion separately - limit the chance of interrupting your users

  4. 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.

Bạn sẽ học được gì

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

Yêu cầu

  • Basic understanding of React

Nội dung khoá học

14 sections

The Basics of Microfrontends

13 lectures
Join Our Community!
00:07
Course Resources
00:38
What is a Microfrontend?
04:47
Application Overview
02:52
Understanding Build-Time Integration
03:59
A Run-Time Integration
02:59
Build-Time vs Run-Time Integrations
2 questions
Project Setup
02:52
Generating Products
02:38
Some Background on Webpack
05:37
A Touch More on Webpack
07:03
Finishing the Product List
01:28
Scaffolding the Container
05:57

The Basics of Module Federation

8 lectures
Implementing Module Federation
08:11
Understanding Module Federation
05:48
More on Module Federation
06:10
Module Federation Terminology
3 questions
Understanding Configuration Options
08:29
Scaffolding the Cart
06:44
Cart Integration
03:17
The Development Process
03:07

Sharing Dependencies Between Apps

9 lectures
Using Shared Modules
05:51
Async Script Loading
04:00
Shared Module Versioning
04:34
Singleton Loading
04:51
Sub-App Execution Context
05:01
Refactoring Products
06:48
Consuming Remote Modules
04:08
Refactoring Cart
04:03
[Optional] A Funny Gotcha
09:26

Linking Multiple Apps Together

11 lectures
Application Overview
05:18
Tech Stack
02:14
Requirements That Drive Architecture Choices
11:32
Dependency Files
00:20
Dependency Installation
01:08
Initial Webpack Config
07:12
Creating and Merging Development Config
03:15
Running Marketing in Isolation
03:02
Wiring Up React
06:49
Marketing Components
00:05
Adding the Pricing and Landing Pages
01:10

Generic Ties Between Projects

7 lectures
Assembling the App Component
05:14
Assembling the Container
07:21
Integration of the Container and Marketing
08:35
Why Import the Mount Function?
04:49
Generic Integration
05:44
Reminder on Shared Modules
05:05
Delegating Shared Module Selection
06:04

Implementing a CI/CD Pipeline

9 lectures
Requirements Around Deployment
07:31
The Path to Production
05:33
Initial Git Setup
04:06
Production Webpack Config for Container
11:45
Production Webpack Config for Marketing
04:46
Understanding CI:CD Pipelines
04:11
Required Change in the Container Action - Do not Skip
00:29
Creating the Container Action
09:55
Testing the Pipeline
03:17

Deployment to Amazon Web Services

10 lectures
S3 Bucket Setup
06:40
Authoring a Bucket Policy
02:59
Minor Changes in AWS CloudFront UI
00:38
Cloudfront Distribution Setup
03:54
A Bit More Cloudfront Configuration
02:30
Key Creation Update + Reminder on AWS_DEFAULT_REGION
01:10
Creating and Assigning Access Keys
07:47
Rerunning the Build
00:58
A Small Error
05:16
Webpacks PublicPath Setting
03:20

Microfrontend-Specific AWS Config

10 lectures
Manual Cache Invalidations
05:23
AWS Region with Automatic Invalidation
00:19
Automated Invalidation
06:48
Successful Invalidation
01:50
Setting Up the Marketing Deployment
03:06
Reminder on the Production Domain
05:48
Running the Deployment
00:58
Verifying Deployment
04:19
[Optional] A Production-Style Workflow
08:41
AWS Setup and Configuration Cheetsheet
01:53

Handling CSS in Microfrontends

8 lectures
Header Component
00:05
Adding a Header
03:34
Issues with CSS in Microfrontends
04:21
CSS Scoping Techniques
10:40
Understanding CSS in JS Libraries
06:29
So Whats the Bug?
06:47
Fixing Class Name Collisions
06:03
Verifying the Fix
01:44

Implementing Multi-Tier Navigation

13 lectures
Small Required Change to historyApiFallback
00:24
Inflexible Requirements Around Navigation
08:25
A Few Solutions
02:45
Which History Implementation?
06:15
Surveying Our Current History Setup
02:13
Using Memory History
03:57
Why the Strange Results?
04:42
Communication Between Apps
02:53
Communicating Through Callbacks
04:09
Syncing History Objects
07:09
Running Memory History in Isolation
02:12
Container to Child Communication
07:22
Using Browser History in Isolation
03:17

Performance Considerations

10 lectures
Starting the Auth Project
06:25
Component Files
00:05
Adding Signin and Signup Forms
03:36
A Deeper Dive on PublicPath
11:56
Small Required Change to historyApiFallback
00:22
Last Time for PublicPath
03:45
Integrating Auth into the Container
04:32
Adding Initial State to Memory History
07:51
Lazily Loading SubApps
07:52
Adding a Loading Bar
04:41

Authentication in Microfrontends

7 lectures
Important Notes on Authentication
04:48
Implementation Strategies
01:30
Communicating Auth Changes
04:58
Communicating Authentication State
05:48
Allowing Signout
01:40
Adding an Auth Deploy Config
03:15
Verifying Deployment
01:36

Using Other Frontend Frameworks

9 lectures
Initial Dashboard Setup
07:13
A Touch More Config
03:14
Component Files
00:05
Showing the Dashboard
05:35
Integration with the Container
06:01
Protecting Access to the Dashboard
06:00
Deploying the Dashboard
02:34
Verifying Deployment
01:08
Wrapup
03:18

Bonus!

1 lectures
Bonus!
00:33

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.