DotNetDay18: Architectures for Huge Angular Based Enterprise Applications: Npm Packages, Monorepos and Micro Apps by Manfred Steyer

Nowadays, we build large enterprise applications with Angular. But how to best structure such projects to ensure long-term maintainability and reusability? This session provides multiple answers to this question. We explore how to split large projects into individually reusable npm packages and how to deploy them through an internal and public registry. As an alternative, we discuss the Monorepo approach that is used successfully by big companies like Google and Facebook and which compensates for some of the disadvantages of npm packages in internal projects. The use of micro apps is also discussed and implementation options, advantages and disadvantages are investigated. By the end the audience will know the options for architecting enterprise apps.

Original Source:
https://speakerdeck.com/manfredsteyer/architectures-for-huge-enterprise-applications-with-angular-talk-from-net-day-in-zurich-may-29th-2018

# Library DEMO - npm package with CLI 6
https://github.com/manfredsteyer/cli6-based-lib-demo

# Monorepo DEMO with Nx
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 Architectures for huge Enterprise Applications with Angular 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 Zürich: Fall In-House: Every time
3. @ManfredSteyer Typical Module Structure Page ▪ 3 AppModule … … … SharedModule Root Module Feature Modules Shared Module
4. @ManfredSteyer Contents • (npm-)Packages • Monorepos • Microservices
5. @ManfredSteyer npm Packages
6. @ManfredSteyer Structure of an npm Package • /node_modules • your-stuff • package.json
7. @ManfredSteyer Angular Package Format https://goo.gl/hjt7G3
8. @ManfredSteyer Lots of DETAILS
9. @ManfredSteyer ng-packagr
10. @ManfredSteyer Angular CLI 6+ supports Packages using ng-packagr
11. @ManfredSteyer Create Library with CLI >= 6 npm install -g @angular/cli ng new lib-project cd lib-project ng generate library logger-lib ng generate application playground-app ng serve --project playground-app ng build --project logger-lib
12. @ManfredSteyer Folder Structure
13. @ManfredSteyer Deployment
14. @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
15. @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
16. @ManfredSteyer npm Registries Nexus Artifactory Team Foundation Server Verdaccio npm i -g verdaccio verdaccio
17. @ManfredSteyer DEMO
18. @ManfredSteyer Advantages • Distribution • Versioning • Decoupling between lib authors and app authors
19. @ManfredSteyer Disadvantages • Distribution • Versioning • Decoupling between lib authors and app authors ;-)
20. @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?
21. @ManfredSteyer Monorepos
22. @ManfredSteyer Monorepo Structure
23. @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, …
24. @ManfredSteyer Two Flavors • Like Workspaces/Solutions in different IDEs Project Monorepo • E. g. used at Google or Facebook Company-wide Monorepo
25. @ManfredSteyer Moving back and forth
26. @ManfredSteyer Moving back and forth Npm Registry
27. @ManfredSteyer Tooling & Generator https://nrwl.io/nx
28. @ManfredSteyer Further Features of Nx • Just recompile changed apps • Format Code/ check format • Restrict which apps/libs can access which other libs • Visualize module structure and dependencies • Scaffold Boilerplate
29. @ManfredSteyer DEMO
30. @ManfredSteyer Advantages Sub Project Sub Project Sub Project Sub Project Sub Project Sub Project Sub Project Sub Project
31. @ManfredSteyer Disadvantages Sub Project Sub Project Sub Project Sub Project Sub Project Sub Project Sub Project Sub Project
32. @ManfredSteyer Disadvantages Sub Project Sub Project Sub Project Sub Project Sub Project Sub Project Sub Project Sub Project Team A Team B Contract
33. @ManfredSteyer Disadvantages More Coordination Blocking Tasks Complex Overall System One Architecture One Technology Stack Hard to change One size fits all?
34. @ManfredSteyer Microservices
35. @ManfredSteyer Idea System
36. @ManfredSteyer Idea µService µService µService
37. @ManfredSteyer Idea µApp µApp µApp
38. @ManfredSteyer Folie▪ 45 Pro Contra
39. @ManfredSteyer UI Composition w/ Hyperlinks µApp SPA µApp SPA µApp SPA
40. @ManfredSteyer
41. @ManfredSteyer
42. @ManfredSteyer
43. @ManfredSteyer µService Providing a (SPA based) Shell µApp µApp µApp Shell
44. @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
45. @ManfredSteyer Angular Elements in Angular >= 6
46. @ManfredSteyer MicroApp with Angular Elements @NgModule({ imports: [BrowserModule], declarations: [MicroAppComponent], bootstrap: [], entryComponents: [MicroAppComponent] }) export class AppModule { }
47. @ManfredSteyer MicroApp with Angular Elements @NgModule({ imports: [BrowserModule], declarations: [MicroAppComponent], bootstrap: [], entryComponents: [MicroAppComponent] }) export class AppModule { }
48. @ManfredSteyer MicroApp with Angular Elements @NgModule({ imports: [BrowserModule], declarations: [MicroAppComponent], bootstrap: [], entryComponents: [MicroAppComponent] }) export class AppModule { constructor(private injector: Injector) { } ngDoBootstrap() { } }
49. @ManfredSteyer MicroApp with Angular Elements @NgModule({ imports: [BrowserModule], declarations: [MicroAppComponent], bootstrap: [], entryComponents: [MicroAppComponent] }) export class AppModule { constructor(private injector: Injector) { } ngDoBootstrap() { const MicroAppElement = createNgElementConstructor( MicroAppComponent, { injector: this.injector }); customElements.define('micro-app', MicroAppElement); } }
50. @ManfredSteyer Loading MicroApps <script src="micro-app.bundle.js"></script> <micro-app></micro-app>
51. @ManfredSteyer DEMO
52. @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 • …
53. @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?
54. @ManfredSteyer Conclusion Packages: Reuse Monorepo: Structure Microservices: Decoupling CLI 6+ CLI 6+/ Nx Links, iframes, Web Comp.
55. @ManfredSteyer Contact and Downloads [mail] manfred.steyer@SOFTWAREarchitekt.at [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer d Zürich: Fall In-House: Every time Slides & Examples
56. @ManfredSteyer