Building a Microfrontends Application Combining Multiple Frameworks Using Module Federation

Explore the world of microfrontends in this 46-minute live coding demo that showcases building an application combining Angular, AngularJS, VueJS, and React using Webpack 5's Module Federation plugin. Dive into the concept of Micro-Frontends, which extends microservices principles to frontend development. Learn how Module Federation enables assembling remote files and modules, facilitating a new approach to creating Micro-Frontend applications. Discover the benefits of this architecture, including reduced complexity, easier versioning and deployment, and simplified migration of technical stacks. Follow along as the presenter demonstrates key concepts such as monolithic architecture, microservices, Domain-Driven Design, and the culture of automation. Gain insights into horizontal splitting, main principles of Webpack, creating remote entries, loading modules, and implementing Web Components. Witness practical examples of bundle size optimization, bug fixing, and upgrading to Angular 14, complete with Webpack configuration details.

Intro
Who am I
Who is Fred
Monolithic Architecture
How to split microservices
Domain Drive and Design
Microservice Approach
Culture of Automation
The Challenge
Horizontal Split
Main Principle
Webpack
When to use
Creating a remote entry
Loading a module
View
CrossCountry
Web Components
Bundle Size
Bug Fix
Switching to Angular 14
Webpack config