JSON, Memory Usage & Interaction DesignExperience in Boosting Performance for an iOS / Android ApplicationLucas NguyenVINO...
About VINOVA•  Vinova = Vibrant Innovators–  iOS / Android / Windows Phone–  For Singapore Enterprises & Organizations•  2...
About ME•  Lead Mobile Developer at VINOVA•  3-year experience on Native iOS,Android, and Cross-PlatformTechnologies•  Bac...
Great ClientSingapore Press Holdings (SPH) - 
Southeast Asia’s Leading Media Organization
Big PROJECT•  Straits Times Online Mobile Print (STOMP)•  Award-winning website & mobile app•  Singaporean connecting, eng...
MISSIONRevamp a very popular iOS & Android app to serveend-users better, faster!STOMP v1 STOMP v2
Old Version
New versionChallenges:•  Complex Design•  Lots of Advertisement Banners•  Old, Slow & Heavy APIs (14.7MB of XML in total)
1-Star Rating User ComplainsClient’s DissatisfactionApp Crashes & HangsWhen 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•  ControlledLightning Server
Remove reduntdant data•  Full image URLs? NO!•  Just need [id] and [token] to regenerate the URL–  thumbnail: http://dswww...
JSON OptimizationArticle items:•  Small•  A lot•  Need to parse first!à Keep rawArticle detail:•  Big•  Need one at a tim...
Our JSON format•  Primary data for main screen(categories & articles listing)•  Secondary data for article detail screen{!...
Best compression methodFormat	   Size	  (MB)	   %	  Remaining	  	  Raw	  XML	   14.7	  MB	   100%	  (1)	  Compact	  JSON	 ...
Watch Out for Memory UsageMemory Usage
Memory Allocation100	  MB	  	  20	  MB	  using allocate10	  MB	  using allocate20	  MB	  Before	  AHer	  
Load remote data one-by-oneIf load 3 ~ 5 categories at the same time à Allocate 10MB ~ 25MB simutaneouslyà Memory Warning
Release memory allocated for off-screen list itemsSmartphone’s screen is smallà  No need to show more than 5categories at...
Photos are dangrous, just like girls•  Only load visible photos!•  Large photo is beautiful, but:–  Take more bandwidth–  ...
ad banners take LotS of memory1MB	  Image	  +	  memory	  for	  Views	  
Interaction DesiGnDon’t Follow theDesign Strictly
One mission per screenOne	  big	  screen:	  ArTcle	  +	  Comments	  ArTcle	   Comments	  Separate	  •  Not everyone needs ...
User is touching, not clicking, make it easy•  Original designed button is small 
à hard to see and touch•  Make it wider...
Test on low-end devicesiPhone-5 iPhone-4S iPhone-4 iPhone-3GS1GB 512 MB 512 MB 256 MBDual-core 1.2 GHz Dual-core 1 GHz 1 G...
Don’t Believe in Anything ...•  No assumptions•  Update 3rd party librariesusually•  APIs won’t work 100%•  Handle excepti...
Thank you!
http://vinova.sg/summerschoolhttp://vinova.sg/internshipĐÔI LỜI NHẮN NHỦ CÁC BẠN SINH VIÊN
Vibrant InnovatorsNhững người đổi mới đầy nhiệt huyết
Upcoming SlideShare
Loading in …5
×

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

1,012 views
889 views

Published on

Diễn giả: Nguyễn Vũ Long
Đơn vị: Công ty Vinova

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,012
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
42
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. JSON, Memory Usage & Interaction DesignExperience in Boosting Performance for an iOS / Android ApplicationLucas NguyenVINOVA Pte. Ltd.info@vinova.sg
  2. 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. 3. About ME•  Lead Mobile Developer at VINOVA•  3-year experience on Native iOS,Android, and Cross-PlatformTechnologies•  Backend Web Services usingRuby on RailsLucas Nguyen  
  4. 4. Great ClientSingapore Press Holdings (SPH) - 
Southeast Asia’s Leading Media Organization
  5. 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. 6. MISSIONRevamp a very popular iOS & Android app to serveend-users better, faster!STOMP v1 STOMP v2
  7. 7. Old Version
  8. 8. New versionChallenges:•  Complex Design•  Lots of Advertisement Banners•  Old, Slow & Heavy APIs (14.7MB of XML in total)
  9. 9. 1-Star Rating User ComplainsClient’s DissatisfactionApp Crashes & HangsWhen We Took Over The Project
  10. 10. What Did We Think?F i n d       t h e         s o l u t i o n  
  11. 11. How Did We Solve The Problem?1 2 3
  12. 12. XML to JSON Conversion•  Heavy•  Slow•  Uncontrolled•  Light•  Fast•  ControlledLightning Server
  13. 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. 14. JSON OptimizationArticle items:•  Small•  A lot•  Need to parse first!à Keep rawArticle detail:•  Big•  Need one at a time•  Have more time to parse
à Gzip to binary à Encode base64
  15. 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. 16. Best compression methodFormat   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. 17. Watch Out for Memory UsageMemory Usage
  18. 18. Memory Allocation100  MB    20  MB  using allocate10  MB  using allocate20  MB  Before  AHer  
  19. 19. Load remote data one-by-oneIf load 3 ~ 5 categories at the same time à Allocate 10MB ~ 25MB simutaneouslyà Memory Warning
  20. 20. Release memory allocated for off-screen list itemsSmartphone’s screen is smallà  No need to show more than 5categories at onceà  Release all invisible componentsto reduce memory usage12345
  21. 21. Photos are dangrous, just like girls•  Only load visible photos!•  Large photo is beautiful, but:–  Take more bandwidth–  Take more memory & GPU to renderPhotos Quan9ty Avg.  Size Memory  Usagehigh res. 20  ~  24 ~30KB 10MB  ~  15MBlow res. 20  ~  24 ~05KB 03MB  ~  04MB
  22. 22. ad banners take LotS of memory1MB  Image  +  memory  for  Views  
  23. 23. Interaction DesiGnDon’t Follow theDesign Strictly
  24. 24. One mission per screenOne  big  screen:  ArTcle  +  Comments  ArTcle   Comments  Separate  •  Not everyone needs to seecomments•  Better UX•  Lighter UI
  25. 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. 26. Test on low-end devicesiPhone-5 iPhone-4S iPhone-4 iPhone-3GS1GB 512 MB 512 MB 256 MBDual-core 1.2 GHz Dual-core 1 GHz 1 GHz 600 MHz
  27. 27. Don’t Believe in Anything ...•  No assumptions•  Update 3rd party librariesusually•  APIs won’t work 100%•  Handle exceptions
  28. 28. Thank you!
  29. 29. http://vinova.sg/summerschoolhttp://vinova.sg/internshipĐÔI LỜI NHẮN NHỦ CÁC BẠN SINH VIÊN
  30. 30. Vibrant InnovatorsNhững người đổi mới đầy nhiệt huyết

×