This presentation explains where come from GraphQL et FalcorJS. Why Facebook and Netflix need to develop this new kind of technology.

2. Win a Raspberry PI 3Win a Raspberry PI 3

3. AgendaAgenda
GraphQL, by François De Campredon
(@FdeCampredon) - durée 25 min
FalcorJS, by Mathieu Breton (@MatBreton) -
duration 25 min

4. $: 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 !

5. WhyWhy
An idea coming from Netflix
REST, JSON-RPC, ...REST, JSON-RPC, ...
The current ways to build an
API is not sufficient

6. State of artState of art
REST 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"
}
}

7. State of artState of art
JSON-RPCJSON-RPC
- One route = one view
- Hard to cache
+ Lightweight
/users?id=1?props=id,name
{
id: "1",
name: "Mathieu Breton"
}

8. State of artState of art
JSON is not perfectJSON is not perfect
/users/1
{
id: "1",
name: "Mathieu Breton",
job: "CTO",
company: {
id: "2"
name: "Js­Republic",
address : "11 ..."
}
}

9. State of artState of art
JSON is not perfectJSON 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 ..."
}

10. State of artState of art
JSON is not perfectJSON 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 ..."
}

11. So why ?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.

12. WhatWhat
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

13. JSON GraphJSON Graph
Represents a graph in JSON
Use symbolic link
“ One model everywere

14. JSON GraphJSON 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] }
]
};

15. JSON GraphJSON 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)

16. PathPath
Walk through the JSON Graph
todos[0].name

17. PathPath
Walk through the JSON Graph
todos[0].name
["todos", 0, "name"]

18. PathPath
Walk through the JSON Graph
todos[0].name
["todos", 0, "name"]
PathSetPathSet
todos[0..4]["name","done"]
["todos", { from: 0, to: 4 }, ["name","done"]]

19. DataSourceDataSource
Used to retrieve and update data in the Json Graph
HttpDataSource
Router (server only)
ModelDataSource

20. DataSource APIDataSource 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
}
}
}
}
}
});

21. DataSource APIDataSource 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

22. DataSource APIDataSource 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));

23. Router - DataSourceRouter - 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
}
]);
}
}
]);

24. ModelModel
Wrap datasource, used by
the Front-End to access to
data.
Responsible of caching

25. Model exampleModel example
const model = new falcor.Model({
source: new falcor.HttpDataSource('/model.json')
});
model.getValue('todos[0].name').then(console.log);

26. HowHow
Let's start with a simple example.

27. Simple client side exampleSimple 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);

28. Simple client side exampleSimple 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

29. Simple client side exampleSimple 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)

31. Over the networkOver the network
/model.json?paths=["user.surname"]
GET /model.json?paths=["user.surname"]
{
user: {
surname: "Underwood"
}
}

32. Server side simple exampleServer 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);

33. Server side simple exampleServer 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]
}))
);
}
}
]);

34. ConclusionConclusion
Netflix give a way to load data :
Fine grained
Easy to Batch
Easy to Cache
The same access everywhere
Resawing

35. Thank youThank you
&
QuestionsQuestions
@MatBreton@MatBreton