react-native-backbone

As react native does not support Node.js HTTP module, react-native-backbone helps you to connect to your REST api or localStorage much easier using the same concept of Backbone models and collections.

You can simply call "save", "fetch", "destroy" method on each model to sycn them to your REST api.
"fetch" collections from REST api.
Using model.get() to retrieve data from model
Add an extra layer of the fetch method to check if the status API returns is not 200. Returns an json file instead of response object.

To do:

syncronize with localStorage

Table of content

Setup
RNBackbone.Model
RNBackbone.Collection
RNBackbone.Storage
- fetchStorage
- realmStorage

Install

The easiest way to install: npm install react-native-backbone

And require it in your React Native app: var RNBackbone = require('react-native-backbone'); or ES6: import RNBackbone from 'react-native-backbone';

RNBackbone.Model

RNBackbone.Model is extended from backbone. The usages is almost the same as Backbone.Model, but some methods might be differnt.

Create a model class

var Car = RNBackbone.Model.extend({
    rootUrl: "http://www.your-domain.com/car"
    //More options to be added
});

rootUrl: the root url where this model connects to.

value: String or function. If its a function it should return a string.

Create an instance

var bmw = new Car({
    "make": "BMW",
    "model": "428i",
    "year": 2014
})

You can create a model using the new keyword. You can pass an object as the initial value of the model, you can also create an empty model.

Model methods:

set():

bmw.set('mpg', '23')

this will set the atrribute mpg to 23.

If the attribute does not exist, this attribute will be added to the model.
If the attribute does exist, the value will be replaced.

You can also pass a json object as the argument:

bmw.set({
    "mpg": 23,
    "color": "white"
})

unset():

bmw.unset('mpg', '23')

The attribute "mpg" will be deleted

Unset does not take json object or array as argument.

isNew():

bmw.isNew();

This will return ture if "id" attribute does not exist

save():

var option = {
    headers:{
        "Authentication":"Bearer SOME_TOKEN"
    }
}

bmw.save(option, function(error){
    if(error) console.log(error);
    console.log(people);
});

Save this model to the server, this is POST for new model and PUT for existing model

option: (optional) ** option.headers: the headers to be added to the HTTP request

fetch():

bmw = new Car({
    id: 1
});

bmw.fetch(function(error){
    if(error) console.log(error);
    console.log(people);
});

Fetch this model from the server, this is GET request

To fetch an model, ID has to be set.
option: (optional) ** option.headers: the headers to be added to the HTTP request

delete():

bmw.delete(option, function(error){
    if(error) console.log(error);
});

Delete this model to the server, this is DELETE method

To delete an model, ID has to be set.
option: (optional) ** option.headers: the headers to be added to the HTTP request

RNBackbone.Collection

There is only one sync method supported for collection: fetch

var Cars = RNBackbone.Colletion.extend({
    model: Car,
    url: 'https://YOUR_URL/cars
});
var cars = new Cars();
cars.fetch({
    success: ()=>{
        console.log(cars);
    }
})

Storage

As of react-native-backbone 0.1.0, we provides two different storage connectors.

fetchStorage

fetchStorage is the default storage connectors used by RNBackbone. It uses the built-in "fetch" method of React-Native

fetchStorage.globalOption.headers

If you want to send some headers in every request, you can set it up here.

import fetchStorage from 'react-native-backbone/src/storages/fetch'
fetchStorage.globalOption.headers:{
    "Authentiacation":"Bearer SOME_TOKEN"
}

fetchStorage.send()

Send simple HTTP request This is based on the React Native fetch method. It has a simple error checking to check if the response status is not between 200-208 or 226. The returned object is a json instead of a response object

//Set up request object
var request = {
    method: 'post',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        "app":"FM Business",
        "platform":"iOS"
    })
}

var url = 'https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA';

fetchStorage.send(url, request, function(error, json){
                if(error)
                    console.log("encountered error: ", error);
                console.log(json);
            });

request object: the same object used for fetch()

Realm

React Native's "asycnStorage" is a key-value pair storage, which is not ideal for the backbone concept. react native backbone uses a JavaScript library Realm for local storage

Setting up Realm

RNBackbone has declared Realm as its dependency. But if you plan to use Realm in your project, you have to set it up using rnpm: rpm link realm

Then you have to config RNBackbone to use Realm:

import RNBackbone from 'react-native-backbone';
import realmStorage from 'react-native-backbone/src/storages/realm';
RNBackbone.storage = realmStroage;

Realm requires you to declare the schema of each Models before using them:
```
const CarSchema = {
  name: 'Car',
  properties: {
     make:  'string',
     model: 'string',
     miles: {type: 'int', default: 0},
  }
}; 
```
Realm doc about models: https://realm.io/docs/react-native/latest/#models
Initialize realmStorage:
- Realm requires to provide ALL schemas before using it.
- realmStorage connector's init() methods allows RNBackbone to create a Realm instance using your schemas.
```
realmStorage.init({
models: [Car, People]
});
```
  Realm doc about models: https://realm.io/docs/react-native/latest/#models

Now you can start using RNBackbone as normal

Realm Filter

If you are fetching a collection and you want to filter the objects, you can pass the filter option to the fetch method:


var Cars = RNBackbone.Colletion.extend({
    model: Car,
    url: 'https://YOUR_URL/cars
});
var cars = new Cars();
cars.fetch({
    filters: {
        make: 'bmw'
    },
    success: ()=>{
        console.log(cars);
    }
})

peter4k / react-native-backbone

readme