Microfrontends with React A Complete Developers Guide
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
Requirements
Basic understanding of React
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 codebasesUse 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 usersAllow each of your engineering teams to work independentlyThis 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 worldUnderstand when to use microfrontendsLink multiple apps together using a tiered routing systemScope CSS on your page to prevent cross-app contaminationAvoid sharing state between apps to promote isolationDeploy each portion of your app independently to avoid production bugsScaffold a CI/CD pipeline to automate your release processUtilize multiple front-end frameworks in the same appMaximize performance by using module federationI 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.
Overview
Section 1: The Basics of Microfrontends
Lecture 1 Join Our Community!
Lecture 2 Course Resources
Lecture 3 What is a Microfrontend?
Lecture 4 Application Overview
Lecture 5 Understanding Build-Time Integration
Lecture 6 A Run-Time Integration
Lecture 7 Important Versions Update / Boilerplate
Lecture 8 Project Setup
Lecture 9 Generating Products
Lecture 10 Some Background on Webpack
Lecture 11 A Touch More on Webpack
Lecture 12 Finishing the Product List
Lecture 13 Important Versions Update for Container
Lecture 14 Scaffolding the Container
Section 2: The Basics of Module Federation
Lecture 15 Implementing Module Federation
Lecture 16 Understanding Module Federation
Lecture 17 More on Module Federation
Lecture 18 Understanding Configuration Options
Lecture 19 Scaffolding the Cart
Lecture 20 Cart Integration
Lecture 21 The Development Process
Section 3: Sharing Dependencies Between Apps
Lecture 22 Using Shared Modules
Lecture 23 Async Script Loading
Lecture 24 Shared Module Versioning
Lecture 25 Singleton Loading
Lecture 26 Sub-App Execution Context
Lecture 27 Refactoring Products
Lecture 28 Consuming Remote Modules
Lecture 29 Refactoring Cart
Lecture 30 [Optional] A Funny Gotcha
Section 4: Linking Multiple Apps Together
Lecture 31 Application Overview
Lecture 32 Tech Stack
Lecture 33 Requirements That Drive Architecture Choices
Lecture 34 Dependency Files
Lecture 35 Dependency Installation
Lecture 36 Initial Webpack Config
Lecture 37 Creating and Merging Development Config
Lecture 38 Running Marketing in Isolation
Lecture 39 Wiring Up React
Lecture 40 Marketing Components
Lecture 41 Adding the Pricing and Landing Pages
Section 5: Generic Ties Between Projects
Lecture 42 Assembling the App Component
Lecture 43 Assembling the Container
Lecture 44 Integration of the Container and Marketing
Lecture 45 Why Import the Mount Function?
Lecture 46 Generic Integration
Lecture 47 Reminder on Shared Modules
Lecture 48 Delegating Shared Module Selection
Section 6: Implementing a CI/CD Pipeline
Lecture 49 Requirements Around Deployment
Lecture 50 The Path to Production
Lecture 51 Initial Git Setup
Lecture 52 Production Webpack Config for Container
Lecture 53 Production Webpack Config for Marketing
Lecture 54 Understanding CI:CD Pipelines
Lecture 55 Required Change in the Container Action – Do not Skip
Lecture 56 Creating the Container Action
Lecture 57 Testing the Pipeline
Section 7: Deployment to Amazon Web Services
Lecture 58 S3 Bucket Setup
Lecture 59 Authoring a Bucket Policy
Lecture 60 Minor Changes in AWS CloudFront UI
Lecture 61 Cloudfront Distribution Setup
Lecture 62 A Bit More Cloudfront Configuration
Lecture 63 Reminder on the AWS_DEFAULT_REGION
Lecture 64 Creating and Assigning Access Keys
Lecture 65 Rerunning the Build
Lecture 66 A Small Error
Lecture 67 Webpacks PublicPath Setting
Section 8: Microfrontend-Specific AWS Config
Lecture 68 Manual Cache Invalidations
Lecture 69 AWS Region with Automatic Invalidation
Lecture 70 Automated Invalidation
Lecture 71 Successful Invalidation
Lecture 72 Setting Up the Marketing Deployment
Lecture 73 Reminder on the Production Domain
Lecture 74 Running the Deployment
Lecture 75 Verifying Deployment
Lecture 76 [Optional] A Production-Style Workflow
Lecture 77 AWS Setup and Configuration Cheetsheet
Section 9: Handling CSS in Microfrontends
Lecture 78 Header Component
Lecture 79 Adding a Header
Lecture 80 Issues with CSS in Microfrontends
Lecture 81 CSS Scoping Techniques
Lecture 82 Understanding CSS in JS Libraries
Lecture 83 So Whats the Bug?
Lecture 84 Fixing Class Name Collisions
Lecture 85 Verifying the Fix
Section 10: Implementing Multi-Tier Navigation
Lecture 86 Small Required Change to historyApiFallback
Lecture 87 Inflexible Requirements Around Navigation
Lecture 88 A Few Solutions
Lecture 89 Which History Implementation?
Lecture 90 Surveying Our Current History Setup
Lecture 91 Using Memory History
Lecture 92 Why the Strange Results?
Lecture 93 Communication Between Apps
Lecture 94 Communicating Through Callbacks
Lecture 95 Syncing History Objects
Lecture 96 Running Memory History in Isolation
Lecture 97 Container to Child Communication
Lecture 98 Using Browser History in Isolation
Section 11: Performance Considerations
Lecture 99 Starting the Auth Project
Lecture 100 Component Files
Lecture 101 Adding Signin and Signup Forms
Lecture 102 A Deeper Dive on PublicPath
Lecture 103 Last Time for PublicPath
Lecture 104 Integrating Auth into the Container
Lecture 105 Adding Initial State to Memory History
Lecture 106 Lazily Loading SubApps
Lecture 107 Adding a Loading Bar
Section 12: Authentication in Microfrontends
Lecture 108 Important Notes on Authentication
Lecture 109 Implementation Strategies
Lecture 110 Communicating Auth Changes
Lecture 111 Communicating Authentication State
Lecture 112 Allowing Signout
Lecture 113 Adding an Auth Deploy Config
Lecture 114 Verifying Deployment
Section 13: Using Other Frontend Frameworks
Lecture 115 Initial Dashboard Setup
Lecture 116 A Touch More Config
Lecture 117 Component Files
Lecture 118 Showing the Dashboard
Lecture 119 Integration with the Container
Lecture 120 Protecting Access to the Dashboard
Lecture 121 Deploying the Dashboard
Lecture 122 Verifying Deployment
Lecture 123 Wrapup
Section 14: Bonus!
Lecture 124 Bonus!
Engineers looking to scale frontend apps
Course Information:
Udemy | English | 9h 7m | 4.09 GB
Created by: Stephen Grider
You Can See More Courses in the Developer >> Greetings from CourseDown.com