OutSystems: A more efficient way to build apps!

Preview:

Citation preview

OutSystems: A More Efficient Way To Build Apps

Russ Fustino, OutSystems Director Developer EvangelismRussell.fustino@outsystems.com@RussFustino@OutSystemsDev

www.outsystems.com© OutSystems. All Rights Reserved 2 www.outsystems.com© OutSystems. All Rights Reserved 2

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

www.outsystems.com© OutSystems. All Rights Reserved 3 www.outsystems.com© OutSystems. All Rights Reserved 3

… 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

www.outsystems.com© OutSystems. All Rights Reserved 4 www.outsystems.com© OutSystems. All Rights Reserved 4

Agenda

• OutSystems Overview• Build an app with OutSystems• OutSystems Now for device specific features• Silk UI Framework / Tools• Online Community and Resources• Summary

www.outsystems.com© OutSystems. All Rights Reserved 5 www.outsystems.com© OutSystems. All Rights Reserved 5

IntroductionWho is OutSystems?

Why are Enterprises buyingOUTSYSTEMS PLATFORM ?

S P E E D .

Accelerate delivery and change of enterprise mobile and web apps

Top Scenarios and Use Cases

Forms / Docs Workflows Portals Dashboards Front-Ends

Quoting Onboarding Customers Executive for SAPSimulators Approvals Resellers Line of Business for

salesforce.comOrder Entry Field Service Suppliers Insight For legacy

Mobile and Web App Dev is a Hard Problem

20-50 Apps

4 Platform3 Form Factors

X

Abundance Of Data Silos

X

Skills Shortage

X

Constant Change RequestsX

Not if you have the right application platform!

Use existing skillsRelatively Easy to build, Cheap to changeResponsive plus hybridAbstraction brings stabilitySimplified aggregation

Does it need to be so hard?

www.outsystems.com© OutSystems. All Rights Reserved 11 www.outsystems.com© OutSystems. All Rights Reserved 11

OutSystems platform ArchitectureArchitecture 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 notehttps://www.outsystems.com/platform/development/infrastructure-technote/

www.outsystems.com© OutSystems. All Rights Reserved 12 www.outsystems.com© OutSystems. All Rights Reserved 12

Get your personal environmentRegister & Download

Go to www.outsystems.com and get yourself a personal Environment by providing your information and follow the indicated steps.

www.outsystems.com© OutSystems. All Rights Reserved 13 www.outsystems.com© OutSystems. All Rights Reserved 13

Build an App in 5 minutes!

Build an app with OutSystems

www.outsystems.com© OutSystems. All Rights Reserved 15 www.outsystems.com© OutSystems. All Rights Reserved 15

Let’s build something like this… Customer Information Management sample

Customers Products Category

PurchaseOrders

1. Manage customer information2. Manage products information3. Category information is related with products4. Customers and products are related via purchases

DemoA deeper look…

www.outsystems.com17 © OutSystems. All Rights Reserved 17

What is OutSystems Now?

Native shell, that enable the webapps

running in it to access native functionality

Native shell

Web app

Hybrid approach

www.outsystems.com18 © OutSystems. All Rights Reserved 18

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

www.outsystems.com19 © OutSystems. All Rights Reserved 19

What devices are supported?

The support is made to Operating Systems notDevices 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.

www.outsystems.com20 © OutSystems. All Rights Reserved 20

What does it enable?

1. Access to native functionalitiesa. Camerab. Geolocationc. QR code reader*d. Access to file systeme. Access to address book*f. Access to device Calendar

*Not available to Windows

www.outsystems.com21 © OutSystems. All Rights Reserved 21

What does it enable?

Custom Branding

Logo customization Splash customization Login page customization

www.outsystems.com22 © OutSystems. All Rights Reserved 22

What does it enable?

Custom pluginsa. Login with Touch IDb. Native mail composerc. Integration with PingOned. Kiosk modee. Download files in the backgroundf. Upload files in the backgroundg. Record videosh. Play videosi. … many others…

www.outsystems.com© OutSystems. All Rights Reserved 23 www.outsystems.com© OutSystems. All Rights Reserved 23

OutSystems NowThe Place to go for Your Enterprise Mobile Apps

Single Place + One LoginThe place to go for all your own enterprise mobile appsNo hunting for URLs, etc

Immediate ChangeMake changes in your apps and they’re immediately available to your users

User adoption firstEnterprise controls ensuredMonitor actual usage

DemoOutSystems Now

www.outsystems.com© OutSystems. All Rights Reserved 25 www.outsystems.com© OutSystems. All Rights Reserved 25

What is Silk UI Framework?

Great UI Without the need to know how to code CSS

www.outsystems.com© OutSystems. All Rights Reserved 26 www.outsystems.com© OutSystems. All Rights Reserved 26

Silk UI Framework

www.outsystems.com© OutSystems. All Rights Reserved 27 www.outsystems.com© OutSystems. All Rights Reserved 27

Simple Right?

.Box {background-color: white;font-size: 12px;border: 1px solid black;

}

www.outsystems.com© OutSystems. All Rights Reserved 28 www.outsystems.com© OutSystems. All Rights Reserved 28

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}

www.outsystems.com© OutSystems. All Rights Reserved 29 www.outsystems.com© OutSystems. All Rights Reserved 29

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}

www.outsystems.com© OutSystems. All Rights Reserved 30 www.outsystems.com© OutSystems. All Rights Reserved 30

Responsive Menu

www.outsystems.com© OutSystems. All Rights Reserved 31 www.outsystems.com© OutSystems. All Rights Reserved 31

Responsive Menu

over 3000 lines of CSS

www.outsystems.com© OutSystems. All Rights Reserved 32 www.outsystems.com© OutSystems. All Rights Reserved 32

Front End Frameworks

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

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

www.outsystems.com© OutSystems. All Rights Reserved 35 www.outsystems.com© OutSystems. All Rights Reserved 35

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)

Demo – Silk UI Framework

labs.outsystems.net/SilkUI

OutSystems Online Communitywww.outsystems.com/community

OutSystems Online Community

52000+ Members

500+ Forge Projects

2 Hours Average Response Time in Forums

OutSystems Online Community Forums

OutSystems Online Community Forge

OutSystems Online Community Learn

OutSystems Developer Online TrainingNext class - Starts this Monday! (1st Monday)

OutSystems Certification Programhttp://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.

Please follow!

Twitter: @OutSystemsDev @RussFustino

Facebook: www.facebook.com/OutSystemsDev

www.outsystems.com© OutSystems. All Rights Reserved 45 www.outsystems.com© OutSystems. All Rights Reserved 45

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

 

www.outsystems.com© OutSystems. All Rights Reserved 46 www.outsystems.com© OutSystems. All Rights Reserved 46

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-foundationCase 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.aspxPrebuilt pages: http://labs.outsystems.net/SilkUI/Samples.aspxLearn more on Silk UI Framework: http://labs.outsystems.net/SilkUIScaffolding patterns:http://www.outsystems.com/help/servicestudio/9.0/default.htm#Web_User_Interface/Creating_List_Screens.htmOutSystems Architecturehttps://www.outsystems.com/platform/development/infrastructure-technote/KnowledgeBase: http://success.outsystems.com/

 

Thank you for your time!Hope you enjoyed the session!

@RussFustino@OutSystemsDev