Overview
React is an open source Javascript library used for building user interfaces for web applications. Micro Frontend is an architecture wherein semi-independent fragments of the web application UIs (front ends) are developed, tested, and deployed independently. It resembles the back-end architecture of microservices.
This instructor-led, live training (online or onsite) is aimed at developers who wish to use React to develop, test, and deploy micro-frontends for large web applications, making them highly-scalable, technology agnostic, and easier to maintain.
By the end of this training, participants will be able to:
- Set up the necessary development environment to start developing micro-frontends with React.
- Understand the architecture, core concepts, and advantages of micro-frontends.
- Learn how to build, integrate, test, and deploy micro-frontends with React.
- Implement micro-frontends with module federation.
- Apply the CI/CD pipeline production-grade workflow.
- Know the common issues with CSS in micro-frontends and how to fix them.
- Get insights on how to implement other frontend frameworks with React.
Format of the Course
- Interactive lecture and discussion.
- Lots of exercises and practice.
- Hands-on implementation in a live-lab environment.
Course Customization Options
- To request a customized training for this course, please contact us to arrange.
Requirements
- Experience with React
- Javascript programming experience
Audience
- Developers
Course Outline
Introduction
- Overview of micro-frontend architecture and core concepts
- Fundamentals of React
Getting Started
- Setting up the development environment
- Basics of module federation
- Other frontend frameworks
Building Micro Frontends
- Creating a project structure using React
- Converting to micro-frontends
- Modifying micro-frontend apps
- Sharing dependencies and linking multiple apps
Integrating Host/Containers with Micro Frontends
- Build-time vs run-time integrations
- Assembling the app components
Working with CSS in Micro Frontends
- Modifying the header component
- Understanding CSS in JS libraries
- Common issues with CSS in Micro Frontends
- Debugging and fixing issues
Configuring Authentication in Micro Frontends
- Implementation approaches
- Communicating authentication changes
- Adding an auth deploy config
Deploying Micro Frontends
- Requirements for deployment
- Implementing the CI/CD pipeline
- Testing the pipeline
- Running the deployment
- Verifying the deployment
Troubleshooting
Summary and Next Steps