<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Rob Searles &#187; JavaScript</title>
	<atom:link href="http://www.robsearles.com/category/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.robsearles.com</link>
	<description>Musing on the business of and development for "The Web"</description>
	<lastBuildDate>Thu, 02 Feb 2012 15:36:21 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>I&#8217;ve Turned into a Hipster</title>
		<link>http://www.robsearles.com/2012/02/02/ive-turned-into-a-hipster/</link>
		<comments>http://www.robsearles.com/2012/02/02/ive-turned-into-a-hipster/#comments</comments>
		<pubDate>Thu, 02 Feb 2012 15:36:21 +0000</pubDate>
		<dc:creator>Rob Searles</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[coffeescript]]></category>
		<category><![CDATA[hipster]]></category>
		<category><![CDATA[nodejs]]></category>

		<guid isPermaLink="false">http://www.robsearles.com/?p=602</guid>
		<description><![CDATA[After playing around with CoffeeScript, I find it is too good not to use. So now I am a CoffeeScript coder. Does this mean I'm a hipster? How embarrassing.]]></description>
			<content:encoded><![CDATA[<p style="text-align: center; line-height: 14.25pt; background: white;" align="center"><img class="aligncenter size-full wp-image-624" style="font-family: Georgia; font-size: 10pt; background-color: white; line-height: 14.25pt;" title="Hipster Dog" src="http://www.robsearles.com/wp-content/uploads/2012/01/Hipster-Dog-Is-Here.jpg" alt="Hipster Dog" width="600" height="300" /></p>
<p style="line-height: 14.25pt; background: white;"><span style="font-size: 10.0pt; font-family: Georgia;" lang="EN-CA">I’ve seen a day I never thought would come:  the day I turned into a hipster!</span></p>
<p style="line-height: 14.25pt; background: white;"><span style="font-size: 10.0pt; font-family: Georgia;" lang="EN-CA">If you&#8217;ve been following this blog, you&#8217;ll have noticed that throughout 2011 I&#8217;ve been working<span> </span></span><span lang="EN-CA"><a title="Node.JS: Experiments with Processes" href="http://www.robsearles.com/2011/09/28/nodejs-experiments-with-processes/"><span style="font-size: 10.0pt; font-family: Georgia;">more</span></a></span><span><span style="font-size: 10.0pt; font-family: Georgia;" lang="EN-CA"> </span></span><span style="font-size: 10.0pt; font-family: Georgia;" lang="EN-CA">and<span> </span></span><span lang="EN-CA"><a title="Node.JS: Experiments with the Middle End, Part 1" href="http://www.robsearles.com/2011/10/20/nodejs-experiments-with-middle-end-part1/"><span style="font-size: 10.0pt; font-family: Georgia;">more</span></a></span><span><span style="font-size: 10.0pt; font-family: Georgia;" lang="EN-CA"> </span></span><span style="font-size: 10.0pt; font-family: Georgia;" lang="EN-CA">in Javascript, more specifically with<span> </span></span><span lang="EN-CA"><a href="http://nodejs.org/" target="_blank"><span style="font-size: 10.0pt; font-family: Georgia;">Node.JS</span></a></span><span style="font-size: 10.0pt; font-family: Georgia;" lang="EN-CA">.</span></p>
<p style="line-height: 14.25pt; background: white;"><span style="font-size: 10.0pt; font-family: Georgia;" lang="EN-CA">The last few months have been especially Node.JS-centric. During the day, I&#8217;ve been building architectural improvements into<span> </span><a href="http://www.jabbakam.com/" target="_blank">Jabbakam</a>. Evenings and weekends, I’ve been  hacking about on the<span> </span></span><span lang="EN-CA"><a href="http://www.liveunsigned.com/" target="_blank"><span style="font-size: 10.0pt; font-family: Georgia;">Live Unsigned</span></a></span><span><span style="font-size: 10.0pt; font-family: Georgia;" lang="EN-CA"> </span></span><span style="font-size: 10.0pt; font-family: Georgia;" lang="EN-CA">mobile site. All of my recent projects revolve around Node.JS, and I&#8217;ve been loving it. Node is incredibly interesting and powerful, and it is giving my brain a workout.</span></p>
<p style="line-height: 14.25pt; background: white;"><span style="font-size: 10.0pt; font-family: Georgia;" lang="EN-CA">However, Javascript itself has a few niggly bits that become more problematic the larger the project gets. Issues with structure and maintainability of code motivate projects such as<span> </span><a href="http://joose.it/" target="_blank">Joose</a><span> </span>and </span><span lang="EN-CA"><a href="http://documentcloud.github.com/backbone/" target="_blank"><span style="font-size: 10.0pt; font-family: Georgia;">Backbone.js</span></a></span><span style="font-size: 10.0pt; font-family: Georgia;" lang="EN-CA">. One of the things that has been bugging me is having to hack in class-based inheritance. After a lot of experimentation, I settled on<span> </span></span><span lang="EN-CA"><a href="http://javascript.crockford.com/prototypal.html" target="_blank"><span style="font-size: 10.0pt; font-family: Georgia;">Prototypal Inheritance</span></a></span><span style="font-size: 10.0pt; font-family: Georgia;" lang="EN-CA">, which does the job to an extent, but left me dissatisfied .<a name="_GoBack"></a></span></p>
<p style="line-height: 14.25pt; background: white;"><span style="font-size: 10.0pt; font-family: Georgia;" lang="EN-CA">So, the other day I finally broke down and tried<span> </span><a href="http://coffeescript.org/" target="_blank">CoffeeScript</a>.</span></p>
<p style="line-height: 14.25pt; background: white;"><span style="font-size: 10.0pt; font-family: Georgia;" lang="EN-CA">When CoffeeScript first came out I resolved never to bother with it. It is clearly for<span> </span></span><span lang="EN-CA"><a href="http://www.youtube.com/watch?v=cAy4zULKFDU" target="_blank"><span style="font-size: 10.0pt; font-family: Georgia;">Ruby people</span></a></span><span><span style="font-size: 10.0pt; font-family: Georgia;" lang="EN-CA"> </span></span><span style="font-size: 10.0pt; font-family: Georgia;" lang="EN-CA">who don&#8217;t quite understand Javascript. Since then it&#8217;s been getting a<span> </span></span><span lang="EN-CA"><a href="http://net.tutsplus.com/tutorials/javascript-ajax/rocking-out-with-coffeescript/" target="_blank"><span style="font-size: 10.0pt; font-family: Georgia;">lot</span></a></span><span><span style="font-size: 10.0pt; font-family: Georgia;" lang="EN-CA"> </span></span><span lang="EN-CA"><a href="http://amix.dk/blog/post/19612" target="_blank"><span style="font-size: 10.0pt; font-family: Georgia;">of</span></a></span><span><span style="font-size: 10.0pt; font-family: Georgia;" lang="EN-CA"> </span></span><span lang="EN-CA"><a href="http://dailyjs.com/2011/05/30/code-review-coffeescript/" target="_blank"><span style="font-size: 10.0pt; font-family: Georgia;">press</span></a></span><span style="font-size: 10.0pt; font-family: Georgia;" lang="EN-CA">, and it now even has<span> </span><a href="http://pragprog.com/book/tbcoffee/coffeescript" target="_blank">its own book</a>!</span></p>
<p style="line-height: 14.25pt; background: white;"><span style="font-size: 10.0pt; font-family: Georgia;" lang="EN-CA">Anyway, I was up the other night, waiting for my daughter to wake up in screaming pain as razor-sharp pieces of enamel slowly bored through her gums. With nothing better to do, I decided to play around with CoffeeScript.</span></p>
<p style="line-height: 14.25pt; background: white;"><span style="font-size: 10.0pt; font-family: Georgia;" lang="EN-CA">I was up and running in no time, installing the<span> </span></span><span lang="EN-CA"><a href="http://search.npmjs.org/#/coffee-script" target="_blank"><span style="font-size: 10.0pt; font-family: Georgia;">Node.JS Module</span></a></span><span><span style="font-size: 10.0pt; font-family: Georgia;" lang="EN-CA"> </span></span><span style="font-size: 10.0pt; font-family: Georgia;" lang="EN-CA">and browsing the<span> </span></span><span lang="EN-CA"><a href="http://arcturo.github.com/library/coffeescript/" target="_blank"><span style="font-size: 10.0pt; font-family: Georgia;">Little Book of CoffeeScript</span></a></span><span style="font-size: 10.0pt; font-family: Georgia;" lang="EN-CA">. After about an hour I had effortlessly written some additions to Live Unsigned which integrated seamlessly. To be honest, I feel like a bit of a muppet for not trying it sooner.</span></p>
<p style="line-height: 14.25pt; background: white;"><span style="font-size: 10.0pt; font-family: Georgia;" lang="EN-CA">After just a couple of days playing around with it, CoffeeScript has now become a major part of my toolkit. The syntax is elegant, nicely lending itself to clean coding, and code can be reused easily, improving project structure. CoffeeScript compiles to pretty clean Javascript, and from what I can make out, the better you understand Javascript, the better CoffeeScript you can write.</span></p>
<p style="line-height: 14.25pt; background: white;"><span style="font-size: 10.0pt; font-family: Georgia;" lang="EN-CA">So yes, I am now coding in CoffeeScript.</span></p>
<p style="line-height: 14.25pt; background: white;"><span style="font-size: 10.0pt; font-family: Georgia;" lang="EN-CA">I am now a hipster.</span></p>
<p style="line-height: 14.25pt; background: white;"><span style="font-size: 10.0pt; font-family: Georgia;" lang="EN-CA">There is nothing left for me but to rush out, buy some skinny jeans and a Macbook Air and learn Vim.</span></p>
<p style="line-height: 14.25pt; background: white;"><span style="font-size: 10.0pt; font-family: Georgia;" lang="EN-CA">Oh, God.</span></p>
<img src="http://www.robsearles.com/?ak_action=api_record_view&id=602&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://www.robsearles.com/2012/02/02/ive-turned-into-a-hipster/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>NodeJS: Experiments with Middle End Part 3</title>
		<link>http://www.robsearles.com/2011/12/07/nodejs-experiments-with-middle-end-part-3/</link>
		<comments>http://www.robsearles.com/2011/12/07/nodejs-experiments-with-middle-end-part-3/#comments</comments>
		<pubDate>Wed, 07 Dec 2011 12:53:47 +0000</pubDate>
		<dc:creator>Rob Searles</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[experiments]]></category>
		<category><![CDATA[nodejs]]></category>

		<guid isPermaLink="false">http://www.robsearles.com/?p=529</guid>
		<description><![CDATA[Note:  This is the last in a series of posts describing my experiments with constructing a Middle End. In Part 1, we discussed the concept of the middle end and its advantages. In Part 2, we constructed a very simple example.
In this post, we&#8217;re going to make that example slightly more complex by introducing [...]]]></description>
			<content:encoded><![CDATA[<div style="background: #FFFEEB; margin: 10px 0 0 0; padding: 5px 10px; border: 1px solid #ccc;"><strong>Note: </strong> This is the last in a series of posts describing my experiments with constructing a Middle End. In <a href="http://www.robsearles.com/2011/10/20/nodejs-experiments-with-middle-end-part1/">Part 1</a>, we discussed the concept of the middle end and its advantages. In <a href="http://www.robsearles.com/2011/12/02/nodejs-experiments-with-middle-end-part-2">Part 2</a>, we constructed a very simple example.</div>
<p>In this post, we&#8217;re going to make that example slightly more complex by introducing dependencies within the modules. Now the code must be able to handle these dependencies for both the client side and the server side.</p>
<p>In the<a href="http://www.robsearles.com/2011/12/02/nodejs-experiments-with-middle-end-part-2"> last post</a>, we built a simple module consisting of a single function that returned a greeting:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> Greetings <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #009900;">&#125;</span>
Greetings.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">hello</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>who<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
   <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #3366CC;">&quot;Hello &quot;</span><span style="color: #339933;">+</span>who;
<span style="color: #009900;">&#125;</span>
module.<span style="color: #660066;">exports</span> <span style="color: #339933;">=</span> Greetings;</pre></div></div>

<p>At this point, it would be very useful to sanitize and validate the parameter passed to the &#8220;hello&#8221; function. We could obviously build this functionality directly into the code, but this is exactly the sort of thing that should be abstracted into its own module(s).</p>
<p>For the purpose of this example, we&#8217;ll simply include the functionality to give the parameter passed a &#8220;trim&#8221;; after some hacking and snippet-borrowing from <a href="https://github.com/chriso/node-validator" target="_blank">node-validator</a> by Chris O&#8217;Hara, we can build another simple module called Tidy:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> Tidy <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
   whitespace<span style="color: #339933;">:</span> <span style="color: #3366CC;">'<span style="color: #000099; font-weight: bold;">\\</span>r<span style="color: #000099; font-weight: bold;">\\</span>n<span style="color: #000099; font-weight: bold;">\\</span>t<span style="color: #000099; font-weight: bold;">\\</span>s'</span><span style="color: #339933;">,</span>
&nbsp;
   trim<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>str<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #003366; font-weight: bold;">var</span> whitespace <span style="color: #339933;">=</span>  <span style="color: #3366CC;">'<span style="color: #000099; font-weight: bold;">\\</span>r<span style="color: #000099; font-weight: bold;">\\</span>n<span style="color: #000099; font-weight: bold;">\\</span>t<span style="color: #000099; font-weight: bold;">\\</span>s'</span>;
      str <span style="color: #339933;">=</span> str.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">new</span> RegExp<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'^['</span><span style="color: #339933;">+</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">whitespace</span><span style="color: #339933;">+</span><span style="color: #3366CC;">']+|['</span><span style="color: #339933;">+</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">whitespace</span><span style="color: #339933;">+</span><span style="color: #3366CC;">']+$'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'g'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span>
      <span style="color: #000066; font-weight: bold;">return</span> str;
   <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
module.<span style="color: #660066;">exports</span> <span style="color: #339933;">=</span> Tidy;</pre></div></div>

<p>We can now improve our Greetings module, including the dependency and functionality:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> Tidy <span style="color: #339933;">=</span> require<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'./tidy'</span><span style="color: #009900;">&#41;</span>;
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> Greetings <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #009900;">&#125;</span>
Greetings.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">hello</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>who<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
   who <span style="color: #339933;">=</span> Tidy.<span style="color: #660066;">trim</span><span style="color: #009900;">&#40;</span>who<span style="color: #009900;">&#41;</span>;
   <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">hello</span><span style="color: #009900;">&#40;</span>who<span style="color: #009900;">&#41;</span>;
<span style="color: #009900;">&#125;</span>
module.<span style="color: #660066;">exports</span> <span style="color: #339933;">=</span> Greetings;</pre></div></div>

<p>To see if this will work as expected, let&#8217;s add some spaces to the parameter passed in the NodeJS script:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> Greetings <span style="color: #339933;">=</span> require<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'./greetings'</span><span style="color: #009900;">&#41;</span>;
<span style="color: #003366; font-weight: bold;">var</span> greetings <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Greetings<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>;
console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span>greetings.<span style="color: #660066;">hello</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'  Node   '</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;!&quot;</span><span style="color: #009900;">&#41;</span>;</pre></div></div>

<p>When we run it, this is what we see:</p>

<div class="wp_syntax"><div class="code"><pre class="bash bash" style="font-family:monospace;">$ node runner.js
Hello Node<span style="color: #000000; font-weight: bold;">!</span></pre></div></div>

<p>Good, so this works on the server side, but let’s test its behaviour on the client side. Again, we should add some spaces to the parameter passed to ensure that it is working:</p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;script type=&quot;text/javascript&quot;&gt; &lt;/script&gt;
&lt;script src=&quot;greetings.js&quot; type=&quot;text/javascript&quot;&gt; &lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt; &lt;/script&gt;</pre></div></div>

<p>Unfortunately, we now see the following error:</p>

<div class="wp_syntax"><div class="code"><pre class="text text" style="font-family:monospace;">require is not defined
[Break On This Error] var greetings = new Greetings();</pre></div></div>

<p>Our attempt to &#8220;require&#8221; the dependency in the Greetings module has broken the client side. To fix this, we need to define our own <strong>require()</strong> function, much like we had to for the <strong>module</strong> object. We do this by creating a new front end-only script, which we&#8217;ll call &#8220;middle-end.js&#8221;.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> require <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>module<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
   document.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;script src=&quot;'</span><span style="color: #339933;">+</span>module<span style="color: #339933;">+</span><span style="color: #3366CC;">'.js&quot; type=&quot;text/javascript&quot;&gt; &lt;/script&gt;'</span><span style="color: #009900;">&#41;</span>;
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> module <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
   exports<span style="color: #339933;">:</span> undefined
<span style="color: #009900;">&#125;</span>;</pre></div></div>

<p><em>(Obviously we should include much more error checking, but this will be enough for our example).</em></p>
<p>We modify our html as follows:</p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;script src=&quot;middle-end.js&quot; type=&quot;text/javascript&quot;&gt; &lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt; &lt;/script&gt;
....</pre></div></div>

<p>Now when we reload the page in the browser, all should work as expected. Huzzah!</p>
<p>This is just a very simple example of what can be done when JavaScript code is shared between the client and server sides—the &#8220;Middle End&#8221;. This concept becomes really exciting when you start thinking about potential approaches to form validation, session management, and even display logic. This is definitely something worth playing around with.</p>
<p><a href="https://gist.github.com/1254879" target="_blank">All of the code is available as a Gist</a>.</p>
<img src="http://www.robsearles.com/?ak_action=api_record_view&id=529&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://www.robsearles.com/2011/12/07/nodejs-experiments-with-middle-end-part-3/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>NodeJS: Experiments with Middle End Part 2</title>
		<link>http://www.robsearles.com/2011/12/02/nodejs-experiments-with-middle-end-part-2/</link>
		<comments>http://www.robsearles.com/2011/12/02/nodejs-experiments-with-middle-end-part-2/#comments</comments>
		<pubDate>Fri, 02 Dec 2011 13:48:37 +0000</pubDate>
		<dc:creator>Rob Searles</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[experiments]]></category>
		<category><![CDATA[nodejs]]></category>

		<guid isPermaLink="false">http://www.robsearles.com/?p=519</guid>
		<description><![CDATA[Note:  This is the second in a series of posts describing my experiments with constructing a Middle End. In Part 1, we discussed the concept of the middle end and its advantages.
In my previous post, I talked about Kyle Simpson&#8217;s concept of a Middle End—a layer between the front end and back end. Today, [...]]]></description>
			<content:encoded><![CDATA[<div style="background: #FFFEEB; margin: 10px 0 0 0; padding: 5px 10px; border: 1px solid #ccc;"><strong>Note: </strong> This is the second in a series of posts describing my experiments with constructing a Middle End. In <a href="http://www.robsearles.com/2011/10/20/nodejs-experiments-with-middle-end-part1/">Part 1</a>, we discussed the concept of the middle end and its advantages.</div>
<p>In my previous post, I talked about <a href="http://blog.getify.com/" target="_blank">Kyle Simpson&#8217;s</a> concept of a Middle End—a layer between the front end and back end. Today, I&#8217;m going to sketch out my very simple experiments with constructing such a layer.</p>
<p>What I am focusing on here is simply a means of sharing JavaScript code between the client side and the server side.</p>
<p>Let&#8217;s start with a very simple NodeJS Module, <em>greetings.js</em>:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> Greetings <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #009900;">&#125;</span>
Greetings.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">hello</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>who<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
   <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #3366CC;">&quot;Hello &quot;</span><span style="color: #339933;">+</span>who;
<span style="color: #009900;">&#125;</span>
module.<span style="color: #660066;">exports</span> <span style="color: #339933;">=</span> Greetings;</pre></div></div>

<p>Next, let&#8217;s create a very simple NodeJS script that imports this module, and uses it:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> Greetings <span style="color: #339933;">=</span> require<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'./greetings'</span><span style="color: #009900;">&#41;</span>;
<span style="color: #003366; font-weight: bold;">var</span> greetings <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Greetings<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>;
console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span>greetings.<span style="color: #660066;">hello</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Node'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;!&quot;</span><span style="color: #009900;">&#41;</span>;</pre></div></div>

<p>When we run it, this is what we get:</p>

<div class="wp_syntax"><div class="code"><pre class="bash bash" style="font-family:monospace;">$ node test.js
Hello Node<span style="color: #000000; font-weight: bold;">!</span></pre></div></div>

<p>All very simple stuff.</p>
<p>Now, suppose we want to use the Greetings module in our front end web app. </p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;script src=&quot;greetings.js&quot; type=&quot;text/javascript&quot;&gt; &lt;/script&gt;</pre></div></div>

<p>Well, it runs and we get the desired output. However, Firebug reports an error within the greetings.js file:</p>

<div class="wp_syntax"><div class="code"><pre class="text text" style="font-family:monospace;">module is not defined
[Break On This Error] module.exports = Greetings;</pre></div></div>

<p>The solution to this issue is to &#8220;mock up&#8221; the module object so the error isn&#8217;t thrown:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> module <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
   exports<span style="color: #339933;">:</span> undefined
<span style="color: #009900;">&#125;</span>;</pre></div></div>

<p>Run it again, and now we see no errors.</p>
<p>Great, so it&#8217;s working. We can share simple modules between the client and the server sides.</p>
<p>But what if we want to have a more complex module? One that has some dependencies?</p>
<p>That will be discussed in the next post.</p>
<p><a href="https://gist.github.com/1254879" target="_blank">All of the code is available as a Gist</a>.</p>
<img src="http://www.robsearles.com/?ak_action=api_record_view&id=519&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://www.robsearles.com/2011/12/02/nodejs-experiments-with-middle-end-part-2/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>NodeJS: Experiments with Middle End Part 1</title>
		<link>http://www.robsearles.com/2011/10/20/nodejs-experiments-with-middle-end-part1/</link>
		<comments>http://www.robsearles.com/2011/10/20/nodejs-experiments-with-middle-end-part1/#comments</comments>
		<pubDate>Thu, 20 Oct 2011 21:33:39 +0000</pubDate>
		<dc:creator>Rob Searles</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[experiments]]></category>
		<category><![CDATA[middle-end]]></category>
		<category><![CDATA[nodejs]]></category>

		<guid isPermaLink="false">http://www.robsearles.com/?p=515</guid>
		<description><![CDATA[Back in October last year (2010) a bunch of us fled Berlin and made for Warsaw. Not just for the Vodka you understand, but more specifically for the Front-Trends conference.
One of the talks was discussing the concept of the Middle End, by Kyle Simpson. This really made an impression on me, and I think I [...]]]></description>
			<content:encoded><![CDATA[<p>Back in October last year (2010) a bunch of us fled Berlin and made for Warsaw. Not just for the Vodka you understand, but more specifically for the Front-Trends conference.</p>
<p>One of the talks was discussing the concept of the <a href="http://blog.getify.com/2010/07/what-exactly-is-the-middle-end/" target="_blank">Middle End, by Kyle Simpson</a>. This really made an impression on me, and I think I probably bored Kyle in the bar afterwards with my drunken enthusing. When we arrived back home, my aim was to start playing around with the idea of a Middle End as soon as possible. Unfortunately, as is life, events took over (such as discovering one is going to become a dad!) and these thoughts were consigned to the back of my mind.</p>
<p>Until now</p>
<p><span id="more-515"></span></p>
<p>The more I hack around with NodeJS the more I&#8217;ve been able to experiment with different aspects of it. Well, today I began hacking around with some Middle End concepts.</p>
<p>The idea of the Middle End is quite simple.</p>
<p>In a web application there is traditionally the Front End and the Back End. The front end handles all of the client side processing (such as rendering some whizzy JQuery plugins or whatever). The back end handles the actual hard crunching, such as retrieving and adding data from the storage engine.</p>
<p>However, there are certain aspects that both the front end <strong>and</strong> the back end need to handle. Some things that spring to mind are: session managment, input validation and possibly some display logic (Kyle&#8217;s post goes into some more depth here).</p>
<p>Currently these aspects are handled both by the front end and back end code, but as traditionally front end code is JavaScript where as back end code maybe Ruby, PHP, Python, etc that means there ends up being duplication of code. Two different languages doing the same thing.</p>
<p>This is in direct violation of the DRY principal. Quite simply, this is a waste.</p>
<p>There is a solution to this waste. Using JavaScript on the server side, effectively code can now be reused. But how can you use the same piece of code for the client side as well as the server side? In my next post I&#8217;ll be looking at how to do that.</p>
<img src="http://www.robsearles.com/?ak_action=api_record_view&id=515&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://www.robsearles.com/2011/10/20/nodejs-experiments-with-middle-end-part1/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Note to self: Node Deployment</title>
		<link>http://www.robsearles.com/2011/10/07/note-to-self-node-deployment/</link>
		<comments>http://www.robsearles.com/2011/10/07/note-to-self-node-deployment/#comments</comments>
		<pubDate>Fri, 07 Oct 2011 17:37:46 +0000</pubDate>
		<dc:creator>Rob Searles</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[nodejs]]></category>

		<guid isPermaLink="false">http://www.robsearles.com/?p=546</guid>
		<description><![CDATA[This is really a note to me as since Delicious has &#8220;jumped the shark&#8221; I don&#8217;t really know where else to put it.
I&#8217;ve been researching automated deployment of NodeJS applications, and found this excellent blog post to help me out:
Deploying Node.JS Apps, by Ben Gourley.
Plus this question on stack overflow on nginx proxying should help [...]]]></description>
			<content:encoded><![CDATA[<p>This is really a note to me as since Delicious has &#8220;jumped the shark&#8221; I don&#8217;t really know where else to put it.</p>
<p>I&#8217;ve been researching automated deployment of NodeJS applications, and found this excellent blog post to help me out:</p>
<p><a href="http://blog.clock.co.uk/2011/04/11/deploying-node-js-apps/" target="_blank">Deploying Node.JS Apps, by Ben Gourley</a>.</p>
<p>Plus <a href="http://stackoverflow.com/questions/5009324/node-js-nginx-and-now" target="_blank">this question on stack overflow on nginx proxying</a> should help me out.</p>
<p>That&#8217;s it. now I just need some time to play around with this stuff!</p>
<p>Also, if anyone knows of a really simple, easy to organize bookmarking site please let me know!</p>
<img src="http://www.robsearles.com/?ak_action=api_record_view&id=546&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://www.robsearles.com/2011/10/07/note-to-self-node-deployment/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>JSConf.eu Tomorrow = Huzzah!</title>
		<link>http://www.robsearles.com/2011/09/30/jsconf-eu-tomorrow-huzzah/</link>
		<comments>http://www.robsearles.com/2011/09/30/jsconf-eu-tomorrow-huzzah/#comments</comments>
		<pubDate>Fri, 30 Sep 2011 21:56:35 +0000</pubDate>
		<dc:creator>Rob Searles</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jsconf]]></category>

		<guid isPermaLink="false">http://www.robsearles.com/?p=538</guid>
		<description><![CDATA[This is just a quick post as I&#8217;m off to bed for an early night&#8217;s sleep. JSConf EU is tomorrow and am one of the lucky few who have in their posession a &#8220;golden ticket&#8221; to attend. It&#8217;s  a jam-packed event starting at an unaturally early 8am! Do they know this is Berlin?! You can&#8217;t [...]]]></description>
			<content:encoded><![CDATA[<p>This is just a quick post as I&#8217;m off to bed for an early night&#8217;s sleep. <a href="http://jsconf.eu/2011/" target="_blank">JSConf EU</a> is tomorrow and am one of the lucky few who have in their posession a &#8220;golden ticket&#8221; to attend. It&#8217;s  a jam-packed event starting at an unaturally early 8am! Do they know this is Berlin?! You can&#8217;t even buy breakfast at 8am on a Saturday here!</p>
<p>I have high hopes for the conference. Last year I didn&#8217;t even attend the main event, just the pre-party on the Friday night and still came away with a load of ideas! One conversation lead me to completely rewrite major parts of the <a href="http://www.jabbakam.com">Jabbakam</a> system. Who knows what new thoughts will spark in my head when I actually go to the real thing?</p>
<p>For updates, <a href="http://twitter.com/ibrow" target="_blank">follow me on Twitter</a>.</p>
<img src="http://www.robsearles.com/?ak_action=api_record_view&id=538&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://www.robsearles.com/2011/09/30/jsconf-eu-tomorrow-huzzah/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>NodeJS: Experiments with Processes</title>
		<link>http://www.robsearles.com/2011/09/28/nodejs-experiments-with-processes/</link>
		<comments>http://www.robsearles.com/2011/09/28/nodejs-experiments-with-processes/#comments</comments>
		<pubDate>Wed, 28 Sep 2011 13:34:19 +0000</pubDate>
		<dc:creator>Rob Searles</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[nodejs]]></category>

		<guid isPermaLink="false">http://www.robsearles.com/?p=500</guid>
		<description><![CDATA[Experimenting with Node JS daemon processes which spawn multiple children.]]></description>
			<content:encoded><![CDATA[<p>I&#8217;ve been hacking about with NodeJS a lot recently, and lately my attention has turned towards spawning child processes. Luckily NodeJS makes this very easy to do, and also the documentation is pretty good.</p>
<p>What I have been working on is having a single parent process that runs constantly in the background, and this parent is responsible for child processes which actually do the work. One thing I found particularly interesting was how the parent can handle a child crashing, and also what happens to the children when the parent is killed. Below is the culmination of my hackings, it comprises of two simple scripts, a child script, and a parent. I have <a href="https://github.com/ibrow/RS-experiment-node-process" target="_blank">committed them to my GitHub account</a>, so feel free to clone, fork, hack or whatever.</p>
<p><span id="more-500"></span></p>
<p>Note: Node version at time of writing was v0.4.9 and running off a Debian machine.</p>
<h3>Child Worker</h3>
<p>For this experiment we need a really simple child script. It doesn&#8217;t have to do anything apart from tell us it is alive when it is running, and then kill itself so we can see how the parent handles this event.</p>
<p>The main bulk of this script is the loop:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> child_loop <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
   <span style="color: #006600; font-style: italic;">// report the current loop</span>
   console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Child loop: &quot;</span><span style="color: #339933;">+</span>NUMBER_OF_LOOPS<span style="color: #009900;">&#41;</span>;
&nbsp;
   <span style="color: #006600; font-style: italic;">// to simulate the child exiting itself without just running</span>
   <span style="color: #006600; font-style: italic;">// out of program, if we have completed the desired number of</span>
   <span style="color: #006600; font-style: italic;">// loops, exit this process</span>
   <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span> NUMBER_OF_LOOPS <span style="color: #339933;">&amp;</span>lt; 0 <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Child finished loop&quot;</span><span style="color: #009900;">&#41;</span>;
      process.<span style="color: #660066;">exit</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>;
   <span style="color: #009900;">&#125;</span>
&nbsp;
   <span style="color: #006600; font-style: italic;">// sleep for a bit, then continue through the loops</span>
   setTimeout<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> child_loop<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> LOOP_SLEEP_TIME<span style="color: #009900;">&#41;</span>;
   NUMBER_OF_LOOPS--;
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// start the loop</span>
child_loop<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>;</pre></div></div>

<p>As you can see this loops for NUMBER_OF_LOOPS, outputting what loop it is currently on. At the end of the loop it kills itself, informing us whilst it does it.</p>
<p>So, this is fine whilst the child is running, but we also need to try and get the child to clean up after itself if it is killed by an external process &#8211; i.e. the parent. After some playing around and reading of the documentation, I ended up with this:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">// detect and report if this child exited</span>
process.<span style="color: #660066;">on</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;exit&quot;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
   console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Child exiting&quot;</span><span style="color: #009900;">&#41;</span>;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>;
<span style="color: #006600; font-style: italic;">// detect and report if this child was killed</span>
process.<span style="color: #660066;">on</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;SIGTERM&quot;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
   console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Child SIGTERM detected&quot;</span><span style="color: #009900;">&#41;</span>;
   process.<span style="color: #660066;">exit</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>;</pre></div></div>

<p>I need to go more in depth, but whilst testing, this seemed to correctly handle the child being terminated externally.</p>
<p>So, that&#8217;s the child script. You can run this directly from the command line and it does what is expected. Good, so we&#8217;re all ready to build the parent so it can spawn multiple children.</p>
<h3>Parent</h3>
<p>This was the main focus of the experiment. The chief concerns were:</p>
<ul>
<li>Ensuring the process ran indefinitely as a daemon</li>
<li>Spawning the children</li>
<li>Handling a child that crashed or exited</li>
<li>Cleaning up the children when the parent was exited</li>
</ul>
<p>The first point is relatively simple, all we need is an indefinite loop:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript javascript" style="font-family:monospace;">loop <span style="color: #339933;">=</span> setInterval<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
   <span style="color: #006600; font-style: italic;">// functionality here</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> LOOP_SLEEP_TIME<span style="color: #009900;">&#41;</span>;</pre></div></div>

<p>Handling the children was a little more complex. In the end I created an array that would contain the children. Within the main loop, I then ran through that array, checking to see if the child existed, if not then spawning it. Notice how the loop is returning itself into the variable &#8220;loop&#8221;. This will be important later.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> spawn <span style="color: #339933;">=</span> require<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'child_process'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">spawn</span>;
<span style="color: #003366; font-weight: bold;">var</span> loop <span style="color: #339933;">=</span> setInterval<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
   <span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span>i<span style="color: #339933;">=</span>0; i</pre></div></div>

<p>This is fine for creating the children, but then what if a child dies? Simple really. The parent needs to listen for the <strong>exit</strong> event on the child. When detected, ensure that the array element for that child is cleaned out, and then in the next loop, the child will be respawned.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript javascript" style="font-family:monospace;">children<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">on</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'exit'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>code<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
   children<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> undefined;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>;</pre></div></div>

<p>Next, what if the parent is killed. We need to make sure we don&#8217;t leave any orphaned children behind. After some playing around, I found that two events needed to be listened for. Again, the <strong>exit</strong> event, this time on parent, but also the <strong>SIGTERM</strong> event on the parent.</p>
<p>When a <strong>SIGTERM</strong> event is detected, we simply tell the script to exit cleanly:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript javascript" style="font-family:monospace;">process.<span style="color: #660066;">on</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;SIGTERM&quot;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
   console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Parent SIGTERM detected&quot;</span><span style="color: #009900;">&#41;</span>;
   <span style="color: #006600; font-style: italic;">// exit cleanly</span>
   process.<span style="color: #660066;">exit</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>;</pre></div></div>

<p>Now, when the <strong>exit</strong> event is triggered, we can clean up the children. One thing we must also do, is stop the Interval of the main loop. If we didn&#8217;t do this, when the children were killed, the next &#8220;tick&#8221; of the loop, then they would all be created again. It&#8217;s possible that this could happen before the main script has exited, orphaning the children. We can eaily do this as we have the variable that the setInterval call has been saved into.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript javascript" style="font-family:monospace;">process.<span style="color: #660066;">on</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;exit&quot;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
   <span style="color: #006600; font-style: italic;">// ensure no more &quot;ticks&quot;</span>
   clearInterval<span style="color: #009900;">&#40;</span>loop<span style="color: #009900;">&#41;</span>;
&nbsp;
   <span style="color: #006600; font-style: italic;">// kill all children!</span>
   <span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span>i<span style="color: #339933;">=</span>0; i<span style="color: #339933;">&lt;</span>TOTAL_CHILDREN; i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>children<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span> <span style="color: #339933;">!=</span> undefined<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
         console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Kill child &quot;</span><span style="color: #339933;">+</span>i<span style="color: #009900;">&#41;</span>;
         children<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">kill</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>;
      <span style="color: #009900;">&#125;</span>
   <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>;</pre></div></div>

<p>That is it for the main bulk of the script. As I&#8217;m testing and running it on Debian I am using <a href="#">start-stop-daemon</a> to run the parent as a daemon. As such I&#8217;ve had to add the functionality for creating a .pid file. One issue I had with this, and I have no idea why, is when I tried to write the <strong>process.pid</strong> value to a file it filled the file up with nonsense. However, if I converted it to a string (which from what I can tell it already was) before writing it to the file, then it worked fine.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> pid <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;&quot;</span><span style="color: #339933;">+</span>process.<span style="color: #660066;">pid</span>; <span style="color: #006600; font-style: italic;">// need to turn into a string</span>
fs.<span style="color: #660066;">writeFile</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'/tmp/parent.pid'</span><span style="color: #339933;">,</span> pid<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>err<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
   <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>err<span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">throw</span> err;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>;</pre></div></div>

<p>You can see the complete parent and child scripts on my Github repository.</p>
<h3>Running</h3>
<p>Now we have our scripts, we need to run them to see if they actually behave as expected. In Debian (and derivatives) this is pretty simple:</p>
<p>To start</p>

<div class="wp_syntax"><div class="code"><pre class="bash bash" style="font-family:monospace;">start-stop-daemon <span style="color: #660033;">--start</span> <span style="color: #660033;">--exec</span> <span style="color: #000000; font-weight: bold;">/</span>home<span style="color: #000000; font-weight: bold;">/</span>rob<span style="color: #000000; font-weight: bold;">/</span>workspace<span style="color: #000000; font-weight: bold;">/</span>NodeJS<span style="color: #000000; font-weight: bold;">/</span>process<span style="color: #000000; font-weight: bold;">/</span>parent.js <span style="color: #660033;">--pidfile</span> <span style="color: #000000; font-weight: bold;">/</span>tmp<span style="color: #000000; font-weight: bold;">/</span>parent.js.pid</pre></div></div>

<p>And to stop</p>

<div class="wp_syntax"><div class="code"><pre class="bash bash" style="font-family:monospace;">start-stop-daemon <span style="color: #660033;">--stop</span> <span style="color: #660033;">--pidfile</span> <span style="color: #000000; font-weight: bold;">/</span>tmp<span style="color: #000000; font-weight: bold;">/</span>parent.js.pid</pre></div></div>

<p>As we are not running the process in the background then you will need to have two terminal windows open. Also, you will be able to see the output which explains what is going on.</p>
<p>You should be able to easily convert the script to log to a file (I recommend <a href="https://github.com/visionmedia/log.js">Vision Media&#8217;s Log.js</a>) and then write an init.d script using the <strong>start-stop-daemon</strong> functionality to create a background daemon process .</p>
<p>You should be able to see that we now have the ability to run a Node.JS daemon process which can spawn multiple children, ensuring it can keep a consistent number of children available, and then handle the cleanup if that daemon process is killed. This opens up lots of possibilities!</p>
<p>Again, feel free to <a href="https://github.com/ibrow/RS-experiment-node-process" target="_blank">clone, fork, hack, improve, etc</a> the code for this.</p>
<img src="http://www.robsearles.com/?ak_action=api_record_view&id=500&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://www.robsearles.com/2011/09/28/nodejs-experiments-with-processes/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>NodeJS v0.4.0 on Arch Linux</title>
		<link>http://www.robsearles.com/2011/02/11/nodejs-v0-4-0-on-arch-linux/</link>
		<comments>http://www.robsearles.com/2011/02/11/nodejs-v0-4-0-on-arch-linux/#comments</comments>
		<pubDate>Fri, 11 Feb 2011 12:23:01 +0000</pubDate>
		<dc:creator>Rob Searles</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[nodejs]]></category>

		<guid isPermaLink="false">http://www.robsearles.com/?p=388</guid>
		<description><![CDATA[Installing NodeJS v0.4.0 on Arch Linux when you have both Python v3 and Python v2 installed]]></description>
			<content:encoded><![CDATA[<p>As <a href="http://nodejs.org/v0.4_announcement.html" target="_blank">NodeJS v0.4.0</a> is out, I thought I&#8217;d have a play around with it (something I haven&#8217;t done in a very long time!)</p>
<p>Instantly I ran into problems:</p>

<div class="wp_syntax"><div class="code"><pre class="bash bash" style="font-family:monospace;">$ .<span style="color: #000000; font-weight: bold;">/</span>configure
Traceback <span style="color: #7a0874; font-weight: bold;">&#40;</span>most recent call <span style="color: #c20cb9; font-weight: bold;">last</span><span style="color: #7a0874; font-weight: bold;">&#41;</span>:
  File <span style="color: #ff0000;">&quot;/Users/greim/nodestuff/node/tools/waf-light&quot;</span>, line <span style="color: #000000;">157</span>, <span style="color: #000000; font-weight: bold;">in</span>
    import Scripting
  File <span style="color: #ff0000;">&quot;/Users/greim/nodestuff/node/tools/wafadmin/Scripting.py&quot;</span>, line <span style="color: #000000;">146</span>
    except Utils.WafError, e:
                         ^
SyntaxError: invalid syntax</pre></div></div>

<p>I&#8217;m trying to install this on my Arch Desktop, which has Python version 3.1.3 installed. After <a href="http://blog.bubbleletter.org/slicehost-arch-linux-nodejs-setup" target="_blank">some</a> <a href="http://stackoverflow.com/questions/3819313/cant-configure-node-js-for-make-install-on-os-x-snow-leopard" target="_blank">research</a> I found that it was a compatibility issue between Python 2.x and 3.x.</p>
<p>I didn&#8217;t really want to remove Python 3 as I&#8217;d had <a href="http://twitter.com/ibrow/status/35684431238799360" target="_blank">dependency</a> <a href="http://twitter.com/ibrow/status/35721299036733440" target="_blank">hell</a> <a href="http://twitter.com/ibrow/status/36023028169187328" target="_blank">recently</a>. Inspired by an <a href="http://stackoverflow.com/questions/3819313/cant-configure-node-js-for-make-install-on-os-x-snow-leopard" target="_blank">answer on StackOverflow</a>, I had a dig about in my /usr/bin directory to see if there was both Python v3 <strong>and</strong> Python v2 installed. Fortunately there was: /usr/bin/python2</p>
<p><strong>Note:</strong> Following a <a href="/2011/02/11/nodejs-v0-4-0-on-arch-linux/#disqus_thread">comment by eveningsky below</a>, there is a much easier way to work around the problem.</p>

<div class="wp_syntax"><div class="code"><pre class="bash bash" style="font-family:monospace;"><span style="color: #c20cb9; font-weight: bold;">mkdir</span> <span style="color: #000000; font-weight: bold;">/</span>tmp<span style="color: #000000; font-weight: bold;">/</span>bin
<span style="color: #c20cb9; font-weight: bold;">ln</span> <span style="color: #660033;">-s</span> <span style="color: #000000; font-weight: bold;">/</span>usr<span style="color: #000000; font-weight: bold;">/</span>bin<span style="color: #000000; font-weight: bold;">/</span>python2 <span style="color: #000000; font-weight: bold;">/</span>tmp<span style="color: #000000; font-weight: bold;">/</span>bin<span style="color: #000000; font-weight: bold;">/</span>python
<span style="color: #7a0874; font-weight: bold;">export</span> <span style="color: #007800;">PATH</span>=<span style="color: #000000; font-weight: bold;">/</span>tmp<span style="color: #000000; font-weight: bold;">/</span>bin:<span style="color: #007800;">$PATH</span></pre></div></div>

<p>You can now carry on as normal. I have kept my nasty hack below just in case for some absurd reason the above doesn&#8217;t work for you.</p>
<p>Many thanks <strong>eveningsky</strong>!</p>
<p><em>Old Version</p>
<p>After some trial and error, all I had to do was to edit 2 files:</p>
<p><strong>/tmp/node-v0.4.0/tools/waf-light</strong></p>
<p>amending the first line to read:</p>

<div class="wp_syntax"><div class="code"><pre class="bash bash" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">#!/usr/bin/env python2</span></pre></div></div>

<p>and once I had run ./configure edit the first line in the Makefile  to read:</p>

<div class="wp_syntax"><div class="code"><pre class="bash bash" style="font-family:monospace;"><span style="color: #007800;">WAF</span>=python2 tools<span style="color: #000000; font-weight: bold;">/</span>waf-light</pre></div></div>

<p>Simple!</p>
<p>Now I have Node JS version 0.4.0 running on my Arch box.</em></p>
<img src="http://www.robsearles.com/?ak_action=api_record_view&id=388&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://www.robsearles.com/2011/02/11/nodejs-v0-4-0-on-arch-linux/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>NodeJS Tutorial &#8211; Part 2, Routing</title>
		<link>http://www.robsearles.com/2010/05/31/nodejs-tutorial-part-2-routing/</link>
		<comments>http://www.robsearles.com/2010/05/31/nodejs-tutorial-part-2-routing/#comments</comments>
		<pubDate>Mon, 31 May 2010 15:26:45 +0000</pubDate>
		<dc:creator>Rob Searles</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[nodejs]]></category>

		<guid isPermaLink="false">http://www.robsearles.com/?p=352</guid>
		<description><![CDATA[Note: This is the second part of my NodeJS tutorial. You may want to go back to the first part of this tutorial if you haven&#8217;t already read it.
In the first part of this tutorial we looked at reading a document from CouchDB and keeping our markup separate from our code using Haml templates. We arrived [...]]]></description>
			<content:encoded><![CDATA[<div style="background: #FFFEEB; margin: 10px 0 0 0; padding: 5px 10px; border: 1px solid #ccc;"><strong>Note: </strong>This is the second part of my <a href="http://www.robsearles.com/2010/05/28/nodejs-tutorial-with-couchdb-and-haml-erdnodeflips/">NodeJS tutorial</a>. You may want to go back to the <a href="http://www.robsearles.com/2010/05/28/nodejs-tutorial-with-couchdb-and-haml-erdnodeflips/">first part of this tutorial</a> if you haven&#8217;t already read it.</div>
<p>In the first part of this tutorial we looked at reading a document from CouchDB and keeping our markup separate from our code using Haml templates. We arrived at the point where we clicked on a link, but nothing happened. Today we are going to put that right with some very simple routing.</p>
<h2>The URL Module</h2>
<p>The basis of all routing is the URL. Fortunately, Node has some basic functions which handle <a href="http://nodejs.org/api.html#url-276">reading the URL</a> so we can then decide what the user is actually trying to do.</p>
<p>First, we want to make sure we have included the URL module.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> sys <span style="color: #339933;">=</span> require<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'sys'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
fs <span style="color: #339933;">=</span> require<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'fs'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
http <span style="color: #339933;">=</span> require<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'http'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
url <span style="color: #339933;">=</span> require<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'url'</span><span style="color: #009900;">&#41;</span>;</pre></div></div>

<p>The next step is to extrapolate the path name from the URL that the user has visited:</p>
<p><span id="more-352"></span></p>

<div class="wp_syntax"><div class="code"><pre class="javascript javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> url_parts <span style="color: #339933;">=</span> url.<span style="color: #660066;">parse</span><span style="color: #009900;">&#40;</span>req.<span style="color: #660066;">url</span><span style="color: #009900;">&#41;</span>;
sys.<span style="color: #660066;">puts</span><span style="color: #009900;">&#40;</span>url_parts.<span style="color: #660066;">pathname</span><span style="color: #009900;">&#41;</span>;</pre></div></div>

<p>Now, when I go to http://127.0.0.1:8000/create in Chromium, the system output is as follows:<br />
/create<br />
/favicon.ico</p>
<p>As you can see I have to deal with /create but also /favicon.ico &#8211; unfortunately I don&#8217;t have one. We&#8217;ll deal with that later by using a 404 error.</p>
<p>The pages we want to be dealing with are as follows:</p>
<ul>
<li>/</li>
<li>create</li>
<li>/edit</li>
</ul>
<p>For simplicity&#8217;s sake we&#8217;ll put them into a switch statement:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript javascript" style="font-family:monospace;"><span style="color: #000066; font-weight: bold;">switch</span><span style="color: #009900;">&#40;</span>url_parts.<span style="color: #660066;">pathname</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
<span style="color: #000066; font-weight: bold;">case</span> <span style="color: #3366CC;">'/'</span><span style="color: #339933;">:</span>
sys.<span style="color: #660066;">puts</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;display root&quot;</span><span style="color: #009900;">&#41;</span>;
<span style="color: #000066; font-weight: bold;">break</span>;
<span style="color: #000066; font-weight: bold;">case</span> <span style="color: #3366CC;">'/create'</span><span style="color: #339933;">:</span>
sys.<span style="color: #660066;">puts</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;display create&quot;</span><span style="color: #009900;">&#41;</span>;
<span style="color: #000066; font-weight: bold;">break</span>;
<span style="color: #000066; font-weight: bold;">case</span> <span style="color: #3366CC;">'/edit'</span><span style="color: #339933;">:</span>
sys.<span style="color: #660066;">puts</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;display edit&quot;</span><span style="color: #009900;">&#41;</span>;
<span style="color: #000066; font-weight: bold;">break</span>;
<span style="color: #003366; font-weight: bold;">default</span><span style="color: #339933;">:</span>
sys.<span style="color: #660066;">puts</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;oh dear, 404&quot;</span><span style="color: #009900;">&#41;</span>;
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>If you test this out you should see the relevant text displayed in the standard output.</p>
<h2 style="font-size: 1.5em;">Tidy up Existing Code</h2>
<p>Now we have a basic router telling us that it has detected which page the user wants to display, but is then displaying the default page regardless. To correct this we need to put our existing code within a function and then call that function in the relevant part of the switch statement.</p>
<p>So, create a new (sub) function called display_root() in the main bulk of the http.createServer() function, expecting a url, a server request object and aserver response object as parameters:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> display_root<span style="color: #009900;">&#40;</span>url<span style="color: #339933;">,</span> req<span style="color: #339933;">,</span> res<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
...
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>Within the body of the function, you want to insert the main bulk of the application that we wrote last time. I have included the complete code at the bottom of this tutorial, and all code is of course on <a href="http://github.com/ibrow/erdnodeflips">GitHub</a>.</p>
<p>Now call this function within the switch statement:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript javascript" style="font-family:monospace;">display_root<span style="color: #009900;">&#40;</span>url_parts.<span style="color: #660066;">pathname</span><span style="color: #339933;">,</span> req<span style="color: #339933;">,</span> res<span style="color: #009900;">&#41;</span>;</pre></div></div>

<h2>Handling Missing Pages</h2>
<p>As said, Chromium is looking for a favicon.ico file, but currently this application doesn&#8217;t have one. As such it needs to be able to handle missing files gracefully, with the correct 404 response.</p>
<p>Create a new function within the main bulk of the http.createServer() function:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> display_404<span style="color: #009900;">&#40;</span>url<span style="color: #339933;">,</span> req<span style="color: #339933;">,</span> res<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
res.<span style="color: #660066;">writeHead</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">404</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span><span style="color: #3366CC;">'Content-Type'</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">'text/html'</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>;
res.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;&amp;lt;h1&amp;gt;404 Not Found&amp;lt;/h1&amp;gt;&quot;</span><span style="color: #009900;">&#41;</span>;
res.<span style="color: #660066;">end</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;The page you were looking for: &quot;</span><span style="color: #339933;">+</span>url<span style="color: #339933;">+</span><span style="color: #3366CC;">&quot; can not be found&quot;</span><span style="color: #009900;">&#41;</span>;
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>Notice that we have specified the header to be 404.</p>
<p>Now you can call this from within the switch:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript javascript" style="font-family:monospace;">display_404<span style="color: #009900;">&#40;</span>url_parts.<span style="color: #660066;">pathname</span><span style="color: #339933;">,</span> req<span style="color: #339933;">,</span> res<span style="color: #009900;">&#41;</span>;</pre></div></div>

<p>You can test it out by going to http://127.0.0.1:8000/qwerty<br />
You should see:</p>
<p><strong>404 Not Found</strong><br />
The page you were looking for: /qwerty can not be found</p>
<p>We could use a Haml template to move the content out of the code, but for the purposes of this tutorial it will suffice.</p>
<h2>The Form</h2>
<p>Now we want to generate a &#8220;Create&#8221; page &#8211; which will be a form allowing us to enter a list name and 1-5 items. (Note: I have changed from 10 items to 5 for no other reason that I am lazy, and don&#8217;t particularly want 10 things on my list, also it keeps the code a bit more clean!)</p>
<p>First, create the Haml template that will be used. We&#8217;ll keep this very simple for now. The key part is the form generation. After some trial and error, this mark-up seemed to work:</p>

<div class="wp_syntax"><div class="code"><pre class="haml" style="font-family:monospace;">%form(action=url method=&quot;post&quot;)
      :each i in [0,1,2,3,4]
        %p %label Item
           %input(type=&quot;text&quot; name=&quot;item[]&quot;)
      %p
        %input(type=&quot;submit&quot; value=&quot;Create List&quot;)</pre></div></div>

<p>You may want to read up on Haml here: <a href="http://haml-lang.com">http://haml-lang.com</a></p>
<p>The function for displaying the page is as follows:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript javascript" style="font-family:monospace;">    <span style="color: #003366; font-weight: bold;">function</span> display_create<span style="color: #009900;">&#40;</span>url<span style="color: #339933;">,</span> req<span style="color: #339933;">,</span> res<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	res.<span style="color: #660066;">writeHead</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">200</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span><span style="color: #3366CC;">'Content-Type'</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">'text/html'</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>;
	fs.<span style="color: #660066;">readFile</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'./templates/create.haml'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>e<span style="color: #339933;">,</span> c<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	    <span style="color: #003366; font-weight: bold;">var</span> data <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
		title<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;Create New List&quot;</span><span style="color: #339933;">,</span>
		message<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;Please enter up to 5 things to remember&quot;</span><span style="color: #339933;">,</span>
		url<span style="color: #339933;">:</span> url
	    <span style="color: #009900;">&#125;</span>;
	    <span style="color: #003366; font-weight: bold;">var</span> html <span style="color: #339933;">=</span> haml.<span style="color: #660066;">render</span><span style="color: #009900;">&#40;</span>c.<span style="color: #660066;">toString</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>locals<span style="color: #339933;">:</span> data<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>;
	    res.<span style="color: #660066;">end</span><span style="color: #009900;">&#40;</span>html<span style="color: #009900;">&#41;</span>;
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>;
    <span style="color: #009900;">&#125;</span></pre></div></div>

<p>Now if you fill in the items and submit, the page simply refreshes itelf. We need to get hold of the posted form data and do something useful with it.</p>
<p>This will be what we&#8217;ll focus on next time.</p>
<h2>Tutorial Recap Part 2</h2>
<p>In part 2 of the Node JS tutorial, we started to explore some very basic routing techniques. A number of dedicated routing modules have sprung up, of two of which are listed here:</p>
<ul>
<li>Tim Caswell&#8217;s <a href="http://github.com/creationix/node-router">node-router</a></li>
<li>Tom Hughes-Croucher&#8217;s <a href="http://github.com/sh1mmer/node-routing">node-routing</a></li>
<li>Find more on the <a href="http://wiki.github.com/ry/node/modules">Node Modules wiki page</a></li>
</ul>
<h3>Complete Code</h3>

<div class="wp_syntax"><div class="code"><pre class="javascript javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> sys <span style="color: #339933;">=</span> require<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'sys'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
    fs <span style="color: #339933;">=</span> require<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'fs'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
    http <span style="color: #339933;">=</span> require<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'http'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
    url <span style="color: #339933;">=</span> require<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'url'</span><span style="color: #009900;">&#41;</span>;
&nbsp;
<span style="color: #006600; font-style: italic;">// Node-CouchDB: http://github.com/felixge/node-couchdb</span>
<span style="color: #003366; font-weight: bold;">var</span> couchdb <span style="color: #339933;">=</span> require<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'./libs/node-couchdb/lib/couchdb'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
    client <span style="color: #339933;">=</span> couchdb.<span style="color: #660066;">createClient</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">5984</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'localhost'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
    db <span style="color: #339933;">=</span> client.<span style="color: #660066;">db</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'erdnodeflips'</span><span style="color: #009900;">&#41;</span>;
&nbsp;
<span style="color: #006600; font-style: italic;">// Haml-js: http://github.com/creationix/haml-js</span>
<span style="color: #003366; font-weight: bold;">var</span> haml <span style="color: #339933;">=</span> require<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'./libs/haml-js/lib/haml'</span><span style="color: #009900;">&#41;</span>;
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> doc_id <span style="color: #339933;">=</span> <span style="color: #3366CC;">'2d36f401bc4b82c9160e1a4ea936aba3'</span>;
&nbsp;
http.<span style="color: #660066;">createServer</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>req<span style="color: #339933;">,</span> res<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #003366; font-weight: bold;">var</span> url_parts <span style="color: #339933;">=</span> url.<span style="color: #660066;">parse</span><span style="color: #009900;">&#40;</span>req.<span style="color: #660066;">url</span><span style="color: #009900;">&#41;</span>;
&nbsp;
    <span style="color: #000066; font-weight: bold;">switch</span><span style="color: #009900;">&#40;</span>url_parts.<span style="color: #660066;">pathname</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">case</span> <span style="color: #3366CC;">'/'</span><span style="color: #339933;">:</span>
	display_root<span style="color: #009900;">&#40;</span>url_parts.<span style="color: #660066;">pathname</span><span style="color: #339933;">,</span> req<span style="color: #339933;">,</span> res<span style="color: #009900;">&#41;</span>;
	<span style="color: #000066; font-weight: bold;">break</span>;
    <span style="color: #000066; font-weight: bold;">case</span> <span style="color: #3366CC;">'/create'</span><span style="color: #339933;">:</span>
	display_create<span style="color: #009900;">&#40;</span>url_parts.<span style="color: #660066;">pathname</span><span style="color: #339933;">,</span> req<span style="color: #339933;">,</span> res<span style="color: #009900;">&#41;</span>;
	<span style="color: #000066; font-weight: bold;">break</span>;
    <span style="color: #000066; font-weight: bold;">case</span> <span style="color: #3366CC;">'/edit'</span><span style="color: #339933;">:</span>
	sys.<span style="color: #660066;">puts</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;display edit&quot;</span><span style="color: #009900;">&#41;</span>;
	<span style="color: #000066; font-weight: bold;">break</span>;
    <span style="color: #003366; font-weight: bold;">default</span><span style="color: #339933;">:</span>
	display_404<span style="color: #009900;">&#40;</span>url_parts.<span style="color: #660066;">pathname</span><span style="color: #339933;">,</span> req<span style="color: #339933;">,</span> res<span style="color: #009900;">&#41;</span>;
    <span style="color: #009900;">&#125;</span>
    <span style="color: #000066; font-weight: bold;">return</span>;
&nbsp;
    <span style="color: #006600; font-style: italic;">/**
     * Display the document root
     **/</span>
    <span style="color: #003366; font-weight: bold;">function</span> display_root<span style="color: #009900;">&#40;</span>url<span style="color: #339933;">,</span> req<span style="color: #339933;">,</span> res<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	res.<span style="color: #660066;">writeHead</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">200</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span><span style="color: #3366CC;">'Content-Type'</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">'text/html'</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>;
	db.<span style="color: #660066;">getDoc</span><span style="color: #009900;">&#40;</span>doc_id<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>error<span style="color: #339933;">,</span> doc<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	    <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>error<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		fs.<span style="color: #660066;">readFile</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'./templates/no-doc.haml'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>e<span style="color: #339933;">,</span> c<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		    <span style="color: #003366; font-weight: bold;">var</span> data <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
			title<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;No Document Found&quot;</span><span style="color: #339933;">,</span>
			message<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;No document could be found&quot;</span><span style="color: #339933;">,</span>
			link<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;/create&quot;</span><span style="color: #339933;">,</span>
			link_text<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;Create a new document&quot;</span>
		    <span style="color: #009900;">&#125;</span>;
		    <span style="color: #003366; font-weight: bold;">var</span> html <span style="color: #339933;">=</span> haml.<span style="color: #660066;">render</span><span style="color: #009900;">&#40;</span>c.<span style="color: #660066;">toString</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>locals<span style="color: #339933;">:</span> data<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>;
		    res.<span style="color: #660066;">end</span><span style="color: #009900;">&#40;</span>html<span style="color: #009900;">&#41;</span>;
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>;
	    <span style="color: #009900;">&#125;</span>
	    <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
		fs.<span style="color: #660066;">readFile</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'./templates/doc.haml'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>e<span style="color: #339933;">,</span> c<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		    <span style="color: #003366; font-weight: bold;">var</span> data <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
			title<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;Erdnodeflip document: &quot;</span><span style="color: #339933;">+</span>doc.<span style="color: #000066;">name</span><span style="color: #339933;">,</span>
			message<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;Your Erdnusflip document was found!&quot;</span><span style="color: #339933;">,</span>
			items<span style="color: #339933;">:</span> doc.<span style="color: #660066;">items</span><span style="color: #339933;">,</span>
		    <span style="color: #009900;">&#125;</span>;
		    <span style="color: #003366; font-weight: bold;">var</span> html <span style="color: #339933;">=</span> haml.<span style="color: #660066;">render</span><span style="color: #009900;">&#40;</span>c.<span style="color: #660066;">toString</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>locals<span style="color: #339933;">:</span> data<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>;
		    res.<span style="color: #660066;">end</span><span style="color: #009900;">&#40;</span>html<span style="color: #009900;">&#41;</span>;
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>;
	    <span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>;
    <span style="color: #009900;">&#125;</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">/**
     * Display the list creat page
     **/</span>
    <span style="color: #003366; font-weight: bold;">function</span> display_create<span style="color: #009900;">&#40;</span>url<span style="color: #339933;">,</span> req<span style="color: #339933;">,</span> res<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	res.<span style="color: #660066;">writeHead</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">200</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span><span style="color: #3366CC;">'Content-Type'</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">'text/html'</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>;
	fs.<span style="color: #660066;">readFile</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'./templates/create.haml'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>e<span style="color: #339933;">,</span> c<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	    <span style="color: #003366; font-weight: bold;">var</span> data <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
		title<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;Create New List&quot;</span><span style="color: #339933;">,</span>
		message<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;Please enter up to 5 things to remember&quot;</span><span style="color: #339933;">,</span>
		url<span style="color: #339933;">:</span> url
	    <span style="color: #009900;">&#125;</span>;
	    <span style="color: #003366; font-weight: bold;">var</span> html <span style="color: #339933;">=</span> haml.<span style="color: #660066;">render</span><span style="color: #009900;">&#40;</span>c.<span style="color: #660066;">toString</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>locals<span style="color: #339933;">:</span> data<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>;
	    res.<span style="color: #660066;">end</span><span style="color: #009900;">&#40;</span>html<span style="color: #009900;">&#41;</span>;
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>;
    <span style="color: #009900;">&#125;</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">/**
     * Display the 404 page for content that can't be found
     **/</span>
    <span style="color: #003366; font-weight: bold;">function</span> display_404<span style="color: #009900;">&#40;</span>url<span style="color: #339933;">,</span> req<span style="color: #339933;">,</span> res<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	res.<span style="color: #660066;">writeHead</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">404</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span><span style="color: #3366CC;">'Content-Type'</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">'text/html'</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>;
	res.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;
&lt;h1&gt;404 Not Found&lt;/h1&gt;
&quot;</span><span style="color: #009900;">&#41;</span>;
	res.<span style="color: #660066;">end</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;
&nbsp;
The page you were looking for: &quot;</span><span style="color: #339933;">+</span>url<span style="color: #339933;">+</span><span style="color: #3366CC;">&quot; can not be found&quot;</span><span style="color: #009900;">&#41;</span>;
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">listen</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">8000</span><span style="color: #009900;">&#41;</span>;
sys.<span style="color: #660066;">puts</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Server running at http://127.0.0.1:8000/'</span><span style="color: #009900;">&#41;</span>;</pre></div></div>

<img src="http://www.robsearles.com/?ak_action=api_record_view&id=352&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://www.robsearles.com/2010/05/31/nodejs-tutorial-part-2-routing/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>NodeJS Tutorial with CouchDB and Haml &#8211; ErdNodeFlips</title>
		<link>http://www.robsearles.com/2010/05/28/nodejs-tutorial-with-couchdb-and-haml-erdnodeflips/</link>
		<comments>http://www.robsearles.com/2010/05/28/nodejs-tutorial-with-couchdb-and-haml-erdnodeflips/#comments</comments>
		<pubDate>Fri, 28 May 2010 10:38:37 +0000</pubDate>
		<dc:creator>Rob Searles</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[nodejs]]></category>

		<guid isPermaLink="false">http://www.robsearles.com/?p=338</guid>
		<description><![CDATA[A tutorial for creating a basic Node JS application. Using Node, CouchDB and Haml]]></description>
			<content:encoded><![CDATA[<p>The aim of this tutorial is to create a <a href="http://nodejs.org">Node</a> powered web app using a <a href="http://couchdb.apache.org/">CouchDB</a> database and <a href="http://haml-lang.com/">Haml</a> based templates. I wanted something relatively simple that I could do in a couple of sittings, but complex enough to be of some actual use. In the end I opted for a &#8220;top 10 list&#8221; type application. The functionality being as follows:</p>
<ol>
<li>To list a number of items</li>
<li>To remove an item from the list</li>
<li>To add an item to the list</li>
</ol>
<p>Obviously, before getting cracking with this tutorial I had to think up a name for this &#8220;killer app&#8221; of the Node world.</p>
<p>So I give you Erd<strong>Node</strong>Flips! In honour of <a href="http://de.wikipedia.org/wiki/Erdnussflips">erdnussflips</a> &#8211; the strangely addictive <a href="http://en.wikipedia.org/wiki/Wotsits">Wotsit</a> type things that taste of peanut butter and stick to the top of your mouth. Yum! (OMG &#8211; they even have their own <a href="http://www.facebook.com/pages/Erdnussflips/110701296397">Facebook page</a>!)</p>
<p>All code is available on <a href="http://github.com/ibrow/erdnodeflips">GitHub</a>.</p>
<p><span id="more-338"></span></p>
<h2>Directory Structure and Libraries</h2>
<p>The first step is to create a directory structure for the application and bring in the relevant libraries. We need two directories underneath the top-level application root: templates (which will hold the haml files) and libs (which will contain 3rd party libraries). We are going to grab two libraries off <a href="http://gitbub.com">GitHub</a>:</p>
<ul>
<li><a href="http://github.com/felixge/node-couchdb">Felix Geisendörfer&#8217;s node-couchdb</a> &#8211; this is what we&#8217;ll be using to interact with the Couch database</li>
<li><a href="http://github.com/creationix/haml-js">Tim Caswell&#8217;s haml-js</a> &#8211; this is our haml template engine</li>
</ul>

<div class="wp_syntax"><div class="code"><pre class="bash bash" style="font-family:monospace;">$ <span style="color: #7a0874; font-weight: bold;">cd</span> <span style="color: #000000; font-weight: bold;">/</span>
$ <span style="color: #c20cb9; font-weight: bold;">mkdir</span> <span style="color: #7a0874; font-weight: bold;">&#123;</span>libs,templates<span style="color: #7a0874; font-weight: bold;">&#125;</span>
$ <span style="color: #7a0874; font-weight: bold;">cd</span> libs
$ git clone git:<span style="color: #000000; font-weight: bold;">//</span>github.com<span style="color: #000000; font-weight: bold;">/</span>felixge<span style="color: #000000; font-weight: bold;">/</span>node-couchdb.git
$ git clone http:<span style="color: #000000; font-weight: bold;">//</span>github.com<span style="color: #000000; font-weight: bold;">/</span>creationix<span style="color: #000000; font-weight: bold;">/</span>haml-js.git
$ <span style="color: #7a0874; font-weight: bold;">cd</span> ..<span style="color: #000000; font-weight: bold;">/</span></pre></div></div>

<h2>Basic Web Server</h2>
<p>Now we can get started. Open up a new file called <strong>main.js</strong> in your <a href="http://www.robsearles.com/2009/10/25/a-week-with-emacs-one-week-later/">favourite editor</a>. Now, just to make sure that everything is working at this early stage you can copy and paste the http server example from the nodejs.org front page and run that.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript javascript" style="font-family:monospace;">http.<span style="color: #660066;">createServer</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>req<span style="color: #339933;">,</span> res<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  setTimeout<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    res.<span style="color: #660066;">writeHead</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">200</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span><span style="color: #3366CC;">'Content-Type'</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">'text/plain'</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>;
    res.<span style="color: #660066;">end</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Hello World<span style="color: #000099; font-weight: bold;">\n</span>'</span><span style="color: #009900;">&#41;</span>;
  <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">2000</span><span style="color: #009900;">&#41;</span>;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">listen</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">8000</span><span style="color: #009900;">&#41;</span>;</pre></div></div>


<div class="wp_syntax"><div class="code"><pre class="bash bash" style="font-family:monospace;">$ node .<span style="color: #000000; font-weight: bold;">/</span>main.js</pre></div></div>

<p>Navigate to http://127.0.0.1:8000/ and after 2 seconds you should see &#8220;Hello World&#8221; appear. If you see this, all is working. We have the (very basic) base of our application.</p>
<h2>Talk to the Database</h2>
<p>Once we know that our basic setup is working, we can try and interact with the database. Before we can do this, however, we actually need to create the database and add an record &#8211; or document.</p>
<p>CouchDB comes with a nifty little utility called <a href="http://couchdb.apache.org/screenshots.html">Futon</a>. We&#8217;ll use this to quickly create our database and add a document.</p>
<ul>
<li>Go to http://localhost:5984/_utils/</li>
<li>Create a new database: <strong>erdnodeflips</strong></li>
<li>Create a new document</li>
<li>Add Field &#8211; name it <strong>name</strong></li>
<li>Double click on the value for <strong>name</strong>, enter<strong> &#8220;Don&#8217;t forget&#8221;</strong> (including the quotes)</li>
<li>Add another field &#8211; name it <strong>items</strong></li>
<li>Double click on the value for <strong>items</strong> enter: <strong>["item 1", "item 2", "item 3"]</strong> (including quotes and square brackets)</li>
<li>Click on Save Document &#8211; copy the <strong>_id</strong> value</li>
<li>Navigate to: http://localhost:5984/erdnodeflips/[value of "_id"] to see something like: {&#8221;_id&#8221;:&#8221;2d36f401bc4b82c9160e1a4ea936aba3&#8243;,&#8221;_rev&#8221;:&#8221;2-3b9f738a50ff9928348ce32b0eb807b2&#8243;,&#8221;items&#8221;:["item 1","item 2","item 3"],&#8221;name&#8221;:&#8221;Rob&#8217;s List&#8221;}</li>
</ul>
<p>To read this within node we simply need to know the _id of the document. Save this as a var for now:</p>
<p>var doc_id = &#8216;2d36f401bc4b82c9160e1a4ea936aba3&#8242;;</p>
<p>and replace the setTimeout function with the following:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript javascript" style="font-family:monospace;">db.<span style="color: #660066;">getDoc</span><span style="color: #009900;">&#40;</span>doc_id<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>error<span style="color: #339933;">,</span> doc<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>error<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	    res.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #009900;">&#40;</span>JSON.<span style="color: #660066;">stringify</span><span style="color: #009900;">&#40;</span>error<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>;
	<span style="color: #009900;">&#125;</span>
	<span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
	    res.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Fetched my new doc from couch:'</span><span style="color: #009900;">&#41;</span>;
	    res.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #009900;">&#40;</span>JSON.<span style="color: #660066;">stringify</span><span style="color: #009900;">&#40;</span>doc<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>;
	<span style="color: #009900;">&#125;</span>
     res.<span style="color: #660066;">end</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;-= Fin =-&quot;</span><span style="color: #009900;">&#41;</span>;
    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>;</pre></div></div>

<p>This is pretty simple, and should be relatively straight forward to read. Essentially the code tries to get the document identified by doc_id, invoking a function when done: <strong>db.getDoc(doc_id, function(error, doc){});</strong></p>
<p>The function that is invoked has 2 arguments, one containing the error (if any) and the second containing the actual document returned (if any).</p>
<p>Within this function we can then deal with the two arguments as needed. If there is an error, we output that to the browser, if no error and a doc is returned, output that instead.</p>
<p>Finally, we end the server response: <strong>res.end(&#8221;-= Fin =-&#8221;);</strong>. Note, we must end the server response within the callback of the getDoc() function. Due to the event driven, asynchronous nature of Node, if we end the response after that function then the server response will more than likely be closed before getDoc() has had a chance to write the additional server responses.</p>
<p>So the code now looks like this:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> sys <span style="color: #339933;">=</span> require<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'sys'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
    fs <span style="color: #339933;">=</span> require<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'fs'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
    http <span style="color: #339933;">=</span> require<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'http'</span><span style="color: #009900;">&#41;</span>;
&nbsp;
<span style="color: #006600; font-style: italic;">// Node-CouchDB: http://github.com/felixge/node-couchdb</span>
<span style="color: #003366; font-weight: bold;">var</span> couchdb <span style="color: #339933;">=</span> require<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'./libs/node-couchdb/lib/couchdb'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
    client <span style="color: #339933;">=</span> couchdb.<span style="color: #660066;">createClient</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">5984</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'localhost'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
    db <span style="color: #339933;">=</span> client.<span style="color: #660066;">db</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'erdnodeflips'</span><span style="color: #009900;">&#41;</span>;
&nbsp;
<span style="color: #006600; font-style: italic;">// Haml-js: http://github.com/creationix/haml-js</span>
<span style="color: #003366; font-weight: bold;">var</span> haml <span style="color: #339933;">=</span> require<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'./libs/haml-js/lib/haml'</span><span style="color: #009900;">&#41;</span>;
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> doc_id <span style="color: #339933;">=</span> <span style="color: #3366CC;">'2d36f401bc4b82c9160e1a4ea936aba3'</span>;
&nbsp;
http.<span style="color: #660066;">createServer</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>req<span style="color: #339933;">,</span> res<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    res.<span style="color: #660066;">writeHead</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">200</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span><span style="color: #3366CC;">'Content-Type'</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">'text/html'</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>;
    db.<span style="color: #660066;">getDoc</span><span style="color: #009900;">&#40;</span>doc_id<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>error<span style="color: #339933;">,</span> doc<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>error<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	    res.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #009900;">&#40;</span>JSON.<span style="color: #660066;">stringify</span><span style="color: #009900;">&#40;</span>error<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>;
	<span style="color: #009900;">&#125;</span>
	<span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
	    res.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Fetched my new doc from couch:'</span><span style="color: #009900;">&#41;</span>;
	    res.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #009900;">&#40;</span>JSON.<span style="color: #660066;">stringify</span><span style="color: #009900;">&#40;</span>doc<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>;
	<span style="color: #009900;">&#125;</span>
     res.<span style="color: #660066;">end</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;-= Fin =-&quot;</span><span style="color: #009900;">&#41;</span>;
    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>;
&nbsp;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">listen</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">8000</span><span style="color: #009900;">&#41;</span>;
sys.<span style="color: #660066;">puts</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Server running at http://127.0.0.1:8000/'</span><span style="color: #009900;">&#41;</span>;</pre></div></div>

<h2>Generate Nicer Output</h2>
<p>If you run the above code, you should get something along the lines of:</p>
<p>Fetched my new doc from couch:{&#8221;_id&#8221;:&#8221;2d36f401bc4b82c9160e1a4ea936aba3&#8243;,&#8221;_rev&#8221;:&#8221;2-3b9f738a50ff9928348ce32b0eb807b2&#8243;,&#8221;items&#8221;:["item 1","item 2","item 3"],&#8221;name&#8221;:&#8221;Rob&#8217;s List&#8221;}-= Fin =-</p>
<p>So it works, but it doesn&#8217;t look very good.</p>
<p>First, lets create a Haml template that we can use to output something better.</p>

<div class="wp_syntax"><div class="code"><pre class="haml" style="font-family:monospace;">!!! Strict
%html(lang=&quot;en&quot;)
  %head
    %title&amp;amp;= title
  %body
    %h1&amp;amp;= title
    %p&amp;amp;= message
    :if items.length === 0
      %p There are no items to remember
    :if items.length &amp;gt; 0
      %ul
        :each item in items
          %li&amp;amp;=</pre></div></div>

<p>I&#8217;m not going to go into great depth. You can find more information on Haml at the <a href="http://haml-lang.com/">Haml homepage</a> and also have a look at Tim&#8217;s <a href="http://howtonode.org/haml-for-javascript">excellent tutorial</a> on his Haml-js library.</p>
<p>Essentially, this template is going to build an XHTML strict page that will have a title, a message and then should loop through the items in the list. To get this displayed, we then need to open up the template file, render it and then output it as a server response. The code to do that is:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript javascript" style="font-family:monospace;">fs.<span style="color: #660066;">readFile</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'./templates/doc.haml'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>e<span style="color: #339933;">,</span> c<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> data <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
		    title<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;Erdnodeflip document: &quot;</span><span style="color: #339933;">+</span>doc.<span style="color: #000066;">name</span><span style="color: #339933;">,</span>
		    message<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;Your Erdnusflip document was found!&quot;</span><span style="color: #339933;">,</span>
		    items<span style="color: #339933;">:</span> doc.<span style="color: #660066;">items</span><span style="color: #339933;">,</span>
		<span style="color: #009900;">&#125;</span>;
		<span style="color: #003366; font-weight: bold;">var</span> html <span style="color: #339933;">=</span> haml.<span style="color: #660066;">render</span><span style="color: #009900;">&#40;</span>c.<span style="color: #660066;">toString</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>locals<span style="color: #339933;">:</span> data<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>;
		res.<span style="color: #660066;">end</span><span style="color: #009900;">&#40;</span>html<span style="color: #009900;">&#41;</span>;
	    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>;</pre></div></div>

<p>Notice that I am simply ending the response with the generated HTML. Again, it is worth keeping an eye on exactly where the response is being ended otherwise you might find you are trying to add to a conversation that has already ended.</p>
<p>We can do the same for the &#8220;document not found&#8221; route:</p>

<div class="wp_syntax"><div class="code"><pre class="haml" style="font-family:monospace;">!!! Strict
%html(lang=&quot;en&quot;)
  %head
    %title&amp;amp;= title
  %body
    %h1&amp;amp;= title
    %p&amp;amp;= message
    %p %a{href: link}&amp;amp;= link_text</pre></div></div>


<div class="wp_syntax"><div class="code"><pre class="javascript javascript" style="font-family:monospace;">fs.<span style="color: #660066;">readFile</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'./templates/no-doc.haml'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>e<span style="color: #339933;">,</span> c<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> data <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
		    title<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;No Document Found&quot;</span><span style="color: #339933;">,</span>
		    message<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;No document could be found&quot;</span><span style="color: #339933;">,</span>
		    link<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;/create&quot;</span><span style="color: #339933;">,</span>
		    link_text<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;Create a new document&quot;</span>
		<span style="color: #009900;">&#125;</span>;
		<span style="color: #003366; font-weight: bold;">var</span> html <span style="color: #339933;">=</span> haml.<span style="color: #660066;">render</span><span style="color: #009900;">&#40;</span>c.<span style="color: #660066;">toString</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>locals<span style="color: #339933;">:</span> data<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>;
		res.<span style="color: #660066;">end</span><span style="color: #009900;">&#40;</span>html<span style="color: #009900;">&#41;</span>;</pre></div></div>

<h2>Quick Recap for this Tutorial</h2>
<p>In this tutorial we&#8217;ve only scratched the surface of what can be done. However, in a relatively short space of time we have our Node web server communicating with a CouchDB database and displaying some valid strict XHTML. Not bad for one sitting!</p>
<p>To recap, our code now looks like this:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> sys <span style="color: #339933;">=</span> require<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'sys'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
    fs <span style="color: #339933;">=</span> require<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'fs'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
    http <span style="color: #339933;">=</span> require<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'http'</span><span style="color: #009900;">&#41;</span>;
&nbsp;
<span style="color: #006600; font-style: italic;">// Node-CouchDB: http://github.com/felixge/node-couchdb</span>
<span style="color: #003366; font-weight: bold;">var</span> couchdb <span style="color: #339933;">=</span> require<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'./libs/node-couchdb/lib/couchdb'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
    client <span style="color: #339933;">=</span> couchdb.<span style="color: #660066;">createClient</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">5984</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'localhost'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
    db <span style="color: #339933;">=</span> client.<span style="color: #660066;">db</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'erdnodeflips'</span><span style="color: #009900;">&#41;</span>;
&nbsp;
<span style="color: #006600; font-style: italic;">// Haml-js: http://github.com/creationix/haml-js</span>
<span style="color: #003366; font-weight: bold;">var</span> haml <span style="color: #339933;">=</span> require<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'./libs/haml-js/lib/haml'</span><span style="color: #009900;">&#41;</span>;
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> doc_id <span style="color: #339933;">=</span> <span style="color: #3366CC;">'2d36f401bc4b82c9160e1a4ea936aba3'</span>;
&nbsp;
http.<span style="color: #660066;">createServer</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>req<span style="color: #339933;">,</span> res<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    res.<span style="color: #660066;">writeHead</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">200</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span><span style="color: #3366CC;">'Content-Type'</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">'text/html'</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>;
    db.<span style="color: #660066;">getDoc</span><span style="color: #009900;">&#40;</span>doc_id<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>error<span style="color: #339933;">,</span> doc<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>error<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	    fs.<span style="color: #660066;">readFile</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'./templates/no-doc.haml'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>e<span style="color: #339933;">,</span> c<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> data <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
		    title<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;No Document Found&quot;</span><span style="color: #339933;">,</span>
		    message<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;No document could be found&quot;</span><span style="color: #339933;">,</span>
		    link<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;/create&quot;</span><span style="color: #339933;">,</span>
		    link_text<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;Create a new document&quot;</span>
		<span style="color: #009900;">&#125;</span>;
		<span style="color: #003366; font-weight: bold;">var</span> html <span style="color: #339933;">=</span> haml.<span style="color: #660066;">render</span><span style="color: #009900;">&#40;</span>c.<span style="color: #660066;">toString</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>locals<span style="color: #339933;">:</span> data<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>;
		res.<span style="color: #660066;">end</span><span style="color: #009900;">&#40;</span>html<span style="color: #009900;">&#41;</span>;
	    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>;
	<span style="color: #009900;">&#125;</span>
	<span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
	    fs.<span style="color: #660066;">readFile</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'./templates/doc.haml'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>e<span style="color: #339933;">,</span> c<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> data <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
		    title<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;Erdnodeflip document: &quot;</span><span style="color: #339933;">+</span>doc.<span style="color: #000066;">name</span><span style="color: #339933;">,</span>
		    message<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;Your Erdnusflip document was found!&quot;</span><span style="color: #339933;">,</span>
		    items<span style="color: #339933;">:</span> doc.<span style="color: #660066;">items</span><span style="color: #339933;">,</span>
		<span style="color: #009900;">&#125;</span>;
		<span style="color: #003366; font-weight: bold;">var</span> html <span style="color: #339933;">=</span> haml.<span style="color: #660066;">render</span><span style="color: #009900;">&#40;</span>c.<span style="color: #660066;">toString</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>locals<span style="color: #339933;">:</span> data<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>;
		res.<span style="color: #660066;">end</span><span style="color: #009900;">&#40;</span>html<span style="color: #009900;">&#41;</span>;
	    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>;
	<span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>;
&nbsp;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">listen</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">8000</span><span style="color: #009900;">&#41;</span>;
sys.<span style="color: #660066;">puts</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Server running at http://127.0.0.1:8000/'</span><span style="color: #009900;">&#41;</span>;</pre></div></div>

<p>The exciting thing here is that we&#8217;ve thrown in a link! However, if you click on it, it will simply reload the page.</p>
<p>Being able to handle this kind of basic page navigation and actually adding stuff to the database is for next time.</p>
<p>Feedback always welcome. You can find all the code on my <a href="http://github.com/ibrow/erdnodeflips">GitHub pages</a>.</p>
<p><strong>Valuable Node resources:</strong></p>
<ul>
<li>The <a href="http://nodejs.org">official Node JS</a> site</li>
<li>The <a href="http://github.com/ry/node/">Node Github</a> page</li>
<li><a href="http://howtonode.org/">How To Node</a> &#8211; a great place for tutorials and other tips</li>
<li><a href="http://nodeblogs.com/">Node Blogs</a> &#8211; which appears to be down at the moment, but again is very useful</li>
<li><a href="http://groups.google.com/group/nodejs">NodeJS Google Group</a> &#8211; keep your finger on the pulse</li>
</ul>
<img src="http://www.robsearles.com/?ak_action=api_record_view&id=338&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://www.robsearles.com/2010/05/28/nodejs-tutorial-with-couchdb-and-haml-erdnodeflips/feed/</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
	</channel>
</rss>

