Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts

Monday, July 30, 2007

Dynamic generation of javascript code

One of the biggest problems for every developer/software architect is the level of generalization/specialization of their code.
If the code is more coupled to the problem , it solves the problem better, but when the problem changes it is harder to change the code. And the oposite .. when the code is more abstract it is easier to change it, but then (generally speaking) the solution is not so good (as it could be in first case).

I am not going to write about the right level of abstraction, because I don’t know it :)
Instead, I am going to write about javascript and some of its interesting features.

Assume that we have the following problem:
We need to write a function that calculates the sum of first n integers.
The first solution that would probably come to everyone’s mind would be the classic for loop that loops from 1 to n and adds value of the counter to some variable..
It could be written as:

function getSum1(n)
{
var s = 0;
for(var i = 1; i <= n; i++)
s += i;
return s;
}


This is, of course, totally correct solution, but is it the best one?
Well, it solves the problem.. and is flexible enough to calculate the sum for every given integer.. so, it probably is the best.
But!
What if we know the number that will be passed to the function before it is called?
If so, it would be better if we wrote the function like this:

function getSum2()
{
return 1+2+3+4+5+6+7+8+9+10;
}

It would be much faster than the first one.
But, as the beginning of this post says.. it is not flexible. It solves the problem, but it is very coupled to it, so when the problem changes (the number n) it is useless.
We have 2 solutions. Which is better? Well, it depends on the fact how many times is function going to be called with the same parameter, and the importance of the execution speed.

I wrote some tests that can be found here.
There are functions that calculate sum of the first 100 integers, and are called 100000 times.

First one calls the function with the classic for loop (getSum1):

var howManyTimes = 100000;
timeStart = new Date();
for (var i = 0; i<howManyTimes; i++)
{
result = getSum1(100);
}
timeStop = new Date();

It then prints duration and the result.

The second test calls the function that generates the code for getSum2 function. After generating , the code is evaluated using the eval function (so the new function is created dynamically):

function createFunction1(val,functName)
{
var code = "function "+functName+"\n{ \n return 0";
for (var i=1; i<=val;i++)
code+="+"+i;
code += "; \n }";
return code;
}

timeStart = new Date();
var code = createFunction1(100,"getSum2()");
eval(code);

for (var i = 0; i<howManyTimes; i++)
{
result = getSum2();
}
timeStop = new Date();

After that it also prints duration and the result.
And finally the third test generates the function using javascript Function object.

function createFunction2(val)
{
var code = " return 0";
for (var i=1; i<=val;i++)
code+="+"+i;
code += ";";
return code;
}

timeStart = new Date();
var code = createFunction2(100);
var getSum3 = new Function(code);

for (var i = 0; i<howManyTimes; i++)
{
result = getSum3();
}
timeStop = new Date();

You can see the results of the tests if you run the test file in your browser.
My average results are:

In firefox: getSum1 ~ 4900ms
getSum2 ~ 550ms
getSum3 ~ 450ms
In IE6: getSum1 ~ 4800ms
getSum2 ~ 840ms
getSum3 ~ 740ms


After all this you can say… ok, this is fine, but.. is there any chance that we can use this in real world, in something more complex than the sum of n numbers?
Well, there might be.
Some of today’s most popular java and .NET frameworks (Spring, Spring.NET) use dynamic code generation in their AOP libraries.

I think that in near future some applications could have "smart execution controllers" that would know whether to call an abstract code or to generate concrete code and call it. Especially in applications where performance (speed) is bottle neck.

Saturday, February 10, 2007

prevodjenje reči sa dva klika

Ukoliko često koristite internet i čitate sajtove na engleskom verovatno vam se dosta puta desi da vam zatreba rečnik. Meni se desi.
Kod mene je do sada situacija bila takva da na brzinu kopiram reč za koju mi treba prevod, otvorim u novom tab-u www.metak.com, paste-ujem reč i sačekam malo dok dobijem prevod.
U principu, i to mi je bilo prihvatljivo jer imam brze prste...
Pre par dana mi je pala na pamet ideja da napravim nešto, uz pomoć čega biste , dok se nalazite na bilo kom sajtu mogli sa dva klika da prevedete željenu reč. Bez otvaranja dodatnih strana i kucanja bilo čega.
I posle malo mučenja to mi je pošlo za rukom.

Napisao sam greasemonkey skriptu koja, kada na bilo kojoj stranici, bilo kog sajta duplo kliknete na neku reč i selektujete je, uzme tu reč, izvrši upit na www.metak.com i prikaže vam rezultat (prevod te reči).
Ova skripta će mnoogo ubrzati moje surfovanje, kao i surfovanje svih ljudi koji je budu koristili.

Uputstvo za instalaciju:
1.Instalirajte Mozilla FireFox (ukoliko ga imate predjite na korak 2)
2.Instalirajte greasemonkey Add-on za Firefox. Možete ga naći na ovoj adresi
3.Instalirajte skriptu za prevodjenje. Skriptu možete naći ovde

I to je to. Na prvoj stranici koju otvorite posle instalacije skripte moći ćete, duplim klikom na bilo koju reč istu i da prevedete sa engleskog na srpski ili srpskog na engleski.

Voleo bih da čujem utiske.
Inače imam još neke idejice u glavi.. pa će uskoro biti još novosti :)

Wednesday, January 24, 2007

cool javascript

Otvorite bilo koji sajt (npr. www.google.com) i u address bar svog browser-a ukucajte
javascript:document.body.contentEditable='true'; document.designMode='on'; void 0
(ili prosto kliknite na ovaj link)

Pošto to uradite moći ćete u browser-u da menjate sadržaj otvorene stranice :)

Na istu foru radi i sledeći script.
Otvorite neku stranicu sa više slika (npr. http://www.b92.net/sport/) i u adress bar ukucajte:
javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.images; DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5; DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5}R++}setInterval('A()',5); void(0);

(ili link) i posmatrajte sta se desava :D