Beruflich Dokumente
Kultur Dokumente
Application
Architecture
Web & Mobile
Rui
Coutinho
Architecture Domain Expert | OutSystems
@ rui.coutinho@outsystems.com
in /rucoutinho
| Experts
2 Roadshow
Topics
1. Architecture principles
a. Architecture Framework
b. Architecture Design process
c. Let’s follow an example
d. 4 Layer Canvas Rules
e. Discovery
2. Mobile Architecture
a. Mindset
b. Top Principles
| Experts
3 Roadshow
Architecture principles
| Experts
4 Roadshow
Architecture Framework
aka, the 4 Layer Canvas
| Experts
5 Roadshow
The 4 layer canvas (4LC)
Orchestration
Modules
Multi-layer framework
End-user
Modules ● Supports Architecture Design
Foundation
Modules
| Experts
6 Roadshow
The 4 layer canvas (4LC)
Orchestration
Modules
End-user
Modules
Core
Modules Reusable
Services
Foundation
Modules
| Experts
7 Roadshow
The 4 layer canvas (4LC)
Orchestration
Modules
End-user
Modules
Core
Modules Reusable
| Experts
8 Roadshow
The 4 layer canvas (4LC)
Orchestration
Modules
End-user
Modules
| Experts
9 Roadshow
The 4 layer canvas (4LC)
Orchestration
Modules No
End-user Services
Modules
| Experts
10 Roadshow
The 4 layer canvas (4LC)
Orchestration
Modules No
End-user Services
UI and processes
Modules That provide functionality to the end users
| Experts
11 Roadshow
The 4 layer canvas (4LC)
End-user Services
UI and processes
Modules That provide functionality to the end users
| Experts
12 Roadshow
OutSystems in the Enterprise Landscape
OutSystems
External
Consumers
ESB
External
Producers Corporate
Databases
| Experts
13 Roadshow
OutSystems in the Enterprise Landscape
OutSystems
ESB
External
Producers Corporate
Databases
| Experts
14 Roadshow
OutSystems in the Enterprise Landscape
Intranet/extranet
users
OutSystems
Applications
API
External Core Services
s
Consumers Integration Services NFRs
ESB
External
Producers Corporate
Databases
| Experts
15 Roadshow
Architecture
Design process
| Experts
16 Roadshow
Approach
| Experts
17 Roadshow
Architecture design in 3 steps
| Experts
18 Roadshow
Architecture design in 3 steps
| Experts
19 Roadshow
Architecture design in 3 steps
Orchestration Customer
Portal
Access portals
End-User User
Claim handling
Management
User processes
Customer _Sync
Assembling principles:
Customer_CS
● Join concepts if they are conceptually related
Customer_IS
● Don’t join concepts if they have different life cycles
● Isolate the reusable logic from all the integration logic ERP
| Experts
21 Roadshow
Keep iterating these 3 steps...
Iteration
| Experts
23 Roadshow
4LC - “Pretty layout”
Orchestration
Modules
End User
Modules
Foundation
Modules
24
Disclose & Organize
Orchestration
Modules
End User
Register See Agenda Select favorites
Modules
Core
Business
Modules
Foundation
Modules
25
Disclose & Organize Attendee
Orchestration
Modules
End User
Register See Agenda Select favorites
Modules
Core
Business
Modules
Attendee
Foundation
Modules
26
Disclose & Organize Attendee
Orchestration
Modules
End User
Register See Agenda Select favorites
Modules
Core
Track Business
Modules
Track
Attendee
Owner
Foundation
Modules
27
Disclose & Organize Attendee
Orchestration
Modules
End User
Register See Agenda Select favorites
Modules
Core
Track Talk Business
Modules
Track
Attendee Speaker
Owner
Foundation
Modules
28
Disclose & Organize Attendee
Orchestration
Modules
End User
Register See Agenda Select favorites
Modules
Event
Core
Track Talk Business
Modules
Track
Attendee Speaker
Owner
Foundation
Modules
29
Disclose & Organize Attendee
Orchestration
Modules
End User
Register See Agenda Select favorites
Modules
Event
Core
Track Talk Business
Modules
Track
Attendee Speaker
Owner
Foundation
Facebook Twitter Modules
30
Disclose & Organize Attendee Planner
Orchestration
Modules
Event
Core
Track Talk Business
Modules
Track
Attendee Speaker
Owner
Foundation
Facebook Twitter Modules
31
Let’s Assemble Attendee Planner
Orchestration
Modules
Event
Core
Track Talk Business
Modules
Track
Attendee Speaker
Owner
Foundation
Facebook Twitter Modules
32
Assemble Attendee Planner
Orchestration
Next Step Mobile App
Modules
Event
Core
Track Talk Business
Modules
Track
Attendee Speaker
Owner
Foundation
Facebook Twitter Modules
33
Assemble Attendee Planner
Orchestration
Modules
Event
Core
Track Talk Business
Modules
Track
Attendee Speaker
Owner
Foundation
Facebook Twitter Modules
34
Assemble Attendee Planner
Orchestration
Modules
Event
Core
Track Talk Business
Modules
Track
Participant Attendee Speaker
Owner
Foundation
Facebook Twitter Modules
35
Assemble Attendee Planner
Orchestration
Modules
Event
Core
Track Talk Business
Modules
Participant
CS
Foundation
Facebook Twitter Modules
Orchestration
Modules
Event
Core
Track Talk Business
Modules
Participant
CS
Foundation
Facebook Twitter Modules
37
Assemble Attendee Planner
Orchestration
Modules
Event
BL
Core
Talk
CS
Business
Modules
Participant
CS
Foundation
Facebook Twitter Modules
Orchestration
Modules
MyNextStep Event
MBL BL
Core
Talk
CS
Business
Modules
Participant
CS
Foundation
Facebook Twitter Modules
Orchestration
Modules
MyNextStep Event
MBL BL
Core
Talk
CS
Business
Modules
Participant
CS
Foundation
Facebook
Facebook Twitter Modules
Login Plugin
Orchestration
Modules
MyNextStep Event
MBL BL
Core
Talk
CS
Business
Modules
Participant
CS
Foundation
Facebook Facebook Twitter Modules
Login Plugin IS IS
Orchestration
Modules
MyNextStep Event
MBL BL
Core
Talk
CS
Business
Modules
Participant
CS
NextStep Planner
MTh Th
Foundation
Facebook Facebook Twitter Modules
Login Plugin IS IS
Orchestration
Modules
MyNextStep
MBL
Event Core
BL
Business
Modules
Participant Talk
CS CS
NextStep
MTh
Foundation
Facebook Facebook Twitter Planner Modules
Login Plugin IS IS Th
43
4 Layer Canvas
Rules
| Experts
44 Roadshow
Validation rules
Orchestration
Modules
End-user
EU1 EU2
Modules
No Upward
references
Core EU2 became
Modules A B
dependent on this
cluster of
modules
Foundation
Modules X
| Experts
45 Roadshow
Validation rules
Orchestration
Modules No side references
on top 2 layers
End-user
Modules EU1 EU2 EU1 unnecessarily
inherits this
cluster
Core
Modules A B C
Foundation
Modules X Z
| Experts
46 Roadshow
Validation rules
Orchestration
Modules
End-user
Modules
Core
A B
Modules
Foundation
X Z
Modules
| Experts
47 Roadshow
Validation rules
Orchestration
Modules No side references
on top 2 layers
End-user
Modules
No Upward
Core references • No Front-end screens
Modules • Read-only entities
| Experts
48 Roadshow
Top Architecture mistakes
● Cyclic references
Deployment and maintenance nightmare
| Experts
49 Roadshow
Discovery
| Experts
50 Roadshow
Discovery
● Forge component
● Visually represents the 4LC
● Automatically validates the
dependency rules
https://www.outsystems.com/forge/component/409/discovery
| Experts
51 Roadshow
Discovery overview
| Experts
52 Roadshow
Discovery overview
Get a
comprehensive
explanation about
layers and violations.
Quickly spot
violations to the
module’s rules.
| Experts
53 Roadshow
Check module details
| Experts
54 Roadshow
Check consumers and producers
| Experts
55 Roadshow
Check violation details
| Experts
56 Roadshow
Mobile Architecture
| Experts
57 Roadshow
Disclaimer...
| Experts
58 Roadshow
Mindset
Web Vs Mobile
| Experts
59 Roadshow
Web Characteristics
| Experts
60 Roadshow
Mobile Characteristics
| Experts
61 Roadshow
Web Vs Mobile Mindset
Web Mobile
● Server-side Actions ● Client Side Actions
● Responsive ● User Experience
● Only Online ● Local Storage + Offline
● Limited plugins ● Plugins
● IOS & Android
● Deploy in App Store
Mobile-optimized performance.
Based on server requests including App logic can run on the
AJAX responsive patterns. device and the data exchange
Depends heavily on the internet with the server is reduced.
connection.
| Experts
62 Roadshow
Imagine it’s 2015...
... and you need to build a banking mobile app, that has two screens:
| Experts
63 Roadshow
Web implementation: screen load
Preparation elements
run in sequence
| Experts
64 Roadshow
Mobile screen load: Web mindset
Incorrect approach
● App is unresponsive until the OnInitialize concludes
● Doesn’t take advantage of parallel execution
● TrueChange warnings were ignored
| Experts
65 Roadshow
Mobile screen load: Web mindset
Incorrect approach
● Same issues as using the OnInitialize action
| Experts
66 Roadshow
Mobile screen: What is the correct approach?
Use Fetch Data to retrieve content. Use On After Fetch event for post processing.
| Experts
67 Roadshow
Mobile screen load: Correct approach
DOM
Loading
n #2 n #3 n #1
OnInitialize Ready Render
Render Render Render
#1 GetTransactions
GetTransactions
OnAfterFetch
#2 GetLocalAccount
Note that the screen render always uses the same action.
| Experts
68 Roadshow
Mobile screen navigation
On On OnDestroy #1 On #2 On
OnInitialize
Ready Render (old screen) Render Render
| Experts
69 Roadshow
Top Principles
| Experts
70 Roadshow
Mobile Architecture Top Principles
| Experts
71 Roadshow
Think lazy load
| Experts
72 Roadshow
Think Lazy Load
| Experts
73 Roadshow
Mobile Events
OnInitialize OnAfterFetch
Occurs before navigating to the Screen and fetching Occurs after an Aggregate or Data Action has finished
data. fetching data but before this data is rendered.
OnReady OnParametersChange
Occurs after the DOM is ready, before the transition Occurs in a Block whenever the parent Screen/Block
starts. input parameters are changed.
OnRender OnDestroy
Occurs right after the On Ready event handler and Occurs before destroying a Screen/Block and
every time the data changes. removing it from the DOM.
| Experts
74 Roadshow
Empty state
| Experts
75 Roadshow
Prioritize Screen Content Rendering
E.g.:
Display advertising banner
after the main information
| Experts
76 Roadshow
Optimize list load
| Experts
77 Roadshow
Optimize list load
Master Detail
● Avoid expanding content in the
list items
● Use UI patterns instead of
'Show All...' option
| Experts
78 Roadshow
Use Local Storage
| Experts
79 Roadshow
Specific Local Storage
Mobile Mobile
Agent Banking ● Design local storage per end
Accounts My account
user app
MA_Account MB_Account
| Experts
80 Roadshow
Design a Lightweight Local Storage
| Experts
81 Roadshow
Parallel Local Storage access
| Experts
82 Roadshow
Avoid Server Calls
| Experts
83 Roadshow
Limit Server side calls
Mobile Mobile
Agent Banking ● Online transactions
Accounts My account
● Synchronization process
MA_Account MB_Account
● Sensitive information
Banking ■ Optimize Server Data Fetch
Customer Account
Core services
| Experts
84 Roadshow
No direct calls to backend systems
Mobile Mobile
Agent Banking ● Security
Accounts My account
■ Exposes internal services.
MA_Account MB_Account
● Performance
■ Cannot cache/optimize information
Banking
X Core services
Customer Account
at server side
● Maintainability
Integration Plugin ID Fingerprint
NFRs
Services Services Scanner reader
■ JS code is harder to maintain
Backend systems
| Experts
85 Roadshow
Synchronization Best Practices
| Experts
86 Roadshow
Synchronization tips (1/2)
MB_Account
Sync only when required
■ At session start, sync summary data to local storage
| Experts
88 Roadshow
Wrap-up
| Experts
89 Roadshow
Do you want to learn more?
www.outsystems.com/learn
| Experts
90 Roadshow
What do I hope you take home?
| Experts
91 Roadshow
| Experts Roadshow
Thank You!