JSON, Memory Usage & Interaction Design Experience in Boosting Performance for an iOS / Android Application
Lucas Nguyen VINOVA Pte. Ltd. [email protected]
About VINOVA
• Vinova = Vibrant Innovators – iOS / Android / Windows Phone – For Singapore Enterprises & Organizations
• 2010 Founded in Singapore • 2011 Representative Office in Hanoi • 2012+ Push for Mobile Game
About ME
• Lead Mobile Developer at VINOVA
• 3-year experience on Native iOS, Android, and Cross-Platform Technologies
• Backend Web Services using Ruby on Rails Lucas Nguyen
Great Client
Singapore Press Holdings (SPH) - Southeast Asia’s Leading Media Organization
Big PROJECT
• Straits Times Online Mobile Print (STOMP) • Award-winning website & mobile app • Singaporean connecting, engaging and interacting • 0.5m concurrent users at peak hours • 1.8m page-views per day
MISSION
Revamp a very popular iOS & Android app to serve end-users better, faster!
STOMP v1 STOMP v2
Old Version
New version
Challenges: • Complex Design • Lots of Advertisement Banners • Old, Slow & Heavy APIs (14.7MB of XML in total)
1-Star Rating User Complains
Client’s Dissatisfaction App Crashes & Hangs
When We Took Over The Project
What Did We Think?
F i n d t h e s o l u t i o n
How Did We Solve The Problem?
1 2 3
XML to JSON Conversion
• Heavy • Slow • Uncontrolled
• Light • Fast • Controlled
Lightning Server
Remove reduntdant data
• Full image URLs? NO! • Just need [id] and [token] to regenerate the URL
– thumbnail: http://dswww.stomp.com.sg/site/servlet/iphone/photo?photoId=#{id}
– image: http://static.stomp.com.sg/site/servlet/linkableblob/stomp/#{id}/data/#{token}-data.jpg
{! id: "1668324” ! title: ”Butter Factory’s…”,! thumbnails: […],! images: […]!}!
JSON Optimization
Article items: • Small • A lot • Need to parse first!
à Keep raw
Article detail: • Big • Need one at a time • Have more time to parse
à Gzip to binary à Encode base64
Our JSON format
• Primary data for main screen (categories & articles listing)
• Secondary data for article detail screen
{! id: "1668324” ! title: ”Butter Factory’s…”,!}!
"eNp1VF2v2zYM/SuEnzYgTfz90bcVaDdcoN...“
{! "date" => "26 Mar 2013",! "views" => "16160",! "comments" => "53",! "content" => ”A 61-year-old retiree…”,! "photos" => [...]!}!
Unpacked
Best compression method
Format Size (MB) % Remaining
Raw XML 14.7 MB 100%
(1) Compact JSON 6.0 MB 40%
(2) Compressed & Compact JSON 3.8 MB 25%
(3) Compressed & Compact BSON 2.9 MB 20%
Best of both worlds: • ¼ size reduced • Easy to read • Easy to decode with popular libs
• Much Faster & Lighter APIs • Easier to scale (using CDN) • Smaller Mobile Memory Usage
Watch Out for Memory Usage
Memory Usage
Memory Allocation
100 MB
20 MB
using allocate
10 MB using allocate
20 MB
Before
AHer
Load remote data one-by-one
If load 3 ~ 5 categories at the same time à Allocate 10MB ~ 25MB simutaneously à Memory Warning
Release memory allocated for off-screen list items
Smartphone’s screen is small à No need to show more than 5
categories at once
à Release all invisible components to reduce memory usage
1
2
3
4
5
Photos are dangrous, just like girls • Only load visible photos! • Large photo is beautiful, but:
– Take more bandwidth – Take more memory & GPU to render
Photos Quan9ty Avg. Size Memory Usage
high res. 20 ~ 24 ~30KB 10MB ~ 15MB
low res. 20 ~ 24 ~05KB 03MB ~ 04MB
ad banners take LotS of memory
1MB Image +
memory for Views
Interaction DesiGn
Don’t Follow the
Design Strictly
One mission per screen
One big screen: ArTcle + Comments
ArTcle Comments
Separate
• Not everyone needs to see comments
• Better UX • Lighter UI
User is touching, not clicking, make it easy
• Original designed button is small à hard to see and touch
• Make it wider!
Original Wider
Test on low-end devices
iPhone-5 iPhone-4S iPhone-4 iPhone-3GS
1GB 512 MB 512 MB 256 MB
Dual-core 1.2 GHz Dual-core 1 GHz 1 GHz 600 MHz
Don’t Believe in Anything ...
• No assumptions
• Update 3rd party libraries usually
• APIs won’t work 100%
• Handle exceptions
Thank you!
http://vinova.sg/summerschool http://vinova.sg/internship
ĐÔI LỜI NHẮN NHỦ CÁC BẠN SINH VIÊN
Vibrant Innovators
Những người đổi mới đầy nhiệt huyết
Top Related