3 ms·
Falcor, conceptually, is a really great and exciting idea. However it seems either too disconnected from existing tooling / too theoretical. Meanwhile, I've bee
by marknadal 10y ago
Falcor, conceptually, is a really great and exciting idea. However it seems either too disconnected from existing tooling / too theoretical. Meanwhile, I've been working on an Open Source Firebase alternative for a few years now, and I decided to go ahead and implement (what, in obviously IMHO) is a better version of the idea.
Recently somebody combined it with webcomponents/polymer, which is pretty awesome. Here is an example they use for realtime IoT temperature data viz, you drop in `<gun-ui-lcd parent="livingroom" prop="temperature"></gun-ui-lib>` and it automatically tells the system to ONLY load `temperature` from the `livingroom` database. More info, along with a cool animated gif showing the example off in action, is here: https://github.com/Stefdv/gun-ui-lcd#syncing https://github.com/Stefdv/gun-ui-lcd#syncing .
More generally, the way it works is this:
Imagine we have some document, like
```
{
name: "Alice",
age: 27,
pet: {
name: "Fluffy",
age: 4
}
}
```
all we have to do is
```
Gun(serverURL).get('alice').path('pet.name').on(age => ui.show('#pet-age', age))
```
This makes it easy to bind with React, or Angular, or VueJS, or others. The important thing to note is, like Falcor, it only loads the 1 property, not the full document. If you want to show another item, it is trivial to just add `...get('alice').path('age').on(age => ui.show('#age', age))`.
I've already made a prototype which automatically generates the loading the properties based off of a plain HTML template. Hopefully I'll have it published in the next couple months. Meaning all you have to do is add a property to your HTML, and it automatically binds realtime updates of data to that view! (No writing JS).
- lmeyerov 10y agoFragment queries load exactly what you want, with automatic smart caching etc. out-of-the-box, and give you robust controls when you want to get deeper into cache control, API generation, middleware, etc. I suggest taking a closer look. For the above example, we'd write React+Falcor along the lines of //vanilla react const myReactComponent = props => <h1>`Hello, ${props.name} and ${props.petName}`</h1>; //falcor live query + binding to react component const myView = Container( myReactComponent, `{users['alice']: {name, pet: {name, age}}}`); Whenever any individual field in the server model updates, we get the update, and Falcor+React takes care of batching, incremental renders, etc.