- Leren door doen
- Trainers met praktijkervaring
- Klassikale trainingen
- Gedetailleerd cursusmateriaal
- Duidelijke inhoudsbeschrijving
- Maatwerk inhoud mogelijk
- Trainingen die doorgaan
- Kleine groepen
De cursus Micro Frontends met React van SpiralTrain leert je hoe je moderne, modulaire frontend-oplossingen ontwerpt met React. Je oefent met het opsplitsen van complexe applicaties in micro frontends, het orkestreren ervan voor vloeiende gebruikerservaringen en het toepassen van patronen die autonome ontwikkeling en deployment mogelijk maken.
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.
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.
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.
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.
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.
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.
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.
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.
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.
De cursus is bedoeld voor React ontwikkelaars en solution architecten die willen leren hoe ze schaalbare applicaties kunnen opzetten met een micro frontend architectuur.
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.
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.
Na afloop ontvangen de deelnemers een certificaat van deelname aan de cursus Micro Frontends met React.
Module 1 : Introduction |
Module 2 : React Recap |
Module 3 : Architecture |
|
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 |
React Fundamentals JSX Syntax Components Basics Props and State React Hooks Intro Event Handling Conditional Rendering List Rendering React Router Basics Context API |
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 |
Module 5 : Integration |
Module 6 : State Management |
|
Webpack Federation Setup Host and Remote Apps Dynamic Imports Exposing Components Shared Dependencies Version Handling Runtime Integration Error Handling Configuration Files Best Practices |
UI Composition Shared Navigation Authentication Integration Authorization Handling Service Integration Shell Architecture Cross-App Routing Micro Frontend Orchestration Performance Monitoring Testing Integration |
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 |
Module 8 : Testing |
Module 9 : Advanced Topics |
|
Deployment Strategies CI/CD Pipelines Independent Deployments Version Management Docker with React Kubernetes Deployments Cloud Hosting Options Environment Configurations Rollback Strategies Monitoring and Alerts |
Unit Testing React Jest Framework React Testing Library Integration Testing End-to-End Testing Cypress Framework Contract Testing Test Automation Performance Testing Accessibility Testing |
Security Concerns Authentication Patterns Authorization Patterns Performance Optimization Error Boundary Handling Caching Strategies Accessibility Concerns Future Trends Case Studies Hands-On Project |
Deze bedrijven en instanties waren u al voor:
Deze bedrijven waren u voor:
