When creating mobile apps, solid performance is now mandatory. We'll expose the patterns and anti-patterns that will impact this critical trait of your apps, while building a performant mobile app live. This presentation was made in NextStep Global 2015. See the recording https://www.outsystems.com/nextstep/2015/mobile-apps-that-perform/

1. Delivering Mobile Apps
that Perform
As simple as that or not!
Team leader of Mobile Services
OutSystems
Rúben Gonçalves

2. NextStep 2013

3. NextStep 2013

4. What happen since then?
You’ve built tons of mobile apps!

5. Major Pains?
1. Different form factors
2. UI of the applicationa
3. Performance aaaaaa

6. BAD PERFORMANCE
“The app is slow…”
“It takes forever to load…”
“In the desktop is much faster…”

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

8. Performance Hurdles
Server
Code behind Servers configs Native shell Web app
Device
3G
Hybrid app
e.g. OutSystems Now
Infrastructure

9. Performance Hurdles
Server
Code behind Servers configs Native shell Web app
Device
3G
Infrastructure

10. Integrations
Synchronous integrations
Deadly sin!
BetterBad

11. Cache
Much BetterBetterBad

12. Preparation
Bad Better

13. Preparation
Bad Better
List_LateLoad
RichWidgets

14. Design for (perceived) performance
Load
information
already
available
Load remaining
asynchronously
Perceived Performance
how quickly a software
feature appears to
perform its task

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

16. Performance Hurdles
Server
Code behind Servers configs Native shell Web app
Device
3G
Infrastructure

17. Cache-control
Enables the server to specify which components are cacheable.
First load
2.66s
First load
1.0 MB

18. Subsequent loads
458ms
Subsequent loads
13.1KB
Cache-control
Enables the server to specify which components are cacheable.
78x smaller
5.8x faster

19. HTTP compression
Server compresses the data before sent it to the client
Source description: wikipedia
11.4 KB
4.2x smaller
47.9 KB

20. Redirects - HTTP 30x
Why avoid it? Pure waste of time!
Ajax call to
screen action
Redirect

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

22. Server configs
• Enable HTTP compression
• Enable Cache-control
• Avoid Redirects - HTTP 302
• Avoid domain sharding
Must haves!

23. Performance Hurdles
Server
Code behind Servers configs Native shell Web app
DeviceInfrastructure
3G

24. Latency
Time interval between the request and the response
Source definition: wikipedia
Mobile
50 – 550ms
350 ms
Desktop
20 – 150ms
80ms
Bandwidth can
always be
increased but
latency cannot
be decreased
function of the electrical
characteristics of the circuit
Source: dslreports

25. Cloud Server location
Rule of thumb: pick a region closer to the users
• Lower network latency
• Quick response time
• Higher bandwidth
www.cloudping.info

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

27. Infrastructure
• Latency can be high on mobile
• Choose cloud server region based on user location
• Use CDNs if necessary
3G

28. Performance Hurdles
Server
Code behind Servers configs Native shell Web app
DeviceInfrastructure
3G

29. Cache-control
• Native Webview cache not
active by default
• OutSystems Now already has it
implemented

30. 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
5x
faster
5x
faster
9s 3s
16s 3s
Loading time
3x
faster
5x
faster
WITH ADD-ONWITHOUT ADD-ON
iPhone 5
Android 4.4
Wi-Fi connection
First-time access

31. Native shell
• Use OutSystems Now
• Pre-Bundle static resources - images, fonts…
Cache already active

32. Performance Hurdles
Server
Code behind Servers configs Native shell Web app
DeviceInfrastructure
3G

33. JavaScript
How 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

34. JavaScript
1,5x 3,9x 9,8x
DELL E6440
Chrome 42
237ms
IPhone 6 Plus
Safari
360ms
Nokia Lumia 925
IE 11
924ms
Samsung Tab4
chrome
2312ms
JavaScript in Mobile?
• Limited resources - cpu, memory, bandwidth…
• Different browsers - different JS engines
Test made on webkit.org

35. JavaScript
Source: bradshawenterprises
• SlideUp() / SlideDown()
• Show() / Hide()
• Animate()
• …
Animations
in your app

36. JavaScript
Simple example
Source: bradshawenterprises

37. JavaScript
jQuery
Source: bradshawenterprises
CSS3

38. JavaScript
jQuery
Source: bradshawenterprises
CSS3
40 events
~9500 events
~3s

39. JavaScript
• Google analytics
• Twitter
• Facebook
• Ads
• …
3rd party JavaScripts
Performance
Killers
Delay page load,
event if marked
as async
Why?
Solution?

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

41. Complex rules
CSS
• [class^="grid-"]
• box-shadow
• transform
Depends of the
number elements
to be applied
Minimize the usage of these properties

42. CSS
@Import CSS
CSS
JS
Crucial for rendering
@import delays
page rendering
HTML

43. CSS
Unused code
Source: Ben Frain
• Add 3000 lines of unused code
• Change the colors of links
Remove half
~20% ~40% ~22% ~18% ~18%

44. CSS
Images
25 x 25 px 88 x 100 px
Don’t resize images
client-side

45. Web app
• Avoid complex CSS rules
• Avoid @imports
• Remove unused CSS
• Resize images server side

46. HTTP requests
They 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!

47. HTTP requests
By far the biggest hurdle
71 requests
~8s to Load
17 CSS
25 JS
21 img
4 fonts
3G (750 Kbps 100ms RTT)
762 KB
downloaded
Your typical
OutSystems
Application

48. HTTP requests
The Platform enables modular code!

49. CSS Optimization
The Platform Amsterdam helps
Source: OutSystems community
Less HTTP Requests
Webblocks CSS
aggregation

50. Web app
• Reduce HTTP requests
 Avoid CSS in pages
 Minimize CSS in webblocks
 Minimize JavaScript in webblocks
 Beware of Themes inheritance

51. Platform tips
Notify Widget
Notify
Client Server
w6
w5
…
Layout
Page
Ajax refresh
Remember
Mobile Latency?
w6
w5
w4
w3
w2
w1
~350ms

52. Platform tips
• Increasingly heavier Ajax Requests
• DOM will increase
• Memory usage increase
Infinite scroll
Prefer pagination
when dealing with large amounts of data

53. Silk UI Framework
Tokyo Theme
• CSS optimizations
• Light weight JavaScript
• Mobile specific widgets

54. Web app
• Avoid Notify widget
• Avoid Infinite scroll pattern
• Use Tokyo Theme For mobile apps

55. Takeaways
Take the whole deck!

56. Mobile Performance
is easily affected

57. You won’t get it
right at first

58. Platform Amsterdam
is here to help

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

60. Questions?
But easy ones, please!