Micro Frontends met React

De cursus Micro Frontends met React van SpiralTrain leert je hoe je moderne, modulaire frontend-oplossingen ontwerpt met React.

Introductie

De cursus Micro Frontends met React start met een overzicht van micro frontend concepten en de voordelen ten opzichte van monolithische user interfaces. Besproken worden ontwerpprincipes, toepassingsgebieden, en aandacht voor schaalbaarheid en onafhankelijke deployments.

React Recap

Daarna volgt een herhaling van de basis van React, waaronder JSX, componenten, props en state, React Hooks en event handling. Ook komen conditional rendering, routing met React Router en het gebruik van de Context API aan bod.

Architectuur

In dit onderdeel worden architectuurpatronen voor React micro frontends besproken. Onderwerpen zijn component composition, container- en presenterpatronen, gedeelde versus geïsoleerde state, routing over meerdere apps en de rol van een shell architectuur.

Module Federation

Deelnemers leren hoe Webpack Module Federation wordt opgezet in React projecten. Behandeld worden host- en remote-applicaties, dynamische imports, gedeelde dependencies, versiebeheer en best practices bij runtime-integratie.

Integratie

Dit module gaat in op integratiestrategieën met nadruk op UI-compositie, gedeelde navigatie, cross-app routing, authenticatie en autorisatie, en service-integratie binnen een micro frontend orchestration.

State Management

Vervolgens wordt state management behandeld met aandacht voor lokale state, prop drilling, gebruik van de Context API en het toepassen van Redux en Redux Toolkit voor het delen en synchroniseren van state tussen micro frontends.

Deployment

Bij deployment komen onderwerpen aan bod zoals CI/CD pipelines, onafhankelijke releases, omgevingsconfiguraties en containerisatie met Docker. Ook hosting in Kubernetes en de cloud, rollbackstrategieën en monitoring worden besproken.

Testing

Belangrijke testpraktijken komen aan bod, waaronder unit- en integratietesten met Jest en React Testing Library, end-to-end testen met Cypress, contract testing, testautomatisering en toegankelijkheidstesten.

Geavanceerde Onderwerpen

De cursus sluit af met geavanceerde onderwerpen zoals authenticatie- en autorisatiepatronen, foutafhandeling met error boundaries, performance optimalisatie, cachingstrategieën en toekomstige trends. In een hands-on project worden alle concepten geïntegreerd.

Doelgroep Cursus Micro Frontends met React

De cursus is bedoeld voor React ontwikkelaars en solution architecten die willen leren hoe ze schaalbare applicaties kunnen opzetten met een micro frontend architectuur.

Voorkennis Cursus Micro Frontends met React

Deelnemers dienen vertrouwd te zijn met JavaScript, TypeScript en React ontwikkeling. Ervaring met component based ontwerp, build pipelines en state management libraries is een pluspunt.

Uitvoering Training Micro Frontends met React

De training bestaat uit klassikale sessies gecombineerd met praktische labs onder begeleiding van een ervaren trainer. De nadruk ligt op hands-on oefeningen en het toepassen van de concepten in de praktijk.

Certificaat Micro Frontends met React

Na afloop ontvangen de deelnemers een certificaat van deelname aan de cursus Micro Frontends met React.

Modules

Module 1 : Introduction

• Micro Frontends Overview
• Why React Micro Frontends
• Monolith vs Distributed UI
• Benefits and Drawbacks
• Key Use Cases
• Design Principles
• Team Scalability
• Deployment Independence
• Real-World Examples
• Future Outlook

Module 2 : React Recap

• React Fundamentals
• JSX Syntax
• Components Basics
• Props and State
• React Hooks Intro
• Event Handling
• Conditional Rendering
• List Rendering
• React Router Basics
• Context API

Module 3 : Architecture

• Architecture Patterns
• Component Composition
• Container and Presenters
• Shared vs Isolated State
• Routing Across Apps
• Cross-App Communication
• Lazy Loading Routes
• Micro Frontend Shell
• Error Boundaries
• Resilience Patterns

Module 4 : Module Federation

• Webpack Federation Setup
• Host and Remote Apps
• Dynamic Imports
• Exposing Components
• Shared Dependencies
• Version Handling
• Runtime Integration
• Error Handling
• Configuration Files
• Best Practices

Module 5 : Integration

• UI Composition
• Shared Navigation
• Authentication Integration
• Authorization Handling
• Service Integration
• Shell Architecture
• Cross-App Routing
• Micro Frontend Orchestration
• Performance Monitoring
• Testing Integration

Module 6 : State Management

• State Management Basics
• Local Component State
• Prop Drilling Issues
• Context API Usage
• Redux Fundamentals
• Redux Toolkit
• Cross-App State Sharing
• State Synchronization
• Async State Handling
• Debugging Tools

Module 7 : Deployment

• Deployment Strategies
• CI/CD Pipelines
• Independent Deployments
• Version Management
• Docker with React
• Kubernetes Deployments
• Cloud Hosting Options
• Environment Configurations
• Rollback Strategies
• Monitoring and Alerts

Module 8 : Testing

• Unit Testing React
• Jest Framework
• React Testing Library
• Integration Testing
• End-to-End Testing
• Cypress Framework
• Contract Testing
• Test Automation
• Performance Testing
• Accessibility Testing

Module 9 : Advanced Topics

• Security Concerns
• Authentication Patterns
• Authorization Patterns
• Performance Optimization
• Error Boundary Handling
• Caching Strategies
• Accessibility Concerns
• Future Trends
• Case Studies
• Hands-On Project