Top 10 Javascript Libraries

I didn't write this list in order of rank. All of these libraries are often used by many software developers. So check them here:

1. ExtJS
   If you're bulding rich internet application and need widgets, here is the answer. You can create a nice widget with just a piece of code. It's also has a chart widget.
   
2. Yahoo UI
   Yahoo UI has a heavy namespaced library and very good documentation.
   
3. Dojo Toolkit
   This one has an exellent idea of local data storage. It also has a superb infrastructure and good solid written API - one can easily write its own custom widgets.
4. jQuery
   Write less do more. jQuery attempts to halve the amount of code you write compared to the traditional DOM JavaScript. With the chain concept, you can transfom ten lines of code with just one statement.
   
5. Scipt.aculo.us
   If you're talking about effects, don't forget this one. It has a easy-to-use effects library.
   
6. Moo.FX
   moo.fx is a superlightweight, ultratiny, megasmall javascript effects library, to be used with prototype.js or the mootools framework.
   
7. Mochikit
   MochiKit is a highly documented and well tested, suite of JavaScript libraries that will help you get shit done, fast. We took all the good ideas we could find from our Python, Objective-C.
   
8. Prototype
   Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around. It's also became codebase of other libraries.
9. JavascriptToolbox
   If you need any other libraries, just visit this site.
   
10. Jowo
    Finally, this is the best one for me. This is my own library. It's still on production but I have use it in many of my projects.
    

Why I wrote this post? The reason is that there are so many people confused of choosing which javascript library they are going to use. Why they are confused? Because they're looking for the best one. But unfortunately, there is no the best javascript library in the world. Trust me! Each library has weaknesses. So to get the best one, choose the most appropriate library for your needs. Read more...

How To Redirect AJAX Request

There are so many questions out there asking about how to redirect AJAX / XmlHttpRequest. It is usually needed when you provide user login page with AJAX. We ask user for username and password then we send the data to server via AJAX. Server validates user's data. If they are valid we want to redirect user to another page. That's what we want.

Unfortunately, AJAX cannot do that. Why?

AJAX (Asynchronous Javascript And XML) is a kind of asynchronous communication between client and server. The meaning of asynchronous is that the communication is closed after client sending the data. But it's not ending. Client is still waiting for server response. Once the response come, it is retrieved by callback function in client.

We can make an analogy by sending SMS to your friend. SMS is also a kind of asynchronous communication (while Phone Call is synchronous). When you finish sending SMS to your friend, your mobile phone actually stop sending data to your friend. But the phone is still waiting for the reply from your friend. You cannot know when your friend will reply. It could be in a minute, an hour or there will be no reply.

That's an example of asynchronous communication. So what the point?

In web-based communication architecture, if the data is sent asynchronously to server then the response will not be displayed in browser page. It will be passed to callback function that was set just before sending data. That's why we cannot redirect user with AJAX request. The redirection will only occur in server-side not in client-side.

So if we want to redirect AJAX request, it must be done by javascript on client. The server can just send back status message wheter login is failed or succeded. If success, change the page location by javascript. You can do this by this command
window.location = 'http://www.example.com';

Don't forget to leave a comment so I know that this post is useful to you. Read more...

10 New Widgets on ExtJS 3

ExtJS is one of the best AJAX/Javascript library in the world. Although the number of its widgets is not as much as other libraries, the superiority of ExtJS comes from very nice user interface. Since version 3, ExtJS introduced several nice widgets. Here they are:

1. Row Editor Grid

When you double click any row on this widget, the row will change to a form and allow you to edit the value. Once you finish, you can click the update button or cancel any changes.

2. Progress Bar Pager

Besides visualizing the number of data that are being displayed, this plugin allows you to change the page by clicking on the progress bar instead of using arrow buttons.

3. Sliding Pager

This is the other one of Paging Toolbar plugins. User can change the page by moving the slider instead of typing the page value in text box. When you move the slider, it is snapped to page values.

4. Group Tabs

Vertical tabs group with a nice interface.

5. Toolbar Overflow

The previous versions of ExtJS didn't support toolbar resizing so if toolbar has many controls, they will be invisible when panel is resized. But it's not anymore now.

6. Tab Scroller Menu

Inspired by modern web browsers, ExtJS made a new feature that will make our life easier. User can navigate within many tabs opened at once.

7. Charts

I was surprised knowing that ExtJS includes chart library in this version. It's a good start though it still has a few of chart types.

8. Spinner

It's just an ordinary widget that is also supported in any other desktop application framework. May be ExtJS developers forgot to include this widget on previous releases.

9. Toolbar Button Groups

I think most of software developers who use ExtJS would be very interested in this widget. This widget mimics Microsoft Office ribbon toolbar that comes since Microsoft Office 2007.

10. Check Tree

This widget is usually used by many installers on desktop application.

Don't forget to leave a comment so I know that this post is useful to you.
Read more...

5 Minutes To Master JSON (JavaScript Object Notation)

To follow this tutorial, you don’t have to be experienced with Javascript. But it’ll be preferred if you have at least a little bit knowledge about Object Oriented Programming. Put all the scripts below inside the body element enclosed by script tag.

Minute 1 - Intro to Object

var myFirstObject = {};

It may not look like much, but those squiggly braces have the potential to record every bit of information humanity has ever gathered, and express the most complex programs computer scientists can dream up. In fact, Javascript itself is stored inside a set of squiggly braces just like that, as are all of its primitive data types -- strings, numbers, arrays, dates, regular expressions, they're all objects and they all started out just like myFirstObject.

Minute 2 - Creating A New Object

The old way to create a new object was to use the new keyword.
var myJSON = new Object();
The above method has been deprecated now in favor of simply defining an empty object with squiggly braces.
var myJSON = {};

Objects as Data
var myJSON = { "firstName": "Barrack", "lastName": "Obama", "age": 44 };

This myJSON object has 3 properties or name/value pairs. The name is a string -- in our example, firstName, lastName, and age. The value can be any Javascript object (and remember everything in Javascript is an object so the value can be a string, number, array, function, even other Objects) -- In this example our values are “Barrack”, “Obama”, and 44. “Barrack” and “Obama” are strings but age is a number and as you can see this is not a problem.

This data format is called JSON for JavaScript Object Notation. What makes it particularly powerful is that since the value can be any data type, you can store other arrays and other objects, nesting them as deeply as you need.

Minute 3 - Accessing Data In JSON

The most common way to access JSON data is through dot notation. This is simply the object name followed by a period and then followed by the name/property you would like to access.

document.writeln(myJSON.firstName); // Outputs Barrack
document.writeln(myJSON.lastName); // Outputs Obama
document.writeln(myJSON.age); // Outputs 44

If your object contains an object then just add another period and name
var myAnimals = { “cat”: { “name”: “mojo”, “color”: “white” }, “dog”: { “name”: “twister”, “color”: “gray” } };

document.writeln(myAnimals.cat.name); // outputs mojo
document.writeln(myAnimals.dog.name); // outputs twister

Minute 4

Array as A Value

If your object contains an object with a type of Array, just specify the index of data after object name. This example will show you how to use a value with type of array
var myAnimals = { “cat”: { “name”: “mojo”, “color”: “white” }, “dogs”: [{ “name”: “twister”, “color”: “gray” }, { “name”: “sweety”, “color”: “brown” }] };

document.writeln(myAnimals.cat.name); // outputs mojo
document.writeln(myAnimals.dogs[0].name); // outputs twister
document.writeln(myAnimals.dogs[1].name); // outputs sweety


Function as A Value

The other power of Javascript is that you can assign a function to a variable directly. This example will create a message box that is called by show function
var myIdentity = { “name”: “joe”, “age”: 23, show: function(){alert(this.name + ‘ ’ + this.age)} };
myIdentity.show();

Minute 5 - Receiving JSON via AJAX

In this minute, if you’ve known a little about AJAX, you’ll figure out that using JSON as data format is much easier than XML.

Remember that JSON data is simply string received from the server. Suppose that responseText contains string from server that is called by XMLHttpRequest.
var responseText = "fruits = { ‘name’: ‘apple’, 'color' : 'red' }"; // example of what is received from the server.
eval(responseText); // Execute the javascript code contained in responseText.

document.writeln(apple.color); // Outputs ‘green’

eval() function is just a built-in Javascript string compiler which can run very fast.

I think that’s all the essence of JSON. I suggest you to go to json.org to learn some more advance concept.

Don’t forget to leave a comment so I know that this post is useful to you.
Read more...