- Falcor is developed by Netflix for back-end data modeling.
- All the JSON data is represented a single JSON model as a JSON graph and independent of source of JSON data.
- Falcor supports JavaScript like path access to retrieve JSON data.The fetching of JSON data from a specific path is done in Asynchronous mode.
- Falcor supports server side data retrieval using NodeJS.
- In this Demo,”We will learn to install falcor,falcor-router and falcor-express module and checkout a simple example”.
- Falcor module can be installed using npm install falcor –save command.The following screenshot shows the terminal with falcor installation.
- falcor-router can be installed locally using npm install falcor-router –save command.The following screenshot shows the terminal with falcor router module installation.
- Express module can be installed using npm install express –save command.The following screenshot shows the terminal with express installation.
- falcor-express can be installed using npm install falcor-express –save command.The following screenshot shows the terminal with falcor express module installation.
- For demonstrating Falcor we have created a FalcorDemo project.The following screenshot shows the structure of FalcorDemo project.
- The index.js file contains the code for defining express routing using falcor-express and falcor-router module.The virtual JSON graph is represented as a single model having name myMessage.json file.The express server listens to the port 4000.The code content of index.js file are as follows:-
var falcorExpress = require('falcor-express'),
Router = require('falcor-router'),
express = require('express'),
app = express();
app.use('/myMessage.json',
falcorExpress.dataSourceRoute(function (req, res) {
return new Router([
{
route: "detailText",
get: function() {
return {path:["detailText"], value: "Hello Falcor Developers"};
}
}
]);
}));
app.use(express.static(__dirname + '/'));
app.listen(4000,function(){
console.log("Server started at port 4000");
});
- The index.html file contains the code for referring Falcor Model with HTTP data source pointing to myMessage.json virtual file.The falcor sends a request to Express server asking the value for path detailText.The express server provides the JSON response and the callback method renders it inside the H1 HTML element.The code content of index.html file are as follows:-
<html>
<head>
<title>Falcor with NodeJS and Express Demo</title>
</head>
<body>
<h1 id="message"></h1>
</body>
<script src="node_modules/falcor/dist/falcor.browser.js"></script>
<script>
var model = new falcor.Model({
source: new falcor.HttpDataSource('/myMessage.json')
});
model.get("detailText")
.then(function(response) {
var message = document.getElementById("message");
message.innerText = response.json.detailText
});
</script>
</html>
- We can run this demo using node index.js command.The following screenshot shows the execution of this demo.
- The output of the demo looks like following screenshot.We can observe the requested URL created by the Falcor in the chrome developer console.
- The code for this demo can be downloaded from the following URL:-
https://github.com/saan1984/FalcorDemo
