Omniscient.js, Paths.js Update, React Example Shopping Cart

2014-10-16 00:00:00 +0100 by Alex R. Young


Omniscient.js (GitHub: omniscientjs / omniscient, License: MIT, npm: omniscient) by Mikael Brevik and Torgeir is a React library for rendering components using immutable data. This is ideal for use with Immutable.js, but other libraries could be used as well.

It uses cursors, so the outer immutable structure swapped when a component's data is changed. This might sound like it would perform badly, but it only re-renders component trees that reference changed data.

The module is used by wrapping components with the omniscient function. The author's examples call this "component". These components only deal with their own piece of data, so they're nicely encapsulated and potentially easier to reuse.

The project has lots of examples and documentation, so it's worth reading through the readme first to get a feel for it.

Path.js Update


Andrea Ferretti wrote in to say Paths.js has been updated to include tree charts, waterfall diagrams, Sankey diagrams and a preliminary version of force-directed graphs.

This is what the tree chart looks like:

tree = new Ractive
  el: '#tree'
  template: template
    Tree: Tree
    data: ducks
    children: children
    width: 350
    height: 300
    leaf: (point) ->
      not (children(point)?.length)

tree.on 'toggle', (event) ->
  node = event.context.item
  node.collapsed = not node.collapsed

The author is also working on performance improvements and lots of other cool stuff, so it's worth keeping an eye on this library.

Coinbolt Cat Shop

JP Richardson sent in Coinbolt Cat Shop (GitHub: coinbolt / catshop, License: MIT). This is an example of a React.js shopping cart, intended to be used with Bitcoins.

The author points out that you can actually use it with fake Bitcoins for testing purposes.