Fry, JavaScript redefined (slightly:-)

This is the first in a series of articles about Fry, well known Futurama, eergh, it’s about JavaScript folks. Damn..!

What’s it about?

Fry Framework (or just Fry) is an evolution of 12 years JavaScript programming (mine of course, not in general:-). Long time has passed and the framework encapsulates many ideas being discovered on the way. I’m not going to bore you with more historical/philosophical views, let’s just start right away. Well, keep reading…

Prerequisities

You should be somehow familiar with the idea of DOM. If you’ve never used document.getElementById(), node.appendChild(el) and similar, this is probably not for you. Don’t be sorry though, there are millions of things more worthy than being a javascript weirdo:-).

No more .appendChild()

Fry is based around idea of replacing the most tedious code writing. It frees you from tons of “fill the gap” code for performing trivial DOM manipulation, assigning and responsing to various events, dealing with XML, Ajax and file uploads. Your code will be much smaller, written in a fraction of time. You may use the time saved for the real problems or just go home :-).

Learn the shortcuts, keep the chain in mind

You were probably looking for the first example, here it goes:

$().a($$()).t(‘Hello world!’).e(‘click’, function(evt)
{
	evt.$.s(‘color:red’).at(‘ This is Fry.’);
});

Although a little bit cryptical at first, believe me, you will get used to it very quickly. What we just wrote is a DIV appended to BODY containing the text “Hello world!” that is clickable. After you click on it, it will change its text color to red and append the text “This is Fry.”. Maybe you will better recognize this piece of code:

var el = document.createElement(’DIV’);
// yes, I know we should be doing true DOM using el.appendChild(document.createTextNode(’Hello world!’)),
// but is the phrase “developers cycle” saying anything to you? :-)
el.innerHTML = ‘Hello world!’;
el = document.getElementsByTagName(’BODY’).item(0).appendChild(el);
// This will not work for IE, we should use attachEvent()
el.addEventListener(’click’, function(evt)
{
	el.style.color = ‘red’;
	// or var ht = el.innerHTML; ht += ‘ This is Fry.’; el.innerHTML = ht;
	el.appendChild(document.createTextNode(‘ This is Fry.’));
});

OK, this was not fun, first we have to deal with browser differences, secondly there is just too much code to be written and we only scratch the surface with a primitive task. Don’t write your code this way. You may not end up using Fry, feel free to use Prototype, Mochikit, JQuery or any of the zillions of frameworks. Let me repeat it. Do NOT, under any circumstances, try to write your code this way, that is using the primitives of DOM. Unless of course you’re a regular to S&M parties and pain is your pleasure :-).

Learn the shortcuts and commands chaining

Apart from previous chapter title, we haven’t quite talk about it yet. So what are these shortcuts and what the hell is chaining anyway? Does it do any good to me or will I be forced to rethink and shift my programming techniques? Well, the answer to the last two questions is simple. Yes and .. probably yes. First answer is just a reassurement, you will have to find the real answer to the second question by yourself. Enough of this chit-chat already…

Shortcuts are methods names shortened to absolute minimum. If you want to positionate something on your page at 400 pixels from the left and 140 from the top of your browser window, you just imagine the more natural X and Y coordinates (left for X, top for Y) and write el.x(400).y(140). It’s that simple. Chaining is what you just saw. Practically any method combination can be used to archieve something on an element/object. You just have to separate the methods by dot. So instead of writing several lines of code, you can archieve the same effect by chaining. And since you use shortcuts, the lines are not very long thus easily readable. If you don’t understand:

	el.x(314).y(159).z(26).t(‘hello from chain’);
	// does it need a comment? positionate el 314 left, 159 top, z-index 26,
	// and let it contain the text “hello from chain”	

then again, Fry is probably not for you.

You know, Fry… Of all the friends I’ve had, you’re the first

This was just an introductory article to Fry. Stay tuned.

I really have to change Wordpress to something else… It’s ugly in the morning.