backbone-pegasus

Improve your Backbone app loading time with Pegasus.

Using backbone-pegasus, you can start loading data while still loading Backbone and other scripts.

Show me

Obviously, in production you should concatenate your app scripts.

However, what's important in this screenshot is that data (yellow bar) is being loaded:

• as soon as backbone-pegasus.js has finished loading
• in parallel with the other scripts

You can find a working app in the example directory.

See also http://typicode.github.io/pegasus/ for other live examples.

Usage

<script src="backbone-pegasus.js"></script>
<script>

  // Preload URL(s)
  BackbonePegasus.get('http://api.example.com/users');
  BackbonePegasus.get('http://api.example.com/posts');
  
</script>

<script src="jquery.js"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script>
<script src="app.js"></script>
<script>

  // Set up backbone-pegasus
  BackbonePegasus.setup();
  
  // Start your app
  app.start();

</script>

There's nothing else to change in your app.

BackbonePegasus.setup() modifies Backbone.sync() so that it checks for URLs loaded by backbone-pegasus. If there's no match, it falls back to Backbone.sync() original method.

Routing

To keep things light and fast, backbone-pegasus doesn't come with a router.

But depending on your needs, you can write your own:

var base = 'http://api.example.com';

// Will preload URLs based on hash
switch(window.location.hash) {
  case '#posts':
    BackbonePegasus.get(base + '/posts');
    break;
  case '#users':
    BackbonePegasus.get(base + '/users');
    break;
  default:
    BackbonePegasus.get(base + '/posts');
}

Another custom router example can be found in the example directory.

You can also use a third-party library like route-recognizer.

Support

All modern browsers and IE8+