[Vietnam Mobile Day 2013] - tối ưu hóa cho mobile json, bộ nhớ và tương tác

JSON, Memory Usage & Interaction Design Experience in Boosting Performance for an iOS / Android Application

Lucas Nguyen VINOVA Pte. Ltd. info@vinova.sg

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