0
ChanJS<br />http://chanjs.nodester.com/<br />https://github.com/wearefractal/chanjs<br />@WeAreFractal<br />
ChanJS<br />Pure-javascript image board using node.js, socket.io, mongoose, jade, stylus and spine.js<br />Real time<br />...
Templating<br />
- if (data.length)<br />- each thread in data<br />div<br />include Thread<br />- else<br />p Sorry, there are no threads!...
- if (data.length)<br />- each thread in data<br />div<br />include Thread<br />- else<br />p Sorry, there are no threads!...
- if (data.length)<br />- each thread in data<br />div<br />include Thread<br />- else<br />p Sorry, there are no threads!...
ChanJS – Category.tpl<br />- if (data.length)<br />ul<br />	- each item in data<br />li= a(href='#/category/' + item._id i...
Spine.js<br />http://maccman.github.com/spine/<br />
Spine.js Routing<br />o.app =Spine.Controller.create({<br />	init:function () {<br />this.routes({<br />"/thread/:id":func...
Upcoming SlideShare
Loading in...5
×

ChanJS

1,492

Published on

node.js-based imageboard

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,492
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "ChanJS"

  1. 1. ChanJS<br />http://chanjs.nodester.com/<br />https://github.com/wearefractal/chanjs<br />@WeAreFractal<br />
  2. 2. ChanJS<br />Pure-javascript image board using node.js, socket.io, mongoose, jade, stylus and spine.js<br />Real time<br />Not written in Perl<br />Not written in 1995<br />Similarities to Facebook UI<br />
  3. 3.
  4. 4. Templating<br />
  5. 5.
  6. 6.
  7. 7. - if (data.length)<br />- each thread in data<br />div<br />include Thread<br />- else<br />p Sorry, there are no threads!<br />- if (data.length)<br />- each thread in data<br />div<br />include Thread<br />- else<br />p Sorry, there are no threads!<br />- if (data.length)<br />- each thread in data<br />div<br />include Thread<br />- else<br />p Sorry, there are no threads!<br />Board.tpl -><br />- if (data.length)<br /> - each thread in data<br /> div<br /> include Thread<br /> - else<br /> p Sorry, there are no threads!<br />CommentInput.tpl -><br />form<br /> input type="text", placeholder = "Comment"<br /> input type="button" ...<br /> span image<br />
  8. 8.
  9. 9. - if (data.length)<br />- each thread in data<br />div<br />include Thread<br />- else<br />p Sorry, there are no threads!<br />- if (data.length)<br />- each thread in data<br />div<br />include Thread<br />- else<br />p Sorry, there are no threads!<br />- if (data.length)<br />- each thread in data<br />div<br />include Thread<br />- else<br />p Sorry, there are no threads!<br />Thread.tpl -><br />- if (data.length)<br /> - each comment in item<br /> include Comment<br /> include CommentInput<br />- else<br /> p Sorry, there are no Comments.<br />CommentInput.tpl -><br />form<br /> input type="text", placeholder = "Comment"<br /> input type="button" ...<br /> span image<br />
  10. 10.
  11. 11. - if (data.length)<br />- each thread in data<br />div<br />include Thread<br />- else<br />p Sorry, there are no threads!<br />- if (data.length)<br />- each thread in data<br />div<br />include Thread<br />- else<br />p Sorry, there are no threads!<br />- if (data.length)<br />- each thread in data<br />div<br />include Thread<br />- else<br />p Sorry, there are no threads!<br />Comment.tpl -><br />- if (data.length)<br /> div<br /> #{comment.text}<br />CommentInput.tpl -><br />form<br /> input type="text", placeholder = "Comment"<br /> input type="button" ...<br /> span image<br />
  12. 12. ChanJS – Category.tpl<br />- if (data.length)<br />ul<br /> - each item in data<br />li= a(href='#/category/' + item._id item.name<br />- else<br /> p Sorry, there are no categories.<br />
  13. 13. Spine.js<br />http://maccman.github.com/spine/<br />
  14. 14. Spine.js Routing<br />o.app =Spine.Controller.create({<br /> init:function () {<br />this.routes({<br />"/thread/:id":function (id) {<br />o.renderModel('chanjs.Thread', {_id : id}); <br />},<br />"/board/:id":function (id) {<br />o.renderModel('chanjs.Board', {name : id});<br />},<br />"/category/:id":function (id) {<br />o.renderModel('chanjs.Category', {_id: id});<br />},<br />"/":function (id) {<br />o.loadTemplate('Category', function(){<br />o.renderModel('chanjs.Category', {});<br /> });<br />},<br />});<br />}<br />}).init();<br />Spine.Route.setup();<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×