Introduction to

OutSystems Apps
Reactive Developer Boot Camp
What you ● Programming Model

Modular Programming
will learn
●

● Modules and Applications

here ● Producers and Consumers

2
Reactive Apps

Enable the creation of client-side Web and

Mobile apps with rich interfaces
and interactive experiences

3
Reactive Apps in OutSystems
State-of-the-Art Web Architecture
Follow the most recent standards and best practices, protecting you while making you move fast in an
always changing landscape.

Apps that Delight Your Users

Deliver apps that move at the speed of thought. Increase customer engagement: check! Making your
employees more productive: check! Make everyone fall in love with your apps: check!

Unified Developer Experience

Use low-code to create any app, for any device. Enjoy a great unified developer experience so you can
deliver fast and change faster.

4
Developing Apps

Publish Open
OutSystems Platform

Service Studio Browsers

5
Programming Model

JavaScript
Asynchronous
data requests

Cross-device
Single-page
application

HTML CSS
Client-side HTML generated
Screen Logic as from JavaScript
JavaScript React
6
What App Should I Choose?

Reactive Web Mobile

(Phone and Tablet)

7
Code Reusability

Common logic for all devices Common logic for supported

and screen sizes native mobile platforms, and
supported browser for PWAs

Reactive Web Mobile

(Phone and Tablet)

8
Target Device and Audience

A browser. Native mobile apps run in

No installation needed. Android and iOS. PWAs run in any
device with a supported browser.

Reactive Web Mobile

(Phone and Tablet)

9
User Experience

Responsive Layout for all Dedicated mobile UI patterns and

Screen sizes and types experiences

Reactive Web Mobile

(Phone and Tablet)

10
Performance

Performance designed for the client side, with smart mechanisms to

optimize the data transfer.

Reactive Web Mobile

(Phone and Tablet)

11
Access to Device Hardware

HTML5 supported device Native mobile apps and PWAs

capabilities. access a range of device
capabilities.

Reactive Web Mobile

(Phone and Tablet)

12
Offline Capabilities

No offline capabilities For storing offline data, native

mobile apps use local storage and
PWAs use browser storage

Reactive Web Mobile

(Phone and Tablet)

13
Deployment and Updates

Updates are automatic when Native mobile apps can update

users refresh the browser’s automatically. PWAs update
page. automatically when the app
detects a new version.

Reactive Web Mobile

(Phone and Tablet)

14
Distribution

Share the link of the app with In-house distribution or through app

users. stores. Users can run a PWA directly

from your website, and add the app
icon to the device home screen.

Reactive Web Mobile

(Phone and Tablet)

15
Modular Programming
Software design technique that focuses on separating each functionality of an
app into a different module.

Encapsulate everything to execute Separate functionality by

one aspect of functionality in a independent and (potentially)
single module replaceable pieces of code.

16
Modular Programming
Software design technique that focuses on separating each functionality of an
app into a different module.

Encapsulate everything to execute Separate functionality by

one aspect of functionality in a independent and (potentially)
single module replaceable pieces of code.

17
Modules
● User interface and business logic is developed
inside a module
Finance

● Types of Modules:
○ Reactive Web App / Phone App / Tablet App
○ Blank
Projects TimeSheets
○ Service
○ Library
○ Extension
Employees Directory

18
Modules
● User interface and business logic is developed Finance

inside a module
Finance

● Types of Modules:
Project
○ Reactive Web App / Phone App / Tablet App Control
○ Blank
Projects TimeSheets
○ Service
○ Library Human
○ Extension Resources

Employees Directory
● An Application groups a set of related modules
19
 Producers and Consumers
Finance
● Modules can share elements with other
modules Finance

○ Modules that share features are called

Project
Producers
Control
○ Modules that use features from others are called
Projects TimeSheets
Consumers

Human
● Producers and Consumers can be in different Resources

applications Employees Directory

20
Questions?

21 21
Thank You!