Micro Frontends in practice - FrontCon 2020

Micro Frontends in practice: the easy and the hard parts

One of the trending topics in the JavaScript ecosystem is definitely “Micro Frontends”.

Do they really help to build professional web applications?
- Are they always the best choice?
- Do leading frameworks like Angular directly support them?
- Do Micro Frontends and global State Management work well together?
- How do single Micro Apps react to URL changes?

I will answer all these questions and provide practical insights on features directly supported by Angular and show possible solutions for those parts that have to be implemented individually.

Transcript

1. Micro Frontends in practice Michael Zikes, ANGULARarchitects.io The easy and the hard parts
2. Micro Frontends Architecture State Management Responsive Design What this talk is about Angular support Routing
3. About Michael • Michael Zikes ANGULARarchitects.io • Trainings and Consultancy • Focus on Angular Public: Frankfurt, Munich, Vienna In-House: everywhere angulararchitects.io/angular-workshops Michael Zikes (@MikeZks)
4. What are those Micro Frontends everybody is talking about? ?
5. Definition of Micro Frontends • Aim to develop self-contained apps or features • Can be composed and interact with each other • Share a consistent user experience • Play together with Micro Services • Lead to independent developer teams
6. Architecture targets • Independent builds • Independent deployment • Runtime integration • Multiple frontend frameworks/libraries • Different dependency versions • Possible but hard to manage
7. Are Micro Frontends always the best choice for your applications? ?
8. Micro Frontends & Web Components • Frontend Monolith • Big application, hard to maintain • Micro Frontends • Small self-contained apps or features • Build Monolith • Whole application is known at build time • Target to have self-contained apps or features as well • Reuse of already built libraries w/o changes • Web Components • Dynamic runtime integration possible • Independent builds & deployment possible
9. Do Web Components really help to build professional web applications? ?
10. Web Components & professional Architecture? • Help to achieve certain architecture targets • Requires a mature Application Shell environment to work smoothly • Downsides of dynamic runtime integration • Leads to less predictability • Leads to a higher E2E testing effort • Consider alternatives • w/o runtime integration requirement • w/o need for different technologies • use a Build Monolith instead
11. Do leading frameworks like Angular directly support Micro Frontends? ?
12. Angular framework support • Micro Frontends in a Build Monolith • Default strategy in Angular • Everything is known at build time • Micro Frontends as Web Components • Angular Web Components with @angular/elements • Almost no direct Angular support for Web Component Micro Apps • Custom implementations necessary • Custom builders & single bundle (see ngx-build-plus)
13. Do Micro Frontends and global State Management work well together? ?
14. Global State Management • Is standalone operation of the Micro App required? • Can an App Shell environment with central services be expected? • Majority of cases: • Choose a self-contained Micro App with a small, well defined public interface • Exchange state with data bindings, not with dependency injection • Related to Redux State Management • This may lead to more than one Root-Store w/i the same window object • Redux DevTools and @ngrx/store-devtools support more than one store
15. Do I need to consider changes related to Responsive Design? ?
16. Responsive Design • Bootstrap Grid System uses media queries • Does the App Shell control the Micro App size? • How does your Micro App react if the window viewport stays the same, but the space for the Micro App changes? • Consider to use CSS Flexbox or CSS Grid instead
17. How do single Micro Apps react to URL changes? ?
18. Routing • Independent builds lead to more than one Angular forRoot-Router • Other frameworks/libraries may change the URL as well • Angular overwrites URLs resp. unknown routes lead to errors • URL overlapping b/w Micro Apps • Custom implementation necessary to avoid this • Central definition necessary, that needs to be respected in every Micro App • Possible solution: Aux Routes resp. named Router Outlets
19. ! • Web Components not always best • Plan to develop a mature App Shell • Think of Responsive Design • How to integrate & communicate • URL changes are critical Key takeaways
20. What happens in near future? Tell me more! ?
21. Follow up • Shared dependencies with Webpack Module Federation • https://www.angulararchitects.io/aktuelles/the-microfrontend-revolution-module-federation-in-webpack-5 • NX library brings a lot of useful features • https://nx.dev/angular • UMD bundles could disappear from APF • ES6 community alternative possible • Angular Web Components Router • Upcoming community project to patch default behavior (Twitter @MikeZks) • Follow the development of @brandontroberts declarative router • https://github.com/brandonroberts/angular-routing
22. [web] ANGULARarchitects.io [email] michael.zikes@intauria.com [twitter] Michael Zikes (@MikeZks) Slides Contact and Downloads Public: Frankfurt, Munich, Vienna In-House: everywhere angulararchitects.io/angular-workshops