Opleiding: Micro Frontends with Angular
The course Micro Frontends with Angular from SpiralTrain teaches you how to design and implement scalable frontend architectures using Angular.Introduction
The course Micro Frontends with Angular starts with an overview of the differences between monolithic applications and micro frontends. Benefits, key principles, and real-world examples of micro frontend architectures are discussed.
Angular Recap
Next a short recap of core Angular concepts is given, including components and templates, dependency injection, modules, routing, and change detection, as a foundation for building micro frontends.
Architecture
This module covers architectural patterns and design choices such as domain-driven design, component communication, the use of an event bus, lazy loading, and versioning strategies.
Module Federation
Here participants learn to work with Webpack Module Federation, including host and remote applications, dynamic imports, shared libraries, and best practices for runtime integration.
Integration
This part focuses on integrating micro frontends into a complete application. Topics include routing integration, UI composition, cross-app communication, the role of a shell application, and handling authentication and authorization.
State Management
State management is addressed with an emphasis on challenges of shared state and the use of NgRx. Key topics are store setup, selectors, and reducers for consistent and maintainable state handling.
Deployment
Deployment strategies are discussed with attention to CI/CD pipelines, independent deployments, containerization with Docker, and hosting options in Kubernetes and the cloud.
Testing
This module introduces essential testing approaches such as unit and integration testing, end-to-end testing with Cypress, contract testing, and automation with performance checks.
Advanced Topics
The course concludes with advanced subjects such as security and access control, error handling with error boundaries, performance optimization, and a hands-on project that ties everything together.
Audience Course Micro Frontends with Angular
This course is intended for Angular developers, frontend engineers, and software architects who want to learn how to design applications using a micro frontend architecture.
Prerequisites Course Micro Frontends with Angular
Participants should have a good understanding of JavaScript, TypeScript, and Angular development. Familiarity with web components, modular architectures, and build tools is helpful.
Realization Training Micro Frontends with Angular
The course combines theoretical sessions with hands-on labs guided by an expert trainer. Real-world case studies are central to the training experience.
Micro Frontends with Angular Certificate
After completion, participants receive a certificate of participation in Micro Frontends with Angular.
Modules
Module 1 : Introduction
- Micro Frontends Overview
- Monolith vs Micro Frontends
- Benefits and Challenges
- Use Cases
- Key Principles
- Architecture Styles
- Integration Approaches
- Deployment Strategies
- Scaling Teams
- Real-World Examples
Module 2 : Angular Recap
- Angular Fundamentals
- TypeScript Essentials
- Components and Templates
- Services and Dependency
- Angular CLI
- Modules and Imports
- Data Binding
- Directives Basics
- Routing Essentials
- Angular Change Detection
Module 3 : Architecture
- Micro Frontend Concepts
- Architecture Patterns
- Domain-Driven Design
- Shared vs Isolated State
- Component Communication
- Event Bus Pattern
- Routing Strategies
- Lazy Loading
- Versioning Strategies
- Resilience Patterns
Module 4 : Module Federation
- Webpack Module Federation
- Host and Remote Apps
- Dynamic Imports
- Shared Libraries
- Version Compatibility
- Exposing Components
- Runtime Integration
- Configuration Files
- Error Handling
- Best Practices
Module 5 : Integration
- Routing Integration
- UI Composition
- Shared Navigation
- Shared Services
- Cross-App Communication
- Micro Frontend Shell
- Authentication Integration
- Authorization Handling
- Performance Monitoring
- Testing Integration
Module 6 : State Management
- State Management Intro
- Local Component State
- Shared State Issues
- NgRx Overview
- NgRx Store Setup
- Selectors and Actions
- Reducers and Effects
- Cross-App State Sharing
- State Synchronization
- State Debugging Tools
Module 7 : Deployment
- Deployment Strategies
- CI/CD Pipelines
- Independent Deployments
- Version Management
- Environment Configurations
- Containerization Basics
- Docker with Angular
- Kubernetes Deployments
- Cloud Hosting Options
- Rollback Strategies
Module 8 : Testing
- Unit Testing Angular
- Integration Testing
- E2E Testing Basics
- Jest with Angular
- Cypress Framework
- Contract Testing
- Test Automation
- Performance Testing
- Accessibility Testing
- Testing Best Practices
Module 9 : Advanced Topics
- Micro Frontend Security
- Authentication Patterns
- Authorization Patterns
- Error Boundary Handling
- Accessibility Concerns
- Performance Optimization
- Caching Strategies
- Future Trends
- Case Studies
- Hands-On Project
