DailyJS

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

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

graphics apps graphs reactjs

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

Posted by Alex R. Young on .
Featured

graphics apps graphs reactjs

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

Posted by Alex R. Young on .

Omniscient.js

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

Path.js

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
  data:
    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
  @update()

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.