Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Sustainable Angular Architectures: Strategic De...

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

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

More Decks by Manfred Steyer

See All by Manfred Steyer
Human in the Loop Beyond Approval: Toward True Collaboration @FrontMania 2026 in Utrecht
Avatar for Manfred Steyer manfredsteyer
PRO
0
22
Agentic UI: Where the Agent meets the User @FrontMania 2026 in Utrecht
Avatar for Manfred Steyer manfredsteyer
PRO
0
24
A2UI as an Architecture Question: Agentic UI Between AI Freedom and Control
Avatar for Manfred Steyer manfredsteyer
PRO
0
85
AI-Ready Angular Architectures Architecture as Executable Contract
Avatar for Manfred Steyer manfredsteyer
PRO
0
220
Nostalgia Meets Technology: Super Mario with TypeScript @BASTA 2026 in Mainz, Germany
Avatar for Manfred Steyer manfredsteyer
PRO
0
40
Beyond Chatbots: Agentic UI with Open Standards @AGNTcon 2026 in Amsterdam
Avatar for Manfred Steyer manfredsteyer
PRO
0
140
Next-Level Frontends: Agentic Web UIs Under the Hood
Avatar for Manfred Steyer manfredsteyer
PRO
0
100
Agentic UI with Open Standards @ngGraz Sep 2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
110
Agentic UI with Open Standards @GDG Salzburg, Bgl & Prishtina
Avatar for Manfred Steyer manfredsteyer
PRO
0
92

Other Decks in Programming

See All in Programming
Streamlitで実現する自然言語データアプリ開発
Avatar for Ayumu Yamaguchi ayumu_yamaguchi
1
340
CodeRabbitの効果検証と過ごしてみた3ヶ月
Avatar for armondando armondando
0
140
コードレビューのボトルネックを"する側"と"される側"の両面から解消する
Avatar for yub0n yub0n
2
1.5k
FreeBSDでZabbixを動かす
Avatar for kenkino kenkino
0
350
GemmaをJevのように使ってみる / Use Gemma like Jev
Avatar for Naoki Kishida kishida
5
670
AWS CDKのカスタムリソースでContinuum（旧Security Agent）を実装した話 | Implementing Continuum (formerly Security Agent) via AWS CDK Custom Resource
Avatar for アキキー | Akihisa Ikeda akihisaikeda
2
130
wkhtmltopdfの次どうするか問題2026
Avatar for Shinichi Maeshima willnet
2
1.8k
【加筆修正版】Laravel のアプリケーションをどこにデプロイするか #phpcon_ehime
Avatar for akase244 akase244
0
150
GitHubハンズオン講座 — 実務レベルのチーム開発のフローを身につけよう
Avatar for junhat6 junhat6
0
120
速習iPhone Duo対応
Avatar for 野瀬田　裕樹 yuukiw00w
2
960
機械に任せるテスト、人が見るテスト ⽣成AIで引き直した、運⽤保守フェーズの線引き
Avatar for KUSATAKE Daisuke dske104
0
160
MVNOの申込からeSIM開通までをiOSアプリでつなぐ- 本人確認・MNP・通信事業者基盤をまたぐ実装
Avatar for Sato Takeshi satotakeshi
0
540

Featured

See All Featured
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
220k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.3k
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
340
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
380
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
1k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
150k
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
4
4k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
109
250k
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
340
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
300

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