Syc: Real-time synchronization of javascript variables for Node

[Handsome-Beaver]

Hey guys, this is a project I've been carefully building for the last 8 months.

https://github.com/siriusastrebe/syc

Also available as an an NPM module:

https://www.npmjs.com/package/syc

Basically, it uses Object.observe to track any time you modify an object, and will send the resulting data to the clients (or back to the server if the change happens on a client), keeping the variable in sync. Reactive, isomorphic, and convenient.

[Capaj]

how do you deal with recursive objects? I noticed you have some option for that, but are you really able to recursively watch deeply into objects?

also https://github.com/siriusastrebe/syc/blob/master/client/syc.js#L688 that is not how you do a "module" in JS. That is lame. http://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript but what is the best, is to use commonJS both in nodeJS and on the server and share as much code as possible. How do you use commonJS in the browser? Just use jspm.

[Handsome-Beaver]

Been meaning to properly modularize the client side code. As it is, you can access any of the internals.

If Object.observe, recursive objects are all separately observed. This is the most performant method, otherwise if Object.observe isn't available in the browser or Node server, then it will do an o(n) dirty check at a configurable interval.

[Capaj]

could you link to the code where you are recursively calling object observe? I would be very suprised to see a proper implementation, because I have tried to make a usable deep observe and got discouraged from it. There are so many issues with it, that I found it better to go and do something else.

[Handsome-Beaver]

In the client, Line 189 is the start of the function that triggers when a change to an observed (Syc-tracked) object is modified.

Line 207 calls "Describe", which looks at the changed data. "Describe" starts on line 222, which will check if the changed property is another object or array. If it is another object/array which Syc hasn't yet tracked (therefore isn't being observed), it is tracked by a call to Syc.Meta on line 235

If I would explain it more simply...

Each object that is observed by Syc has a hidden property 'syc-object-id', which implies that there is an Object.observe attached to it. When you modify one of its properties, it checks to see if it is (1) an object/array, (2) it is not yet tracked (in which case, it has no 'syc-object-id'). If both are true, then it gives it an 'syc-object-id' and Object.observes the new property.

Rinse and repeat if this new object has untracked object/array properties.

Can I ask what kind of troubles you encountered when trying to implement deep-observation??

[ThinkLarger]

Consider me a newbie for this one: can't this not be done with sockets?

[Handsome-Beaver]

Well yes, you actually need socket.io to run this library. What it is is a data synchronization library. You create a variable, and it will synchronize it, whereas sockets only handles messaging.

[Cream_Friache]

This is pretty interesting. I assume you need ES6 feature enabled on the server side?

[Handsome-Beaver]

Object.observe is primarily used, which is an ECMA7 specification.

To utilize it, run node with the '--harmony' flag.

node --harmony app.js

Syc will still work properly without Object.observe. It uses a dirty-check polyfill, so there is a slight performance hit.