Narcoleptic Possum Mob

    nautilusjs

    1.0.0 • Public • Published

    Nautilus.js

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

    Coverage Status

    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

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

    Credits

    Made by @raphamundi and awesome contributors

    License: MIT

    Install

    npm i nautilusjs

    DownloadsWeekly Downloads

    25

    Version

    1.0.0

    License

    Apache-2.0

    Last publish

    Collaborators

    • markiing
    • igorgiusti
    • metal
    • vierno
    • wpjunior
    • mdionisio
    • sergiojorge
    • allanassis
    • jeanpinzon
    • chavao
    • lousander
    • andre.gavino
    • raphamorim