Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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
Your Architecture as a Crime Scene: Forensic Analysis
Avatar for Manfred Steyer manfredsteyer
PRO
0
100
Rethinking Data Access: The New httpResource in Angular
Avatar for Manfred Steyer manfredsteyer
PRO
0
270
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
Avatar for Manfred Steyer manfredsteyer
PRO
0
170
JavaScript as a Crime Scene Forensic Analysis
Avatar for Manfred Steyer manfredsteyer
PRO
0
76
Modern Angular with Signals and Signal Store: New Rules for Your Architecture @jax2025 in Mainz, Germany
Avatar for Manfred Steyer manfredsteyer
PRO
0
160
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
Avatar for Manfred Steyer manfredsteyer
PRO
0
92
Your Architecture as a Crime Scene Forensic Analysis
Avatar for Manfred Steyer manfredsteyer
PRO
0
63
Live Coding: Migrating an Application to Signals
Avatar for Manfred Steyer manfredsteyer
PRO
0
170
The Missing Link in Angular’s Signal Story: Resource API and httpResource
Avatar for Manfred Steyer manfredsteyer
PRO
0
180

Other Decks in Programming

See All in Programming
Passkeys for Java Developers
Avatar for Yoshikazu Nojima ynojima
2
830
無関心の谷
Avatar for kanayannet kanayannet
0
160
Perlで痩せる
Avatar for Yuuki Shimizu yuukis
1
680
RubyKaigiで得られる10の価値 〜Ruby話を聞くことだけが RubyKaigiじゃない〜
Avatar for tomohiko.kuzuba tomohiko9090
0
140
Using AI Tools Around Software Development
Avatar for inouehi inouehi
0
1.2k
GoのWebAssembly活用パターン紹介
Avatar for syumai syumai
3
9.8k
Practical Tips and Tricks
for Working with 
Compose Multiplatform Previews (mDevCamp 2025)
Avatar for István Juhos stewemetal
0
120
ワンバイナリWebサービスのススメ
Avatar for mackee mackee
10
7.7k
Devinで実践する！AIエージェントと協働する開発組織の作り方
Avatar for Masahiro Nishimi masahiro_nishimi
6
3k
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
Avatar for shiro seike seike460
PRO
1
120
SODA - FACT BOOK
Avatar for SODA inc. sodainc
1
810
実はすごいスピードで進化しているCSS
Avatar for Hayato Yokoyama hayato_yokoyama
0
110

Featured

See All Featured
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
32
5.9k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
22
3.5k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
206
24k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
68
11k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
331
22k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
329
21k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
2.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
280
13k

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