Win a Raspberry PI 3

Agenda

  • GraphQL, by François De Campredon (@FdeCampredon) - durée 25 min 
  • FalcorJS, by Mathieu Breton (@MatBreton) - duration 25 min
$: whoami
Mathieu Breton
CTO at @jsrepublic
                    -oy/`                       
                 `/yNMdyNMdo-                    
              -odMmy/`  `-odNNy/`                
          `/ymNdo-`         .+yNNh+-             
       -+hNmy+.`               `:sdNms:`         
   `:smNds:`                      `.+hmNh+-      
:hNmh+.`                             `:sdNms    
yMh`                      `..``         `:MM`   
yMy           +mmmmm. -odmmNNmmdy+       .MM`   
yMy           oMMMMM-/NMMMMNMMMMMo       .MM`   
yMy           oMMMMM-mMMMMy---/os`       .MM`   
yMy           oMMMMM-dMMMMNdho/-         .MM`   
yMy           oMMMMM-.hNMMMMMMMNd/       .MM`   
yMy           oMMMMM-  -+shmNMMMMM+      .MM`   
yMy           oMMMMM- .-.``.-dMMMMh      .MM`   
yMy       .:-:mMMMMN``NMNmdddNMMMN/      .MM`   
yMy       hMMMMMMMN+ omNMMMMMMNNh:       `yy`   
yMy      `ohmmmmds-   .-://///:.                
yMh.`        ```   
:ymNho-`          
   `:odNmy/`       
       .+hNNh+.`                               
          `:smNds:`                              
              -+hNNh+.  `+s`                     
                 `/yNMdhMNy-                     
                     -oy:                         
<= We hire !

Why

An idea coming from Netflix

 

 

REST, JSON-RPC, ...

The current ways to build an API is not sufficient

State of art

REST 

+ Easy to cache

+ Uncoupled

​-  Fat

/users/1 [GET]

 

{
    id: "1",
    name: "Mathieu Breton",
    job: "CTO",
    company: {
        id: "2"
        name: "Js-Republic",
        address : "11 Rue de Rome, Paris"
    }
}

State of art

JSON-RPC

-  One route = one view

-  Hard to cache

+ Lightweight

/users?id=1?props=id,name

 

{
    id: "1",
    name: "Mathieu Breton"
}

State of art

JSON is not perfect

/users/1

 

{
    id: "1",
    name: "Mathieu Breton",
    job: "CTO",
    company: {
        id: "2"
        name: "Js-Republic",
        address : "11 ..."
    }
}
/companies/2

 

 

 

 

{
    id: "2"
    name: "Js-Republic",
    address: "11 ..."
}

So why ?

Find a solution to get the data from a backend, with an  uncoupled, lightweight and easy to cache architecture.

 

And ... Have a model more closed to the reality. In other word, a graph.

What

Falcor is a library which presents the data from backend like a JSON Graph in the Front side. It deals for us the loading, caching, bashing.

And give a way to define routes to serialize on demand.

Version : 0.1.17

Creation Date :  April 2015

The data is the API

JSON Graph

Represents a graph in JSON

Use symbolic link

One model everywere

JSON Graph

{
    todosById: {
        "44": {
            name: "get milk from corner store",
            done: false,
            prerequisites: [{ $type: "ref", value: ["todosById", 54] }]
        },
        "54": {
            name: "withdraw money from ATM",
            done: false,
            prerequisites: []
        }
    },
    todos: [
        { $type: "ref", value: ["todosById", 44] },
        { $type: "ref", value: ["todosById", 54] }
    ]
};
Symbolic link (aka Ref)

Path

Walk through the JSON Graph

todos[0].name
["todos", 0, "name"]

PathSet

todos[0..4]["name","done"]
["todos", { from: 0, to: 4 }, ["name","done"]]

DataSource

Used to retrieve and update data in the Json Graph

  • HttpDataSource
  • Router (server only)
  • ModelDataSource

DataSource API

Set & Get

const response = dataSource.get([
    ["todos", 0, ["name", "done"]],
    ["todos", 0, "prerequisites", { from: 0, to: 1 }, ["name", "done"]]
]);
const response = dataSource.set({
  paths: [ ["todos", 0, "prerequisities", { to:1 }, "done"] ],
  jsonGraph: {
    todos: {
      0: {
        prerequisites: {
          1: {
            done: true
          }
        }
      }
    }
  }
});

Idempotent

Idempotent

DataSource API

Call

datasource.
  call(
    // the callPath
    ["todos", "remove"], 
    // the args array containing the id 
    // of the todo to remove
    [42],
    [],
    // retrieve the length of the list after the function has completed
    [
      ["length"]
    ]).
  subscribe((jsonGraphEnvelope) => console.log(jsonGraphEnvelope));

Router - DataSource

Used in server side, it maps path to data

const dataSource = new Router([
    {
        route: 'todos.push',
        call(callPath, args) {
            const todoId = args[0];
            return todosService.removeTodos(todosId)
                    .then((todoIdAndLength) => [
                {
                    path: ['todos', {from: todoId, to: todoIdAndLength.length}],
                    invalidated: true
                },
                {
                    path: ['todos', 'length'],
                    value: titleIdAndLength.length
                }
            ]);
        }
    }
]);

Model

Wrap datasource, used by the Front-End to access to data.

 

Responsible of caching

Model example

const model = new falcor.Model({
    source: new falcor.HttpDataSource('/model.json')
});

model.getValue('todos[0].name').then(console.log);

How

Let's start with a simple example.

Simple client side example

const model = new falcor.Model({
  cache: {
    user: {
      name: "Frank",
      surname: "Underwood",
      address: "1600 Pennsylvania Avenue, Washington, DC"
    }
  }
});

// prints "Underwood" eventually
model.getValue("user.surname").
  then(console.log);
  • ​Promise
  • Async
  • Node callback style
  • Node stream

Simple client side example

const model = new falcor.Model({
  source: new falcor.HttpDataSource("/model.json")
});

// prints "Underwood" eventually
model.getValue("user.surname").
  then(console.log);

(with loading)

Over the network

/model.json?paths=["user.surname"]

GET /model.json?paths=["user.surname"]
{
  user: {
    surname: "Underwood"
  }
}

Server side simple example

// app.js
const express = require('express');
const falcorMiddleware = require('falcor-express');
const TODORouter = require('./todo-router');

const app = express();

// Create a new Router instance for each new request
app.use('/model.json', falcorMiddleware.dataSourceRoute((req, res) =>
   new TODORouter;
));

const server = app.listen(80);

Server side simple example

// todo-router.js
const router = new Router([
    {
        route: "user['name','surname','address']",
        get(pathSet) {
            return userService.loadUser().then((user) =>
                    pathSet[1].map((userKey) => ({
                        path: ["user", userKey],
                        value: user[userKey]
                    }))
            );
        }
    }
]);

Conclusion

Netflix give a way to load data :

  • Fine grained

  • Easy to Batch

  • Easy to Cache

  • The same access everywhere

  • Resawing

Thank you

&

Questions

@MatBreton