fraserxu / xnpm-client Goto Github PK

xnpm-client

The client code to play with the data generated by xnpm.

Stacks

• gulp - build tool
• browserify - front-end package management
• reactjs virtual dom
• d3 data viz
• shoe nodejs socket stream
• node-bourbon scss

Why

I found I could generated some data with sparkfun for me to play with, so I made xnpm, a simple script to track the npm command history on my computer.

The idea is pretty simple, just a litter hack on the npm command, send a http get request with curl to a specify URL with the command content. Then I could use whatever language I like to play with those data.

Having been played with angularjs in 3-4 projects, I decided to try something new. I'm a super fan of modular front-end development, so I decide to use browserify.

And then the atom editor team wrote a blog post about how they use reactjs to improve their performance, and I found it's much nature to use it with browserify than angularjs, as all my code is just some simple component, I could just use the commonjs syntax to require it.

And of course, I need to use the awesome d3 to generate fancy charts.

Last but not least, the data from sparkfun could be huge, so I need nodejs stream. And shoe from substack could use websockt to send chunk data to the client, and re-render the UI with reactjs.

Result

Awesome!!

Liscense

MIT