Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Fine tuning Hybrid Mobile App

426 views

Published on

Slides during the Softcon 2015 - Fine tuning Hybrid Mobile Apps

Published in: Mobile
  • Be the first to comment

Fine tuning Hybrid Mobile App

  1. 1. Fine Tuning Hybrid Mobile Apps
  2. 2. So, what is a hybrid?
  3. 3. Perception of Performance
  4. 4. 0.1 second 1 second 10 seconds Weber-Fechner Law 20%noticeable improvement
  5. 5. Button Response • The dreaded 300ms delay 300 ms 0 ms
  6. 6. Button Response • Use click library: – Fastclick.js – Angular Touch • Disable zoom
  7. 7. Button Response • Use div and ng-click
  8. 8. Define Button Active State
  9. 9. Mobile Network • Network latency is the greatest contributor of slooow response. • Thus, reduce network access. • Should we render pages from the server?
  10. 10. Use Single Page App Or Appgyver Multipage App
  11. 11. Enable Gzip Compression 60 - 70% Compression Enable gzip support on server. mod_gzip, server.xml, etc. Enable gzip support on client, if necessary.
  12. 12. Enable Gzip Compression Check using Chrome Developer Tool > Network.
  13. 13. Use Websocket • Websocket is already supported using Javascript on mobile. • Transfer data in JSON format. Encoding and decoding is built-in using Javascript
  14. 14. Handle Offline and Slow Network • Check if online using navigator…
  15. 15. Handle Offline and Slow Network 1. Setup a timer
  16. 16. Handle Offline and Slow Network
  17. 17. Use Status Indicators
  18. 18. • Native Shell • Native Navigation • Webview Content David Heinemeir Hansson, Creator of Ruby on Rails
  19. 19. Database Queries • Usual SQL Query optimization applies • Using paging with unlimited scroll – Append LIMIT X OFFSET Y in SQL Query – Check end of scroll
  20. 20. Displaying Lists and Scrolls • when displaying with more than 300 items: – Review UX – Avoid ng-repeat, or use ‘track by’ to avoid rebuilding the DOM – Use plain Javascript and database query
  21. 21. Displaying Lists and Scrolls
  22. 22. Displaying Lists and Scrolls • Reverting to angular scope from Javascript
  23. 23. Use Full Text Search • Hooray! SqlLite supports Full Text Search (FTS3, FTS4) CREATE VIRTUAL TABLE papers USING fts3(subject, body); SELECT * FROM mail WHERE body MATCH 'sqlite'; • Test Results with over 100k records - FTS is 61% faster than ‘like’
  24. 24. Local Storage • Store data on local as cache – Local Storage – Local Database • Use local storage for temporary storage. • Use database for persistent storage. http://gonehybrid.com/dont-assume-localstorage-will-always- work-in-your-hybrid-app/
  25. 25. CSS Animation
  26. 26. CSS Animation
  27. 27. Track Events and Error • User activity and events are crucial to usability. • Tracking events is key to great application design. • Several solutions available: Crashlytics, Rollbar, Mixpanel, Google Analytics,
  28. 28. Minimize Browser Reflow • Generated HTML offline • Reduce depth of DOM • Avoid unnecessary complex CSS selector
  29. 29. Other Rendering Tips • Optimize images to avoid resizing • Use SVG instead of Images • Use image sprites • Avoid Shadows and Gradients • Consider using SPDY / HTTP2 Protocol • Use Crosswalk
  30. 30. Chrome Dev Tools
  31. 31. Chrome Dev Tools
  32. 32. Unit Tests • Jasmine and Karma for Behavior Driven Testing
  33. 33. Thank You Allan C. Tan, SCEA, PMP CEO/President Email: allan@ideyatech.com http://www.ideyatech.com/ allanctan @allanctan ph.linkedin.com/in/allanctan/
  34. 34. Resources • http://social.technet.microsoft.com/wiki/contents/article s/27828.windows-phone-cross-platform-mobile- architecture.aspx • https://signalvnoise.com/posts/3743-hybrid-sweet-spot- native-navigation-web-content • https://engineering.linkedin.com/mobile/linkedin-ipad- nativeweb-messaging-bridge-and-websockets • http://blog.smartbear.com/web-monitoring/all-im- offering-you-is-the-truth/ • http://www.nngroup.com/articles/powers-of-10-time- scales-in-ux/

×