pegasus's Introduction

Pegasus

Load JSON while still loading other scripts

Before

After (with Pegasus)

Pegasus is a tiny lib (0.2 kB min/gzip) that lets you load JSON data while loading other scripts.

Using this technique, you can reduce the time to display data in single page apps without touching the server.

See also fetchival, a small fetch wrapper.

Install

$ bower install pegasus
$ npm install @typicode/pegasus # For browserify

Important please note that pegasus is available on npm under @typicode/pegasus

Demo

http://typicode.github.io/pegasus

Benchmark

Average time to display data on the demo site.

	jQuery only	jQuery + Pegasus
EDGE	3000 ms	2100 ms
3G	860 ms	640 ms
DSL	270 ms	230 ms

Note: jQuery is used for illustration only, you can use Pegasus with any other Javascript library.

Usage example

<!-- Load (or embed) Pegasus before loading any other script -->
<script src="pegasus.min.js"></script>

<!-- Make your request(s) -->
<script>
  var request = pegasus('http://api.example.com');
</script>

<!-- Load your app lib(s) -->
<script src="jquery.js"></script>

<!-- Use .then() method to retrieve data in your app -->
<script>
  request.then(
    // success handler
    function(data, xhr) {
      // do something useful like
      $('#data').text(JSON.stringify(data));
    },
    // error handler (optional)
    function(data, xhr) {
      console.error(data, xhr.status)
    }
  );
</script>

The same method can be applied with any other JavaScript library (Backbone, AngularJS, ...).

Tip: To save a network call, you can also directly embed pegasus.min.js code in your html file(it's smaller than the Google analytics tracking code).