Nautilus.js

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

Used by G1's globocom, Jusbrasil

Why?

Old School

blocks CSS, Images and JavaScript.

<link href="bootstrap.css">
<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: {
			bootstrap: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css',
			'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(['bootstrap', '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 asset 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 Bower just run this command:

bower install nautilusjs

Or get using NPM just run this command:

npm install 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'
    }
});

Or you can pass an array, now it will try to download the asset once in order, falling back to the next URL if fails, like this:

nautilus.config({
  paths: { 
    jquery: [
      'https://public.cdn.com/libs/jquery.min.js',
      'https://private.cdn.com/libs/jquery.min.js',
    ],
    waterfall: [
      'http://cdnjs.cloudflare.com/ajax/libs/waterfall.js/1.0.2/waterfall.min.js',
      'http://www.mydomain.com/js/1.0.2/waterfall.min.js'
    ]
  }
});

To asynchronous download the assets:

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

Optional parameters

You can also set origins for your relative URLs, it will concatenate the origin and the path and try to load once, so if the download fails in the first domain, it will try to download in the second and so on.

nautilus.config({
  origins: ['https://public.cdn.com', 'https://private.cdn.com', 'https://s3.com'],
  paths: { jquery: '/libs/jquery.min.js' }
});
nautilus(['jquery']);

With this it will request the jQuery file in the following URLs:

1. https://public.cdn.com/libs/jquery.min.js
2. https://private.cdn.com/libs/jquery.min.js
3. https://s3.com/libs/jquery.min.js
4. /libs/jquery.min.js

Browser Support

| | | | | | |:---:|:---:|:---:|:---:|:---:| | 35+ ✔ | 38+ ✔ | 9+ ✔ | 29+ ✔ | 8+ ✔ |

Credits

Made by @raphamundi and awesome contributors

License: MIT