Delivering Mobile Apps That Perform
-
Upload
ruben-goncalves -
Category
Technology
-
view
91 -
download
7
Transcript of Delivering Mobile Apps That Perform
![Page 1: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/1.jpg)
Delivering Mobile Apps that Perform
As simple as that or not!
Team leader of Mobile ServicesOutSystems
Rúben Gonçalves
![Page 2: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/2.jpg)
NextStep 2013
![Page 3: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/3.jpg)
NextStep 2013
![Page 4: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/4.jpg)
What happen since then?
You’ve built tons of mobile apps!
![Page 5: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/5.jpg)
Major Pains?
1. Different form factors2. UI of the applicationa3. Performance aaaaaa
![Page 6: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/6.jpg)
BAD PERFORMANCE
“The app is slow…”“It takes forever to load…”
“In the desktop is much faster…”
![Page 7: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/7.jpg)
WHY?
Why is the app slow?What and how can it be improved?
![Page 8: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/8.jpg)
Performance HurdlesServer
Code behind Servers configs Native shell Web app
Device
3G
Hybrid appe.g. OutSystems Now
Infrastructure
![Page 9: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/9.jpg)
Performance HurdlesServer
Code behind Servers configs Native shell Web app
Device
3G
Infrastructure
![Page 10: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/10.jpg)
Integrations
Synchronous integrations
Deadly sin!
BetterBad
![Page 11: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/11.jpg)
CacheMuch BetterBetterBad
![Page 12: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/12.jpg)
PreparationBad Better
![Page 13: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/13.jpg)
PreparationBad Better
List_LateLoadRichWidgets
![Page 14: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/14.jpg)
Design for (perceived) performance
Load information
already available
Load remaining asynchronously
Perceived Performancehow quickly a software feature appears to perform its task
![Page 15: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/15.jpg)
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
![Page 16: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/16.jpg)
Performance HurdlesServer
Code behind Servers configs Native shell Web app
Device
3G
Infrastructure
![Page 17: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/17.jpg)
Cache-controlEnables the server to specify which components are cacheable.
First load
2.66sFirst load
1.0 MB
![Page 18: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/18.jpg)
Subsequent loads
458msSubsequent loads
13.1KB
Cache-controlEnables the server to specify which components are cacheable.
78x smaller
5.8x faster
![Page 19: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/19.jpg)
HTTP compressionServer compresses the data before sent it to the client
Source description: wikipedia
11.4 KB
4.2x smaller
47.9 KB
![Page 20: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/20.jpg)
Redirects - HTTP 30xWhy avoid it? Pure waste of time!
Ajax call to screen action
Redirect
![Page 21: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/21.jpg)
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
![Page 22: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/22.jpg)
Server configs
• Enable HTTP compression• Enable Cache-control• Avoid Redirects - HTTP 302• Avoid domain sharding
Must haves!
![Page 23: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/23.jpg)
Performance HurdlesServer
Code behind Servers configs Native shell Web app
DeviceInfrastructure
3G
![Page 24: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/24.jpg)
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
![Page 25: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/25.jpg)
Cloud Server locationRule of thumb: pick a region closer to the users• Lower network latency• Quick response time• Higher bandwidth
www.cloudping.info
![Page 26: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/26.jpg)
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
![Page 27: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/27.jpg)
Infrastructure
• Latency can be high on mobile• Choose cloud server region based on user location• Use CDNs if necessary
3G
![Page 28: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/28.jpg)
Performance HurdlesServer
Code behind Servers configs Native shell Web app
DeviceInfrastructure
3G
![Page 29: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/29.jpg)
Cache-control
• Native Webview cache not active by default
• OutSystems Now already has it implemented
![Page 30: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/30.jpg)
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
![Page 31: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/31.jpg)
Native shell
• Use OutSystems Now• Pre-Bundle static resources - images, fonts…
Cache already active
![Page 32: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/32.jpg)
Performance HurdlesServer
Code behind Servers configs Native shell Web app
DeviceInfrastructure
3G
![Page 33: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/33.jpg)
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
![Page 34: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/34.jpg)
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
![Page 35: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/35.jpg)
JavaScript
Source: bradshawenterprises
• SlideUp() / SlideDown()• Show() / Hide()• Animate()• …
Animationsin your app
![Page 36: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/36.jpg)
JavaScriptSimple example
Source: bradshawenterprises
![Page 37: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/37.jpg)
JavaScriptjQuery
Source: bradshawenterprises
CSS3
![Page 38: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/38.jpg)
JavaScriptjQuery
Source: bradshawenterprises
CSS3
40 events~9500 events~3s
![Page 39: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/39.jpg)
JavaScript
• Google analytics• Twitter• Facebook• Ads• …
3rd party JavaScripts
PerformanceKillers
Delay page load, event if marked
as async
Why?
Solution?
![Page 40: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/40.jpg)
Web app
• Avoid JavaScript animations• JavaScript runs slower in devices• Run JavaScript after load• Beware JavaScript - your friend or killer
![Page 41: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/41.jpg)
Complex rules
CSS
• [class^="grid-"]• box-shadow• transform
Depends of thenumber elementsto be applied
Minimize the usage of these properties
![Page 42: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/42.jpg)
CSS@Import CSS
CSS
JS
Crucial for rendering@import delays page rendering
HTML
![Page 43: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/43.jpg)
CSSUnused code
Source: Ben Frain
• Add 3000 lines of unused code• Change the colors of links
Remove half
~20% ~40% ~22% ~18% ~18%
![Page 44: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/44.jpg)
CSSImages
25 x 25 px 88 x 100 px
Don’t resize images client-side
![Page 45: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/45.jpg)
Web app
• Avoid complex CSS rules• Avoid @imports• Remove unused CSS• Resize images server side
![Page 46: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/46.jpg)
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!
![Page 47: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/47.jpg)
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
![Page 48: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/48.jpg)
HTTP requestsThe Platform enables modular code!
+1 css file
+1 JS file
![Page 49: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/49.jpg)
CSS OptimizationThe Platform Amsterdam helps
Source: OutSystems community
Less HTTP Requests
Webblocks CSS aggregation
![Page 50: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/50.jpg)
Web app
• Reduce HTTP requests Avoid CSS in pages Minimize CSS in webblocks Minimize JavaScript in webblocks Beware of Themes inheritance
![Page 51: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/51.jpg)
Platform tipsNotify Widget
Notify
Client Server
w6
w5
…
LayoutPage
Ajax refresh
Remember Mobile Latency?
w6w5
w4w3
w2w1
~350ms
![Page 52: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/52.jpg)
Platform tips
• Increasingly heavier Ajax Requests• DOM will increase• Memory usage increase
Infinite scroll
Prefer paginationwhen dealing with large amounts of data
![Page 53: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/53.jpg)
Silk UI FrameworkTokyo Theme• CSS optimizations• Light weight JavaScript• Mobile specific widgets
![Page 54: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/54.jpg)
Web app
• Avoid Notify widget• Avoid Infinite scroll pattern• Use Tokyo Theme For mobile apps
![Page 55: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/55.jpg)
TakeawaysTake the whole deck!
![Page 56: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/56.jpg)
Mobile Performanceis easily affected
![Page 57: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/57.jpg)
You won’t get it right at first
![Page 58: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/58.jpg)
Platform Amsterdamis here to help
![Page 59: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/59.jpg)
Thank you!Either clap your hands or throw tomatoes! :)
![Page 60: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/60.jpg)
Questions?But easy ones, please!
![Page 61: Delivering Mobile Apps That Perform](https://reader037.fdocuments.us/reader037/viewer/2022102918/5878408f1a28ab707b8b65ed/html5/thumbnails/61.jpg)