Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings
This repository was archived by the owner on Dec 31, 2021. It is now read-only.

globocom/nautilus.js

Open more actions menu

Repository files navigation

Nautilus.js

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

Coverage Status

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

Chrome logo Firefox logo Internet Explorer logo Opera logo Safari logo
35+ ✔ 38+ ✔ 9+ ✔ 29+ ✔ 8+ ✔

Credits

Maded by @raphamundi and awesome contributors

License: MIT

Releases

Packages

Used by

Contributors

Languages

Morty Proxy This is a proxified and sanitized view of the page, visit original site.