This release is a developer preview. We are looking for community help to track down and fix bugs. We are also looking for help integrating with existing MVC frameworks, as well as ports to other platforms.
If you're including falcor in your app, via npm and require('falcor'), and you're building a browser bundle for your app with Webpack, you'll need to add an alias entry for the 'rx' module in your webpack config, to avoid this RxJS bug: 'https://github.com/Reactive-Extensions/RxJS/issues/832'. You may already have such an entry, if you're using RxJS already. An example is below:
In webpack.config.js:
module.exports = {
resolve: {
alias: {
// Workaround https://github.com/Reactive-Extensions/RxJS/issues/832, until it's fixed
'rx$': <path to rx/dist/rx.js file >
}
}
};
In this barebones tutorial we will use the falcor Router to create a Virtual JSON resource. Then we will use falcor's express middleware to serve the Virtual JSON resource on an application server at the URL /model.json. We will also host a static web page on the same server which retrieves data from the Virtual JSON resource.
In this example we will use the falcor Router to build a Virtual JSON resource on an app server and host it at /model.json. The JSON resource will contain the following contents:
{
"greeting": "Hello World"
}
Normally Routers retrieve the data for their Virtual JSON resource from backend datastores or other web services on-demand. However in this simple tutorial the Router will simply return static data for a single key.
First we create a folder for our application server.
mkdir falcor-app-server
cd falcor-app-server
npm init
Now we install the falcor Router.
npm install falcor-router --save
Then install express and falcor-express. Support for restify is also available, as is support for hapi via a third-party implementation.
npm install express --save
npm install falcor-express --save
Now we create an index.js file with the following contents:
// index.js
var falcorExpress = require('falcor-express');
var Router = require('falcor-router');
var express = require('express');
var app = express();
app.use('/model.json', falcorExpress.dataSourceRoute(function (req, res) {
// create a Virtual JSON resource with single key ("greeting")
return new Router([
{
// match a request for the key "greeting"
route: "greeting",
// respond with a PathValue with the value of "Hello World."
get: function() {
return {path:["greeting"], value: "Hello World"};
}
}
]);
}));
// serve static files from current directory
app.use(express.static(__dirname + '/'));
var server = app.listen(3000);
Now we run the server, which will listen on port 3000 for requests for /model.json.
node index.js
Now that we've built a simple virtual JSON document with a single read-only key "greeting", we will create a test web page and retrieve this key from the server.
Now create an index.html file with the following contents:
<!-- index.html -->
<html>
<head>
<!-- Do _not_ rely on this URL in production. Use only during development. -->
<script src="https://cdn.rawgit.com/Netflix/falcor/master/dist/falcor.browser.js"></script>
<script>
var model = new falcor.Model({source: new falcor.HttpDataSource('/model.json') });
// retrieve the "greeting" key from the root of the Virtual JSON resource
model.
get("greeting").
then(function(response) {
document.write(response.json.greeting);
});
</script>
</head>
<body>
</body>
</html>
Now visit http://localhost:3000/index.html and you should see the message retrieved from the server:
Hello World
For detailed high-level documentation explaining the Model, the Router, and JSON Graph check out the Falcor website.
For API documentation, go here
For a working example of a Router, check out the falcor-router-demo.
FAQs
A JavaScript library for efficient data fetching.
The npm package falcor receives a total of 614 weekly downloads. As such, falcor popularity was classified as not popular.
We found that falcor demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 18 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
OpenSSF has published OSPS Baseline, an initiative designed to establish a minimum set of security-related best practices for open source software projects.
Security News
Michigan TypeScript founder Dimitri Mitropoulos implements WebAssembly runtime in TypeScript types, enabling Doom to run after processing 177 terabytes of type definitions.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.