5 JavaScript Tips

I made this presentation for BarCamp Saigon 2012. It was an interesting experience from head to tail.

The slides were made the night before the event. That was the first time I made a presentation that rush. To many out there it is nothing special, but as an introvert and a clumsy speaker, I typically need longer period to prepare.

The speech was original meant to be made in English. Last minute change, there wasn't any foreigner in the room. My first technical presentation in Vietnamese ever :)

Enjoy!

http://khang.cogini.com/JS-tips/

jQueryMobile - More in the FIXME list

A few week ago, I had a chance to work with jQueryMobile (JQM), a framework that I have known for long and looked forward to a chance to use for some practical development. (I was using Beta 2 when I wrote this post)

Well, after the first good impression (especially when compared to its ancestor, jQTouch), I started to find out a number of thorns here and there that prevented it from being use widely in the industry.


Most of the time when I write mobile web app, I use desktop browsers to test and develop the app and only move to the device to test major changes. I can tell that the page transition of JQM on my FF 5.01 and Chrome 13.0 is pretty flaky even when compared to the old jQTouch. The reason is because JQM is using keyframe animation and depends on how supportive the browser is, some frames might be dropped and causes the transition to be a bit rough. There is plan to switch to CSS3 transition, which guarantees better performance and support from major browsers, lets see how thing will go.


Currently, JQM provides developers with single-page (pages where only one div has data-role="page") and multi-page (single HTML document with multiple div with data-role="page"). And just like jQTouch, JQM uses hash-based URL for navigation.
So if I have a single-page document and want to "slide" to the next, my url is like

single_1 -> single_1#single_2

Similarly, urls of a multi-page document look like

multiple#foo and multiple#bar

I expected the two types as two great indigents for one-page apps. But no, different from my expectation, cooperation of the two types is half-baked. If I load a multiple-page document through AJAX, all navigation within the page are broken

single -> single#multiple -> single#foo (it should have been something like single#multiple#foo)

Also, the URL of an AJAX-loaded document is lengthy and ugly as it uses the format old_url#new_url, you can find this right on JQM's demo site

http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/pages/page-anatomy.html

NOTICE: at the moment I was writing this post, jQM team has taken steps towards above problems with the launch of pushState, which clearly makes the url far neater and hopefully in the same manner handle single/multiple-page correctly.


And the last item in my list would be the bad "back" button. JQM provides default "back" button for pages loaded via AJAX. The problem with this default button is that it disappear when you refresh the page or load it from bookmark, which is a big FAIL for me. Developer can implement the "back" button manually too, but then the transition sucks. It wasnt possible for me to manipulate the transition effect and direction (in my case, it goes slide-right, where a normal "back" should go slide-left, but perhaps that's just me).

I would complain about the behavior of the button as well. JQM's "back" button functions as literal history of pages. This approach is similar to iOS' and Android's back button and works great for native apps. But web app is different. The user can interfere the URL, and when that comes, a history of pages leads to all kind of funny redirect as the "back" might structurally mess up the app workflow. I would love to see the button acts like a breadcrumb trail and therefore respect the app structure.


Just my two cents. I remain a big fan of jQueryMobile and its team, eagerly looking forward to the 1.0

Basic OOP with Javascript

A while ago, a former classmate and current colleague of me phunehehe had a chance to work with a web app project that makes use of JS-OOP heavily. He was freaked out due to JS syntax and its way to do OOP. Yes, there are certain difficulties when moving from traditional OOP (Java, C#, etc...), but once you know the tips, it isnt something indigestible any longer :)

Basically, Javascript does not support a real class but it does allow you to create an object via a function. That special function is called constructor. With the keyword new, JavaScript makes the function become a constructor and instantiate a new object with the members defined by that function. Inside a constructor, the keyword this references the new object that's being created. It is also a convention that the name of the constructor is capitalized.

And nice enough, you can easily extend the function set of all objects created by a contructor using the prototype attribute.

How about a function that defined in both constructor function and constructor prototype? In that case the one that is defined constructor function will be used.

And from Douglas Crockford (Javascript: the good parts), we can easily implement inheritance with the combination of constructor function and prototype!

Finally, Singleton would be a good open to enclose this small talk about JS OOP. In short, Singleton is a class that has no public constructor but a special function that will return an instance of the class (and create one if the instance doesnt exist) Given Javascript nature, Singleton isnt a class, it also shouldnt be an object as any object in javascript can be created easily from a constructor. In fact, a Javascript's singleton is used as a namespace to provide a level of isolation from the global namespace and therefore served as a single point access to functions. A simple Singleton would look like this

With a bit of Javascript's famous closure, we can make the simpleSingleton to another level of complexity with private variables and functions.

My only question for this is that whether singleton in Javascript is really useful, I havent found any demonstrative sample yet. Comment below if you have any and want to share