Your SlideShare is downloading. ×
[Vietnam Mobile Day 2013] - tối ưu hóa cho mobile json, bộ nhớ và tương tác
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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


Published on

Diễn giả: Nguyễn Vũ Long …

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

Published in: Technology, Business

1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. JSON, Memory Usage & Interaction DesignExperience in Boosting Performance for an iOS / Android ApplicationLucas NguyenVINOVA Pte.
  • 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-PlatformTechnologies•  Backend Web Services usingRuby on RailsLucas Nguyen  
  • 4. Great ClientSingapore 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. MISSIONRevamp a very popular iOS & Android app to serveend-users better, faster!STOMP v1 STOMP v2
  • 7. Old Version
  • 8. New versionChallenges:•  Complex Design•  Lots of Advertisement Banners•  Old, Slow & Heavy APIs (14.7MB of XML in total)
  • 9. 1-Star Rating User ComplainsClient’s DissatisfactionApp Crashes & HangsWhen 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•  ControlledLightning Server
  • 13. Remove reduntdant data•  Full image URLs? NO!•  Just need [id] and [token] to regenerate the URL–  thumbnail:{id}–  image:{id}/data/#{token}-data.jpg{!id: "1668324” !title: ”Butter Factory’s…”,!thumbnails: […],!images: […]!}!
  • 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. 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 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. Watch Out for Memory UsageMemory Usage
  • 18. Memory Allocation100  MB    20  MB  using allocate10  MB  using allocate20  MB  Before  AHer  
  • 19. Load remote data one-by-oneIf load 3 ~ 5 categories at the same time à Allocate 10MB ~ 25MB simutaneouslyà Memory Warning
  • 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. 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. ad banners take LotS of memory1MB  Image  +  memory  for  Views  
  • 23. Interaction DesiGnDon’t Follow theDesign Strictly
  • 24. One mission per screenOne  big  screen:  ArTcle  +  Comments  ArTcle   Comments  Separate  •  Not everyone needs to seecomments•  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 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. Don’t Believe in Anything ...•  No assumptions•  Update 3rd party librariesusually•  APIs won’t work 100%•  Handle exceptions
  • 28. Thank you!
  • 30. Vibrant InnovatorsNhững người đổi mới đầy nhiệt huyết