rxdl-js v0.0.9

rxdl-js (reactive data layer)

Keeping data consistent and in sync in the front-end can be painful, even when using robust frameworks, this is an experimental solution, based on RxJS, to simplify the consumption of typical REST data APIs in front-end applications. Ideally this library could be plugged into any javascript app, and adapted to a wide range of back- and front-end stacks.

The library is developed in typescript so it can be compiled to use in any javascript application.

The initial ideas behind it (subject to change) are the following:

• Structure apps around CRUD models/resources (a la Rails).
• Keep an in memory DataStore to avoid remote requests when possible.
• Instead of returning POJOs or other forms of data when queried by -say- components, the DataStore returns RxJS subjects, so that the components (observers) can be notified of changes.
• Have a separate (and optional) DataSource adapter, to customize the connection to the server API (make requests, serialize and deserialize data, etc).
• The back-end need only implement a typical REST style API

Roadmap

• Create a sample DataStore implementation for basic CRUD
• Create a sample DataSource implementation for basic CRUD
• Add paging and filtering
• Create TypeDoc documentation
• Create a sample application
• Put tests on continuous delivery
• Publish on npm
• Add support for relationships
• Add concurrency restrictions for deletion and editing
• Create a generic DataNotifier (independent from Rails)

Usage IDEA, NOT YET IMPLEMENTED

1. Install package: npm install --save rxdl-js

2. Initialize the data store in your app:

     // On app startup
     let RxDL = require('rxdl');
   
     // Initialize the objects
     let dataSource = new RDL.DataSource();
     let dataCtrl = new RDL.DataController();
   
     // Set up the data store
     dataCtrl.source = dataSource;
   
     // Define a resource in the store
     dataCtrl.defineResource('users');

3. Subscribe to a resource somewhere in your app

     // Initialize a bound object
     let user = {
       id: '',
       type: '',
       name: '',
       email: ''
     };
   
     // Subscribe to the resource (an RxJS BehaviorSubject)
     dataStore.find('user', '123')
       .subscribe((result) => user.apply(result));

4. Publish changes to your model from somewhere else

     // Create an object with -say- a web form
     let user = {
       id: '123',
       type: 'user',
       name: 'New Name',
       email: 'new@email.com'
     };
   
     // Publish the change
     dataStore.update(user);

5. When the edit component changes the user's attrs, the database and show component will also be updated.