take control over class constructor

Javascript doesn’t give us simple way to control object constructing. We have new operator, but we cannot control it. Unless we do some magic.
Lets assume we have an observer instance, few classes and we want every instance of this classes to be ‘observed’.

var observer=[]// simplest ever
function foo(){
     this.foo="foo";
     ....
}
function bar(){
     this.bar="bar";
     ....
}

function observe(child){ //MAGIC
	childName=child.name||child.toString().match(/function\s*([^\(])\s*\(/)[1];
	newConst=function(){
	    ret={};
	    child.apply(ret, arguments);
            observer.push(ret);
	    return ret;
	};
	newConst.name=childName;
	window[childName]=newConst;
}

observe(foo);
observe(bar);

var t1=new foo();
var t2=new bar();

observer // t1,t2
Posted in post | Tagged | Leave a comment

javascript constructor with arguments

There was an interesting question on stackoverflow recently. Nobody had right answer. Now after few days i got it! It is really a peace of JS art.
The question was if it is possible to call constructor like this:

someClass(arg1,arg2,...,argN){
.... //implementation
}

having just an Array of arguments [arg1,arg2,...,argN]. First thought was just to use apply. Next was: how can you use apply on a constructor? But it seems you really can:)

var args=[arg1,arg2,...,argN];
var inst={};// this will be instance of our class
someClass.apply(inst,args);// magic here

You see from this point of view javascript constructor is just a method(function) applied to object cloned from its prototype.

Posted in post | Tagged , | Leave a comment

SVG have a great potential.

What intriguing me most of all about SVG is the Adobe. Since SVG is a competitor to Flash. And Adobe was active contributor to SVG and then buys Macromedia in 2005. So I suppose there is a possibility that for Adobe will give up developing of 2 competitive technologies. And I think this won’t be Flash.
But it seems not SVG either.
Since, we have a great JS library – Raphael. It provides solid interface to draw SVG/VML. So we have crossbrowser vector graphics solution now.
Also it seems google will get into it too Google to slip SVG into Internet Explorer (http://code.google.com/p/svgweb/)

Flash is a great technology but it doesn’t give me direct access to all elements of vector graphics elements. So I need some bridges between JavaScript and Actionscript those “almost” similar both ECMAScript languages. That is very sad.

Great to have SVG!

Posted in post | Tagged , | Leave a comment

Google Web perfomance initiative.

Gogle initiates a really great project recently: Let’s make the web faster
So Optimizing JavaScript code article got in scope of my interest.
Conclusions:

  • use [<string>,<string>,<string>].join(“”) for string concatenation (* this is pretty well known rule)
  • use prototype method defining rather than defining method inside closure
  • Creating a closure is significantly slower then creating an inner function without a closure, and much slower than reusing a static function.

By the way – in the last one “significantly” means(lower is better)
for Chrome2: 20:10:1
for FireFox3: 500:50:1
for IE6: 2:2:1
I think this is really significantly:)

Posted in post | Tagged , | Leave a comment

Javascript performance. Array vs Object.

Big JavaScript application needs big storage. JS gives us 2 options Array and Object. I have tested following cases:

  • writing data
  • writing data randomly
  • reading data
  • reading data randomly

I have tested this in following browsers:

  • IE
  • FF
  • Chrome

I want to point out that i am not comparing browsers. I am comparing two methods of storing data in JavaScript.

I have checked perfomance of following pices of code:

writing [ ]

// initialization
var r=[];
//code to evaluate
for (i=0;i<10000;i++){
    this.r[i]=7;
}

writing {}

// initialization
var r={};
//code to evaluate
for (i=0;i<10000;i++){
    this.r[i]=7;
}

writing [ ] randomly

// initialization
var r=[];
//code to evaluate
for (i=0;i<10000;i++){
    this.r[Math.floor(Math.random(1000))]=7;
}

writing { } randomly

// initialization
var r={};
//code to evaluate
for (i=0;i<10000;i++){
    this.r[Math.floor(Math.random(1000))]=7;
}

Here are results in ms:

  IE6 FF3.5 Chrome3
writing [] 14.85 0.95 0.6
writing {} 14.05 4.3 0.65
writing [] randomly 36.7 4.1 1.55
writing {} randomly 37.5 6.15 1.6
reading [] 12 0.2 0.4
reading {} 13.3 1.5 0.35
reading [] randomly 71.05 57.2 53.05
reading {} randomly 71.1 48.9 53.65

Ok the result shows us that the perfomance of Array and Object as storage is almost equal.
So semantically i think it is wise to use array for unordered information and object for mapping.

Posted in post | Tagged , , , | Leave a comment

Javascript performance summary

I have an idea that Javascript could allow us to improve perfomance of our web applications. Of cause JS is very slow but unlike server side code we can run it on side of our clients. Something like client side cloud-computing.
It is jut an idea… for now.
Thing i can do right now is to improve performance of my scripts as much as possible. A lot can be gained just by following some coding style rules.

Javascript performance. Array vs Object

Reading and writing perfomance is not differs too much for this two. So you can easily use Object for mapping purposes and Array for unordered stuff.

details:

I have coded a simple profiler to test some siple pieces of code. Here it is:

function Profile(){

}

Profile.prototype.status = 0;//0 free, 1 busy
Profile.prototype.tests = [];

Profile.prototype.testIt = function(){
    if (!this.status && this.tests.length > 0) {
        var atest = this.tests.shift();
        var that = this;
        var l = setTimeout(function(){
            that.process(atest[0], atest[1], atest[2]);
            that.testIt();
        }, 500);
        this.status = 1;
    }
}

Profile.prototype.profile = function(func, name, before){
    Profile.prototype.tests.push([func, name, before]);
    this.testIt();
}
Profile.prototype.process = function(func, name, before){
    var AVGtime = 0;
    for (var i = 0; i < 20; i++) {
        var scope = {};
        before.call(scope);

        var dbefore = new Date();
        func.call(scope);
        var dafter = new Date();

        AVGtime += dafter.getTime() - dbefore.getTime();
    }
    this.report(func, AVGtime / 20, name);
    this.status = 0;
}
Profile.prototype.report = function(func, avg, name){
    var funcDiv = document.createElement("div");
    var report = "<div class='function' style='font-size: small; border: 1px solid #999; margin: 10px 0 3px 10px; padding: 5px;'>" + func.toString() + "</div";
    report += "<div class='avgTime' style='font-weight: bold;margin: 0 0 0 10px'>" + name + ": " + avg + "ms</div>";
    funcDiv.innerHTML = report;
    document.body.appendChild(funcDiv);
}

Here are the rules and results of all perfomance tests i run.

Javascript performance. Array vs Object

Posted in post | Tagged , , , | Leave a comment

Who am i and what is this blog about

This is the only private message you will see in this blog.
Since all the thoughts i have about JavaScript and Front-end development totally occupied my mind i have to make this Blog to get them in order.
I am a web developer. My main area of interest for now is a JavaScript.
Yes i have read Douglas Crockford and yes i am subscribed for John Resig, Dion Almaer and other guys blogs.
I think JavaScript is a very powerful language and most widespread cross platform language in the world (since almost every OS have browser and almost every browser have JS implementation).
Also JavaScript is a great technology for web2.0 internet and all the buzzprojects we have now are impossible without it.

I am writhing a js framework named ARIESjs. I know there are a lot of frameworks around but i have my own vision and i want some things which the can not give. I will post the process of development and o lot of examples here, so stay tuned.

Posted in post | Tagged , | Leave a comment