Micro Frontends Architecture Overview
Targeted at people getting into the space of micro frontends this workshop offers everything you need to know to get started.
Some essential properties are shared by all of our offered workshops.
- ✅ Condensed transfer of expert knowledge
- ✅ Interactive session to ask questions and form discussions
- ✅ Examples you can use as a blueprint and guideline for your projects
- ✅ Lots of practical examples, step-by-step exercises, and live coding
- ✅ Pair programming with the instructor
- ✅ Designed by Dr. Florian Rappl
Goals
- 🎯 Understanding when to use micro frontends and when not
- 🎯 Knowledge of existing implementation patterns, frameworks, libraries, and tools
- 🎯 Being able to architect and implement a suitable micro frontend solution
Prerequisites
- First experiences with React
- Decent knowledge of JavaScript
Location and Duration
- Remote and In-House
- 2 days
Upcoming Dates
Agenda
Theory block
- Micro frontend patterns
- Advantages and disadvantages
Guided work
- What advantages do we see, and which ones are important for us?
Theory block
- Domain decomposition
- Loose coupling of frontend components
Guided work
- Perform a domain decomposition in the context of a case study
Demo
- Introducing the tractor web shop example
- Code for the repository using different patterns (server-side composition, client-side composition, spa-composition)
Theory block
- Monorepo vs distributed repos
- Introduction to Webpack Module Federation
- Introduction to single-spa
Guided work
- Implementation of a new micro frontend for the tractor shop
Theory block
- Introduction to Piral
- Writing pilets, i.e., micro frontends in the context of Piral
Guided work
- Implementation of a pilet for the tractor shop
Conclusion
- Comparison of the patterns with a check list
- How do the different approaches compare against each other?
- What other combinations exist and may make sense?
- Comparison of the given solutions against the initial weights