cmcsouza / nautilus.js

[separated fork] Async JavaScript loader & dependency manager in ~600B [gziped]

Nautilus.js

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

Used by G1's globocom, Jusbrasil

Why?

Old School

blocks CSS, Images and JavaScript.

<script src="jquery.js"></script>
<script src="my-jquery-plugin.js"></script>
<script src="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'
});

Browser Support

35+ ✔	38+ ✔	9+ ✔	29+ ✔	8+ ✔

Credits

Maded by @raphamundi and awesome contributors

License: MIT