It seems that perfection is attained not when there is nothing more to add, but when there is nothing more to take away.
Antoine de Saint Exupéry
Zen.js is tiny attempt to create the Zen of reactive in-memory storage on the JS client-side environment.
Just download the library here or paste this into your HTML:
<script src="//cdn.rawgit.com/plugnburn/295342f92883ff562084/raw/2b7eb5b62140fa5262e905099ac6e3e7185f434a/zen.min.js"></script>
Basically, Zen.js is a plain JS in-memory object with some additional methods. So you can write or read properties as usual:
Zen.foo = 'bar'
console.log(Zen.foo) // => "bar"
You can import any existing object into Zen namespace by calling Zen.import:
var someObj = {a: 1, b: 2}
Zen.foo = 'bar'
Zen.import(someObj)
console.log(Zen.a, Zen.b, Zen.foo) // => 1 2 "bar"
Additionally, if you pass Zen to any function that requires a string, it will be auto-serialized to JSON in the sorted form:
console.log('' + Zen) // => {"a":1, "b":2, "foo":"bar"}
But the real magic comes when you start defining tracking functions. You can do this by just passing a callback to Zen, and its entire namespace becomes available as this:
Zen(function(){
console.log('Something changed, let\'s check foo variable:', this.foo)
})
All registered trackers run in a single polling loop when something is changed in Zen namespace.
By default, the polling loop checks the changes with an interval of 100 milliseconds.
You can override this by calling Zen.interval method:
Zen.interval(1000) // perform checks each second instead of 0.1 s
Last but not least, Zen.js has a req method which allows you to make some HTTP requests (GET if you don't pass the third parameter, and POST if you do) and automatically save the result under some key in Zen namespace:
//...track the values...
Zen(function(){
if(Zen.remoteData)
console.log('GET result:', Zen.remoteData)
if(Zen.apiResult)
console.log('POST result:', Zen.apiResult)
})
//...and make actual requests at some point
Zen.req('remoteData', '//example.com/data.json') //example of a GET request
Zen.req('apiResult', '//example.com/api.json', JSON.stringify({foo:'bar'})) //example of a POST request
That's really everything the library has to offer, but with this functionality everything else becomes a breeze.
We can use auto-serializing and import features to make the entire Zen namespace get stored persistently:
Zen.import(localStorage.getItem('Zen'))
Zen(function(){
localStorage.setItem('Zen', this)
})
If you want to save only a part under some key myKey, it's just as easy, except you'll have to do the marshaling manually:
Zen.myKey = JSON.parse(localStorage.getItem('myPhysicalKey'))
Zen(function(){
localStorage.setItem('myPhysicalKey', JSON.stringify(this.myKey))
})
Unlike some bloated (or not so bloated but still bigger) frameworks, Zen.js doesn't come with built-in DOM-to-data binding capabilities. However, they are pretty easy to create, especially using a ready DOM manipulation library (such as equally tiny Q.js, for instance).
Data-to-DOM binding example:
RateIndicator = Q('#usd-in-uah')()
Zen(function(){
if(Zen.usdInUahRate)
RateIndicator.val(Zen.usdInUahRate)
})
DOM-to-data binding example:
Zen.formData = {}
Q('[data-form-field]')().on('input', function(){
Zen.formData[this.dataset.formField] = this.value
})
//track form data changes
Zen(function(){
if(Object.keys(Zen.formData).length) {
// ... do something here
}
})
These examples are pretty trivial but the capabilities are obviously much bigger.
This is an alternative Zen.js implementation that introduces Zen.sub method instead of tracking the entire namespace, so it lacks Zen.interval method as unnecessary but is much more resource-efficient. With Zen.js v2, you track the changes as follows:
Zen.sub('someKey anotherKey', function(propName, oldValue, newValue){
console.log('Property', propName, 'was changed from', oldValue, 'to', newValue)
})
As you can see, you can pass several (space-separated) property names to monitor in Zen storage, and on each change three values are passed into the subscriber callback: property name, old property value and new property value.
If you need to subscribe to all already existing properties, you can simulate old behaviour by running something like this:
Zen.sub(Object.keys(Zen).join(' '), function(propName, oldValue, newValue){ ... })
Other than that, Zen.js v2 has the same capabilities as the first version.