BrnoJS - How to compete with a native app
-
Upload
dotblue -
Category
Technology
-
view
594 -
download
0
description
Transcript of BrnoJS - How to compete with a native app
![Page 1: BrnoJS - How to compete with a native app](https://reader034.fdocuments.us/reader034/viewer/2022051513/5455c53fb1af9f37608b4a11/html5/thumbnails/1.jpg)
introduction problems conclusionsolutions
How to compete with a native app
![Page 2: BrnoJS - How to compete with a native app](https://reader034.fdocuments.us/reader034/viewer/2022051513/5455c53fb1af9f37608b4a11/html5/thumbnails/2.jpg)
introduction Martin Kačmar
Software developer at dotBlue
!
Web realization and consultancy.Offices in Haarlem and Brno (CZ).
![Page 3: BrnoJS - How to compete with a native app](https://reader034.fdocuments.us/reader034/viewer/2022051513/5455c53fb1af9f37608b4a11/html5/thumbnails/3.jpg)
introduction SalesChamp
Application supporting door-to-door sales.
http://saleschamp.io
![Page 4: BrnoJS - How to compete with a native app](https://reader034.fdocuments.us/reader034/viewer/2022051513/5455c53fb1af9f37608b4a11/html5/thumbnails/4.jpg)
introduction Sales visits
![Page 5: BrnoJS - How to compete with a native app](https://reader034.fdocuments.us/reader034/viewer/2022051513/5455c53fb1af9f37608b4a11/html5/thumbnails/5.jpg)
introduction Contract signing
![Page 6: BrnoJS - How to compete with a native app](https://reader034.fdocuments.us/reader034/viewer/2022051513/5455c53fb1af9f37608b4a11/html5/thumbnails/6.jpg)
introduction Chat
![Page 7: BrnoJS - How to compete with a native app](https://reader034.fdocuments.us/reader034/viewer/2022051513/5455c53fb1af9f37608b4a11/html5/thumbnails/7.jpg)
introduction Team
![Page 8: BrnoJS - How to compete with a native app](https://reader034.fdocuments.us/reader034/viewer/2022051513/5455c53fb1af9f37608b4a11/html5/thumbnails/8.jpg)
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
![Page 9: BrnoJS - How to compete with a native app](https://reader034.fdocuments.us/reader034/viewer/2022051513/5455c53fb1af9f37608b4a11/html5/thumbnails/9.jpg)
problems People know it’s a web app
• Address bar always visible
• Browser-like elements- selects, inputs
• Native app look & feel - speed, behavior
![Page 10: BrnoJS - How to compete with a native app](https://reader034.fdocuments.us/reader034/viewer/2022051513/5455c53fb1af9f37608b4a11/html5/thumbnails/10.jpg)
problems Debugging
Access to client side state
![Page 11: BrnoJS - How to compete with a native app](https://reader034.fdocuments.us/reader034/viewer/2022051513/5455c53fb1af9f37608b4a11/html5/thumbnails/11.jpg)
problems Online and offline state
Same expectations for both states Full support for offline usage
![Page 12: BrnoJS - How to compete with a native app](https://reader034.fdocuments.us/reader034/viewer/2022051513/5455c53fb1af9f37608b4a11/html5/thumbnails/12.jpg)
solutions Delivering the best experience
• Standalone apps window.navigator.standalone
• Meta tag<meta name="apple-mobile-web-app-capable" content="yes">
![Page 13: BrnoJS - How to compete with a native app](https://reader034.fdocuments.us/reader034/viewer/2022051513/5455c53fb1af9f37608b4a11/html5/thumbnails/13.jpg)
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
![Page 14: BrnoJS - How to compete with a native app](https://reader034.fdocuments.us/reader034/viewer/2022051513/5455c53fb1af9f37608b4a11/html5/thumbnails/14.jpg)
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
![Page 15: BrnoJS - How to compete with a native app](https://reader034.fdocuments.us/reader034/viewer/2022051513/5455c53fb1af9f37608b4a11/html5/thumbnails/15.jpg)
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)
![Page 16: BrnoJS - How to compete with a native app](https://reader034.fdocuments.us/reader034/viewer/2022051513/5455c53fb1af9f37608b4a11/html5/thumbnails/16.jpg)
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
![Page 17: BrnoJS - How to compete with a native app](https://reader034.fdocuments.us/reader034/viewer/2022051513/5455c53fb1af9f37608b4a11/html5/thumbnails/17.jpg)
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
![Page 18: BrnoJS - How to compete with a native app](https://reader034.fdocuments.us/reader034/viewer/2022051513/5455c53fb1af9f37608b4a11/html5/thumbnails/18.jpg)
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())
![Page 19: BrnoJS - How to compete with a native app](https://reader034.fdocuments.us/reader034/viewer/2022051513/5455c53fb1af9f37608b4a11/html5/thumbnails/19.jpg)
solutions Online and offline state
• window.navigator.isOnline - buggy (or strange at least)- browsers implement it differently
![Page 20: BrnoJS - How to compete with a native app](https://reader034.fdocuments.us/reader034/viewer/2022051513/5455c53fb1af9f37608b4a11/html5/thumbnails/20.jpg)
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
![Page 21: BrnoJS - How to compete with a native app](https://reader034.fdocuments.us/reader034/viewer/2022051513/5455c53fb1af9f37608b4a11/html5/thumbnails/21.jpg)
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)
![Page 22: BrnoJS - How to compete with a native app](https://reader034.fdocuments.us/reader034/viewer/2022051513/5455c53fb1af9f37608b4a11/html5/thumbnails/22.jpg)
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.