Delivering Mobile Apps that Perform

As simple as that or not!

Team leader of Mobile ServicesOutSystems

Rúben Gonçalves

NextStep 2013

NextStep 2013

What happen since then?

You’ve built tons of mobile apps!

Major Pains?

1. Different form factors2. UI of the applicationa3. Performance aaaaaa

BAD PERFORMANCE

“The app is slow…”“It takes forever to load…”

“In the desktop is much faster…”

WHY?

Why is the app slow?What and how can it be improved?

Performance HurdlesServer

Code behind Servers configs Native shell Web app

Device

3G

Hybrid appe.g. OutSystems Now

Infrastructure

Performance HurdlesServer

Code behind Servers configs Native shell Web app

Device

3G

Infrastructure

Integrations

Synchronous integrations

Deadly sin!

BetterBad

CacheMuch BetterBetterBad

PreparationBad Better

PreparationBad Better

List_LateLoadRichWidgets

Design for (perceived) performance

Load information

already available

Load remaining asynchronously

Perceived Performancehow quickly a software feature appears to perform its task

Code behind

• Use Asynchronous integrations• Use cache in the application• Avoid Long and complex preparations• Design for perceived performance

Obtain data later

Make them easier to load

Performance HurdlesServer

Code behind Servers configs Native shell Web app

Device

3G

Infrastructure

Cache-controlEnables the server to specify which components are cacheable.

First load

2.66sFirst load

1.0 MB

Subsequent loads

458msSubsequent loads

13.1KB

Cache-controlEnables the server to specify which components are cacheable.

78x smaller

5.8x faster

HTTP compressionServer compresses the data before sent it to the client

Source description: wikipedia

11.4 KB

4.2x smaller

47.9 KB

Redirects - HTTP 30xWhy avoid it? Pure waste of time!

Ajax call to screen action

Redirect

Domain sharding“Technique for splitting resources across multiple domains (…) browsers are able to download more resources simultaneously”

Tricking the browser!

os.com

static1.os.com

static2.os.com

per domain

HTTP/2 will make domain sharding obsolete

Server configs

• Enable HTTP compression• Enable Cache-control• Avoid Redirects - HTTP 302• Avoid domain sharding

Must haves!

Performance HurdlesServer

Code behind Servers configs Native shell Web app

DeviceInfrastructure

3G

LatencyTime interval between the request and the response

Source definition: wikipedia

Mobile50 – 550ms

350 ms

Desktop20 – 150ms

80ms

Bandwidth can always be

increased but latency cannot be decreased

function of the electrical characteristics of the circuit

Source: dslreports

Cloud Server locationRule of thumb: pick a region closer to the users• Lower network latency• Quick response time• Higher bandwidth

www.cloudping.info

CDN“web servers distributed across multiple locations to deliver content more efficiently to users”

“95,000 CDN servers in 72 countries”

Source definition: developer yahoo Source image and comment: volusion

How to use?• DNS points to Akamai servers• The Platform automatically adds

suffixes

Infrastructure

• Latency can be high on mobile• Choose cloud server region based on user location• Use CDNs if necessary

3G

Performance HurdlesServer

Code behind Servers configs Native shell Web app

DeviceInfrastructure

3G

Cache-control

• Native Webview cache not active by default

• OutSystems Now already has it implemented

Bundle resources

• Embed static resources• E.g. IMGs, Fonts

21s 4s

WITHOUT ADD-ON WITH ADD-ON

22s 4s

iPhone 5

Android 4.4

3G connection

5xfaster

5xfaster

9s 3s

16s 3s

Loading time

3xfaster

5xfaster

WITH ADD-ONWITHOUT ADD-ON

iPhone 5

Android 4.4

Wi-Fi connection

First-time access

Native shell

• Use OutSystems Now• Pre-Bundle static resources - images, fonts…

Cache already active

Performance HurdlesServer

Code behind Servers configs Native shell Web app

DeviceInfrastructure

3G

JavaScriptHow do browsers work?

Scripts are parsed and executed immediately when the parser reaches a <script> tag. The parsing of the document halts until the script has been executed

Source: HTML5 rocks – how browsers work

Do you really need that jQuery plugin?

Do you really need widget?

Run scripts on Load

JavaScript

1,5x 3,9x 9,8x

DELL E6440Chrome 42

237ms

IPhone 6 PlusSafari

360ms

Nokia Lumia 925IE 11

924ms

Samsung Tab4chrome

2312ms

JavaScript in Mobile?• Limited resources - cpu, memory, bandwidth…• Different browsers - different JS engines

Test made on webkit.org

JavaScript

Source: bradshawenterprises

• SlideUp() / SlideDown()• Show() / Hide()• Animate()• …

Animationsin your app

JavaScriptSimple example

Source: bradshawenterprises

JavaScriptjQuery

Source: bradshawenterprises

CSS3

JavaScriptjQuery

Source: bradshawenterprises

CSS3

40 events~9500 events~3s

JavaScript

• Google analytics• Twitter• Facebook• Ads• …

3rd party JavaScripts

PerformanceKillers

Delay page load, event if marked

as async

Why?

Solution?

Web app

• Avoid JavaScript animations• JavaScript runs slower in devices• Run JavaScript after load• Beware JavaScript - your friend or killer

Complex rules

CSS

• [class^="grid-"]• box-shadow• transform

Depends of thenumber elementsto be applied

Minimize the usage of these properties

CSS@Import CSS

CSS

JS

Crucial for rendering@import delays page rendering

HTML

CSSUnused code

Source: Ben Frain

• Add 3000 lines of unused code• Change the colors of links

Remove half

~20% ~40% ~22% ~18% ~18%

CSSImages

25 x 25 px 88 x 100 px

Don’t resize images client-side

Web app

• Avoid complex CSS rules• Avoid @imports• Remove unused CSS• Resize images server side

HTTP requestsThey are bad!

“80% of the end-user response time is spent on the front-end”

“Most of this time is tied up in downloading all the components in the page”

Source: developer yahoo

But a necessary Evil!

HTTP requestsBy far the biggest hurdle

71 requests

~8s to Load

17 CSS25 JS

21 img4 fonts

3G (750 Kbps 100ms RTT)

762 KB downloaded

Your typicalOutSystemsApplication

HTTP requestsThe Platform enables modular code!

+1 css file

+1 JS file

CSS OptimizationThe Platform Amsterdam helps

Source: OutSystems community

Less HTTP Requests

Webblocks CSS aggregation

Web app

• Reduce HTTP requests Avoid CSS in pages Minimize CSS in webblocks Minimize JavaScript in webblocks Beware of Themes inheritance

Platform tipsNotify Widget

Notify

Client Server

w6

w5

…

LayoutPage

Ajax refresh

Remember Mobile Latency?

w6w5

w4w3

w2w1

~350ms

Platform tips

• Increasingly heavier Ajax Requests• DOM will increase• Memory usage increase

Infinite scroll

Prefer paginationwhen dealing with large amounts of data

Silk UI FrameworkTokyo Theme• CSS optimizations• Light weight JavaScript• Mobile specific widgets

Web app

• Avoid Notify widget• Avoid Infinite scroll pattern• Use Tokyo Theme For mobile apps

TakeawaysTake the whole deck!

Mobile Performanceis easily affected

You won’t get it right at first

Platform Amsterdamis here to help

Thank you!Either clap your hands or throw tomatoes! :)

Questions?But easy ones, please!