js-data

Respect Your Data

Give your data the treatment it deserves with a framework-agnostic, datastore-agnostic JavaScript ORM built for ease of use and peace of mind. Works in Node.js and in the Browser.

Get Started

1. Installation

Getting JSData into your application.

Installing JSData

Installing dependencies

JSData requires the presence of a Promise constructor in the global environment. In the browser, window.Promise must be available. In Node.js, global.Promise must be available. Here is a handy library for polyfilling Promise: https://github.com/jakearchibald/es6-promise.

JSData also requires full ES5 support from the runtime. Here is a handy library for polyfilling ES5 support: https://github.com/afarkas/html5shiv

Adding JSData to your app

Import JSData's components into your app:

<script type="text/javascript" src="path/to/js-data.min.js"></script>
<script>
  console.log(JSData.version.full);
  const UserService = new JSData.Mapper({
    name: 'user'
  });
</script>
const JSData = require('js-data');
const {Mapper, version} = JSData;

console.log(version.full);
const UserService = new Mapper({
  name: 'user'
});
define(['js-data', (JSData) => {
  const {Mapper, version} = JSData;
  
  console.log(version.full);
  const UserService = new Mapper({
    name: 'user'
  });
}])
import {Mapper, version} from 'js-data';

console.log(version.full);
const UserService = new Mapper({
  name: 'user'
});

Configuring builds

r.js
Running `r.js -o require.config.js` will produce `bundle.js`

In `index.html` switch `script/main` between `main` (load scripts dynamically) and `bundle` (load bundled scripts)
({
  name: 'main',
  mainConfigFile: 'main.js',
  out: 'bundle.js',
  optimize: 'none'
})
require.config({
  paths: {
    'js-data': '/path/to/node_modules/js-data/dist/js-data'
  }
});

require([
  'app'
], (app) => {
  console.log(app)
});
define('app', [
  'js-data'
], (JSData) => {
  const {Mapper, version} = JSData;
  
  console.log(version.full);
  const UserService = new Mapper({
    name: 'user'
  });
  
  const app = {}
  app.UserService = UserService
  return app
})
<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
  <!-- load scripts dynamically -->
  <script data-main="main" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js"></script>

  <!-- load bundled scripts -->
  <!--<script data-main="bundle" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js"></script>-->
</head>
<body>
<h1>My App</h1>
</body>
</html>
browserify
Running `browserify app.js > bundle.js` will produce `bundle.js`
const JSData = require('js-data');
const {Mapper, version} = JSData;

console.log(version.full);
const UserService = new Mapper({
  name: 'user'
});
<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
  <!-- load bundled scripts -->
  <script src="bundle.js"></script>
</head>
<body>
<h1>My App</h1>
</body>
</html>
webpack
Running `webpack` will produce `bundle.js`
const JSData = require('js-data');
const {Mapper, version} = JSData;

console.log(version.full);
const UserService = new Mapper({
  name: 'user'
});
module.exports = {
  entry: './app.js',
  output: {
    filename: 'bundle.js'
  }
};
<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
  <!-- load bundled scripts -->
  <script src="bundle.js"></script>
</head>
<body>
<h1>My App</h1>
</body>
</html>

What's Next

Continue with part 2 of the Tutorial or explore other documentation.

2. Modeling your data
Samples & Demos
API Reference Documentation
Frequently Asked Questions
Getting Support

1. Installation

Getting JSData into your application.