Slides from my talk at the Coimbatore frontend Meetup on how Microfrontends MonoRepos and Trunk based Development go hand in hand with each other

1. Microfrontends, MonoRepos, &
Trunk based Development
1
Vinci Rufus
@areai51

2. 2
Vinci Rufus
• Sr. Director Technology Publicis Sapient London
• Ex-Google Developer Expert for Web & Angular
• Been playing with JS frameworks since 2012
• Wrote a book on AngularJS
• Spend a lot of time with React JS
• Love Svelte
• Learning Rust

3. Are SPAs really that great?

7. Monoliths on top of Microservices
Microservices
Single Page Apps (SPA)

8. Microfrontends the way forward

9. Microfrontends on Microservices
Microservices
Microfrontends

10. Core Principles of MicroFrontend.
• Breaking down your App by Domain Context
• Deploy Each Micro App Independently
• Isolate Failure
• Highly Observable
• Culture of Automation

11. Types of Microfrontends
Every Component
is MicroApp
Every Page is
MicroApp
Collection of
Routes is
MicroApp

12. Microfrontends
MFE
MicroApps Pattern
MAP


13. Microfrontends MonoRepos Trunk based
Development

14. Routing
Independent
Deployments
Sharing State
Common Architectural Challenges

15. Routing
Single SPA
• Basic Router to bootstrap JS
bundles
• You write JS
• Not a lot of community support
• Not seen anyone using it in
production
• Battle tested server / reverse proxy
• Extensively used in production for
different purposes.
• Configuring would need decent
nginx config skills

16. State Management
Don’t share State between the different MicroApps

17. Individual Deployments

18. High Level Microfrontend Architecture
Nginx - Applevel Routing
GraphQL -Applevel State
MicroApp1
MicroApp2
MicroApp3
MicroApp4
Microservices

19. MonoRepos
19

20. A Single Repo for the entire
Organisation
Splitting a repo into a
MonoRepo

21. Multi-repo vs MonoRrepo
21
Multi Repos Mono Repos
• Maximum Flexibility
• Module upgrades can be deferred / delayed.
• Breaking changes needs to be fixed by the
respective repo owners
• Code Ownerships easily setup at a Repo Level.
• Build times can be kept Optimal as number of
repositories grow.
• Setting Up CI & CD is relatively easy.
• Teams get siloed and diverge very quickly
• Intentionally Restricting Flexibility.
• Module upgrades, have a direct impact on all
apps.
• Breaking changes needs to be fixed by the Core
Team.
• As more number of apps get added to the Repo
Checkout and build times Increase.
• Setting up CI & CD is complex. Have to make
use of Caching
• Encourages InnerSource Collaboration and
learning.

22. 22
Lerna Nx

23. • Most advanced set of tools for MonoRepos.
• Generators and Schematics to build Angular
React, Node Apps.
• Scaffolds Storybook
• Scaffolds out Cypress for E2E testing
23

24. NX Folder Structure

26. Core Team
Feature 1 Team
Feature 2 Team
CODEOWNERS
for folder level
access control

27. Trunk Based Development
27

28. During Active Development

29. Once your Code is Deployed to Production

30. Server Side Rendering (Options)
/header
/products
/featured
Kubernetes
/products
/header
/featured

31. Microfrontends
Src: https://martinfowler.com/bliki/MicroservicePremium.html

32. Nitro2 Nitro3
Component Level Micro App
• Lerna
• TailorJS
• Firebase Cloud Functions (SSR)
Github.com/xt/nitro2
Page Level Micro App
• Nrwl NX
• Next.js, React
• Kubernetes
Github.com/areai51/nitro3

34. thank you
34
@areai51
github.com/xt/nitro2
github.com/areai51/nitro3