Shortlink

$ in jQuery?

During the initial days of coding with Prototype and jQuery libraries what used to baffle me is the $ (dollar) syntax. I used to wonder what really this dollar sign meant in the following jQuery statements.

$().ready(function(){
     …
});
$(“#message”).html()

Let me explain what I think happens behind the screens. JavaScript is pretty interesting as a language. You can write a function or define a variable with $ as the name. i.e.,
You can define a variable
var $ = “Confused”;

You can write a function like below
var $ = function(name){
     alert(“Hi  ” + name);
}
and invoke it $(“Sam”) and the output is.



You can see what effectively $ means. So here is what I feel may be a pseudo implementation of $(“message”).html()
<!DOCTYPE html>
<html>
<head>
<script>
var $ = function(expression){
this.html = function(){
if(expression.indexOf(“#”) == 0)
return document.getElementById(expression.substring(1)).innerHTML;
return null;
}
return this;
}
function init(){
alert($(“#message”).html());
}
</script>
</head>
<body onload=”init();”>
<div id=”message“>This is very confusing!!!</div>
</body>
</html>

html() is a public function defined inside the $ function. And the output of this code is

Shortlink

Java, C#, Groovy, Ext JS4 and constructors

I have always found writing/generating constructors for a class a very boring task in Java. I wanted a much easier way to initialize member variables instead of writing overloaded constructors.

If you want to write a simple “Employee” class with name and salary variables I had to write this code in Java most of the time.

//Java
public class Employee{
private String name;
private double salary;
        //Hate to write this code     
        public Employee(){} //This is for the Java Beans
public Employee(String name,double salary){
this.name = name;
this.salary = salary;
}
}
Employee e1 = new Employee (“Sam”,20000);


C# 3.0 came up with the concept of object initializers which removed the need for having constructors.
//C#
  public class Employee {
     public String name {get;set;}
     public double salary {get;set;} 
 }
 Employee e1 = new Employee(name:”Sam”,salary:20000);

It was definitely better than Java, but you still had to write those silly {get;set;} block to designate name and salary as properties. Object initializers are available only for properties.

Groovy finally came to my rescue. It injected a lot of code and removed the need for writing code that I had always considered waste of effort and time.
//Groovy
class Employee{
     String name
     double salary
}
e1 = new Employee(name:”Sam”,salary:20000)

Happiness is always short lived. I have been writing classes in Ext JS4 like this off late.
//Ext JS4
Ext.define(“Com.durasoft.Employee”,{
   constructor : function(name,salary){
        this.name = name;
        this.salary = salary;  
}});
var e1 = new Com.durasoft.Employee(“Sam”,20000);

Though frameworks like Ext JS 4 have succeeded in making people take JavaScript as a serious OO language, it still has a long way to go in terms of providing concise syntax.

I hope the future releases of Ext JS4 come up with a groovier syntax.

Shortlink

Mobile web applications using Sencha Touch

My stint with mobile applications started with developing a mobile version of my company site. One of my clients suggested I use a mobile framework known as Sencha Touch. 
Sencha Touch is a JavaScript library with a rich set of UI components that can be used to build mobile applications. The UI components automatically render themselves based on the type of the mobile device you use. The styling of these UI components is extremely rich with the touch effects, tap/pinch/swipe events in-place. 
When I tried to to use Sencha Touch the syntax hurt me a lot initially. Imagine writing few lines of Object-Oriented JavaScript code to even create a component as simple as a Text box. After struggling for a couple of days with Sencha Touch I decided to push it aside, learn Ext JS 4 and then resume my coding with Sencha Touch. 
Ext JS 4 is a programmer’s delight. It’s a complete OO JavaScript library. Sencha Touch is built upon it. Ever since I learnt Ext JS 4, working with Sencha Touch has been extremely easy. The modularity that Sencha Touch, through its implementation of MVC pattern, brings to the  plate is awesome for JavaScript programmers (!#$%^). 
But yes, if you are working with jQuery Mobile, Sencha Touch will frustrate you badly. jQuery being extremely popular and most widely used currently, jQuery Mobile is pretty easy to pick up and develop mobile applications, particularly if you’re already exposed to jQuery. A lot of UI designers I know hate to work with Sencha Touch because it makes them write complex code. Their choice is jQuery Mobile for designing mobile applications because of its’ sheer simplicity.
I am planning to post a series of articles on jQuery Mobile and Sencha Touch.
And, ahhhh yes, there is Dojo Mobile too, in the fray now. 
Shortlink

Mobile native app using PhoneGap

Creating native mobile apps for iOS, Android and Blackberry platforms involves using a variety of tools and APIs. The issue has always been maintenance. Maintaining three different code bases is always a tedious task. Moreover there is a practical problem finding resources who have a knack of developing apps in all these platforms. It’s even more difficult trying to maintain three different sets of people one for each platform for the same set of requirements.
There are two popular frameworks available for solving these issues. PhoneGap and Titanium. I have worked pretty extensively with PhoneGap and but not Titanium though. I am planning to get my hands dirty with Titanium this month and will let you know my of comments on the same.
 Some points about PhoneGap.
  •  It’s a JavaScript library and set of tools that generate native executable files. 
  •  Compiles HTML5, CSS3 and JavaScript code that you write to mobile native apps. 
  •  Supports different mobile platforms. 
  •  Write simple JavaScript code to access native features like Camera, Accelerometer, Phone Service etc. 
  •  It’s usually used with jQuery Mobile and Sencha Touch 
Create simple pages using HTML5, CSS3 and PhoneGap JavaScript library and you get the native mobile executable files.
The main advantage of PhoneGap is single codebase and multiple output files. Making changes is very easy. It removes a lot of pain for developers in learning(It’s actually fun though :)) different APIs, different languages(Java, Objective-C) to build native apps. It saves lot of money for the companies involved in developing native apps for these platforms.
I have found that the disadvantage of PhoneGap is in it’s generation of native executable file. Lot of things happen behind the screen and developers are usually left scratching their head trying to figure out why it’s working or not working the way expected in different platforms. The same code that works fine Android sometimes behaves weird on iPhones. Lot of times I have felt I should have simply written code using the native platform APIs so that you have more control over the code, though it’s a costly affair.
To me, even after working with PhoneGap I could not call myself a native app developer because I didn’t know what was happening in the background, till I started coding using the native APIs. In fact, lot of times working with PhoneGap applications reminded me of working with EJBs (1.x and 2.x particularly) though the code is not as weird as EJBs here.
 Nevertheless PhoneGap is still a very good way to get into native mobile app development for beginners. You will definitely learn what is involved in developing apps for mobile devices.
Shortlink

My book in the shelves

My Spring 3.0 Black Book in the shelves of Chennai book fair 2012.