yal.js, the micro size JS loader

yal.js is on github

about

yal.js is a truly tiny library partially inspired by both LAB.js and yepnope.js projects.

In about 0.6Kb minzipped yal does really few things but it does them right:

yal.js has been tested against many IE, Chrome, Safari, Firefox, Opera, Webkit, and respective mobile versions, in different platforms, and without problems.

example

yal
    .script("1.js")
    .wait(function () {
        init1();                // core dependency with initialization
    })
    .script("2.js", "3.js")     // no need to call script N times
    .wait()                     // since 4.js, if present,
                                // depends on 2 and 3
    .script(function () {
        if (                    // features detection example
            /iOS/i.test(
                navigator.userAgent
            )
        ) {
            return "4.js";
        }
    })
    .wait(function () {
        initAllBut1();          // ready to go
    })
;
        

test it

If you go in the test page and you don't see a list of 7 numbers on the document please let me know, assuming you are using a browser which is not IE4 or similar.

You can also test the test parallels page and compare results but please bear in mind the test page is not exactly a real case scenario.

Updates

download

The source code is temporarily hosted here while the non forced parallel minified version is here.

Being the minified version 1Kb plain and 0.6Kb gzipped, please download its source in your own server or include it via "copy and paste" in your html page os JS code.

You can find the forced parallel version here as well, just be sure that's what you need.

why another JavaScript loader

Thanks for asking. The reason is quite simple: I don't need everything LAB.js has to offer, I like yepnope simplification and features detection purpose, but I still go nuts when I cannot grab a portion of a library, aka: only what I really need. LAB.js is surely complete and quite standard, but as is for jQuery library, it must include a lot of code that is redundant or superfluous beceause never executed in my daily basis target browsers. I also noticed developers are basically using only .script() and .wait() and I was not interested into all other possible features or, even worse, extremely uncommon edge cases.

Moreover, in my past I have created many loaders, related to JS or not, so it was both fun and trivial to create this tiny script which works, at least for what I usually need, and it does not add relevant code size to whatever project you are working on.

why chose yal.js against others

I am not selling anything here and I would like to be as clear as possible about yal and its potentials against other solutions.

why not chose yal.js against others

Well, no software is perfect so neither is yal. Here a list of reasons you may consider before you decide to use or not this library

yal is both serial and fully or partially parallel

The basic/default version of yal uses parallel downloads in between .wait() calls. This means that every time there is such call, scripts defined after won't be downloaded until the precedent yal.wait([optionalFunc]) has been executed.

There are many tricks to trigger a script preload but unfortunately these techniques are not completely cross platform or cross browser yet.

For this reason the basic version of yal uses a complete KISS approach: the best compromise between performances, reliability, and control over loaded code execution ... also without any waste of precious bytes.

how to create a forced parallel version of yal

If you really believe that "everything parallel ASAP" is gonna bring you benefits, first of all you should consider libraries created with this in mind as LAB.js is, secondly you should understand how to change this behavior in yal.js, being still here :-)

The extended source code of yal.js has a tricky JS comment at the very beginning. All you need to do is to add a single slash there and see the magic ...

before

    /*:conditional add a single slash at the beginning of this comment to use this feature
    // please note you should re minify this source file after if you add or remove the slash
        ...
    //*/function preload(queue){return queue;}
        

after

    //*:conditional add a single ...
        

The single slash will automatically comment out the current preload and highlight the one that always forces parallel downloads. At this point all you have to do is chose your favorite minifier and go! ( ... and if the minifier complains please ignore it since minifiers are not perfect yet ... )

more about yal.js and forced parallel downloads

Every assigned script will create an object or an Image that will be appended on the DOM in order to trigger the browser download. At that point when it's time for the current script to be downloaded there are two options:

Whenever this technique is good or not, it seems to work pretty damned well!

It must be said it's based on a sort of browser network layer hack ... it won't hurt but there is no guarantee that it will produce same advantages in the future. Well, in that future I will update the script using de-facto standards to preload scripts: YAGNI ;-)

Enjoy, Andrea Giamamrchi