JSON, Memory Usage & Interaction Design

Experience in Boosting Performance for an iOS / Android Application

Transcript

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 70  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