https://github.com/threepointone/falcro

falcor + react. hype!
https://github.com/threepointone/falcro

Last synced: about 1 month ago
JSON representation

falcor + react. hype!

• Host: GitHub
• URL: https://github.com/threepointone/falcro
• Owner: threepointone
• Created: 2015-11-08T17:44:26.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2016-01-16T22:01:18.000Z (over 9 years ago)
• Last Synced: 2025-03-25T09:11:18.297Z (about 2 months ago)
• Language: JavaScript
• Size: 40 KB
• Stars: 6
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
falcro

---

[work in progress]

falcor as a component

`npm install react falcor falcro --save`

```jsx

// instantiate a model, matching paths to data sources

let model = new Model({

  cache: {...},

  source: new Router([...])

});

// include the Root component somewhere up in your component hierarchy

function App(){

  return 

    

  ;

}

// and then fetch anywhere in your app

function User({name}){

  return {

    ({users, error, loading}}) => loading ?

      
loading...
 :

      

  };

}


// all the falcor goodies for free - batching, caching, .set/.call, etc

//BONUS - server side async rendering

renderToString(, model).then(html => res.send(html))

```

Model

---

(see [falcor.Model](https://netflix.github.io/falcor/doc/Model.html))

Root

---

- model - instance of Model

Get

---

- query - falcor model query. accepts [falcor-path-syntax](https://www.npmjs.com/package/falcor-path-syntax)

- children - a function, that will receive, on render -

  - ...value - ie, the result of the query

  - error - if errored

  - loading - _true_ if a request is in flight

  - $ - actions on the model instance - _setValue_, _call_, and _refresh_ (more to come)

renderToString(element, model)

---

 - returns a promise, which resolves to the html

examples

---

use [react-heatpack](https://github.com/insin/react-heatpack) to run examples from `/examples` directory

todo

---

*so much*

- refreshing *only* the components that change

- streaming results

- redux/router scenarios (reduce/rewind/replay/etc)

- shallow render testing

- idents

- derefs

- etc etc