introduction problems conclusionsolutions

How to compete with a native app

introduction Martin Kačmar

Software developer at dotBlue

!

Web realization and consultancy.Offices in Haarlem and Brno (CZ).

introduction SalesChamp

Application supporting door-to-door sales.

http://saleschamp.io

introduction Sales visits

introduction Contract signing

introduction Chat

introduction Team

introduction Advantages of web

• one codebase to rule them all!

• release and update your app whenever you want

• control over your business model (no restrictions of app store)

• common web analytics tools to measure and analyze usage

problems People know it’s a web app

• Address bar always visible

• Browser-like elements- selects, inputs

• Native app look & feel - speed, behavior

problems Debugging

Access to client side state

problems Online and offline state

Same expectations for both states Full support for offline usage

solutions Delivering the best experience

• Standalone apps window.navigator.standalone

• Meta tag<meta name="apple-mobile-web-app-capable" content="yes">

solutions Delivering the best experience

• FastClick (FT Labs)- 300ms delay between physical tap and click event because of possible double tap- Chrome 32 beta solves this problem

• MobiScroll (Acid Media)- custom look for date and time pickers and other UI elements - lot of improvements compared to date and time inputs

solutions Delivering the best experience

• iScroll- native feel for scrolling inside a fixed width/height elements

• Zepto & touch events singleTap, doubleTap, longTap, swipe,swipeLeft, swipeRight, swipeUp, swipeDown

solutions Delivering the best experience

• WebWorkers (Parallel.js)- offload heavy operations to separate worker (prevents from blocking the UI)- only limited access to usually used resources (DOM, storages)

solutions Debugging

• Error tracking / logging- lot of alternatives - Qbaka, ErrorCeption- great, but minimal focus on offline usage and mobile (cross-browser)- window.onerror - simple, minimal amount of information (message, file, line number)- important to be able to request remotely

solutions

• Data dumps SELECT name FROM sqlite_master WHERE type = ? AND name != ?', ['table', '__WebKitDatabaseInfoTable__'] - problems with flaky connection, data can get easily cut off (WWW servers accept the data anyway)

Debugging

solutions Online and offline state

• HTML5 Application Cache- updateready, progress, cached events - pretty useful (allows to build simple update mechanism functionality after firing window.applicationCache.update())

solutions Online and offline state

• window.navigator.isOnline - buggy (or strange at least)- browsers implement it differently

solutions Online and offline state

• Custom connection checking- A JAX requests and window.setInterval() save the day- iOS6 Safari caches POST requests (timestamps, headers as solution)- HEAD (we don’t need to get any info from server), GET / POST (may be useful to send and receive some runtime data)- connection is dropping all the time, important to modify intervals when it drops

solutions Online and offline state

• Databases - WebSQL (deprecated, Apple still loves it)- IndexedDB (cool, not supported everywhere)- PouchDB (plays nicely with CouchDB, both WebSQL and IndexedDB adapters)

• Key-value storages - localStorage, sessionStorage- difference in lifetime (ideal vs real - renew session, reopen closed tab)

conclusion Konec

If you use all the abilities that JavaScript and HTML5 nowadays offer, you are able to create an app that feels native, yet offers all the benefits of

web.

we’re looking for you!

http://saleschamp.io

thank you for your attention

Martin Kačmar @martinkacmarmartin@dotblue.nl