vietnam mobile day 2013: json, memory usage & interaction design
DESCRIPTION
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.TRANSCRIPT
![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