fine tuning hybrid mobile app

Fine-tuning Hybrid Mobile Apps

Fine Tuning Hybrid Mobile Apps

So, what is a hybrid?

4

Basecamp is 90% html and 10% native.5

Perception of Performance

0.1 second 1 second 10 secondsWeber-Fechner Law

20%noticeable improvement

10 secs keep users focus1 secs keep user flow of thought0.1 secs feels instantaneous

7

Button Response

The dreaded 300ms delay

300 ms0 ms

Why is there a 300ms delay?

Let's suppose the user touches a link in iOS Safari. Because the user has the ability to double tap to zoom or scroll, whenever the user touches the screen, the browser does not instantaneously know whether the user meant to click the link, or is double tapping. Therefore iOS Safari waits 300ms after the first tap to see if the user taps again.8

Button ResponseUse click library: Fastclick.js

Angular TouchDisable zoom

Button ResponseUse div and ng-click

Define Button Active State

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

When pages are rendered from the server, updates are easier to deploy.However, latency will make response slower.12

Use Single Page App

Or Appgyver Multipage App

Enable Gzip Compression

60 - 70% Compression

Enable gzip support on server. mod_gzip, server.xml, etc.

Enable gzip support on client, if necessary.

Enable Gzip Compression

Check using Chrome Developer Tool > Network.

Use Websocket

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

Handle Offline and Slow Network

Check if online using navigator

Handle Offline and Slow NetworkSetup a timer

Handle Offline and Slow Network

Use Status Indicators

Native Shell Native NavigationWebview Content

David Heinemeir Hansson, Creator of Ruby on Rails

Database QueriesUsual SQL Query optimization appliesUsing paging with unlimited scrollAppend LIMIT X OFFSET Y in SQL QueryCheck end of scroll

Displaying Lists and Scrollswhen displaying with more than 300 items:Review UXAvoid ng-repeat, or use track by to avoid rebuilding the DOMUse plain Javascript and database query

Displaying Lists and Scrolls

Displaying Lists and ScrollsReverting to angular scope from Javascript

Use Full Text SearchHooray! 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

Local StorageStore data on local as cache Local StorageLocal DatabaseUse local storage for temporary storage.Use database for persistent storage.

http://gonehybrid.com/dont-assume-localstorage-will-always-work-in-your-hybrid-app/

CSS Animation

CSS Animation

Track Events and ErrorUser activity and events are crucial to usability.Tracking events is key to great application design.Several solutions available: Crashlytics, Rollbar, Mixpanel, Google Analytics,

Minimize Browser ReflowGenerated HTML offlineReduce depth of DOMAvoid unnecessary complex CSS selector

Other Rendering TipsOptimize images to avoid resizingUse SVG instead of ImagesUse image spritesAvoid Shadows and GradientsConsider using SPDY / HTTP2 ProtocolUse Crosswalk

Chrome Dev Tools

Chrome Dev Tools

Unit TestsJasmine and Karma for Behavior Driven Testing

Thank YouAllan C. Tan, SCEA, PMPCEO/President

Email: [email protected]://www.ideyatech.com/

allanctan

@allanctanph.linkedin.com/in/allanctan/

Resourceshttp://social.technet.microsoft.com/wiki/contents/articles/27828.windows-phone-cross-platform-mobile-architecture.aspxhttps://signalvnoise.com/posts/3743-hybrid-sweet-spot-native-navigation-web-contenthttps://engineering.linkedin.com/mobile/linkedin-ipad-nativeweb-messaging-bridge-and-websocketshttp://blog.smartbear.com/web-monitoring/all-im-offering-you-is-the-truth/http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/

38