Slides from jsconf.be 2018 in Belgium: A Software Architect's Approach towards SPA-Based Microfrontends

# Monorepo DEMO
https://github.com/manfredsteyer/monorepo-demo

# Micro Apps with Angular Elements DEMO
https://github.com/manfredsteyer/angular-microapp
Have a look at the README.md

# Blog Post about Micro Apps with Angular Elements
http://www.softwarearchitekt.at/post/2018/05/04/microservice-clients-with-web-components-using-angular-elements-dreams-of-the-near-future.aspx

# More Information & Workshops
http://www.softwarearchitekt.at/

Transcript

1. @BASTAcon & @ManfredSteyer A Software Architect's Approach towards SPA-Based Microfrontends Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer
2. @BASTAcon & @ManfredSteyer About me… • Manfred Steyer • SOFTWAREarchitekt.at • Angular Trainings and Consultancy • Google Developer Expert (GDE) Page ▪ 2 Manfred Steyer Munich: Summer In-House: Every time
3. @ManfredSteyer Contents • Traditional (Monolitic) Approaches • Approaches for Microservice Architectures • Choosing a strategy
4. @ManfredSteyer Monolitic Approaches
5. @ManfredSteyer Monolitic Approaches Npm Packages Monorepo
6. @ManfredSteyer npm Packages
7. @ManfredSteyer Structure of an npm Package • /node_modules • your-stuff • package.json
8. @ManfredSteyer Publishing to npm Registry • Increment version in package.json • npm version [patch | minor | major | version] • ng build --project logger-lib • npm publish --registry http://localhost:4873 • npm install --registry http://localhost:4873
9. @ManfredSteyer Alternatives for setting the Registry • Global: npm set registry http://localhost:4873 • Default: registry.npmjs.org • npm get registry • Project: .npmrc in project root
10. @ManfredSteyer npm Registries Nexus Artifactory Team Foundation Server Verdaccio npm i -g verdaccio verdaccio
11. @ManfredSteyer
12. @ManfredSteyer Advantages • Distribution • Versioning • Decoupling between lib authors and app authors
13. @ManfredSteyer Disadvantages • Distribution • Versioning • Decoupling between lib authors and app authors ;-)
14. @ManfredSteyer Disadvantages Distribution • Annoying within project • Prevents gritting further libs Versioning • Old versions • Conflicts • How to force devs to use latest version? Decoupling • What if lib authors == app authors?
15. @ManfredSteyer Monorepos
16. @ManfredSteyer Project Monorepo
17. @ManfredSteyer Advantages Everyone uses the latest versions No version conflicts No burden with distributing libs Creating new libs: Adding folder Experience: Successfully used at Google, Facebook, …
18. @ManfredSteyer Moving back and forth
19. @ManfredSteyer Moving back and forth Npm Registry
20. @ManfredSteyer Alternative Git Repo Git-based Sub-Module (read only or read/write)
21. @ManfredSteyer DEMO
22. @ManfredSteyer Advantages Sub Project Sub Project Sub Project Sub Project Sub Project Sub Project Sub Project Sub Project
23. @ManfredSteyer Disadvantages Sub Project Sub Project Sub Project Sub Project Sub Project Sub Project Sub Project Sub Project
24. @ManfredSteyer Disadvantages Sub Project Sub Project Sub Project Sub Project Sub Project Sub Project Sub Project Sub Project Team A Team B Contract
25. @ManfredSteyer Disadvantages More Coordination Blocking Tasks Complex Overall System One Architecture One Technology Stack Hard to change One size fits all?
26. @ManfredSteyer Microservices
27. @ManfredSteyer Idea System
28. @ManfredSteyer Idea µService µService µService
29. @ManfredSteyer Idea µApp µApp µApp
30. @ManfredSteyer Folie▪ 31 Pro Contra
31. @ManfredSteyer UI Composition w/ Hyperlinks µApp SPA µApp SPA µApp SPA
32. @ManfredSteyer
33. @ManfredSteyer
34. @ManfredSteyer
35. @ManfredSteyer µService Providing a (SPA based) Shell µApp µApp µApp Shell
36. @ManfredSteyer Some Options for Shells iframes ✓ Strong Isolation ✓ Straight forward  Overlapping Elements?  Lots of page requests?  SEO? Web Components  Standard  Custom Elements  <app-a></app-a>  <app-b></app-b>  Shadow DOM: CSS Isolation  Nesting  Framework Support? Bootstrapping different SPAs ✓ Similar to Web Components  No Standard  Nesting isn’t possible
37. @ManfredSteyer Loading MicroApps as Web Components <script src="micro-app-a.bundle.js"></script> <script src="micro-app-b.bundle.js"></script> <micro-app-a></micro-app-a> <micro-app-b></micro-app-b> Fallback: Load different Spas here Lazy Loading
38. @ManfredSteyer DEMO
39. @ManfredSteyer Evaluation
40. @ManfredSteyer You need to know your architectural goals! Evaluate them against architecture candidates
41. @ManfredSteyer Separate Deployment One SPA Optimized Bundles …           
42. @ManfredSteyer Some General Advice for Macro-Architecture Shared state, communication/ navigation b/w apps Hyperlinks Legacy Apps or *very very* strong isolation needed? iframes Need separate Deployment/ mix Technologies Web Components "Majestic Monolith" w/ Libs and Monorepo little much yes no yes no Not a good fit for customer facing Micro-Architecture: • Libs/ npm packages • Monorepo • Web Components • …
43. @ManfredSteyer Blog • A Software Architect's Approach Towards Using Angular (And SPAs In General) For Microservices Aka Microfrontends • A Lightweight And Solid Approach Towards Micro Frontends (Micro Service Clients) With Angular And/Or Other Frameworks • Microservice Clients With Web Components Using Angular Elements: Dreams Of The (Near) Future?
44. @ManfredSteyer Conclusion Packages: Reuse Monorepo: Structure Microservices: Decoupling iframes Web Components Bootstrap multiple SPAs
45. @ManfredSteyer Contact and Downloads [mail] manfred.steyer@SOFTWAREarchitekt.at [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer d Zürich: Fall In-House: Every time Slides & Examples