Microfrontends Monoreops & Trunkbased based
Download as PPTX, PDF1 like260 views
The document discusses the concepts of microfrontends, monorepos, and trunk-based development, emphasizing their core principles and architectural challenges. It highlights the benefits and drawbacks of using monorepos versus multi-repos as well as the importance of state management and routing in microfrontend architecture. Additionally, it reviews tools like Lerna and NX for managing monorepos and various frameworks that facilitate microfrontend implementations.
Microfrontends Monoreops & Trunkbased based
- 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
- 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
- 13. Microfrontends MonoRepos Trunk based Development
- 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
- 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
- 26. Core Team Feature 1 Team Feature 2 Team CODEOWNERS for folder level access control
- 29. Once your Code is Deployed to Production
- 30. Server Side Rendering (Options) /header /products /featured Kubernetes /products /header /featured
- 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