| Experts Roadshow

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

● Promotes correct abstraction of reusable services

Core
Modules ● Independent Life cycles

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

Foundation Services Non-functional requirements

Services to connect to external systems or to
Modules extend your framework

| Experts
8 Roadshow
The 4 layer canvas (4LC)

Orchestration
Modules

End-user
Modules

Core Business services

Modules Reusable
Services around business concepts

Foundation Services Non-functional requirements

Services to connect to external systems or to
Modules extend your framework

| Experts
9 Roadshow
The 4 layer canvas (4LC)

Orchestration
Modules No

End-user Services
Modules

Core Business services

Modules Reusable
Services around business concepts

Foundation Services Non-functional requirements

Services to connect to external systems or to
Modules extend your framework

| 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

Core Business services

Modules Reusable
Services around business concepts

Foundation Services Non-functional requirements

Services to connect to external systems or to
Modules extend your framework

| Experts
11 Roadshow
The 4 layer canvas (4LC)

Orchestration Access Portals

Modules No
Cross-application processes and dashboards

End-user Services
UI and processes
Modules That provide functionality to the end users

Core Business services

Modules Reusable
Services around business concepts

Foundation Services Non-functional requirements

Services to connect to external systems or to
Modules extend your framework

| 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

External Core Services

Consumers Integration Services NFRs

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

Business, Business, Business!

Business drives the Architecture design:
● Translated business needs and concepts

● Scalable and independent per LOB

| Experts
17 Roadshow
Architecture design in 3 steps

Disclose business concepts and integration needs

User Stories Information

and Roles Architecture

| Experts
18 Roadshow
Architecture design in 3 steps

Disclose business concepts and integration needs

User Stories Information Integration

UX expectations
and Roles Architecture technology

| Experts
19 Roadshow
Architecture design in 3 steps

Organize business concepts and integration needs

Orchestration Customer
Portal
Access portals

End-User User
Claim handling
Management
User processes

Core Business Customer Claim Contract Product

Business concepts

Foundation ERP CRM Audit

Integration needs & NFRs
| Experts
20 Roadshow
Architecture design in 3 steps

Assemble by matching recommended architecture patterns

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

● Apply known design patterns Synchronization with an

external system

| Experts
21 Roadshow
Keep iterating these 3 steps...

Iteration

... to refine the

architecture, as you
disclose new concepts
and more details.
| Experts
22 Roadshow
Let’s follow an example

| Experts
23 Roadshow
4LC - “Pretty layout”
Orchestration
Modules

End User
Modules

Let’s follow the architecture design for a

Core
mobile app targeting event participants.
Business
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 End User

Register See Agenda Select favorites
Planner Modules

Event

Core
Track Talk Business
Modules
Track
Attendee Speaker
Owner

Foundation
Facebook Twitter Modules

31
Let’s Assemble Attendee Planner

Orchestration
Modules

Event End User

Register See Agenda Select favorites
Planner 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 End User

Register See Agenda Select favorites
Planner Modules

Event

Core
Track Talk Business
Modules
Track
Attendee Speaker
Owner

Foundation
Facebook Twitter Modules

33
Assemble Attendee Planner

Orchestration
Modules

Event End User

NextStep
Planner Modules

Event

Core
Track Talk Business
Modules
Track
Attendee Speaker
Owner

Foundation
Facebook Twitter Modules

34
Assemble Attendee Planner

Orchestration
Modules

Event End User

NextStep
Planner Modules

Event

Core
Track Talk Business
Modules
Track
Participant Attendee Speaker
Owner

Foundation
Facebook Twitter Modules

35
Assemble Attendee Planner

Orchestration
Modules

Event End User

NextStep
Planner Modules

Event

Core
Track Talk Business
Modules
Participant
CS

Foundation
Facebook Twitter Modules

36 CS: Core Service

Assemble Attendee Planner

Orchestration
Modules

Event End User

NextStep
Planner Modules

Event

Core
Track Talk Business
Modules
Participant
CS

Foundation
Facebook Twitter Modules

37
Assemble Attendee Planner

Orchestration
Modules

Event End User

NextStep
Planner Modules

Event
BL
Core
Talk
CS
Business
Modules
Participant
CS

Foundation
Facebook Twitter Modules

38 BL: Business Logic

Assemble Attendee Planner

Orchestration
Modules

Event End User

NextStep
Planner Modules

MyNextStep Event
MBL BL
Core
Talk
CS
Business
Modules
Participant
CS

Foundation
Facebook Twitter Modules

39 MBL: Mobile Business Logic

Assemble Attendee Planner

Orchestration
Modules

Event End User

NextStep
Planner Modules

MyNextStep Event
MBL BL
Core
Talk
CS
Business
Modules
Participant
CS

Foundation
Facebook
Facebook Twitter Modules
Login Plugin

40 Plugin: Mobile Plugin

Assemble Attendee Planner

Orchestration
Modules

Event End User

NextStep
Planner Modules

MyNextStep Event
MBL BL
Core
Talk
CS
Business
Modules
Participant
CS

Foundation
Facebook Facebook Twitter Modules
Login Plugin IS IS

41 IS: Integration Service

Assemble Attendee Planner

Orchestration
Modules

Event End User

NextStep
Planner 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

42 (M)Th: (Mobile) Theme

Architecture Blueprint Attendee Planner

Orchestration
Modules

Event End User

NextStep
Planner 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

Foundation • No Business logic

Modules • No core entities

| Experts
48 Roadshow
Top Architecture mistakes

● End User modules providing reusable services

Prevent Application lifecycle independency, with complex deployment

● Lack of service abstraction around business concepts

Unmanageable dependencies and complex maintenance

● Cyclic references
Deployment and maintenance nightmare

● No abstraction of external integrations

Changes in external systems requires unexpected refactoring

| 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

Classify the modules

according to their layer

| 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...

Mobile is NOT web!

Think less data and optimize per use case.

| 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:

Account overview Account manager details

| Experts
63 Roadshow
Web implementation: screen load

Preparation Ready Render

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

OnInitialize Ready Render

Use OnInitialize as a web Preparation

| Experts
65 Roadshow
Mobile screen load: Web mindset

Incorrect approach
● Same issues as using the OnInitialize action

OnInitialize Ready Render

Use OnReady as a web Preparation

| Experts
66 Roadshow
Mobile screen: What is the correct approach?

Use Fetch Data to retrieve content. Use On After Fetch event for post processing.

Data fetches are executed in parallel

Consider parallel data retrieval when designing your
local storage to optimize the screen data fetch.

| 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.

#3 GetBalance Be careful with GetBalance

any code placed here, as it may be running it
more than once.OnAfterFetch

| Experts
68 Roadshow
 Mobile screen navigation

Don't forget to use OnDestroy event

toScreen
remove listeners and call destroy
transition
action of 3rd-party components

On On OnDestroy #1 On #2 On
OnInitialize
Ready Render (old screen) Render Render

Fetch Data from Local Storage is

#1 GetLocalAccountManager
also executed in parallel. Design
your local storage to avoid
dependencies. #2 GetLocalAccountManagerPicture

| Experts
69 Roadshow
Top Principles

| Experts
70 Roadshow
Mobile Architecture Top Principles

Think lazy load Use local storage Avoid server calls

● Event driven ● Think use case ● Expensive

development ● Optimize ● Bad User
● Parallel data content Experience
fetch

| Experts
71 Roadshow
Think lazy load

| Experts
72 Roadshow
Think Lazy Load

Event driven development Parallel data fetch

| 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

● Design and display an empty

state image
○ While the dynamic content is being
fetched Full Name
Contact
Address

● Choose images that assures a Zip Code

smooth transition First

Render
Content
Render

○ Such as blurred gray line or a

spinner

| Experts
75 Roadshow
Prioritize Screen Content Rendering

● Display relevant content first

● Delay the rendering of the
secondary content

E.g.:
Display advertising banner
after the main information

| Experts
76 Roadshow
Optimize list load

● Fetch data on demand, not all

at once
● Use the On Scroll Ending event
to fetch the next set of records

Hint: Scaffold a list on a screen to understand

how the On Scroll Ending event works

| 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

● Use Local Storage whenever

Banking Customer Account possible
Core services
■ Best for performance
Integration Plugin ID Fingerprint ■ Reduces the number of server calls
NFRs
Services Services Scanner reader
■ Offline Ready
Central storage Local storage
(server side) (mobile device)

| Experts
80 Roadshow
Design a Lightweight Local Storage

● Don’t copy the server data

model
■ Denormalize the local storage
■ Group relevant information
■ Define only used attributes

● Don’t store too much data

■ Only relevant records

| Experts
81 Roadshow
Parallel Local Storage access

● Avoid table dependency

■ Denormalize to promotes parallel
data fetch

● Avoid generic tables

■ Contains too much data, not all
relevant

● Use Fetch Data

■ Avoid cascading aggregates in
OnInitialize and OnReady

| 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

Integration Plugin ID Fingerprint

NFRs
Services Services Scanner reader

Central storage Local storage

(server side) (mobile device)

| 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

● Use Entity Bulk Operations (built-in)

● Only synchronize deltas
■ Use control timestamps

● Only synchronize relevant data

■ Per business case
■ Think in terms of records (rows)
■ Think in terms of attributes (columns)

| Experts
86 Roadshow
 Synchronization tips (1/2)

Don’t sync on every screen or online event

Mobile
Banking
My account

MB_Account
Sync only when required
■ At session start, sync summary data to local storage

Customer Account ■ At process start, sync process detail to local storage

■ At process/transaction end, sync back to server

Sync only what is strictly required

Plugin ID Scanner
Fingerprint
Services reader ■ Both in terms of records (rows) and attributes (columns)
■ E.g.: On login sync accounts’ summary
On account selection, sync its details
| Experts
87 Roadshow
 Synchronization tips (2/2)

● Avoid long synchronizations in a single transaction

Mobile
Banking ■ Impacts UX - App becomes unresponsive
My account
■ Not prepared for constant offline or device
MB_Account
standby

Customer Account Ensure sync granularity

■ Prepare for constant retries without repeating work (e.g.
network loss)
Plugin ID Scanner
Fingerprint
Services reader ■ Sync in chunks, incremental by entity

| 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?

Mobile is NOT web!

Systematically use Discovery

Apply the 4 Layer Canvas

Mobile is NOT web!

| Experts
91 Roadshow
 | Experts Roadshow

Thank You!