brnojs - how to compete with a native app
Post on 01-Nov-2014
594 Views
Preview:
DESCRIPTION
TRANSCRIPT
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.
top related