• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
760
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
41
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. JSON, Memory Usage & Interaction DesignExperience in Boosting Performance for an iOS / Android ApplicationLucas NguyenVINOVA 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-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: 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 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!
  • 29. http://vinova.sg/summerschoolhttp://vinova.sg/internshipĐÔI LỜI NHẮN NHỦ CÁC BẠN SINH VIÊN
  • 30. Vibrant InnovatorsNhững người đổi mới đầy nhiệt huyết