ChanJS

ChanJS

@WeAreFractal

http://chanjs.nodester.com/

https://github.com/wearefractal/chanjs

ChanJS

• Pure-javascript image board using node.js, socket.io, mongoose, jade, stylus and spine.js

• Real time• Not written in Perl• Not written in 1995• Similarities to Facebook UI

Templating

- if (data.length)- each thread in datadivinclude Thread- elsep Sorry, there are no threads!

- if (data.length)- each thread in datadivinclude Thread- elsep Sorry, there are no threads!

- if (data.length)- each thread in datadivinclude Thread- elsep Sorry, there are no threads!

Board.tpl ->

- if (data.length)- each thread in data

divinclude Thread

- elsep Sorry, there are no threads!

CommentInput.tpl ->

forminput type="text", placeholder = "Comment"input type="button" ...span image

- if (data.length)- each thread in datadivinclude Thread- elsep Sorry, there are no threads!

- if (data.length)- each thread in datadivinclude Thread- elsep Sorry, there are no threads!

- if (data.length)- each thread in datadivinclude Thread- elsep Sorry, there are no threads!

Thread.tpl ->

- if (data.length)- each comment in item

include Commentinclude CommentInput

- elsep Sorry, there are no Comments.

CommentInput.tpl ->

forminput type="text", placeholder = "Comment"input type="button" ...span image

- if (data.length)- each thread in datadivinclude Thread- elsep Sorry, there are no threads!

- if (data.length)- each thread in datadivinclude Thread- elsep Sorry, there are no threads!

- if (data.length)- each thread in datadivinclude Thread- elsep Sorry, there are no threads!

Comment.tpl ->

- if (data.length)div

#{comment.text}

CommentInput.tpl ->

forminput type="text", placeholder = "Comment"input type="button" ...span image

ChanJS – Category.tpl- if (data.length)

ul- each item in data

li= a(href='#/category/' + item._id item.name

- elsep Sorry, there are no categories.

Spine.jshttp://maccman.github.com/spine/

Spine.js Routing

o.app = Spine.Controller.create({init: function () {

this.routes({"/thread/:id": function (id) {

o.renderModel('chanjs.Thread', {_id : id}); },

"/board/:id": function (id) {o.renderModel('chanjs.Board', {name : id});

},

"/category/:id": function (id) {o.renderModel('chanjs.Category', {_id: id});

},"/": function (id) {

o.loadTemplate('Category', function(){o.renderModel('chanjs.Category', {});

});},

});}}).init();

Spine.Route.setup();