SlideShare a Scribd company logo
ChanJS http://chanjs.nodester.com/ https://github.com/wearefractal/chanjs @WeAreFractal
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 data div include Thread - else p Sorry, there are no threads! - if (data.length) - each thread in data div include Thread - else p Sorry, there are no threads! - if (data.length) - each thread in data div include Thread - else p Sorry, there are no threads! Board.tpl -> - if (data.length) 	- each thread in data 		div 			include Thread 	- else 		p Sorry, there are no threads! CommentInput.tpl -> form 	input type="text", placeholder = "Comment" 	input type="button" ... 	span image
- if (data.length) - each thread in data div include Thread - else p Sorry, there are no threads! - if (data.length) - each thread in data div include Thread - else p Sorry, there are no threads! - if (data.length) - each thread in data div include Thread - else p Sorry, there are no threads! Thread.tpl -> - if (data.length) 	- each comment in item 		include Comment 		include CommentInput - else 	p Sorry, there are no Comments. CommentInput.tpl -> form 	input type="text", placeholder = "Comment" 	input type="button" ... 	span image
- if (data.length) - each thread in data div include Thread - else p Sorry, there are no threads! - if (data.length) - each thread in data div include Thread - else p Sorry, there are no threads! - if (data.length) - each thread in data div include Thread - else p Sorry, there are no threads! Comment.tpl -> - if (data.length) 	div 		#{comment.text} CommentInput.tpl -> form 	input 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 - else 	p Sorry, there are no categories.
Spine.js http://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();

More Related Content

Viewers also liked

Boston Globe: Responsive Web Design
Boston Globe: Responsive Web DesignBoston Globe: Responsive Web Design
Boston Globe: Responsive Web Design
The Media Consortium
 
Building A Web App In 100% JavaScript with Carl Bergenhem
 Building A Web App In 100% JavaScript with Carl Bergenhem Building A Web App In 100% JavaScript with Carl Bergenhem
Building A Web App In 100% JavaScript with Carl Bergenhem
FITC
 
Responsive web design ppt
Responsive web design pptResponsive web design ppt
Responsive web design ppt
NAWAZ KHAN
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
Sara Cannon
 
Responsive web designing ppt(1)
Responsive web designing ppt(1)Responsive web designing ppt(1)
Responsive web designing ppt(1)
admecindia1
 
Sass: The Future of Stylesheets
Sass: The Future of StylesheetsSass: The Future of Stylesheets
Sass: The Future of Stylesheets
chriseppstein
 
HTML5 with Play Scala, CoffeeScript and Jade - Jfokus 2012
HTML5 with Play Scala, CoffeeScript and Jade - Jfokus 2012HTML5 with Play Scala, CoffeeScript and Jade - Jfokus 2012
HTML5 with Play Scala, CoffeeScript and Jade - Jfokus 2012
Matt Raible
 
Succession “Losers”: What Happens to Executives Passed Over for the CEO Job?
Succession “Losers”: What Happens to Executives Passed Over for the CEO Job? Succession “Losers”: What Happens to Executives Passed Over for the CEO Job?
Succession “Losers”: What Happens to Executives Passed Over for the CEO Job?
Stanford GSB Corporate Governance Research Initiative
 

Viewers also liked (8)

Boston Globe: Responsive Web Design
Boston Globe: Responsive Web DesignBoston Globe: Responsive Web Design
Boston Globe: Responsive Web Design
 
Building A Web App In 100% JavaScript with Carl Bergenhem
 Building A Web App In 100% JavaScript with Carl Bergenhem Building A Web App In 100% JavaScript with Carl Bergenhem
Building A Web App In 100% JavaScript with Carl Bergenhem
 
Responsive web design ppt
Responsive web design pptResponsive web design ppt
Responsive web design ppt
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
Responsive web designing ppt(1)
Responsive web designing ppt(1)Responsive web designing ppt(1)
Responsive web designing ppt(1)
 
Sass: The Future of Stylesheets
Sass: The Future of StylesheetsSass: The Future of Stylesheets
Sass: The Future of Stylesheets
 
HTML5 with Play Scala, CoffeeScript and Jade - Jfokus 2012
HTML5 with Play Scala, CoffeeScript and Jade - Jfokus 2012HTML5 with Play Scala, CoffeeScript and Jade - Jfokus 2012
HTML5 with Play Scala, CoffeeScript and Jade - Jfokus 2012
 
Succession “Losers”: What Happens to Executives Passed Over for the CEO Job?
Succession “Losers”: What Happens to Executives Passed Over for the CEO Job? Succession “Losers”: What Happens to Executives Passed Over for the CEO Job?
Succession “Losers”: What Happens to Executives Passed Over for the CEO Job?
 

Recently uploaded

“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
Edge AI and Vision Alliance
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Jeffrey Haguewood
 
dbms calicut university B. sc Cs 4th sem.pdf
dbms  calicut university B. sc Cs 4th sem.pdfdbms  calicut university B. sc Cs 4th sem.pdf
dbms calicut university B. sc Cs 4th sem.pdf
Shinana2
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
tolgahangng
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
Miro Wengner
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
DanBrown980551
 
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Tatiana Kojar
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
AWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptxAWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptx
HarisZaheer8
 
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
Data Hops
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - HiikeSystem Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
Hiike
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
Javier Junquera
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their MainframeDigital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Precisely
 
A Comprehensive Guide to DeFi Development Services in 2024
A Comprehensive Guide to DeFi Development Services in 2024A Comprehensive Guide to DeFi Development Services in 2024
A Comprehensive Guide to DeFi Development Services in 2024
Intelisync
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
Tatiana Kojar
 

Recently uploaded (20)

“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
 
dbms calicut university B. sc Cs 4th sem.pdf
dbms  calicut university B. sc Cs 4th sem.pdfdbms  calicut university B. sc Cs 4th sem.pdf
dbms calicut university B. sc Cs 4th sem.pdf
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
 
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
AWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptxAWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptx
 
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - HiikeSystem Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their MainframeDigital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
 
A Comprehensive Guide to DeFi Development Services in 2024
A Comprehensive Guide to DeFi Development Services in 2024A Comprehensive Guide to DeFi Development Services in 2024
A Comprehensive Guide to DeFi Development Services in 2024
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
 

ChanJS

  • 2. 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
  • 3.
  • 5.
  • 6.
  • 7. - if (data.length) - each thread in data div include Thread - else p Sorry, there are no threads! - if (data.length) - each thread in data div include Thread - else p Sorry, there are no threads! - if (data.length) - each thread in data div include Thread - else p Sorry, there are no threads! Board.tpl -> - if (data.length) - each thread in data div include Thread - else p Sorry, there are no threads! CommentInput.tpl -> form input type="text", placeholder = "Comment" input type="button" ... span image
  • 8.
  • 9. - if (data.length) - each thread in data div include Thread - else p Sorry, there are no threads! - if (data.length) - each thread in data div include Thread - else p Sorry, there are no threads! - if (data.length) - each thread in data div include Thread - else p Sorry, there are no threads! Thread.tpl -> - if (data.length) - each comment in item include Comment include CommentInput - else p Sorry, there are no Comments. CommentInput.tpl -> form input type="text", placeholder = "Comment" input type="button" ... span image
  • 10.
  • 11. - if (data.length) - each thread in data div include Thread - else p Sorry, there are no threads! - if (data.length) - each thread in data div include Thread - else p Sorry, there are no threads! - if (data.length) - each thread in data div include Thread - else p Sorry, there are no threads! Comment.tpl -> - if (data.length) div #{comment.text} CommentInput.tpl -> form input type="text", placeholder = "Comment" input type="button" ... span image
  • 12. ChanJS – Category.tpl - if (data.length) ul - each item in data li= a(href='#/category/' + item._id item.name - else p Sorry, there are no categories.
  • 14. 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();