Are you looking for a more efficient way to create apps? Tired of all the small things that get in the way of just developing? Learn how to quickly create responsive mobile apps. The OutSystems platform allows you to leverage responsive design and hybrid architecture to create multi-devices applications (including native capabilities) without extra effort. See the DevOps advantages in this session. Join MVP Russ Fustino in this enlightening session on the fastest way to create, deploy and change your custom mobile and web applications. In this session we will start with creating a small responsive web application with a database and some logic and a template presentation. Demos include building an app from scratch, OutSystems Now consuming device capabilities and Silk UI showing off several elements including responsive behaviors, carousel control and data tiles. We will cover the following: • Create a responsive application and import sample data • Use the database to get a list of records on the screen • Pass information to a detail screen for it to display a record • Use a page to get, edit, and update a record in the database. • Allow end users to create new records in the database • Add one more entry to the application, and create screens for listing and editing • See how simple it is to create a relationship between two tables and show it in the application • Use the debugger to follow the request to retrieve, update, and create records. • View app in a smartphone or tablet

1. OutSystems: A More Efficient Way To Build Apps
Russ Fustino, OutSystems Director Developer Evangelism
Russell.fustino@outsystems.com
@RussFustino
@OutSystemsDev

2. www.outsystems.com© OutSystems. All Rights Reserved2 www.outsystems.com© OutSystems. All Rights Reserved2
When I build an app, here is what I need.
• Phone and Tablet views
• Landscape and portrait orientations
• iOS, Android and Windows
• Debugging
• Rapid Development (git-r done).
• Common code base
• Native device capabilities
• Integration with my data

3. www.outsystems.com© OutSystems. All Rights Reserved3 www.outsystems.com© OutSystems. All Rights Reserved3
… and here is what I would like
• Visual designer
• A support system for my App
• Data in the cloud with CRUD
• App in the cloud
• Something that goes beyond NuGet
• Extensible in C# or JavaScript
• Build a great UX

4. www.outsystems.com© OutSystems. All Rights Reserved4 www.outsystems.com© OutSystems. All Rights Reserved4
Agenda
• OutSystems Overview
• Build an app with OutSystems
• OutSystems Now for device specific features
• Silk UI Framework / Tools
• Online Community and Resources
• Summary

5. www.outsystems.com© OutSystems. All Rights Reserved5 www.outsystems.com© OutSystems. All Rights Reserved5
Introduction
Who is OutSystems?

6. Why are Enterprises buying
OUTSYSTEMS PLATFORM ?

7. S P E E D .
Accelerate delivery and change of enterprise mobile
and web apps

8. Top Scenarios and Use Cases
Forms / Docs Workflows Portals Dashboards Front-Ends
Quoting Onboarding Customers Executive for SAP
Simulators Approvals Resellers Line of Business for salesforce.com
Order Entry Field Service Suppliers Insight For legacy

9. Mobile and Web App Dev is a Hard Problem
20-50
Apps
4 Platform
3 Form Factors
X
Abundance
Of Data Silos
X
Skills
Shortage
X
Constant Change RequestsX

10. Not if you have the right application platform!
Use existing skills
Relatively Easy to build, Cheap to change
Responsive plus hybrid
Abstraction brings stability
Simplified aggregation
Does it need to be so hard?

11. www.outsystems.com© OutSystems. All Rights Reserved11 www.outsystems.com© OutSystems. All Rights Reserved11
OutSystems platform Architecture
Architecture Overview
• Front-end server(s) - standard Web
Application Server (IIS or Java
Application Server) environment
complemented with 3 extra OutSystems
services;
• Deployment Controller Server – compile
the applications and deploy in front-end
servers;
• Database Server - The Database Server
is a Relational Database Management
System (RDBMS), such as Microsoft
SQL Server, Oracle or MySQL database
*More information on architecture tech note
https://www.outsystems.com/platform/development/infrastructure-technote/

12. www.outsystems.com© OutSystems. All Rights Reserved12 www.outsystems.com© OutSystems. All Rights Reserved12
Get your personal environment
Register & Download
Go to www.outsystems.com
and get yourself a personal
Environment by providing your
information and follow the
indicated steps.

13. www.outsystems.com© OutSystems. All Rights Reserved13 www.outsystems.com© OutSystems. All Rights Reserved13
Build an App in 5 minutes!

14. Build an app with OutSystems

15. www.outsystems.com© OutSystems. All Rights Reserved15 www.outsystems.com© OutSystems. All Rights Reserved15
Let’s build something like this…
Customer Information Management sample
Customers Products Category
Purchase
Orders
1. Manage customer information
2. Manage products information
3. Category information is related with products
4. Customers and products are related via purchases

16. Demo
A deeper look…

17. www.outsystems.com17 © OutSystems. All Rights Reserved17
What is OutSystems Now?
Native shell, that
enable the webapps
running in it to access
native functionality
Native shell
Web app
Hybrid approach

18. www.outsystems.com18 © OutSystems. All Rights Reserved18
So… It’s a browser?
Not a browser,
although it consumes
web resources
Built on top of
Cordova* 3.5.0
(not plain cordova app)
*Apache Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript

19. www.outsystems.com19 © OutSystems. All Rights Reserved19
What devices are supported?
The support is made to
Operating Systems not
Devices or producers.
Android 4.0+
iOS 7+
Windows 8.1+
Ask for 4.4+
Webview* is based on chromium engine.
Enables debug and is a more recent web engine.
*WebView class is an extension of Android's View class that allows you to display web pages as a part of your activity layout.

20. www.outsystems.com20 © OutSystems. All Rights Reserved20
What does it enable?
1. Access to native functionalities
a. Camera
b. Geolocation
c. QR code reader*
d. Access to file system
e. Access to address book*
f. Access to device Calendar
*Not available to Windows

21. www.outsystems.com21 © OutSystems. All Rights Reserved21
What does it enable?
Custom Branding
Logo customization Splash customization Login page customization

22. www.outsystems.com22 © OutSystems. All Rights Reserved22
What does it enable?
Custom plugins
a. Login with Touch ID
b. Native mail composer
c. Integration with PingOne
d. Kiosk mode
e. Download files in the background
f. Upload files in the background
g. Record videos
h. Play videos
i. … many others…

23. www.outsystems.com© OutSystems. All Rights Reserved23 www.outsystems.com© OutSystems. All Rights Reserved23
OutSystems Now
The Place to go for Your Enterprise Mobile Apps
Single Place + One Login
The place to go for all your
own enterprise mobile
apps
No hunting for URLs, etc
Immediate Change
Make changes in your apps
and they’re immediately
available to your users
User adoption first
Enterprise controls ensured
Monitor actual usage

24. Demo
OutSystems Now

25. www.outsystems.com© OutSystems. All Rights Reserved25 www.outsystems.com© OutSystems. All Rights Reserved25
What is Silk UI Framework?
Great UI
Without the need to know
how to code CSS

26. www.outsystems.com© OutSystems. All Rights Reserved26 www.outsystems.com© OutSystems. All Rights Reserved26
Silk UI Framework

27. www.outsystems.com© OutSystems. All Rights Reserved27 www.outsystems.com© OutSystems. All Rights Reserved27
Simple Right?
.Box {
background-color: white;
font-size: 12px;
border: 1px solid black;
}

28. www.outsystems.com© OutSystems. All Rights Reserved28 www.outsystems.com© OutSystems. All Rights Reserved28
CSS Gets Complex Quick
@media screen and (max-width: 700px) and (min-width: 340px) and
(device-pixel-ratio: 2) {
.content > li.kpbb a:hover {
position: relative;
box-sizing: border-box;
padding: 30px 0 0;
font-size: .857142857142857rem;
background-image: -webkit-gradient(linear, from(#4d90fe),to(#357ae8));
z-index: -1!important;
}
.aok-clearfix:after,.aok-clearfix:before, .clearfix:after,.clearfix:before {
display: table;
content: "";
line-height: 0;
font-size: 0
}

29. www.outsystems.com© OutSystems. All Rights Reserved29 www.outsystems.com© OutSystems. All Rights Reserved29
CSS Gets Complex Quick
@media screen and (max-width: 700px) and (min-width: 340px) and
(device-pixel-ratio: 2) {
.content > li.kpbb a:hover {
position: relative;
box-sizing: border-box;
padding: 30px 0 0;
font-size: .857142857142857rem;
background-image: -webkit-gradient(linear, from(#4d90fe),to(#357ae8));
z-index: -1!important;
}
.aok-clearfix:after,.aok-clearfix:before, .clearfix:after,.clearfix:before {
display: table;
content: "";
line-height: 0;
font-size: 0
}

30. www.outsystems.com© OutSystems. All Rights Reserved30 www.outsystems.com© OutSystems. All Rights Reserved30
Responsive Menu

31. www.outsystems.com© OutSystems. All Rights Reserved31 www.outsystems.com© OutSystems. All Rights Reserved31
Responsive Menu
over 3000 lines of CSS

32. www.outsystems.com© OutSystems. All Rights Reserved32 www.outsystems.com© OutSystems. All Rights Reserved32
Front End Frameworks

33. www.outsystems.com© OutSystems. All Rights Reserved33 www.outsystems.com© OutSystems. All Rights Reserved33

34. www.outsystems.com© OutSystems. All Rights Reserved34 www.outsystems.com© OutSystems. All Rights Reserved34

35. www.outsystems.com© OutSystems. All Rights Reserved35 www.outsystems.com© OutSystems. All Rights Reserved35
Quality
• Best Practices for CSS and JS
• Big focus on performance
• 3,000 tests (manual and automated) every release
• Tested in all modern browsers and down to IE8+
• Tested in several devices (iOS, Android and
WinPhone)

36. Demo – Silk UI Framework
labs.outsystems.net/SilkUI

37. OutSystems Online Community
www.outsystems.com/community

38. OutSystems Online Community
52000+ Members
500+ Forge Projects
2 Hours Average Response Time in Forums

39. OutSystems Online Community Forums

40. OutSystems Online Community Forge

41. OutSystems Online Community Learn

42. OutSystems Developer Online Training
Next class - Starts this Monday! (1st Monday)

43. OutSystems Certification Program
http://www.outsystems.com/learn/
Certified OutSystems Platform Developers will evolve through the different certification levels to
master the OutSystems Platform technology in conjunction with modern software engineering
practices for developing and designing enterprise-grade mobile and web applications. To get
certified, candidates need to demonstrate real world project experience and take a certification
exam.

44. Please follow!
Twitter:
@OutSystemsDev
@RussFustino
Facebook: www.facebook.com/OutSystemsDev

45. www.outsystems.com© OutSystems. All Rights Reserved45 www.outsystems.com© OutSystems. All Rights Reserved45
Resources
Labs from this session:
www.outsystems.com/goto/jumpstart
Download Personal Environment www.outsystems.com
OS Mobile: https://success.outsystems.com/Evaluation/Mobile
Integrate with REST and SOAP API’s:
https://success.outsystems.com/Evaluation/Integration/00_Integrate_with_SOAP_
web_services_and_REST_APIs?origin=d

46. www.outsystems.com© OutSystems. All Rights Reserved46 www.outsystems.com© OutSystems. All Rights Reserved46
Resources
Community: www.outsystems.com/community
Forge: http://www.outsystems.com/forge/
Learn: http://www.outsystems.com/learn/
Online Training: www.outsystems.com/course/developer-foundation
Case Studies: http://www.outsystems.com/customers/
JumpStart Classes: https://www.outsystems.com/academy/instructor-assisted-
training/outsystems-platform-jump-start-training/
Notes Silk UI Dozens of patterns http://labs.outsystems.net/SilkUI/Patterns.aspx
Prebuilt pages: http://labs.outsystems.net/SilkUI/Samples.aspx
Learn more on Silk UI Framework: http://labs.outsystems.net/SilkUI
Scaffolding patterns:
http://www.outsystems.com/help/servicestudio/9.0/default.htm#Web_User_Interfac
e/Creating_List_Screens.htm
OutSystems Architecture
https://www.outsystems.com/platform/development/infrastructure-technote/
KnowledgeBase: http://success.outsystems.com/

47. Thank you for your time!
Hope you enjoyed the session!
@RussFustino
@OutSystemsDev