Data Access with OrbitJS

@ilavriv

• Lead Front - End engineer (temy.co)
• Rust meetups co-organizer
• Teacher PLLUG community 

 How we worked  with data?

var httpRequest;
if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 6 and older
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

Ajax

var user = {
  name: 'Some name';
};

$.post({
  url: "/users",
  user: user
}).then(function() {
  // do something
});

jQuery

var User = Backbone.Model.extend({});

var u = new User();

u.save();

BackboneJS

angular.module('myApp.services').factory('User', function($resource) {
  return $resource('/api/users/:id'); 
});

angular('myApp.controllers').controller('pageController', [
'$scope', 'User', function($scope, User) {
    var u = new User();

    u.$save();
}]);

Angular resource

App.User = DS.Model.extend({
  profile: DS.belongsTo('profile', {async: true})
});

App.Profile = DS.Model.extend({
  user: DS.belongsTo('user', {async: true})
});

var u = new User();
u.save();

ember-data

Local storage

Session storage

IndexedDB

Ajax

Offline

Data synchronizations

Resolving conflicts

Multiple data access

OrbitJS!!!

let schema = new OC.Schema({
    modelDefaults: {
      keys: {
        __id: { primaryKey: true, defaultValue: Orbit.uuid }
      },
    },
    models: {
      user: {
        attributes: {
          name: {type: 'string'}
        }
      }
    }
  });

Schema

let memorySource = new OC.MemorySource(schema);
let restSource = new OC.JSONAPISource(schema);
let localSource = new OC.LocalStorageSource(schema);

Source

let memToLocalConnector = new Orbit.TransformConnector(
        memorySource, localSource);

let memToRestConnector = new Orbit.TransformConnector(memorySource, restSource);
let restToMemConnector = new Orbit.TransformConnector(restSource, memorySource);

Connectors

Using connectors

memorySource.add('user', {
    name: 'name'
   }).then(
    function(user) {
      // do something
    }
);

memorySource.on('didTransform', function(operation, inverse) {
    console.log('memorySource', operation);
  });

Interfaces

• Requestable - find, create, update, destroy
• Transformable - (patch)

Requestable

let mySource = {};
Orbit.Requestable.extend(source, [
    'find', 'add', 'update', 'patch', 'remove'
]);

Transformable

let mySource = {};
Orbit.Tranformable.extend(source);

Evented

let mySource = {};
Orbit.Evented.extend(mySource);

Notifier

let notifier = new Orbit.Notifier();
notifier.addListener(function(message) {
  // do something
});

notifier.addListener(function(message) {
  // do something
});

notifier.emit('Hi'); 

ember-orbit

bower install orbit.js
bower install ember-orbit

ember-orbit: install

App.initializer({
    name: 'injectStore',
    initialize: function(container, application) {
      Orbit.Promise = Ember.RSVP.Promise;
      application.register('schema:main', EO.Schema);
      application.register('store:main', EO.Store);
      application.inject('controller', 'store', 'store:main');
      application.inject('route', 'store', 'store:main');
    }
  });

ember-orbit: Source

let LocalStorageSource = EO.Source.extend({
  orbitSourceClass: OC.LocalStorageSource,
  orbitSourceOptions: {
    namespace: "myApp"
  }
});

ember-orbit: Model

Moon = Model.extend({
 name: attr('string'),
 planet: hasOne('planet', {inverse: 'moons'})
});

Planet = Model.extend({
  name: attr('string'),
  classification: attr('string'),
  sun: hasOne('star', {inverse: 'planets'}),
  moons: hasMany('moon', {inverse: 'planet'})
});

https://github.com/orbitjs

               http://orbitjs.com (to be continue) 

Any questions?

Thanks!

@ilavriv