RSS

Monthly Archives: February 2009

Comparison Matrix of Ajax Frameworks – zk, dojo, ExtJs, GWT, Backbase, Echo2, IceFaces

 
5 Comments

Posted by on February 24, 2009 in Web

 

Tags: , , , , , , ,

Closures and IE Circular References

the below nice article is from http://siteexperts.spaces.live.com/Blog/cns!1pNcL8JwTfkkjv4gg6LkVCpw!338.entry

Memory Leak Detection Tool

==================================================================================

A little tip for you advanced Javascripters…

First, if you are not familiar with JavaScript closures, I highly recommend you read up on them. They are extremely powerful.  However, they are also very unforgiving in they quickly generate memory leaks.  IE has an issue where it leaks memory when a circular reference is created between a com object and a javascript object.  In IE, the DOM is implemented via com.

So looking at a simple closure (noticed the nested function):

function DoThis()
{
var el = document.createElement(“div”);
el.attachEvent(“onclick”,DoThis);
function DoThis()
{
alert(“clicked”);
}
}

creates a new scope and generates a circular reference that will leak memory in IE. This memory is not reclaimed until the browser closes. The simplest solution is to pretend there is no garbage collector for objects and make sure you always clean-up after yourself.

Fixed version:
function DoThis()
{
var el = document.createElement(“div”);
el.attachEvent(“onclick”,DoThis);
window.attachEvent(“onunload”,Cleanup);
function DoThis()
{
alert(“clicked”);
}
function Cleanup()
{
el.detachEvent(“onclick”,DoThis);
window.detachEvent(“onunload”,Cleanup);
el = null;
}
}

What makes closures interesting?

If you don’t know, I am going to help you figure it out on your own. Let’s take a simple example using the setTimeout method.

Today, it is difficult to pass rich state to a function called on a timer. The setTimeout method takes two arguments, a function to execute, and how long to wait before executing it.  For example:

function twoSeconds()
{
alert(“Two Seconds have past”);
}
setTimeout(twoSeconds,2000);

Now, unfortunately there is no way to send arguments to that function (and before the JavaScript experts jump in, I do not believe serializing the values to a string is an option – most scenarios I deal with require object references)

Today, the typical (and hard to maintain) approach is to store some state in a global:

var objState = {name:”foo”,message:”Hi”};

function twoSeconds()
{
alert(objState.message);
}
setTimeout(twoSeconds,2000);

I hopefully don’t have to explain why that is bad :-).

Now let’s try using closures:

function twoSeconds(arg1,arg2)
{
function Execute()
{
alert(arg2);
}
return Execute;
}

setTimeout(twoSeconds(“foo”,”Hello World”),2000);

Look closely at the above code.  Notice that the function twoSeconds returns a function pointer to the nested Execute function (which creates a new scope chain). After two seconds, the Execute function will be called.  When Execute is called, it has access to the arguments up the entire scope chain (so arg1 and arg2 are accessible).  Each time you call the twoSeconds function, a new and independent scope chain is created.

Below is an alternative approach that performs the setTimeout directly in the twoSeconds function:

function twoSeconds(arg1,arg2)
{
function Execute()
{
alert(arg2);
}
setTimeout(Execute,2000);
}

twoSeconds();

If you step back and look at the bigger picture, you will notice that closures open up the door for encapsulating private functionality and provide a very valuable approach for avoiding the mass creation of global variables.

function myObject()
{
var privateVar=1;
var privateVar=2;
function PrivateMethod()
{
// Do Something;
}
this.publicMethod = function()
{
PrivateMethod();
}
}

var newObj = new myObject();

=================================================================================

 
1 Comment

Posted by on February 24, 2009 in Javascript / DOJO, Web

 

Tags: , , , ,

JQuery4GWT

Jquery4Gwt is an adaptation of jquery to GWT developper.

Sami Bessaies BLOG – Tutorial

  • Demo
  • Getting Start
  • Java Doc
  • Sample
  • Screenshot

    jquery4gwt1


     
    Leave a comment

    Posted by on February 19, 2009 in GWT, Javascript / DOJO, Web

     

    Tags: , ,

    GWT 1.6 Milestone 1

    GWT team announced the availability of 1.6 Milestone 1!

    http://groups.google.com/group/Google-Web-Toolkit/browse_thread/thread/3e7e6cc3b35ad98a

    Binary distributions are available for download directly from GWT’s Google
    Code project.

    http://code.google.com/p/google-web-toolkit/downloads/list?can=1&q=1.6.0

    Added new features

    • New Project Structure in GWT 1.6 (details)
    • Hosted Mode Enhancements (details)
    • New EventHandler System (details)
    • New Widgets (DatePicker & LazyPanel) (details)
    • Bugs & Issues Fixed –  (Click here to see list of fixed issues)
     
    Leave a comment

    Posted by on February 16, 2009 in GWT, GWT Frameworks

     

    Tags: , , ,

     
    Follow

    Get every new post delivered to your Inbox.

    %d bloggers like this: