April « 2009 « SwellJS – another big fish in the sea

Archive for April, 2009

by SleepyCod

27 Apr 09

Dazzling performance with JSONP and Swell

For an upcoming work we figured it would be useful to add JSONP support in our Asset component in order to load the given URL and once loaded, passback the JSON to a handler with the content.

What’s interesting with this approach is that we don’t rely on any hack to get the response such as evaluating all the script files in head or loading the content asynchronously then appending it.

There are numerous advantages using our solution :

You can load the JSON from multiple sources but keep a single handler, each JSONP file processed will be passed back as an argument
You can have a single handler for the whole sequence or listen events of each JSONP file being loaded with CustomEvents
The tags are removed from the DOM once loaded, this avoid memleaks or JSONP collision
This approach is robust and works equally between browsers even on old ones like MSIE 5.5

here’s a little example of what can be done:

Swell.Core.Asset.load('jsonp', [
    'http://search.yahooapis.com/ImageSearchService/V1/imageSearch?appid=YahooDemo&query=rideback&output=json&callback=',
    'http://search.yahooapis.com/ImageSearchService/V1/imageSearch?appid=YahooDemo&query=saintseiya&output=json&callback='
], function() {
    for(var _n = 0; _n < arguments.length; _n++) {
        var yim = arguments[_n];
        for(var _i = 0, _im; _im = yim.ResultSet.Result[_i++];) {
            html.img({
                'src'   : _im.Thumbnail.Url,
                'alt'   : _im.Title,
                'title' : _im.Title,
                'width' : _im.Thumbnail.Width,
                'height': _im.Thumbnail.Height
            }).appendTo('receiver');
        }
    }
});

No Comments , Tags: json webservices, jsonp, lazyloading

by SleepyCod

10 Apr 09

Introducing Swell’s lazy loader utility

Posted in Javascript, Swell

As we are preparing the upcoming release of Swell, we are actively working on a true and efficient dependency management system, and one of the key feature of the dependency manager is the ability to grab resources once the page is loaded.

Swell’s Core should be the only resource you would ever need to get started, it is not an understatement to say that we’ll lose adopters if the system is too hard to build.
Every component should be able to load its own UI definition, I mean being able to lazy load any css or image resource it needs.

Separation of concerns will help us to build a better library, that’s the way it should be, that’s the way we are !

We have looked at the various javascript lazyloading implementations on the web, some are interesting and well-minded, some others are just bloated.

Keep it simple stupid!

Our lazy loading implementation is able to load and monitor script, css and image resources, for example you want to use the Element component in your page and then want to use it when available into the global scope.

/** For a single script file without callback */
Swell.Core.Asset.load('script', 'Core/Element.js');
 
/** For multiple script files with a callback when all resources are loaded */
Swell.Core.Asset.load('script', ['Core/Element.js', 'Core/Hashtable.js'], function() {
    $('foo').addClass('meh');
});
 
/** Custom event when a single file is loaded */
Swell.Core.Asset.onResourceLoaded.subscribe(function(type, res) {
    if(type === 'img') {
        // Do something
    }
});
 
/** Advanced example */
var _imgs = $(document.body).getByClassName('swell-image-asset', 'img').setAttribute({'src' : 'blank.png'})
    .addEvent('mouseover', function() {
 
        this.addClass('loading');
 
        Swell.Core.Asset.load('img', 'largeimage.jpg', function(collection) {
            for(var _i = 0; _i &lt; collection.length; _i++) {
                this.setAttribute({'src' : collection[_i].src});
                collection[_i] = null;
            }
        }, this);
    }
);

Have fun !

No Comments , Tags: lazy load css, lazy load script, lazyloading, ondemand css

by Butterfish

5 Apr 09

Ajax: Form Serialization

Posted in Javascript, Swell

When using Ajax to submit a form, you’ll have to attach as args the input fields name/value combination; this task can be very boring, especially if your form takes three pages…
This is where the form serialization feature strikes, by simply specifying the form(s) name to your XHR handle, the serializer will parse through your form and assemble each content input field into an object that’ll be passed automatically to your request.

We made a choice that come very handy in our case, every serialized form is returned in a global object and once requested, “stringified”.
Why using JSON?
In some case, let’s say… in “multiples select”, we can come up with multiple values, and when using GET you’ll definitely do something like key=val, with multiple values, key[]=val, but how much server-side languages can handle this kind of GET property? not much… whereas much languages are now able to unserialize JSON.

PHP is able to “decipher” passed arrays in GET, but what about the others languages? If there’s Java/Ruby/ASP.NET folks out there, we would like to hear from you!

XHR in Element

In order to save both time and lines, it was quite interesting to think of a way to implement XHR in our Element class, take a look at these working drafts:

// well, let's say we have two forms
var forms = $('foo','bar');
 
// will send them separately asychronously
forms.xhr();
 
// this time we want to harmonize their form[method] value
forms.xhr('POST');
 
// or their form[action] value
forms.xhr(null, 'foo.php');
 
// two concurrent ajax request is somehow too much, we'd better merge them!
forms.xhr('POST', 'foo.php', true);