GithubHelp home page GithubHelp logo

alexbndk / amygdala Goto Github PK

View Code? Open in Web Editor NEW

This project forked from lincolnloop/amygdala

0.0 2.0 0.0 1021 KB

RESTful HTTP client for JavaScript powered web applications

License: BSD 3-Clause "New" or "Revised" License

JavaScript 100.00%

amygdala's Introduction

Amygdala logo

Amygdala is a RESTful HTTP library for JavaScript powered web applications. Simply configure it once with your API schema, and easily do GET, POST, PUT and DELETE requests with minimal effort and a consistent API.

Examples:

// GET
store.get('users').done(function() { ... });

// POST
store.add('teams', {'name': 'Lincoln Loop', 'active': true}).done(function() { ... });

browser support

How it works

1. INSTALL

NPM/Browserify

npm install amygdala.

Bower

bower install amygdala

Browser

Download the latest amygdala.js file. Minified/build version coming soon.

Dependencies:

2. SETUP

To create a new store, define the few possible settings listed below and your API schema.

var store = new Amygdala({
  'config': {
    'apiUrl': 'http://localhost:8000',
    'idAttribute': 'url',
    'headers': {
      'X-CSRFToken': getCookie('csrftoken')
    },
    'localStorage': true
  },
  'schema': {
    'users': {
      'url': '/api/v2/user/'
    },
    'teams': {
      'url': '/api/v2/team/',
      'orderBy': 'name',
      'oneToMany': {
        'members': 'members'
      },
      parse: function(data) {
        return data.results ? data.results : data;
      },
    },
    'members': {
      'foreignKey': {
        'user': 'users'
      }
    }
  }
});

Configuration options:

  • apiUrl - Full path to your base API url (required).
  • idAttribute - global primary key attribute (required).
  • headers - Any headers that you need to pass on each API request.
  • localStorage - enable/disable the persistent localStorage cache.

Schema options:

  • url - relative path for each "table" (required)
  • orderBy - order by which you want to retrieve local cached data. eg (name, -name (for reverse))
  • parse - Accepts a parse method for cases when your API also returns extra meta data.

Schema relations:

When you want to include related data under a single request, for example, to minimize HTTP requests, having schema relations allows you to still have a clean separation when interacting with the data locally.

Consider the following schema, that defines discussions that have messages, and messages that have votes:

var store = new Amygdala({
    'config': {
      'apiUrl': 'http://localhost:8000',
      'idAttribute': 'url'
    },
    'schema': {
      'discussions': {
        'url': '/api/v2/discussion/',
        'oneToMany': {
          'children': 'messages'
        }
      },
      'messages': {
        'url': '/api/v2/message/',
        'oneToMany': {
          'votes': 'votes'
        },
        'foreignKey': {
          'discussion': 'discussions'
        }
      },
      'votes': {
        'url': '/api/v2/vote/'
      }
    }
  }
);

In this scenario, doing a query on a discussion will retrieve all messages and votes for that discussion:

store.get('discussions', {'url': '/api/v2/discussion/85273/'}).then(function(){ ... });

Since we defined relations on our schema, the message and vote data won't be stored on the discussion "table", but on it's own "table" instead.

OneToMany:
'oneToMany': {
  'children': 'messages'
}

OneToMany relations are the most common, and should be used when you have related data in form of an array. In this case, children is the attribute name on the response, and messages is the destination "table" for the array data.

foreignKey:
'foreignKey': {
  'discussion': 'discussions'
}

foreignKey relations are basically for one to one relations. In this case Amygdala will look for an object as value of discussion and move it over to the discussions "table" if one is found.

3. USAGE

Querying the remote API server:

The methods below, allow you to make remote calls to your API server.

// GET
store.get('users').done(function() { ... });

// POST
store.add('teams', {'name': 'Lincoln Loop', 'active': true}).done(function() { ... });

// PUT
store.update('users', {'url': '/api/v2/user/32/', 'username': 'amy82', 'active': true}).done(function() { ... });

// DELETE
store.remove('users', {'url': '/api/v2/user/32/'}).done(function() { ... });

In memory storage API:

On top of this, Amygdala also stores a copy of your data locally, which you can access through a couple different methods:

Find and filtering:
// Get the list of active users from memory
var users = store.findAll('users', {'active': true});

// Get a single user from memory
var user = store.find('users', {'username': 'amy82'});

// Get a single user by id for memory
var user = store.find('users', 1103747470);

If you enable localStorage, the data is kept persistently. Because of this, once you instantiate Amygdala, your cached data will be loaded, and you can use it right away without having to wait for the remote calls. (We do not recommend using localStorage for production yet)

Fetching related data:

By defining your schema and creating relations between data, you are then able to query your data objects for the related objects.

In the example schema above, discussions have a oneToMany relation with messages, and messages have a foreignKey relation back to discussions. This is how it you can use them.

// Fetching related messages for a discussion (oneToMay)
var messages = store.find('discussions', '/api/v2/discussion/85273/').getRelated('messages');

// Getting the discussion object from a message (foreignKey)
var discussion = store.find('message', '/api/v2/message/81273/').getRelated('discussion');

Note that Amygdala doesn't fetch data automagically for you here, so it's up you to fetch it before running the query.

Events

Amygdala uses Wolfy87/EventEmitter under the hood to trigger some very basic events. Right now it only triggers two different events:

  • change
  • change:type

To listen to these events, you can use any of Event Emitter's binding methods or the aliases, the most common one being on:

// Listen to any change in the store
store.on('change', function() { ... });

// Listen to any change of a specific type
store.on('change:users', function() { ... });

amygdala's People

Contributors

bkonkle avatar mlouro avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.