left-right

I created a new public repo on my GitHub page. Check it out.

Support For Anti-Cache In Zepto’s Ajax Requests

If you have been using Zepto (the ultra light webkit target JS framework) you would have noticed that some of the elements which you have gotten used to with a JS framework, particularly with jQuery, are missing from Zepto.

Zepto’s github page quotes that it is not a goal for Zepto to give 100% match of jQuery. However, there are some important additions that I have made to it in the version that I have for our app. Here’s one,

// Add anti-cache in url if needed

if ( settings.cache === false ) {

var ts = Date.now(), rquery = /\?/, rts = /([?&])_=[^&]*/,

// try replacing _= if it is there

ret = settings.url.replace( rts, “$1_=” + ts );

// if nothing was replaced, add timestamp to the end

settings.url = ret + ( ( ret === settings.url ) ? ( rquery.test( settings.url ) ? “&” : “?” ) + “_=” + ts : “” );

//console.log(“url: ” + settings.url);

}

Add this little snippet to the $.ajax function inside Zepto. To use anti-cache you have to send, you guessed it, “cache: false” as one of the properties in the ajax settings when you call on Zepto to make the async request. I have not reinvented this technique. I looked at the latest jQuery source and made modifications to it to make it work with Zepto. If there is a proven, simpler way to do it be sure let me know. I know that this just works so I used this.

What?! I can use HTML/Javascript/CSS for native mobile apps?

Well, not exactly. All you will be doing is writing a web app wrapped inside a webview that is “packaged” as a native app. As you may have read about the several articles online about using HTML/Javascript for mobile app development. Well, I am not going to talk about the different ways to do this. I am going to show you how we do it my company using PhoneGap. Before I start talking about PhoneGap I must let you know that the other worthy alternatives to native app development are Adobe Flex (supports iOS, Android, Blackberry), Titanium Appcelerator and then there is appMobi’s XDK which is a Chrome extension that allows you to develop an app right out of your browser; what a way to start developing an HTML5 app huh? Well, I have never tried it but it looks cool (and somewhat confusing) though.

The way PhoneGap works is it allows you to write an application using HTML5/JS/CSS3. The resources are then packaged as assets to a WebView based application. So, the app actually runs using a browser but the user wouldn’t or shouldn’t know the difference (if done right). The problem with using PhoneGap is that HTML5 spec is not completely stable yet and Android is one of the worst platforms for HTML5 development due its fragmented nature. There are over 900 “different kinds” of devices in the market that run Android OS in some form and factor which is exactly the problem because there is no standard spec whatsoever!! You have to account for the several different problems with these devices when writing an application using a spec that is first incomplete and second each browser has proprietary implementation of unfinished specs. So, there is always something that doesn’t work.

However, there are some annoying problems, for example, using an iframe in your app will screw with the native copy/paste functionality and the soft keyboard will stop responding to user input until it is closed and reopened. Another problem with Android phones is with the CSS3 transform3d which causes problems with the “native” android library and crashes the app when transform3d is used on a page containing input text box. So, after solving these problems you will see that you only need to know HTML and Javascript to develop a simple app. Granted you will need to write some PhoneGap plugins to solve some platform specific problems but they are all easy to do.

Then there is the infamous android transform3d bug with password boxes which appMobi’s jqMobi solved using the oldest trick in the book. A clever fix I should say. I will not reveal the fix here you should check out there source code and look at the passwordbox control to see what they have done. Once you do you would probably say “I knew that” well it did not occur to you, did it? Kudos to jqMobi for bringing that out!

Then there is the problem of using a javascript framework to do the dirty work for you. We were first using jQuery and that did not go well. Performance was poor. It was terrible. If I was not working for my company I would not even use the app past the installation, it was that bad. The thing about jQuery is it has a lot of backward compatibility for IE6 and other older browsers. When you know that you are only developing for Webkit why do you want to use a framework that has support for other browsers? When I realized this fact and took it upon myself to swap out the javascript framework with something much lighter and meant for Webkit I came across Zepto. Porting from jQuery to Zepto meant I had to look at what was missing. The good news about Zepto is that it has a jQuery style syntax and that means no ramp up time to learn yet another JS framework. However, since the goal for Zepto is to support only modern Webkit browsers, few things that jQuery used to offer are now lost conveniences but this is still not a problem. You can check the jQuery source and for the most part copy it over into your Zepto source and be done with it otherwise you might have to Zepto-ize (lame attempt for Zepto lingo, sorry!) it.

To help with porting I read this useful article. It even has a performance comparison at the end of the article. Choosing a javascript framework is absolutely optional. You only use one when you need to add extensions like a date picker that looks like iOS or if you want to use some really good javascript template engine…etc. You still have the option of writing good old regular javascript with document.getElementById, document.getElementByClassName(with HTML5)…you get the point.

Another great point to consider while developing for iOS and Android using HTML5 is making use of translate3d and using CSS3 media queries to make the icons, images look sharper on a retina display. Watch this video of how translate3d helps give your app that native feel to it. Hardware acceleration baby!