Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

How and When to Use FalcorJS

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Nächste SlideShare
OAF Syllabus
OAF Syllabus
Wird geladen in …3
×

Hier ansehen

1 von 16 Anzeige

How and When to Use FalcorJS

Herunterladen, um offline zu lesen

Juha suomalainen (https://cn.linkedin.com/in/juha-suomalainen-1a1b345) from Wiredcraft shares his experience using FalcorJS by Netflix for the new World Bank Open Data portal at the January JavaScript Meetup in Shanghai (http://www.meetup.com/Shanghai-JavaScript-Meetup/). He lets developers know when and how to use it.

Juha suomalainen (https://cn.linkedin.com/in/juha-suomalainen-1a1b345) from Wiredcraft shares his experience using FalcorJS by Netflix for the new World Bank Open Data portal at the January JavaScript Meetup in Shanghai (http://www.meetup.com/Shanghai-JavaScript-Meetup/). He lets developers know when and how to use it.

Anzeige
Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Ähnlich wie How and When to Use FalcorJS (20)

Anzeige

Weitere von Wiredcraft (20)

Aktuellste (20)

Anzeige

How and When to Use FalcorJS

  1. 1. Schedule 7:00 - Pizza and Networking 7:25 - Introduction 7:30 - Talk by Juha 7:50 - Q&A for Juha 8:00 - Talk by Yuan Feng 8:20 - Q&A for Yuan Feng 8:30 - Talk by Remi Robert 8:50 - Q&A for Remi 9:00- Lightning Talks
  2. 2. Introduction to Falcor What is Falcor and how to use it? - by Juha Suomalainen
  3. 3. What is falcor? (1) • Framework to replace the traditional RESTful JSON API • Developed by Netflix, released last year • Uses their JSONGraph spec to define routes: { todosById: { "44": { name: "get milk from corner store", done: false, }}, todos: [ { $type: "ref", value: ["todosById", 44] }, { $type: "ref", value: ["todosById", 54] } ] }
  4. 4. What is falcor? (2) • Similar to GraphQL and relay • Gives transparent graph construction • Does browser-side caching • Has clean client side and backend libraries
  5. 5. Dig deeper: Backend • RESTful API has url handlers <> Falcor API has JSON path handlers • Each handler defines the route and handler function: { route: "greeting", get: function() { return {path:["greeting"], value: "Hello World"}; } }, • Add them to express.js app: app.use('/model.json', FalcorServer.dataSourceRoute(function(req, res) { return new Router(falcorRoutes); }));
  6. 6. Dig deeper: Frontend • Create model object: var model = new falcor.Model({ source: new falcor.HttpDataSource('/model.json') }); • Query the data using JSON paths model.get(“greeting”).then(function(data){ console.log(data); })
  7. 7. Why did we consider Falcor? • We had: • Browser app with a lot of independent widgets on page • Fairly straightforward data structure • Data in Redis • We wanted to: • Avoid making lots API requests when page loads • Have clean way to request data from backend. • Have something that we can use with Redux. • Have a simple backend.
  8. 8. What worked for us? • Very low amount of backend code, just concentrating on data transformation (as it should)
  9. 9. Drawbacks? • Exposing filtered lists • Fetching all the items on a list • Not as “standard” as RESTful
  10. 10. What else can Falcor do? • Support for references ($ref) • Not just gets, writes are supported too • Authentication management • Support for other backend languages • Use static JSON structure as a source
  11. 11. Questions? Find me in twitter: @JuhaFinn
  12. 12. curl 'http://localhost:9090/model.json?paths=[[%22greeting%22], [%22countries%22,%22FI%22,[%22name%22,%22region%22]]]&method=get' | python -m json.tool { "jsonGraph": { "countries": { "FI": { "name": { "$type": "atom", "value": "Finland" }, "region": { "$type": "atom", "value": "Z7" } } }, "greeting": "Hello World" } }
  13. 13. model.get("countries['FI']['name','region']", 'greeting').then(jlog, jerror) model.get('greeting').then(jlog, jerror) model.get('greeting', 'wishes').then(jlog, jerror) model.get(‘genrelist[0..5].titles[0..5].name')
  14. 14. http://netflix.github.io/falcor/ https://github.com/Netflix/falcor-express-demo

×