Nautilus.js

Async JavaScript loader & dependency manager in ~1kb (600B gziped)

Why?

Old School

blocks CSS, Images and JavaScript.

<script src="https://github.com/globocom/nautilus.js/raw/master/jquery.js"></script>
<script src="https://github.com/globocom/nautilus.js/raw/master/my-jquery-plugin.js"></script>
<script src="https://github.com/globocom/nautilus.js/raw/master/my-app-that-uses-plugin.js"></script>

Middle School

loads as non-blocking, however one has to use an API definition as AMD or commonjs. This affects all the other scripts (including plugins).

<!-- AMD LOADER EXAMPLE -->
<script>
require(['jquery'], function($) {
    console.log($); // function (a,b){return new n.fn.init(a,b)}

    require(['my-jquery-plugin'], function() {
      /*
        If jquery plugin has an anonymous define, throw an error: Mismatched anonymous define() module...
      */
    });
});
</script>

New School

loads as non-blocking too, however Nautilus.js doesn't care if it's an anonymous define, has unexported module or things like that.

<script>
    nautilus.config({
        paths: {
            'jquery': 'libs/jquery.js',
            'jquery.nanoscroller': 'libs/jquery-nanoscroller.js',
            'waterfall': 'http://cdnjs.cloudflare.com/ajax/libs/waterfall.js/1.0.2/waterfall.min.js'
        }
    });

    nautilus(['jquery', 'waterfall'], ['jquery.nanoscroller'], function() {
        console.log($); // function (a,b){return new n.fn.init(a,b)}
        console.log(typeof($.fn.nanoScroller)); // 'function'
    });
</script>

What's the biggest difference about the current top script loaders?

Nautilus can define namespaces to script paths/links and you can manage easily. Besides 7~20x more lighter.

Getting

First of all, get Nautilus.js using Download Option or via package manager.

To get using NPM just run this command:

npm install @globocom/nautilusjs

Usage

To define specified paths, you must use the config method:

nautilus.config({
    paths: {
        'jquery': 'libs/jquery.js',
        'waterfall': 'http://cdnjs.cloudflare.com/ajax/libs/waterfall.js/1.0.2/waterfall.min.js'
    }
});

To start scripts asynchronous load:

nautilus(['jquery', 'waterfall'], function() {
    console.log($); // function (a,b){return new n.fn.init(a,b)}
    console.log(typeof(waterfall)); // 'function'
});