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

Sustainable SPAs with Strategic Design: A Wonderful Friendship?

15934fa2aa7b2ce21f091e9b7cffa856?s=47 Manfred Steyer
PRO
May 19, 2022
Programming
0
140

Sustainable SPAs with Strategic Design: A Wonderful Friendship?

15934fa2aa7b2ce21f091e9b7cffa856?s=128

Manfred Steyer
PRO

May 19, 2022
Tweet

More Decks by Manfred Steyer

See All by Manfred Steyer
Angular‘s Future without NgModules: Architectures with Standalone Components @enterJS
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
230
Beyond Micro Frontends: Frontend Moduliths for the Enterprise @enterjs2022
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
170
Angular-basierte Micro Frontends mit Module Federation @API Summit
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
110
Beyond Micro Frontends: Frontend Moduliths for the Enterprise @wad2022
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
130
Micro Frontends with Module Federation: Beyond the Basics @codecrafts2022
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
260
Rethinking Auth for SPAs and Micro Frontends: Easy and Secure With Gateways
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
160
Micro Frontends with Module Federation: Beyond the Basics @jax2022
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
1
340
Enterprise Angular: Frontend Moduliths with Nx and Standalone Components @jax2022
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
380
Angular's new Standalone Components: How Will They Affect My Architecture? @iJS London 2022
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
450

Other Decks in Programming

See All in Programming
Deep Dive Into Google Zanzibar and its Concepts for Authorization Scenarios
A68cb0f927eafc449f4046ea3edc09a2?s=48 dschenkelman
1
130
設計ナイト2022 トランザクションスクリプト
6521324f6ab5266cdcde1dd05945a27b?s=48 shinpeim
11
2k
NEWT.net: Frontend Technology Selection
A2040e0e2f7a6cabf81b54e4a401c0e8?s=48 xpromx
0
250
オブジェクト指向で挫折する初学者へ
Dde759e35b9d62d448b3924502750a31?s=48 deepoil
0
160
How we run a Realtime Puzzle Fighting Game on AWS Serverless
3a488be96753f7e2232f3a3d79b83083?s=48 falken
0
250
Terraform Plan/Apply結果の自動通知
92a1e043fcefaed6e1b89182b1cd34a5?s=48 ymmy02
0
280
Power Automateドリブンのチームマネジメント
0cc2ebc5781bcb2cae5f9ab7efa40ff2?s=48 hanaseleb
0
190
インターン生・新卒向け、学校でもっと教えてほしいITエンジニア基本スキル
E72f241475dfe632c6b1666debc16e8a?s=48 nearme_tech
0
130
Web API連携でCSRF対策がどう実装されてるか調べた / how to implements csrf-detection on Web API
79fc33e55cacc42beef647541de24d58?s=48 yasuakiomokawa
2
420
CSE360 Tutorial 07
B546a9b97d993392e4b22b74b99b91fe?s=48 javiergs
PRO
0
100
CakePHPの内部実装 から理解するPSR-7
750703459030ae520b26376f236f6cdd?s=48 boro1234
0
200
GitHub Actions を導入した経緯
41c9dedd1b4c53ace82e040bb09334fe?s=48 tamago3keran
1
430

Featured

See All Featured
Keith and Marios Guide to Fast Websites
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
404
21k
How New CSS Is Changing Everything About Graphic Design on the Web
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
213
11k
The Invisible Customer
4262b9cfacfb6b2c77f23e1d0310cd3e?s=48 myddelton
110
11k
It's Worth the Effort
Ba530e786553390f3fb271848485681c?s=48 3n
172
25k
Streamline your AJAX requests with AmplifyJS and jQuery
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
127
8.5k
Atom: Resistance is Futile
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
255
20k
Adopting Sorbet at Scale
2bb923c57a1fdc3a2eb484bb8d565fd2?s=48 ufuk
63
7.6k
WebSockets: Embracing the real-time Web
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
57
5.2k
Visualization
170b760e0147792d0140e59ec78e9893?s=48 eitanlees
125
11k
Teambox: Starting and Learning
Aebc2d07a50011e2a30d38435fde564a?s=48 jrom
123
7.7k
GitHub's CSS Performance
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1020
420k
The Language of Interfaces
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
148
20k

Transcript

  1. @ManfredSteyer ManfredSteyer Manfred Steyer, ANGULARarchitects.io Sustainable SPAs with Strategic Design

    A Wonderful Friendship?

  2. @ManfredSteyer

  3. @ManfredSteyer

  4. @ManfredSteyer

  5. @ManfredSteyer

  6. @ManfredSteyer

  7. @ManfredSteyer

  8. @ManfredSteyer

  9. @ManfredSteyer Manfred Steyer

  10. @ManfredSteyer

  11. @ManfredSteyer Strategic Design Tactical Design

  12. @ManfredSteyer Strategic Design Tactical Design

  13. @ManfredSteyer

  14. @ManfredSteyer Example e-Procurement System e-Procurement System

  15. @ManfredSteyer Catalog Catalog Approval Approval Specification Specification Ordering Ordering Example

    Sub-Domains

  16. @ManfredSteyer

  17. @ManfredSteyer Workspace

  18. @ManfredSteyer Advantages No version conflicts No burden with distributing libs

  19. @ManfredSteyer Creating a Workspace npm install -g @angular/cli ng new

    workspace cd workspace ng generate app my-app ng generate lib my-lib ng serve --project my-app ng build --project my-app

  20. @ManfredSteyer Moving back and forth Npm Registry

  21. @ManfredSteyer https://nrwl.io/nx

  22. @ManfredSteyer Visualize Module Structure

  23. @ManfredSteyer Creating a Workspace 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

  24. @ManfredSteyer

  25. @ManfredSteyer Catalog Catalog Ordering Ordering 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 Shared Kernel (if really needed) & other libs Smart Comp. Dumb Comp.

  26. @ManfredSteyer Catalog Catalog Ordering Ordering 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

  27. @ManfredSteyer Catalog Catalog Ordering Ordering 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

  28. @ManfredSteyer Application Domain Model Infrastructure Application Domain Model Infrastructure Isolate

    your domain! Domain Domain e. g. data access Use case specific facades, state management (optional) Entities, biz logic

  29. @ManfredSteyer Alternatives to layering • e. g. Hexagonal Architecture, Clean

    Architecture • Anyway: We need to restrict access b/w libraries

  30. @ManfredSteyer DEMO

  31. @ManfredSteyer • • • •

  32. @ManfredSteyer

  33. @ManfredSteyer Booking Booking Boarding Boarding Shared Shared Feature Feature Feature

    Feature Feature Feature Feature Feature Feature Feature … … … … … … … … … … … … … … … … … … @ManfredSteyer Flight App Flight App Deployment Monolith

  34. @ManfredSteyer Booking Booking Boarding Boarding Shared Shared Feature Feature Feature

    Feature Feature Feature Feature Feature Feature Feature … … … … … … … … … … … … … … … … … … Booking App Booking App Boarding App Boarding App Microfrontends

  35. @ManfredSteyer Booking Booking Boarding Boarding Shared Shared Feature Feature Feature

    Feature Feature Feature Feature Feature Feature Feature … … … … … … … … … … … … … … … … … … Booking App Booking App Boarding App Boarding App Option 1: One Monorepo Monorepo

  36. @ManfredSteyer Booking Booking Boarding Boarding Shared Shared Feature Feature Feature

    Feature Feature Feature Feature Feature Feature Feature … … … … … … … … … … … … … … … … … … Booking App Booking App Boarding App Boarding App Option 2: One Repo per Domain Publish shared libs seperately via npm Repository n Repository 2 Repository 1

  37. @ManfredSteyer Free eBook ANGULARarchitects.io/book Updated for Module Federation and Alternatives

  38. • • • • •

  39. None

  40. @ManfredSteyer d Slides & Examples Remote and In-House http://softwarearchitekt.at/workshops