![Page 1: Vietnam Mobile Day 2013: JSON, Memory Usage & Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081401/559510401a28ab00108b467b/html5/thumbnails/1.jpg)
JSON, Memory Usage & Interaction Design Experience in Boosting Performance for an iOS / Android Application
Lucas Nguyen VINOVA Pte. Ltd. [email protected]
![Page 2: Vietnam Mobile Day 2013: JSON, Memory Usage & Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081401/559510401a28ab00108b467b/html5/thumbnails/2.jpg)
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
![Page 3: Vietnam Mobile Day 2013: JSON, Memory Usage & Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081401/559510401a28ab00108b467b/html5/thumbnails/3.jpg)
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
![Page 4: Vietnam Mobile Day 2013: JSON, Memory Usage & Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081401/559510401a28ab00108b467b/html5/thumbnails/4.jpg)
Great Client
Singapore Press Holdings (SPH) - Southeast Asia’s Leading Media Organization
![Page 5: Vietnam Mobile Day 2013: JSON, Memory Usage & Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081401/559510401a28ab00108b467b/html5/thumbnails/5.jpg)
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
![Page 6: Vietnam Mobile Day 2013: JSON, Memory Usage & Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081401/559510401a28ab00108b467b/html5/thumbnails/6.jpg)
MISSION
Revamp a very popular iOS & Android app to serve end-users better, faster!
STOMP v1 STOMP v2
![Page 7: Vietnam Mobile Day 2013: JSON, Memory Usage & Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081401/559510401a28ab00108b467b/html5/thumbnails/7.jpg)
Old Version
![Page 8: Vietnam Mobile Day 2013: JSON, Memory Usage & Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081401/559510401a28ab00108b467b/html5/thumbnails/8.jpg)
New version
Challenges: • Complex Design • Lots of Advertisement Banners • Old, Slow & Heavy APIs (14.7MB of XML in total)
![Page 9: Vietnam Mobile Day 2013: JSON, Memory Usage & Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081401/559510401a28ab00108b467b/html5/thumbnails/9.jpg)
1-Star Rating User Complains
Client’s Dissatisfaction App Crashes & Hangs
When We Took Over The Project
![Page 10: Vietnam Mobile Day 2013: JSON, Memory Usage & Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081401/559510401a28ab00108b467b/html5/thumbnails/10.jpg)
What Did We Think?
F i n d t h e s o l u t i o n
![Page 11: Vietnam Mobile Day 2013: JSON, Memory Usage & Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081401/559510401a28ab00108b467b/html5/thumbnails/11.jpg)
How Did We Solve The Problem?
1 2 3
![Page 12: Vietnam Mobile Day 2013: JSON, Memory Usage & Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081401/559510401a28ab00108b467b/html5/thumbnails/12.jpg)
XML to JSON Conversion
• Heavy • Slow • Uncontrolled
• Light • Fast • Controlled
Lightning Server
![Page 13: Vietnam Mobile Day 2013: JSON, Memory Usage & Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081401/559510401a28ab00108b467b/html5/thumbnails/13.jpg)
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: […]!}!
![Page 14: Vietnam Mobile Day 2013: JSON, Memory Usage & Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081401/559510401a28ab00108b467b/html5/thumbnails/14.jpg)
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
![Page 15: Vietnam Mobile Day 2013: JSON, Memory Usage & Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081401/559510401a28ab00108b467b/html5/thumbnails/15.jpg)
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
![Page 16: Vietnam Mobile Day 2013: JSON, Memory Usage & Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081401/559510401a28ab00108b467b/html5/thumbnails/16.jpg)
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
![Page 17: Vietnam Mobile Day 2013: JSON, Memory Usage & Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081401/559510401a28ab00108b467b/html5/thumbnails/17.jpg)
Watch Out for Memory Usage
Memory Usage
![Page 18: Vietnam Mobile Day 2013: JSON, Memory Usage & Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081401/559510401a28ab00108b467b/html5/thumbnails/18.jpg)
Memory Allocation
100 MB
20 MB
using allocate
10 MB using allocate
20 MB
Before
AHer
![Page 19: Vietnam Mobile Day 2013: JSON, Memory Usage & Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081401/559510401a28ab00108b467b/html5/thumbnails/19.jpg)
Load remote data one-by-one
If load 3 ~ 5 categories at the same time à Allocate 10MB ~ 25MB simutaneously à Memory Warning
![Page 20: Vietnam Mobile Day 2013: JSON, Memory Usage & Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081401/559510401a28ab00108b467b/html5/thumbnails/20.jpg)
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
![Page 21: Vietnam Mobile Day 2013: JSON, Memory Usage & Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081401/559510401a28ab00108b467b/html5/thumbnails/21.jpg)
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
![Page 22: Vietnam Mobile Day 2013: JSON, Memory Usage & Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081401/559510401a28ab00108b467b/html5/thumbnails/22.jpg)
ad banners take LotS of memory
1MB Image +
memory for Views
![Page 23: Vietnam Mobile Day 2013: JSON, Memory Usage & Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081401/559510401a28ab00108b467b/html5/thumbnails/23.jpg)
Interaction DesiGn
Don’t Follow the
Design Strictly
![Page 24: Vietnam Mobile Day 2013: JSON, Memory Usage & Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081401/559510401a28ab00108b467b/html5/thumbnails/24.jpg)
One mission per screen
One big screen: ArTcle + Comments
ArTcle Comments
Separate
• Not everyone needs to see comments
• Better UX • Lighter UI
![Page 25: Vietnam Mobile Day 2013: JSON, Memory Usage & Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081401/559510401a28ab00108b467b/html5/thumbnails/25.jpg)
User is touching, not clicking, make it easy
• Original designed button is small à hard to see and touch
• Make it wider!
Original Wider
![Page 26: Vietnam Mobile Day 2013: JSON, Memory Usage & Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081401/559510401a28ab00108b467b/html5/thumbnails/26.jpg)
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
![Page 27: Vietnam Mobile Day 2013: JSON, Memory Usage & Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081401/559510401a28ab00108b467b/html5/thumbnails/27.jpg)
Don’t Believe in Anything ...
• No assumptions
• Update 3rd party libraries usually
• APIs won’t work 100%
• Handle exceptions
![Page 28: Vietnam Mobile Day 2013: JSON, Memory Usage & Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081401/559510401a28ab00108b467b/html5/thumbnails/28.jpg)
Thank you!
![Page 29: Vietnam Mobile Day 2013: JSON, Memory Usage & Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081401/559510401a28ab00108b467b/html5/thumbnails/29.jpg)
http://vinova.sg/summerschool http://vinova.sg/internship
ĐÔI LỜI NHẮN NHỦ CÁC BẠN SINH VIÊN
![Page 30: Vietnam Mobile Day 2013: JSON, Memory Usage & Interaction Design](https://reader036.vdocuments.mx/reader036/viewer/2022081401/559510401a28ab00108b467b/html5/thumbnails/30.jpg)
Vibrant Innovators
Những người đổi mới đầy nhiệt huyết