pre-js

pre.js

Use pre.js to load your JS and CSS files efficiently. Perfect for mobile apps and sites where 3G can often fail.

• Petite: only 2.5kb gzipped.
• Resilient: Auto-retries downloads when they fail.
• Efficient: Downloads files in parallel.

Pre()
  .retries(10)
  .css('/assets/app.css')
  .js('http://www.google.com/jsapi', function() { return window.google; })
  .js('/assets/app.js', function() { return window.App; })
  .then({
    App.start();
  });

Usage

Use index.min.js.

pre.js is available via [bower] and [npm].

$ bower install --save pre-js
$ npm install --save pre-js

[bower]: http://bower.io/search/?q=pre-js [npm]: https://www.npmjs.org/package/pre-js

Recommended use

Create a file like load.js, which contains pre.js and your loader code. Use whatever build tool you prefer to do this for you. This gets you a small <4kb loader you can use as a "gateway" to the rest of your app.

With Webpack or Browserify, it probably will be like this:

/* load.js */
var Pre = require('pre-js');
Pre()
  .css('/assets/app.css')
  .js ('/assets/vendor.js', function() { return window.jQuery; })
  .js ('/assets/app.js',    function() { return window.App; })
  .then({
    App.start();
  });

API reference

See pre.js's inline comments for more info. Here's a quick reference of the API:

Pre()
  /*
   * sets the maximum number of retries before giving up.
   */
  .retries(10)

  /*
   * loads JavaScript assets. if the function returns a falsy value, it's
   * assumed that the loading failed, and will try again.
   */
  .js('/assets/jquery.js', function() { return window.jQuery; })
  .js('http://www.google.com/jsapi', function() { return window.google; })
  .js('/vendor.js', function() { return window.jQuery; })
  .js('/app.js', function() { return window.App; })

  /*
   * defines callbacks to execute.
   * these will run after the immediately-preceding `.js` or `.css` file is
   * loaded. you can use as many .then() blocks as you like, inserted at
   * different points.
   */
  .then(function() {
    google.api.load('maps');
    App.start();
  })

  /*
   * loads CSS files.
   */
  .css('http://google.com/fonts?f=Roboto:300')
  .css('/assets/application.css')

  /*
   * preloads assets (like images and fonts).
   */
  .asset('/assets/image.jpg')
  .asset('/assets/font.woff')

  /*
   * reports progress.
   */
  .on('progress', function(e) {
    document.getElementById('progress').style.width = '' + e.percent*100 + '%';
    console.log("Loaded %s (%s of %s files loaded)", e.file, e.loaded, e.total);
  })

  /*
   * reports retries and failures when they happen.
   */
  .on('retry', function (e) {
    console.warn("Failed to fetch %s, retrying", e.uri);
  })
  .on('fail', function (e) {
    console.warn("Failed to load %s", e.uri);
  })

  /*
   * Conditionals: runs the function block if `condition` is true.
   */
  .if(condition, function (pre) {
    pre.js('...');
  })

Conditional loading

Simple:

Pre()
  .js(window.JSON || 'json2.js',
      function() { return window.JSON; })
  .js(oldie ? 'jquery-1.9.js' : 'jquery-2.1.js',
      function() { return window.jQuery; })

For more complicated things:

Pre()
  .if(env === 'development', function (pre) {
    pre
      .js('livereload.js')
      .js('weinre.js')
    })

CoffeeScript

Better with CoffeeScript, if that's your thing:

Pre()
  .css 'style.css'
  .js  'jquery.js', -> jQuery?
  .js  'app.js',    -> App?
  .then -> App.start()

Acknowledgements

pre.js © 2014, Rico Sta. Cruz. Released under the MIT License.

Includes code from yepnope.js, released under WTFPL. © 2012 Alex Sexton & Ralph Holzmann.

Authored and maintained by Rico Sta. Cruz with help from contributors.

• My website (ricostacruz.com)
• Github (@rstacruz)
• Twitter (@rstacruz)