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

Sustainable Angular Architectures: Strategic De...

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Manfred Steyer Manfred Steyer PRO
November 10, 2020
Programming
370
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
Signal Forms: Details & Live Coding @enterJS 2026 in Mannheim
Avatar for Manfred Steyer manfredsteyer
PRO
0
160
Strategic Design in the Frontend: Moduliths & Micro Frontends @DDDEurope
Avatar for Manfred Steyer manfredsteyer
PRO
0
110
Agentic UI
Avatar for Manfred Steyer manfredsteyer
PRO
0
180
Signal Forms: Beyond the Basics @ngBaguette 2026 in Paris
Avatar for Manfred Steyer manfredsteyer
PRO
0
260
Agentic UI beyond Chats Architecture Patterns & Open Standards @ngMunich 05/2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
220
Agentic AI in the Frontend: Architectures with Open Standards @iJS London 2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
150
Agentic AI & UI: Arcitecture, HITL, Emerging Standards
Avatar for Manfred Steyer manfredsteyer
PRO
0
180
Agentic UI Requires Standards: AG-UI, A2UI, and MCP Apps Work Together @Angular London
Avatar for Manfred Steyer manfredsteyer
PRO
1
110
Signal Forms: Beyond the Basics @ngBelgrade 2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
220

Other Decks in Programming

See All in Programming
Mujeres en SEO Summit 2026 - Greatest Disaster Hits en Web Performance
Avatar for Estela Franco guaca
0
190
作って学ぶ、 JSX (TSX) ランタイムの基本
Avatar for syumai syumai
7
1.6k
Contextとはなにか
Avatar for chiroruxx chiroruxx
1
330
Inside Stream API
Avatar for Yuichi.Sakuraba skrb
1
740
Oxcを導入して開発体験が向上した話
Avatar for Yuji Yamaguchi yug1224
4
320
AI時代のUIはどこへ行く？その2！
Avatar for Yusuke Wada yusukebe
22
7.4k
肥大化するレガシーコードに立ち向かうためのインターフェース分離と依存の逆転 / JJUG CCC 2026 Spring
Avatar for hirokuni-maeta hirokunimaeta
0
570
決定論的オーケストレーションの設計と実装 / Design and Implementation of Deterministic Orchestration
Avatar for nrs nrslib
4
1.4k
AI 輔助遺留系統現代化的經驗分享
Avatar for James Wang jame2408
1
760
Javaの型とAI時代に型が大事な理由 / java types and type in AI era
Avatar for Naoki Kishida kishida
2
140
Creating Composable Callables in Contemporary C++
Avatar for Björn Fahller rollbear
0
150
AIとASP.NET Coreで雑Webアプリを作った話
Avatar for Mayuki Sawatari mayuki
0
660

Featured

See All Featured
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7.1k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
170
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
3.7M
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
390
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
490
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.5k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.1k
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
430

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