##Preventing the 300ms Delay in Mobile Javascript Apps One of the complaints with developing mobile apps in html and javascript is that they are not as responsive as native apps. Some of that is related to the way webkit handles click events on touch devices. The browser delays for 300ms to be sure you aren’t double tapping.

There are several options for removing the delay, including Max Ogden’s masseuse.js, which aims to be a more complete add in for handing mobile events.

Another popular option is to implement Google’s Fast Button code. In order to use Fast Buttons with knockout.js, we can easily encapsulate the behavior in a custom binding for use in all mobile apps that use the powerful MVVM framework.

If you click the buttons on a mobile device you will see that there is a noticeable delay with the first button and an instant result with the fast click version. Every third of second counts when making a responsive app.

The fastButtons implementation is by Alex Black and here is the html and knockout custom binding.

And here is the view model initializaiton.

Life hasn’t left much time for updating this blog. I submitted seatmate to the trimet app contest and won second place. I am very grateful to trimet and I appreciated the opportunity to participate.

In March I became the senior front end developer for Ecotrust. I’ve been working on a variety of projects including the launch of an open source spatial planning and geodesign framework called madrona. I’ll be spending more time on UI and rolling out an html/js mobile app. I’ll be continuing to work on javascript applications with a renewed focus on mapping

The new job has been great and I get to work with a fascinating group of developers, gis specialists, writers and economists.

Now that we've got node connected to our postgis database, we need to pull the route information into our sencha mobile web app. I've pushed this version to the github repo, but I haven't deployed it to nodejitsu, just yet.  My postgis hosting service requires that ssl be enabled, which is supported by the native version of the postgres module.  Unfortunately I can only get the pure js api to work on nodejitsu. Rather than using jQuery or even Ext to make ajax requests, I'm going to be using socket.io, which is a websocket like implementation for node.

passing around data with socket.io

We are triggering the 'get-routes' socket.io event on the backend, which takes a lat/lon and returns a list of routes to the callback.  This allows the view to be updated asynchronously by adding the new routes to the store and refreshing the display. socket.io uses a variety of means of communication to send and receive events and objects between the web app and the server.  If web sockets aren't available it falls back to flash sockets, comet style long polling and a variety of other mechanisms.

sencha geolocation and data request

I've added in the geolocation api that is part of sencha.  The app is refreshing the routes when it has a lock on the gps.  Sencha's geolocation api makes this sort of thing easy.  Note that I'm not really handling any errors here, and they definitely could crop up. The following goes into the app's onReady method.

project status and next steps

I've got the routes view rendering and I've added disclosure icons that switch the focus to the comments view.  I gave up on putting the map on the start screen because I had some trouble getting those components to share a card.  The next arrival bar on the bottom is mocked up for now and will require additional backend work. I'm also thinking of scrapping comments and just focusing on the other two components.  That would free up some space on the toolbar and reduce the scope of the project.  My next step is to split the chat channels based on trimet routes and wire up that view.