Slides during the Softcon 2015 - Fine tuning Hybrid Mobile Apps

1. Fine Tuning
Hybrid Mobile Apps

2. So, what is a
hybrid?

6. Perception of Performance

7. 0.1 second
1 second
10 seconds
Weber-Fechner Law
20%noticeable
improvement

8. Button Response
• The dreaded 300ms delay
300 ms 0 ms

9. Button Response
• Use click library:
– Fastclick.js
– Angular Touch
• Disable zoom

10. Button Response
• Use div and ng-click

11. Define Button Active State

12. Mobile Network
• Network latency is the greatest contributor of
slooow response.
• Thus, reduce network access.
• Should we render pages from the server?

13. Use Single Page App
Or Appgyver Multipage App

14. Enable Gzip Compression
60 - 70% Compression
Enable gzip support on server.
mod_gzip, server.xml, etc.
Enable gzip support on client, if necessary.

15. Enable Gzip Compression
Check using Chrome Developer Tool > Network.

16. Use Websocket
• Websocket is already supported using Javascript
on mobile.
• Transfer data in JSON format. Encoding and
decoding is built-in using Javascript

17. Handle Offline and Slow Network
• Check if online using navigator…

18. Handle Offline and Slow Network
1. Setup a timer

19. Handle Offline and Slow Network

20. Use Status Indicators

21. • Native Shell
• Native Navigation
• Webview Content
David Heinemeir Hansson,
Creator of Ruby on Rails

22. Database Queries
• Usual SQL Query optimization applies
• Using paging with unlimited scroll
– Append LIMIT X OFFSET Y in SQL Query
– Check end of scroll

23. 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

24. Displaying Lists and Scrolls

25. Displaying Lists and Scrolls
• Reverting to angular scope from Javascript

26. 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’

27. 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/

28. CSS Animation

29. CSS Animation

30. 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,

31. Minimize Browser Reflow
• Generated HTML offline
• Reduce depth of DOM
• Avoid unnecessary complex CSS selector

32. 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

33. Chrome Dev Tools

34. Chrome Dev Tools

35. Unit Tests
• Jasmine and Karma for Behavior Driven
Testing

37. Thank You
Allan C. Tan, SCEA, PMP
CEO/President
Email: allan@ideyatech.com
http://www.ideyatech.com/
allanctan
@allanctan ph.linkedin.com/in/allanctan/

38. 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/