Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Sustainable Angular Architectures: Strategic De...

Avatar for Manfred Steyer Manfred Steyer PRO
November 10, 2020
Programming
1
350

Sustainable Angular Architectures: Strategic Design with Nx Monorepos

Free eBook about this topic:
https://www.angulararchitects.io/book/

Avatar for Manfred Steyer

Manfred Steyer PRO

November 10, 2020
Tweet

More Decks by Manfred Steyer

See All by Manfred Steyer
All About Angular‘s New Signal Forms
Avatar for Manfred Steyer manfredsteyer
PRO
0
5
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
Avatar for Manfred Steyer manfredsteyer
PRO
0
150
Your Architecture as a Crime Scene? Forensic Analysis
Avatar for Manfred Steyer manfredsteyer
PRO
0
110
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
Avatar for Manfred Steyer manfredsteyer
PRO
0
230
Your Architecture as a Crime Scene: Forensic Analysis
Avatar for Manfred Steyer manfredsteyer
PRO
0
92
Reactive Thinking with Signals and the new Resource API
Avatar for Manfred Steyer manfredsteyer
PRO
0
200
Rethinking Angular: The Future with Signal Store and the New Resource API @w-jax 2025, Munich
Avatar for Manfred Steyer manfredsteyer
PRO
0
85
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
Avatar for Manfred Steyer manfredsteyer
PRO
0
130
The Missing Link in Angular's Signal Story: Resource API and httpResource
Avatar for Manfred Steyer manfredsteyer
PRO
0
170

Other Decks in Programming

See All in Programming
ELYZA_Findy AI Engineering Summit登壇資料_AIコーディング時代に「ちゃんと」やること_toB LLMプロダクト開発舞台裏_20251216
Avatar for 株式会社ELYZA elyza
2
260
LLMで複雑な検索条件アセットから脱却する！！ 生成的検索インタフェースの設計論
Avatar for po3rin po3rin
4
830
tsgolintはいかにしてtypescript-goの非公開APIを呼び出しているのか
Avatar for syumai syumai
7
2.2k
TUIライブラリつくってみた / i-just-make-TUI-library
Avatar for kazto kazto
1
390
Findy AI+の開発、運用におけるMCP活用事例
Avatar for starfish719 starfish719
0
1.2k
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
160
組み合わせ爆発にのまれない - 責務分割 x テスト
Avatar for HAL halhorn
1
150
tparseでgo testの出力を見やすくする
Avatar for utagawa kiki utgwkk
2
240
Go コードベースの構成と AI コンテキスト定義
Avatar for ANDPAD inc andpad
0
130
モデル駆動設計をやってみよう ワークショップ開催報告(Modeling Forum2025) / model driven design workshop report
Avatar for haru860 haru860
0
270
バックエンドエンジニアによる Amebaブログ K8s 基盤への CronJobの導入・運用経験
Avatar for suna-big sunabig
0
160
20251127_ぼっちのための懇親会対策会議
Avatar for kokamoto01 kokamoto01_metaps
2
440

Featured

See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
9
1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
286
14k
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.5k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
9.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.2k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
7.9k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
57k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
73
5k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
5.7k

Transcript

  1. @ManfredSteyer ManfredSteyer Manfred Steyer, ANGULARarchitects.io Sustainable Angular Architectures: Strategic Design

    with Nx Monorepos

  2. @ManfredSteyer

  3. @ManfredSteyer

  4. @ManfredSteyer

  5. @ManfredSteyer Methodology for bridging the gap b/w requirements and architecture/

    design

  6. @ManfredSteyer Monolith? Flight System Flight System

  7. @ManfredSteyer Booking Booking Check-in Check-in Boarding Boarding Luggage Luggage Sub-Domains

  8. @ManfredSteyer

  9. @ManfredSteyer

  10. @ManfredSteyer Manfred Steyer

  11. @ManfredSteyer

  12. @ManfredSteyer Monorepo Structure

  13. @ManfredSteyer Advantages Everyone uses the latest versions No version conflicts

  14. @ManfredSteyer Two Flavors • Like Workspaces/Solutions in different IDEs Project

    Monorepo • E. g. used at Google or Facebook Company-wide Monorepo

  15. @ManfredSteyer Moving back and forth Npm Registry

  16. @ManfredSteyer Tooling & Generator https://nrwl.io/nx

  17. @ManfredSteyer Visualize Module Structure

  18. @ManfredSteyer Creating a Workspace with NX npm install -g @angular/cli

    npm init nx-workspace myworkspace cd workspace ng generate app my-app ng generate lib my-lib ng serve --project my-app ng build --project my-app

  19. @ManfredSteyer

  20. @ManfredSteyer Booking Booking Boarding Boarding Shared Shared Feature Feature Feature

    Feature Feature Feature Feature Feature Feature Feature UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI Domain Domain Domain Domain Domain Domain Domain Domain Domain Domain Domain Domain Util Util Util Util Util Util Util Util Util Util Util Util Enterprise Monorepo Patterns, Nrwl 2018: https://tinyurl.com/y2jjxld7 @ManfredSteyer Smart Comp. Dumb Comp.

  21. @ManfredSteyer Booking Booking Boarding Boarding Shared Shared Feature Feature API

    API Feature Feature Feature Feature Feature Feature Feature Feature UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI Domain Domain Domain Domain Domain Domain Domain Domain Domain Domain Domain Domain Util Util Util Util Util Util Util Util Util Util Util Util @ManfredSteyer

  22. @ManfredSteyer Booking Booking Boarding Boarding Shared Shared Feature Feature API

    API Feature Feature Feature Feature Feature Feature Feature Feature UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI Domain Domain Domain Domain Domain Domain Domain Domain Domain Domain Domain Domain Util Util Util Util Util Util Util Util Util Util Util Util @ManfredSteyer

  23. @ManfredSteyer

  24. @ManfredSteyer • • •

  25. @ManfredSteyer

  26. @ManfredSteyer Distributed Cache 1) npm install @apployees-nx/level-task-runner -D 2) npm

    install mongodown -D 3) Configure @apployees-nx/level-task-runner in nx.json

  27. @ManfredSteyer

  28. @ManfredSteyer Works with Several Databases MongoDB Redis MySQL PostgreSQL …

  29. @ManfredSteyer Where‘s the Catch? Inofficial Solution Official Solution: Nx Cloud

    Nx Cloud: Far more possibilities

  30. @ManfredSteyer Free eBook https://ANGULARarchitects.io/book

  31. @ManfredSteyer

  32. • • •

  33. None

  34. @ManfredSteyer d Slides & Examples Public: Frankfurt, Munich, Vienna In-House:

    everywhere http://softwarearchitekt.at/workshops