Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
How to compete with
a native app

introduction

problems

solutions

conclusion
introduction Martin Kačmar

Software developer at dotBlue
!

Web realization and consultancy.

Offices in Haarlem and Brno (...
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

• contro...
problems People know it’s a web app

• Address bar always visible
• Browser-like elements

- selects, inputs

• Native app...
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...
solutions

Delivering the best experience

• FastClick (FT Labs)


- 300ms delay between physical tap and
click event beca...
solutions

Delivering the best experience

• iScroll


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

•...
solutions

Delivering the best experience

• WebWorkers (Parallel.js)


- offload heavy operations to separate worker
(preve...
solutions

Debugging

• Error tracking / logging


- lot of alternatives - Qbaka, ErrorCeption

- great, but minimal focus...
solutions

Debugging

• Data dumps


SELECT name FROM sqlite_master WHERE
type = ? AND name != ?', ['table',
'__WebKitData...
solutions

Online and offline state

• HTML5 Application Cache


- updateready, progress, cached events
- pretty useful (al...
solutions

Online and offline state

• window.navigator.isOnline


- buggy (or strange at least)

- browsers implement it d...
solutions

Online and offline state

• Custom connection checking


- A JAX requests and window.setInterval()
save the day
...
solutions

Online and offline state

• Databases


- WebSQL (deprecated, Apple still loves it)

- IndexedDB (cool, not supp...
conclusion Konec

If you use all the abilities that JavaScript and
HTML5 nowadays offer, you are able to create an
app that...
we’re looking for you!
http://saleschamp.io
thank you
for your attention
Martin Kačmar
@martinkacmar

martin@dotblue.nl
Upcoming SlideShare
Loading in …5
×

BrnoJS - How to compete with a native app

2,324 views

Published on

Slides from Martin Kačmar's talk at BrnoJS meetup (14th of January 2014)

Learnings obtained while developing iPad web application SalesChamp (http://saleschamp.io/). Contains solutions to common problems that will not only make your web app perform like native, but give you one step ahead with power of web.

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

BrnoJS - How to compete with a native app

  1. 1. How to compete with a native app introduction problems solutions conclusion
  2. 2. introduction Martin Kačmar Software developer at dotBlue ! Web realization and consultancy.
 Offices in Haarlem and Brno (CZ).
  3. 3. introduction SalesChamp Application supporting door-to-door sales. http://saleschamp.io
  4. 4. introduction Sales visits
  5. 5. introduction Contract signing
  6. 6. introduction Chat
  7. 7. introduction Team
  8. 8. 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
  9. 9. problems People know it’s a web app • Address bar always visible • Browser-like elements
 - selects, inputs • Native app look & feel
 - speed, behavior
  10. 10. problems Debugging Access to client side state
  11. 11. problems Online and offline state Same expectations for both states
 Full support for offline usage
  12. 12. solutions Delivering the best experience • Standalone apps
 window.navigator.standalone • Meta tag
 <meta name="apple-mobile-web-appcapable" content="yes">
  13. 13. 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
  14. 14. 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
  15. 15. 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)
  16. 16. 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
  17. 17. solutions Debugging • 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)
  18. 18. 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())
  19. 19. solutions Online and offline state • window.navigator.isOnline
 - buggy (or strange at least)
 - browsers implement it differently
  20. 20. 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
  21. 21. 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)
  22. 22. 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.
  23. 23. we’re looking for you! http://saleschamp.io
  24. 24. thank you for your attention Martin Kačmar @martinkacmar
 martin@dotblue.nl

×