Bài chia sẻ của anh Nguyễn Vũ Long (Lucas Nguyen) đến từ Vinova tại hội thảo Vietnam Mobile Day 2013 tổ chức tại Hà Nội vào ngày 11/05/2013.

1. JSON, Memory Usage & Interaction Design
Experience in Boosting Performance for an iOS / Android Application
Lucas Nguyen
VINOVA Pte. Ltd.
info@vinova.sg

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

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

4. Great Client
Singapore Press Holdings (SPH) -
Southeast Asia’s Leading Media Organization

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

6. MISSION
Revamp a very popular iOS & Android app to serve
end-users better, faster!
STOMP v1
STOMP v2

7. Old Version

8. New version
Challenges:
• Complex Design
• Lots of Advertisement Banners
• Old, Slow & Heavy APIs (14.7MB of XML in total)

9. 1-Star Rating
User Complains
Client’s Dissatisfaction
App Crashes & Hangs
When We Took Over The Project

10. What Did We Think?
F i n d
t h e
s o l u t i o n

11. How Did We Solve The Problem?
1 2 3

12. XML to JSON Conversion
• Heavy
• Slow
• Uncontrolled
• Light
• Fast
• Controlled
Lightning Server

13. 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: […]!
}!

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

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

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

17. Watch Out for Memory Usage
Memory Usage

18. Memory Allocation
100
MB
20
MB
using
allocate
10
MB
using
allocate
20
MB
Before
AHer

19. Load remote data one-by-one
If load 3 ~ 5 categories at the same time
à Allocate 10MB ~ 25MB simutaneously
à Memory Warning

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

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

22. ad banners take LotS of memory
1MB
Image
+
memory
for
Views

23. Interaction DesiGn
Don’t Follow the
Design Strictly

24. One mission per screen
One
big
screen:
ArTcle
+
Comments
ArTcle
Comments
Separate
• Not everyone needs to see
comments
• Better UX
• Lighter UI

25. User is touching, not clicking, make it easy
• Original designed button is small
à hard to see and touch
• Make it wider!
Original
Wider

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

27. Don’t Believe in Anything ...
• No assumptions
• Update 3rd party libraries
usually
• APIs won’t work 100%
• Handle exceptions

28. Thank you!

29. http://vinova.sg/summerschool
http://vinova.sg/internship
ĐÔI LỜI NHẮN NHỦ CÁC BẠN SINH VIÊN

30. Vibrant Innovators
Những người đổi mới đầy nhiệt huyết