Ajaxian

Monday, April 2nd, 2007

twoBirds Lib 2.0 Released

Category: JavaScript, Library

twoBirds Lib 2.0, a library that handles on-demand loading problems, has been released by Frank Thuerigen.

It works asynchronous and allows out-of-order execution of JS code. JS objects can recursively load other JS objects.

Take a look at the prototype to see it in action:

In the "user" field top right enter a character combination and hit return to enter... in the menu click on "communication" and then "chat"... enjoy your chat. A closer look using firebug etc. will reveal that all element parts are loaded separately, simultaneously and out-of-order, on-demand when you click on a link.
The system itself ensures that elements are being displayed once all the necessary files have loaded. Note: IE users may have to add this site to the list of trusted sites, since login requires a cookie. All demo windows are accessible without login.
There is no more loading after the first display of an element, all data and code was cached and on re-selection displayed right away causing no server traffic. The chat will periodically retrieve new lines, of course...

Example Code

PLAIN TEXT

JAVASCRIPT:

1.  
2.  application.index_body = {
3.  
4.    init: function (pDivId) {
5.    tb.element.require(
6.    “[ [ ‘css’, ‘application’, ‘index_body’ ], ” +
7.    ” [ ‘tpl’, ‘application’, ‘index_body’ ], ” +
8.    ” [ ‘js’, ‘tb’, ‘effect.fadeTo’ ] ]”,
9.    ‘application.index_body.display( “‘ + pDivId + ‘” )’ ,
10.    true
11.    );
12.    },
13.  
14.    display: function (pDivId) {
15.    var myHtml = tb.loader.tplget(’application’,'index_body’);
16.    tb.div.replace( pDivId, myHtml );
17.    tb.element.require(
18.    “[ [ ‘js’, ‘application’, ‘menu’ ], ” +
19.    ” [ ‘css’, ‘application’, ‘menu’ ], ” +
20.    ” [ ‘tpl’, ‘application’, ‘menu’ ], ” +
21.    ” [ ‘js’, ‘application’, ‘user_greeting’ ], ” +
22.    ” [ ‘css’, ‘application’, ‘user_greeting’ ], ” +
23.    ” [ ‘tpl’, ‘application’, ‘user_greeting’ ], ” +
24.    ” [ ‘js’, ‘application’, ’submenu’ ], ” +
25.    ” [ ‘css’, ‘application’, ’submenu’ ], ” +
26.    ” [ ‘tpl’, ‘application’, ’submenu’ ], ” +
27.    ” [ ‘js’, ‘application’, ‘window’ ], ” +
28.    ” [ ‘css’, ‘application’, ‘window’ ], ” +
29.    ” [ ‘tpl’, ‘application’, ‘window’ ] ]”
30.    );
32.    tb.element.show( ‘toprightcontainer’ , ‘application’, ‘user_login’ );
33.    }
35.    };

Posted by Dion Almaer at 7:43 am

3.9 rating from 16 votes

7 Comments »

Comments feed TrackBack URI

I´d like to add, that my HP will be replaced with something valid ASAP including download links for the libs. Until then, please contact me using the following email: frank dot thuerigen -at- phpbuero anotherDot de
Thx and sry for the inconvenience when watching the old HP.

Comment by Frank Thuerigen — April 2, 2007

@Frank - I had a quick look at your code this morning after your email yesterday. I couldn’t work out what I was looking at. :-) Any chance you can write up your technique? A bit of background info might help people understand it.

Comment by Dean Edwards — April 2, 2007

@Dean - of course I will. There will be user documentation (2 pages no more), system documentation (that will be more) and a history of wrong solutions i have tried and dumped (little hint: all exec() solutions for js code are in the trash bin)… I have given away my HP design because it looks like its going to become stressy here soon ;-)
Cheers Frankie

Comment by Frank Thuerigen — April 2, 2007

BTW V1.0 was proof-of-concept, V2.0 (thats where I am now) is stable for production, V3.0 will be optimized and clean code. Its still some way to go ;-)

Comment by Frank Thuerigen — April 3, 2007

@ Dean - since it boils down to a couple of simple things, I can answer your question about the technique here:
(1) after all tries and failures: it is not a good idea to load JS via xhr and eval() it - simply because you cannot properly debug it. Inserting JS and CSS is done by putting it in the .
(2) you need a naming scheme to check whether an object has loaded. E.g. I load a JS file named and located: /twobirds/modules//js/.js - the object contained in this file must be named . since the library waits for this to show up in the global scope in order to determine whether an object has loaded and is available.
(2) to check whether CSS has loaded properly I use document.stylesheets - it is pretty much cross-browser with a MS switch in it.
-
It is funny - after all the tries and complicated approaches it really boils down to this. The rest of the lib is nothing new. Its all about the simple solution and the structural concept.
Cheers, Frankie

Comment by Frank Thuerigen — April 5, 2007

putting it in the …. head. The software here killed the tag.

Comment by Frank Thuerigen — April 5, 2007

same here:
/twobirds/modules/myModule/js/myElement.js
contains an object named
myModule.myElement

Comment by Frank Thuerigen — April 5, 2007