Micro
Frontends
Back to workshops
Micro Frontends with Angular, Federation, and Web Components
This workshop is tailored for Angular Developers.
Summary
In this interactive workshop, you learn to build Micro Frontends with Angular. We discuss integrating Micro Frontends with Module Federation and Native Federation and how to share libraries and data at runtime. We discuss strategies for preventing version conflicts and using web components to implement multi-version and multi-framework scenarios.
Prerequisites
- Node in current LTS version
- Angular CLI (npm i -g @angular/cli)
- Git Commandline Client
- Editor, e.g. Visual Studio Code (free) or WebStorm/IntelliJ (commercial)
Goals
- Build and Integrate Micro Frontends: Learn the principles and practices of creating and integrating Micro Frontends using Angular and Federation.
- Share Libraries and Data at Runtime: Understand how to efficiently share libraries and data across Micro Frontends at runtime.
- Prevent Version Conflicts: Discover strategies and best practices to avoid version conflicts in a Micro Frontend architecture.
- Implement Multi-Version and Multi-Framework Scenarios: Gain the ability to use web components to handle multiple versions and frameworks within your Micro Frontend projects.
Dates
- Day 1 (2024-07-29): -
- Day 2 (2024-07-30): -
Details
This comprehensive workshop spans a total of 8 hours, thoughtfully spread across two days to accommodate participants from various time zones. The sessions begin in the afternoon in West Europe, making it convenient for attendees joining from the United States west coast in the morning.
Agenda
Day 1:
- Introduction to Micro Frontends: Concept, benefits, and real-world use cases.
- Setting Up the Environment: Ensuring all tools and dependencies are ready.
- Module Federation Basics: Understanding Module Federation and its role in Micro Frontends.
- Hands-On Lab 1: Creating your first Micro Frontend with Angular and Module Federation.
Day 2:
- Advanced Module Federation: Deep dive into advanced configurations and use cases.
- Native Federation: Exploring the differences and when to use Native Federation.
- Hands-On Lab 2: Implementing library and data sharing at runtime.
- Strategies for Version Conflicts: Best practices to avoid and handle conflicts.
- Web Components: Using web components to enable multi-version and multi-framework scenarios.
- Final Project: Integrating everything learned into a cohesive project.
Conclusion
By participating in this workshop, you will gain practical experience and a deeper understanding of Micro Frontends, empowering you to tackle complex frontend architectures with confidence and finesse. Don't miss this opportunity to elevate your Angular development skills to the next level!
Speakers