Micro
Frontends
Back to workshops
Tooling Independent Micro Frontends with Module Federation
This workshop is tailored for JavaScript Developers.
Summary
In this interactive workshop, you learn to build Micro Frontends using Module Federation without being restricted to the tooling. We start by looking at Module Federation v1 using Webpack - just to progress into Module Federation v2 and its changes. We then show how Module Federation can be used in rspack and Webpack before we look into esbuild and Vite. With each tooling we'll see how the reliance on Module Federation gets more and more decoupled from the tooling, allowing us to make choices on our own.
Prerequisites
- Node in current LTS version
- Git Commandline Client
- Editor, e.g. Visual Studio Code (free) or WebStorm/IntelliJ (commercial)
Goals
- Build and Integrate Micro Frontends: Master the techniques of creating and integrating Micro Frontends using Module Federation.
- Use Various Bundlers: Gain the flexibility to utilize bundlers other than Webpack 5, such as rspack, esbuild, and Vite, for your Micro Frontends.
- Understand Module Federation Versions: Learn the key differences and improvements between Module Federation v1 and v2.
Dates
- Day 1 (2024-07-22): -
- Day 2 (2024-07-23): -
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.
Detailed Agenda
Day 1:
- Introduction to Micro Frontends: Concept, benefits, and real-world use cases.
- Module Federation v1 with Webpack: Basics of Module Federation v1 and initial setup using Webpack.
- Transition to Module Federation v2: Understanding the changes and improvements in Module Federation v2.
- Hands-On Lab 1: Building your first Micro Frontend using Module Federation v1 and v2.
Day 2:
- Module Federation with rspack: Implementing Module Federation in rspack.
- Exploring esbuild and Vite: Utilizing Module Federation with esbuild and Vite, and understanding the decoupling from specific tooling.
- Hands-On Lab 2: Creating Micro Frontends with rspack, esbuild, and Vite.
- Tooling Independence: Strategies and best practices for achieving tooling independence with Module Federation.
- Final Project: Integrating everything learned into a cohesive project.
Conclusion
By participating in this workshop, you'll gain practical experience and a deep understanding of building Micro Frontends with Module Federation across different bundlers, equipping you with the skills to make independent and informed decisions in your development projects. Don't miss this chance to elevate your JavaScript development expertise!
Speakers