Micro-Frontends with React
Frontend development comes with a lot of challenges. Finding ways to simplify the development process and accelerate the execution of tasks is the goal of every development team. Having team members collaborate on tasks when working on a large and complex product is extremely difficult. Thankfully, microfrontends offer solutions to these challenges.
Microfrontends entail the splitting of frontend monoliths into several smaller, easier-to-manage pieces. This development architecture is crucial as it can improve the effectiveness and efficiency of developers working on frontend code. In this course, we will explore what micro frontends are with react, as well as their benefits, downsides and implementation options, and microfrontend architecture. We will also provide examples in order to help you grasp everything on a practical level.
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
Course Content:
Module1: Basics of Microfrontends
- What is Microfroneends
-
A Run-Time Integration
-
Build-Time vs Run-Time Integrations
-
Important Versions Update / Boilerplate
-
Project Setup
-
Generating Products
-
Some Background on Webpack
-
A Touch More on Webpack
-
Finishing the Product List
-
Important Versions Update for Container
-
Scaffolding the Container
- Implementing Module Federation
- Understanding Module Federation
- More on Module Federation
- Module Federation Terminology
- Understanding Configuration Options
- Scaffolding the Cart
- Cart Integration
- The Development Process
Module3: Sharing Dependencies Between Apps
- Using Shared Modules
- Async Script Loading
- Shared Module Versioning
- Singleton Loading
- Sub-App Execution Context
- Refactoring Products
- Consuming Remote Modules
- Refactoring Cart
- [Optional] A Funny Gotcha
Module4: Linking Multiple Apps Together
- Application Overview
- Tech Stack
- Requirements That Drive Architecture Choices
- Dependency Files
- Dependency Installation
- Initial Webpack Config
- Creating and Merging Development Config
- Running Marketing in Isolation
- Wiring Up React
- Marketing Components
- Adding the Pricing and Landing Pages
Module5: Generic Ties Between Projects:
- Assembling the App Component
- Assembling the Container
- Integration of the Container and Marketing
- Why Import the Mount Function?
- Generic Integration
- Reminder on Shared Modules
- Delegating Shared Module Selection
Module6: 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
- Required Change in the Container Action – Do not Skip
- Creating the Container Action
- Testing the Pipeline
Module7: Deployment to Amazon Web Services
- S3 Bucket Setup
- Authoring a Bucket Policy
- Minor Changes in AWS CloudFront UI
- Cloudfront Distribution Setup
- A Bit More Cloudfront Configuration
- Key Creation Update + Reminder on AWS_DEFAULT_REGION
- Creating and Assigning Access Keys
- Rerunning the Build
- A Small Error
- Webpacks Public Path Setting
Module8: Microfrontend -Specific AWS Config
- Manual Cache Invalidations
- AWS Region with Automatic Invalidation
- Automated Invalidation
- Successful Invalidation
- Setting Up the Marketing Deployment
- Reminder on the Production Domain
- Running the Deployment
- Verifying Deployment
- [Optional] A Production-Style Workflow
- AWS Setup and Configuration Cheetsheet
Module9: Handling CSS in Microfrontends
- Header Component
- 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
Module10: Implementing Multi -Tier Navigation
- Small Required Change to history Api Fallback
- 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
Module11: Performance Consideration
- Starting the Auth Project
- Component Files
- Adding Signin and Signup Forms
- A Deeper Dive on PublicPath
- Last Time for PublicPath
- Integrating Auth into the Container
- Adding Initial State to Memory History
- Lazily Loading SubApps
- Adding a Loading Bar
Module12: Using Other Frontend Frameworks
- Important Notes on Authentication
- Implementation Strategies
- Communicating Auth Changes
- Communicating Authentication State
- Allowing Signout
- Adding an Auth Deploy Config
- Verifying Deployment
Who this course is for:
Engineers looking to scale frontend apps
Course Prerequisite:
International Student Fee: 350$
job Interview Questions
Job Interview Preparation (Soft Skills Questions & Answers)
- Tough Open-Ended Job Interview Questions
- What to Wear for Best Job Interview Attire
- Job Interview Question- What are You Passionate About?
- How to Prepare for a Job Promotion Interview
🎥 Your FREE eLEARNING Courses (Click Here)
Internships, Freelance and Full-Time Work opportunities
Flexible Class Options
- Week End Classes For Professionals SAT | SUN
- Corporate Group Trainings Available
- Online Classes – Live Virtual Class (L.V.C), Online Training
Related Courses
Complete Web Development Bootcamp with React JS
Full Stack Web Developer Training (Python and Django)
Fundamentals Of Web Development
Complete React JS Developer Course
Microservices With Node.js and React
Next.js & React – The Complete Guide