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/
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
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
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
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
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
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
Good morning!
Welcome to the Performance in Mobile Apps session! (This was the original name, until it reached the marketing team)
Hopefully many of you that are here have been building mobile apps.
In this session we’ll try to go thru what affects the performance and how we can deal with it.
But before we start…. How many of you were in NextStep 2013?
Two years ago, I was trying to persuade you to go mobile, while recommending you do and don’t when going mobile.
So the next question is ….
You might have heard comments like those….
The bad news here is, If you didn’t hear, that’s probably because you’re not trying hard enough!
Cause as soon as you leave the PoC app, things start to get tough, performance wise.
So during this session we’ll go thru each one of the areas that affect the performance in mobile.
--
Hopefully when the new performance monitor comes to live, it will helps exactly in this.
--
This is the part where I do the disclaimer…
Typically I’m like “how am I going to fill in 30 minutes?” but this time was more like “How am I going to fit this in 30 min?!?”
Somethings were oversimplified or simply cut of the presentation so that it could actually fit.
These limits were established in 1999 in the HTTP/1.1 specification by the Internet Engineering Task Force (IETF). The intent of the limit was to avoid overloading web servers and to reduce internet congestion. The commonly used limit is no more than two simultaneous connections with any server or proxy.
Serving GPRS (General Packet Radio Service) Support Node
Gateway GPRS Support Node