atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>Adrian Mejia Blog</title>
  <subtitle>var life = [&#39;work_smart&#39;, &#39;have_fun&#39;, &#39;make_history&#39;];</subtitle>
  <link href="/atom.xml" rel="self"/>
  
  <link href="http://adrianmejia.com/"/>
  <updated>2016-08-24T21:54:42.000Z</updated>
  <id>http://adrianmejia.com/</id>
  
  <author>
    <name>Adrian Mejia</name>
    
  </author>
  
  <generator uri="http://hexo.io/">Hexo</generator>
  
  <entry>
    <title>Building a Node.js static file server (files over HTTP) using ES6+</title>
    <link href="http://adrianmejia.com/blog/2016/08/24/Building-a-Node-js-static-file-server-files-over-HTTP-using-ES6/"/>
    <id>http://adrianmejia.com/blog/2016/08/24/Building-a-Node-js-static-file-server-files-over-HTTP-using-ES6/</id>
    <published>2016-08-24T21:54:42.000Z</published>
    <updated>2016-08-24T21:54:42.000Z</updated>
    
    <content type="html"><![CDATA[<p>We are going to do a <strong>static file server</strong> in Node.js. This web server is going to respond with the content of the file in a given path. While we are doing this exercise we are going to cover more about <code>http</code> module. Also, use some utilities from other core modules such as <code>path</code>, <code>url</code> and <code>fs</code>.</p>
<a id="more"></a>
<h1 id="HTTP-Web-Servers">HTTP Web Servers<a href="#HTTP-Web-Servers" class="headerlink" title="HTTP Web Servers"></a></h1><p>Node’s HTTP module is versatile. You can use it as a client, to grab content from websites or as a server. We are going to use it server files from our file system.</p>
<p>If you are familiar with Ruby or Python or http-server package. It’s the equivalent of this:</p>
<figure class="highlight bash"><figcaption><span>Existing HTTP Servers Implementations</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># python HTTP server</span></div><div class="line">python -m SimpleHTTPServer 9000</div><div class="line"></div><div class="line"><span class="comment"># ruby HTTP server</span></div><div class="line">ruby -run <span class="_">-e</span> httpd . -p 9000</div><div class="line"></div><div class="line"><span class="comment"># Node HTTP server (npm install http-server)</span></div><div class="line">http-server . -p 9000</div></pre></td></tr></table></figure>
<p>Let’s do our own. It’s not that hard.</p>
<h1 id="Simple-HTTP-Server">Simple HTTP Server<a href="#Simple-HTTP-Server" class="headerlink" title="Simple HTTP Server"></a></h1><p>One of the simplest servers that you can create in Node, looks like this:</p>
<figure class="highlight javascript"><figcaption><span>Simple server.js</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">const</span> http = <span class="built_in">require</span>(<span class="string">'http'</span>);</div><div class="line"></div><div class="line">http.createServer(<span class="function"><span class="keyword">function</span> (<span class="params">req, res</span>) </span>&#123;</div><div class="line">  <span class="comment">// server code</span></div><div class="line">  <span class="built_in">console</span>.log(<span class="string">`<span class="subst">$&#123;req.method&#125;</span> <span class="subst">$&#123;req.url&#125;</span>`</span>);</div><div class="line">  res.end(<span class="string">'hello world!'</span>);</div><div class="line">&#125;).listen(<span class="number">9000</span>);</div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(<span class="string">'Server listening on port 9000'</span>);</div></pre></td></tr></table></figure>
<p>To test it out, save the code in a file called <code>server.js</code> and run:</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">node server.js</div></pre></td></tr></table></figure>
<p>Then open the browser on <code>http://localhost:9000</code> and you will see the “hello world!” message.</p>
<p>Let’s explain what’s going on in the code. We are using the function <code>http.createServer</code> with a callback. This callback function is going to be called every time a client connects to the server. You can see that it takes two parameters: <code>req</code>uest and <code>res</code>ponse.</p>
<p>The request contains the client’s information. For instance: requested URL, path, headers, HTTP method, and so forth.</p>
<p>The response object is used to reply to the client. You can set what you want to send back to the client. For instance, data, headers, etc.</p>
<p>Finally, the listening part. It allows you to set the port that you want your server to run on. In this case, we are using <code>9000</code>.</p>
<h1 id="Node-js-HTTP-static-file-server-with-ES6">Node.js HTTP static file server with ES6+<a href="#Node-js-HTTP-static-file-server-with-ES6" class="headerlink" title="Node.js HTTP static file server with ES6+"></a></h1><p>Let’s now proceed to do the static web server. We want to parse the URL path and get the file matching that path. For instance, if we get a request like <code>localhost:9000/example/server.js</code>. We want to look for a file in <code>./example/server.js</code>.</p>
<p>Browsers don’t rely on the extension to render a file. Instead, they use the header <code>Content-type</code>. For instance, if we serve an HTML file with a content type <code>text/plain</code> it will show the HTML code (plain text). But, if you use a content type <code>text/html</code> then it will render the HTML as such.</p>
<p>For now, we can infer the file content type based on the file extension. The content types are represented in MIME formmat. MIME stands for Multipurpose Internet Mail Extensions. You can see the MIME types according to file extentions in the following code:</p>
<figure class="highlight javascript"><figcaption><span>static_server.js</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">const</span> http = <span class="built_in">require</span>(<span class="string">'http'</span>);</div><div class="line"><span class="keyword">const</span> url = <span class="built_in">require</span>(<span class="string">'url'</span>);</div><div class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">'fs'</span>);</div><div class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">'path'</span>);</div><div class="line"><span class="comment">// you can pass the parameter in the command line. e.g. node static_server.js 3000</span></div><div class="line"><span class="keyword">const</span> port = process.argv[<span class="number">2</span>] || <span class="number">9000</span>;</div><div class="line"></div><div class="line">http.createServer(<span class="function"><span class="keyword">function</span> (<span class="params">req, res</span>) </span>&#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">`<span class="subst">$&#123;req.method&#125;</span> <span class="subst">$&#123;req.url&#125;</span>`</span>);</div><div class="line"></div><div class="line">  <span class="comment">// parse URL</span></div><div class="line">  <span class="keyword">const</span> parsedUrl = url.parse(req.url);</div><div class="line">  <span class="comment">// extract URL path</span></div><div class="line">  <span class="keyword">let</span> pathname = <span class="string">`.<span class="subst">$&#123;parsedUrl.pathname&#125;</span>`</span>;</div><div class="line">  <span class="comment">// based on the URL path, extract the file extention. e.g. .js, .doc, ...</span></div><div class="line">  <span class="keyword">const</span> ext = path.parse(pathname).ext;</div><div class="line">  <span class="comment">// maps file extention to MIME types</span></div><div class="line">  <span class="keyword">const</span> mimeType = &#123;</div><div class="line">    <span class="string">'.ico'</span>: <span class="string">'image/x-icon'</span>,</div><div class="line">    <span class="string">'.html'</span>: <span class="string">'text/html'</span>,</div><div class="line">    <span class="string">'.js'</span>: <span class="string">'text/javascript'</span>,</div><div class="line">    <span class="string">'.json'</span>: <span class="string">'application/json'</span>,</div><div class="line">    <span class="string">'.css'</span>: <span class="string">'text/css'</span>,</div><div class="line">    <span class="string">'.png'</span>: <span class="string">'image/png'</span>,</div><div class="line">    <span class="string">'.jpg'</span>: <span class="string">'image/jpeg'</span>,</div><div class="line">    <span class="string">'.wav'</span>: <span class="string">'audio/wav'</span>,</div><div class="line">    <span class="string">'.mp3'</span>: <span class="string">'audio/mpeg'</span>,</div><div class="line">    <span class="string">'.svg'</span>: <span class="string">'image/svg+xml'</span>,</div><div class="line">    <span class="string">'.pdf'</span>: <span class="string">'application/pdf'</span>,</div><div class="line">    <span class="string">'.doc'</span>: <span class="string">'application/msword'</span>,</div><div class="line">    <span class="string">'.eot'</span>: <span class="string">'appliaction/vnd.ms-fontobject'</span>,</div><div class="line">    <span class="string">'.ttf'</span>: <span class="string">'aplication/font-sfnt'</span></div><div class="line">  &#125;;</div><div class="line"></div><div class="line">  fs.exists(pathname, <span class="function"><span class="keyword">function</span> (<span class="params">exist</span>) </span>&#123;</div><div class="line">    <span class="keyword">if</span>(!exist) &#123;</div><div class="line">      <span class="comment">// if the file is not found, return 404</span></div><div class="line">      res.statusCode = <span class="number">404</span>;</div><div class="line">      res.end(<span class="string">`File <span class="subst">$&#123;pathname&#125;</span> not found!`</span>);</div><div class="line">      <span class="keyword">return</span>;</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    <span class="comment">// if is a directory, then look for index.html</span></div><div class="line">    <span class="keyword">if</span> (fs.statSync(pathname).isDirectory()) &#123;</div><div class="line">      pathname += <span class="string">'/index.html'</span>;</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    <span class="comment">// read file from file system</span></div><div class="line">    fs.readFile(pathname, <span class="function"><span class="keyword">function</span>(<span class="params">err, data</span>)</span>&#123;</div><div class="line">      <span class="keyword">if</span>(err)&#123;</div><div class="line">        res.statusCode = <span class="number">500</span>;</div><div class="line">        res.end(<span class="string">`Error getting the file: <span class="subst">$&#123;err&#125;</span>.`</span>);</div><div class="line">      &#125; <span class="keyword">else</span> &#123;</div><div class="line">        <span class="comment">// if the file is found, set Content-type and send data</span></div><div class="line">        res.setHeader(<span class="string">'Content-type'</span>, mimeType[ext] || <span class="string">'text/plain'</span> );</div><div class="line">        res.end(data);</div><div class="line">      &#125;</div><div class="line">    &#125;);</div><div class="line">  &#125;);</div><div class="line"></div><div class="line"></div><div class="line">&#125;).listen(<span class="built_in">parseInt</span>(port));</div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(<span class="string">`Server listening on port <span class="subst">$&#123;port&#125;</span>`</span>);</div></pre></td></tr></table></figure>
<p>We are using Node.js core <code>path.parse</code> libraries to get the extensions from the URL path.   Similarly, we are using <code>url.parse</code> to break down the <code>request.url</code> into its components. Then, we extract the extension from the file. Finally, we use <code>fs.readFile</code> to get the content from the file system. If any error occurs related to the file path, we return a 404 and otherwise return the file content.</p>
<p>Give it a try with:</p>
<figure class="highlight bash"><figcaption><span>Command lines to test the server</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># run server</span></div><div class="line">node server.js</div><div class="line"></div><div class="line"><span class="comment"># get the javascript file with</span></div><div class="line">curl -i localhost:9000/server.js</div><div class="line"></div><div class="line"><span class="comment"># testing with non-existing file</span></div><div class="line">curl -i localhost:9000/invalid-file.doc</div></pre></td></tr></table></figure>
<p>For the first one, you will get a 200 OK response, while for the 2nd one you will get a 404 not found error, as expected.</p>
<p>You can also download the code from this repo and try out with the test files:</p>
<figure class="highlight bash"><figcaption><span>Testing with different file types</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># Get Repository</span></div><div class="line">git <span class="built_in">clone</span> https://github.com/amejiarosario/meanshop.git</div><div class="line"><span class="built_in">cd</span> meanshop</div><div class="line"><span class="comment"># Load the specific version</span></div><div class="line">git checkout 4add350fb27a7e72115fb16237f52a5b316709b3</div><div class="line"></div><div class="line"><span class="comment"># start the server (requires Node 4+)</span></div><div class="line">npm start</div><div class="line"></div><div class="line"><span class="comment"># test it in your browser with the following paths:</span></div><div class="line">open http://localhost:9000/</div><div class="line">open http://localhost:9000/index.html</div><div class="line">open http://localhost:9000/<span class="built_in">test</span>/meanshop-book.png</div></pre></td></tr></table></figure>
<h1 id="Summary">Summary<a href="#Summary" class="headerlink" title="Summary"></a></h1><p>In this post, we went through the basics about <code>http</code> module to create a server. We talk about the MIME types and how the help the browser to render properly. Finally, we put all together to accomplish our static file server with Node.js!</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;We are going to do a &lt;strong&gt;static file server&lt;/strong&gt; in Node.js. This web server is going to respond with the content of the file in a given path. While we are doing this exercise we are going to cover more about &lt;code&gt;http&lt;/code&gt; module. Also, use some utilities from other core modules such as &lt;code&gt;path&lt;/code&gt;, &lt;code&gt;url&lt;/code&gt; and &lt;code&gt;fs&lt;/code&gt;.&lt;/p&gt;
    
    </summary>
    
      <category term="Programming" scheme="http://adrianmejia.com/categories/Programming/"/>
    
      <category term="Web Development" scheme="http://adrianmejia.com/categories/Programming/Web-Development/"/>
    
    
      <category term="javascript" scheme="http://adrianmejia.com/tags/javascript/"/>
    
      <category term="nodejs" scheme="http://adrianmejia.com/tags/nodejs/"/>
    
  </entry>
  
  <entry>
    <title>Node Package Manager (NPM) Tutorial</title>
    <link href="http://adrianmejia.com/blog/2016/08/19/Node-Package-Manager-NPM-Tutorial/"/>
    <id>http://adrianmejia.com/blog/2016/08/19/Node-Package-Manager-NPM-Tutorial/</id>
    <published>2016-08-19T20:18:32.000Z</published>
    <updated>2016-08-19T20:18:32.000Z</updated>
    
    <content type="html"><![CDATA[<p>This tutorial goes from how to install NPM to manage packages dependencies. While we are doing this, we will use practical examples to drive the concepts home.</p>
<a id="more"></a>
<p>Node Package Manager (NPM) is a CLI tool to manage dependencies. It also allows you to publish packages to the NPM website and find new modules.</p>
<p>In this section, we are going to get hands on NPM. We will cover from how to install it to how to download, uninstall and manage packages. While we are doing this we will use practical examples to drive the concepts home.</p>
<h1 id="How-to-install-update-NPM">How to install/update NPM?<a href="#How-to-install-update-NPM" class="headerlink" title="How to install/update NPM?"></a></h1><p><abbr title="Node Package Manager">NPM</abbr> is bundle into the Node installation. So, if you have Node, then you have <abbr title="Node Package Manager">NPM</abbr> already. But, <abbr title="Node Package Manager">NPM</abbr> gets updated more often than Node. So, from time to time you need to get the latest version.</p>
<p>You can check the NPM version and install latest  by running:</p>
<figure class="highlight bash"><figcaption><span>Installing NPM</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># get version</span></div><div class="line">npm -v</div><div class="line"></div><div class="line"><span class="comment"># update NPM to latest and greatest</span></div><div class="line">npm install -g npm</div></pre></td></tr></table></figure>
<p>You can also use the shortcut for <code>npm install</code> like <code>npm i</code>.</p>
<h1 id="How-to-start-a-NodeJs-project">How to start a NodeJs project?<a href="#How-to-start-a-NodeJs-project" class="headerlink" title="How to start a NodeJs project?"></a></h1><p>Node projects and packages use a special file called <code>package.json</code>. It contains dependencies and more information to run the project. Let’s start by creating that using the <code>npm init</code> command. We are going to call our project <code>meanshop2</code>, but call it whatever you want ;)</p>
<figure class="highlight bash"><figcaption><span>initializing a Node project/package</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">mkdir meanshop2 &amp;&amp; <span class="built_in">cd</span> meanshop2</div><div class="line">npm init --yes</div></pre></td></tr></table></figure>
<p>This set of commands created a new folder called <code>meanshop2</code>. The <code>init</code> command will create <code>package.json</code> file for us. The <code>--yes</code> option go with the defaults. Otherwise, it will ask us to fill out every property in package.json.</p>
<figure class="highlight javascript"><figcaption><span>package.json</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line">&#123;</div><div class="line">  <span class="string">"name"</span>: <span class="string">"meanshop2"</span>,</div><div class="line">  <span class="string">"version"</span>: <span class="string">"1.0.0"</span>,</div><div class="line">  <span class="string">"description"</span>: <span class="string">""</span>,</div><div class="line">  <span class="string">"main"</span>: <span class="string">"index.js"</span>,</div><div class="line">  <span class="string">"scripts"</span>: &#123;</div><div class="line">    <span class="string">"test"</span>: <span class="string">"echo \"Error: no test specified\" &amp;&amp; exit 1"</span></div><div class="line">  &#125;,</div><div class="line">  <span class="string">"keywords"</span>: [],</div><div class="line">  <span class="string">"author"</span>: <span class="string">""</span>,</div><div class="line">  <span class="string">"license"</span>: <span class="string">"ISC"</span></div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>Feel free to edit any of the properties values, such as author, description. Notice, that version starts with <code>1.0.0</code>. We are going to talk more about versioning later on this tutorial.</p>
<h1 id="How-to-download-NPM-packages">How to download NPM packages?<a href="#How-to-download-NPM-packages" class="headerlink" title="How to download NPM packages?"></a></h1><p>You can download <abbr title="Node Package Manager">NPM</abbr> packages using <code>npm install &lt;package_name&gt;</code>. By default, npm will grap the latest version, but you can also expecify an exact verision.</p>
<p>Let’s install two packages <code>lodash</code> and <code>express</code> as follows:</p>
<figure class="highlight bash"><figcaption><span>Installing NPM packages</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># install latest and save on package.json</span></div><div class="line">npm install lodash --save</div><div class="line"></div><div class="line"><span class="comment"># install specific version and save dep on package.json</span></div><div class="line">npm install express@4.14.0 --save</div></pre></td></tr></table></figure>
<p><code>npm install</code> is going to create a new folder called <code>node_modules</code>. This is where all the dependencies live.</p>
<p>Notice that for the second package we are specifying the exact version. You can use the <code>@</code> symbol and then the version number.</p>
<p>Go to your <code>package.json</code> and verify that they both are listed as dependencies. You can install all the dependencies by running this command:</p>
<figure class="highlight bash"><figcaption><span>Install all dependencies from a package.json</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">npm install</div></pre></td></tr></table></figure>
<p><abbr title="Node Package Manager">NPM</abbr> will add packages to dependencies if you use the <code>--save</code> flag. Otherwise <code>npm</code> won’t include it. To automate the process you can run:</p>
<figure class="highlight bash"><figcaption><span>Smarter NPM's defaults</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">npm config <span class="built_in">set</span> save=<span class="literal">true</span></div><div class="line">npm config <span class="built_in">set</span> save-exact=<span class="literal">true</span></div></pre></td></tr></table></figure>
<p>The <code>save=true</code> will make that the packages get auto-installed. <code>save-exact=true</code> will lock the current version and prevent automatic updates and break the project.</p>
<p>To sum up, here are the commands</p>
<figure class="highlight bash"><figcaption><span>NPM install commands</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># install a package globally</span></div><div class="line">npm install -g &lt;package_name&gt;</div><div class="line"></div><div class="line"><span class="comment"># install a package locally (node_modules)</span></div><div class="line">npm install &lt;package_name&gt;</div><div class="line"></div><div class="line"><span class="comment"># install a package locally and save it as dependency (package.json)</span></div><div class="line">npm install &lt;package_name&gt; --save-dev</div><div class="line"></div><div class="line"><span class="comment"># install package locally, save it as dependency with the exact version</span></div><div class="line">npm install &lt;package_name&gt; --save   --save-exact</div><div class="line"></div><div class="line"><span class="comment"># install all dependencies listed on package.json</span></div><div class="line">npm install</div></pre></td></tr></table></figure>
<p>Usually, you use <code>--save-dev</code> vs <code>--save</code> when you need use package that is not part of the project. For instance, testing libraries, building assets tools, etc.</p>
<p>You can search for all NPM modules on <a href="https://www.npmjs.com/browse/star" target="_blank" rel="external">npmjs.com</a></p>
<h1 id="How-to-view-my-installed-NPM-packages">How to view my installed NPM packages?<a href="#How-to-view-my-installed-NPM-packages" class="headerlink" title="How to view my installed NPM packages?"></a></h1><p>Sometimes is useful to see the list of packages that you have installed on your system. You can do that with the following commands:</p>
<figure class="highlight bash"><figcaption><span>List packages</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># list all installed dependencies</span></div><div class="line">npm ls --depth=0</div><div class="line"></div><div class="line"><span class="comment"># list all installed globally dependencies</span></div><div class="line">npm ls -g --depth=0</div></pre></td></tr></table></figure>
<p>You can use <code>--depth=0</code> to prevent listing the dependencies’ dependencies.</p>
<h1 id="What-is-SemVer">What is SemVer?<a href="#What-is-SemVer" class="headerlink" title="What is SemVer?"></a></h1><p>Semantic Versioning (<abbr title="Semantic Versioning">SemVer</abbr>) is versioning convention composed of three numbers: <code>Major.Minor.Patch</code> or also <code>Breaking.Feature.Patch</code>:</p>
<ul>
<li><strong>Major releases: breaking changes.</strong> Major changes that change (breaks) how the API worked before. For instance, removed functions.</li>
<li><strong>Minor releases: new features</strong>. Changes that keeps the API working as before and adds new functionality.</li>
<li><strong>Patch releases: bug fixes</strong>. Patches doesn’t add functionality nor removes/changes functionality. It’s scope only to bug fixes.</li>
</ul>
<p>You can specify on the <code>package.json</code> how packages can be updated. You can use <code>~</code> for updating patches. <code>^</code> for upgrading minor releases and <code>*</code> for major releases.</p>
<p><img src="/images/semver-major-minor-patch-breaking-feature-fix.png" alt="SemVer Breaking.Feature.Fix"></p>
<p>Like this:</p>
<ul>
<li>Patch releases: <code>~1.0.7</code>, or <code>1.0.x</code> or just <code>1.0</code>.</li>
<li>Minor releases: <code>^1.0.7</code>, or <code>1.x</code> or just <code>1</code>.</li>
<li>Major releases: <code>*</code> or <code>x</code>.</li>
</ul>
<p>As you could imagine, not all developers respect the Semantic Version rules. Try to follow the rules yourself, but don’t trust that all will do. You can have your project working well with a <code>1.0.8</code> version and all in a sudden it breaks with <code>1.0.9</code>. It happened to me before, so I prefer to use: <code>--save-exact</code>, when makes sense.</p>
<h1 id="How-to-uninstall-NPM-packages">How to uninstall NPM packages?<a href="#How-to-uninstall-NPM-packages" class="headerlink" title="How to uninstall NPM packages?"></a></h1><p>You can uninstall <abbr title="Node Package Manager">NPM</abbr> packages using the following commands:</p>
<figure class="highlight bash"><figcaption><span>Uninstalling NPM packages</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># uninstall package and leave it listed as dep</span></div><div class="line">npm uninstall lodash</div><div class="line"></div><div class="line"><span class="comment"># uninstall and remove from dependencies</span></div><div class="line">npm uninstall --save lodash</div><div class="line"></div><div class="line"><span class="comment"># uninstall global package</span></div><div class="line">npm uninstall -g &lt;package_name&gt;</div><div class="line"></div><div class="line"><span class="comment"># remove uninstalled packages from node_modules</span></div><div class="line">npm prune <span class="comment"># remove extranous</span></div></pre></td></tr></table></figure>
<h1 id="Summary">Summary<a href="#Summary" class="headerlink" title="Summary"></a></h1><p><abbr title="Node Package Manager">NPM</abbr> is a powerful tool. It helps us to create Node projects/modules, manage its dependencies and much more. In this section, we covered the main commands that you would most often.</p>
<p>Furthermore, we cover <abbr title="Semantic Versioning">SemVer</abbr>. It is used in many systems (Ruby Gems, etc.) not just in the Node community. SemVer is three-part number versioning system: Major.Minor.Patch. You can also think as Breaking.Feature.Patch.</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;This tutorial goes from how to install NPM to manage packages dependencies. While we are doing this, we will use practical examples to drive the concepts home.&lt;/p&gt;
    
    </summary>
    
      <category term="Programming" scheme="http://adrianmejia.com/categories/Programming/"/>
    
      <category term="Web Development" scheme="http://adrianmejia.com/categories/Programming/Web-Development/"/>
    
    
      <category term="javascript" scheme="http://adrianmejia.com/tags/javascript/"/>
    
      <category term="nodejs" scheme="http://adrianmejia.com/tags/nodejs/"/>
    
      <category term="npm" scheme="http://adrianmejia.com/tags/npm/"/>
    
  </entry>
  
  <entry>
    <title>Getting started with Node.js modules: require, exports, imports and beyond</title>
    <link href="http://adrianmejia.com/blog/2016/08/12/Getting-started-with-Node-js-modules-require-exports-imports-npm-and-beyond/"/>
    <id>http://adrianmejia.com/blog/2016/08/12/Getting-started-with-Node-js-modules-require-exports-imports-npm-and-beyond/</id>
    <published>2016-08-12T20:30:23.000Z</published>
    <updated>2016-08-12T20:30:23.000Z</updated>
    
    <content type="html"><![CDATA[<p>Modules are a key concept to understand Node.js projects. We cover Node modules: require, exports and the future import.</p>
<a id="more"></a>
<p>Node modules allow you to write reusable code. You can include your own modules into another module. Using Node Package Manager (NPM), you can publish your module to the community. Also, NPM enables you to reuse modules made by other developers using.</p>
<p>In this section, we are going to cover how to create Node modules and each one of its components:</p>
<ul>
<li>Require</li>
<li>Exports</li>
<li>Module.exports</li>
</ul>
<blockquote>
<p>We are using Node 6+ for the examples and ES6 syntax. But the concepts are true for any version.</p>
</blockquote>
<h1 id="Require">Require<a href="#Require" class="headerlink" title="Require"></a></h1><p><code>require</code> are used to consume modules. It allows you to include modules into your programs. You can include built-in core Node.js modules, community-based modules (node_modules) and local modules.</p>
<p>Let’s say we want to read a file from the filesystem. Node has a core module called ‘fs’:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line marked"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">'fs'</span>);</div><div class="line"></div><div class="line">fs.readFile(<span class="string">'./file.txt'</span>, <span class="string">'utf-8'</span>, (err, data) =&gt; &#123;</div><div class="line">  <span class="keyword">if</span>(err) &#123; <span class="keyword">throw</span> err; &#125;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'data: '</span>, data);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p>As you can see, we imported the “fs” module into our program. It allows us to any function attached to it, like “readFile”.</p>
<p>Require will look for files in the following order:</p>
<ol>
<li>Built-in core Node.js modules (like <code>fs</code>)</li>
<li>Modules in <code>node_modules</code> folder.</li>
<li>If the module name has a <code>./</code>, <code>/</code> or <code>../</code>, it will look for the directory/file in the given path. It matches the extensions: <code>*.js</code>, <code>*.json</code> and <code>*.node</code>.</li>
</ol>
<h1 id="Exports">Exports<a href="#Exports" class="headerlink" title="Exports"></a></h1><p><code>exports</code> are used to create modules. It allows you to export your own objects and functions. Let’s do an example:</p>
<figure class="highlight javascript"><figcaption><span>circle.js</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">const</span> PI = <span class="number">3.14159265359</span>;</div><div class="line">exports.area = (radius) =&gt; <span class="built_in">Math</span>.pow(radius, <span class="number">2</span>) * PI;</div><div class="line">exports.circunference = (radius) =&gt; <span class="number">2</span> * radius * PI;</div></pre></td></tr></table></figure>
<p>In the code below, we are exporting the <code>area</code> function. We defined the constant PI but this is only accessible within the module. Only the elements associated to <code>exports</code> are accessible outside the module.</p>
<p>So, we can consume it using <code>require</code> in another file like follows:</p>
<figure class="highlight javascript"><figcaption><span>main.js</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">const</span> circle = <span class="built_in">require</span>(<span class="string">'./circle'</span>);</div><div class="line"></div><div class="line"><span class="keyword">let</span> r = <span class="number">3</span>;</div><div class="line"><span class="built_in">console</span>.log(<span class="string">`Circle with radius <span class="subst">$&#123;r&#125;</span> has</span></div><div class="line">  area: <span class="subst">$&#123;circle.area(r)&#125;</span>;</div><div class="line">  circunference: <span class="subst">$&#123;circle.circunference(r)&#125;</span>`);</div></pre></td></tr></table></figure>
<p>Noticed that this time we prefix the module name with ‘./‘. That indicates that the module is a local file.</p>
<h1 id="Module-Wrapper">Module Wrapper<a href="#Module-Wrapper" class="headerlink" title="Module Wrapper"></a></h1><p>You can think of each module as self-contained function like the following one:</p>
<figure class="highlight javascript"><figcaption><span>Module Wrapper</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">(<span class="function"><span class="keyword">function</span> (<span class="params">exports, require, module, __filename, __dirname</span>) </span>&#123;</div><div class="line">  <span class="built_in">module</span>.exports = exports = &#123;&#125;;</div><div class="line"></div><div class="line">  <span class="comment">// Your module code ...</span></div><div class="line"></div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p>We have already covered <code>exports</code> and <code>require</code>. Notice the relationship between <code>module.exports</code> and <code>exports</code>. They points to the same reference. However, if you assign something directly to <code>exports</code> you will break its link to <code>module.exports</code>. More on that in the next section.</p>
<p>For our convenience <code>__filename</code> and <code>__dirname</code> are defined. They provide the full path to the current file and directory. The latter excludes the filename and just print out the directory path.</p>
<p>For instance, for our <code>./circle.js</code> module, it would be something like this:</p>
<ul>
<li><p><code>__filename</code>: <code>/User/adrian/code/circle.js</code></p>
</li>
<li><p><code>__dirname</code>: <code>/User/adrian/code</code></p>
</li>
</ul>
<p>Ok, we have covered <code>exports</code>, <code>require</code>, <code>__filename</code>, and <code>__dirname</code>. The only one we haven’t cover is <code>module</code>. Let’s go for it!</p>
<h1 id="Module-exports-vs-Exports">Module.exports vs Exports<a href="#Module-exports-vs-Exports" class="headerlink" title="Module.exports vs Exports"></a></h1><p>Module is not a global, it is local for each module. It contains metadata about a module, such as module id, exports, parent, children, …</p>
<p><code>exports</code> is an alias of <code>module.exports</code>. So, whatever you assign to <code>exports</code> is also available on <code>module.exports</code>. However, if you assign something directly to exports, then you lose the shortcut to <code>module.exports</code>. E.g.</p>
<figure class="highlight javascript"><figcaption><span>cat.js</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">Cat</span> </span>&#123;</div><div class="line">  makeSound() &#123;</div><div class="line">    <span class="keyword">return</span> <span class="string">'Meowww'</span>;</div><div class="line">  &#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="comment">// exports = Cat; // It will not work</span></div><div class="line"><span class="built_in">module</span>.exports = Cat;</div></pre></td></tr></table></figure>
<p>Try the following example with <code>exports</code> and then with <code>module.exports</code>.</p>
<figure class="highlight javascript"><figcaption><span>main.js</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">const</span> Cat = <span class="built_in">require</span>(<span class="string">'./cat'</span>);</div><div class="line"><span class="keyword">var</span> cat = <span class="keyword">new</span> Cat();</div><div class="line"><span class="built_in">console</span>.log(cat.makeSound());</div></pre></td></tr></table></figure>
<p>To sum up, when to use <code>module.exports</code> vs <code>exports</code>:</p>
<p>Use <code>exports</code> to:</p>
<ul>
<li>Export named function. e.g. <code>exports.area</code>, <code>exports.circunference</code>.</li>
</ul>
<p>Use <code>module.exports</code> to:</p>
<ol>
<li><p>If you want to export an object, class, function at the root level (e.g. <code>module.exports = Cat</code></p>
</li>
<li><p>If you want to return a single object that exposes multiple assignments. e.g.<code>module.exports = {area: area, circumference: circunference};</code></p>
</li>
</ol>
<h1 id="Imports">Imports<a href="#Imports" class="headerlink" title="Imports"></a></h1><p>Imports are not available in Node as the version 6. However, it might come in future versions.</p>
<figure class="highlight javascript"><figcaption><span>future of modules in javascript</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">import</span> circle <span class="keyword">from</span> <span class="string">'./circle'</span>;</div><div class="line"><span class="keyword">import</span> &#123;area, circumference&#125; <span class="keyword">from</span> <span class="string">'./circle'</span>;</div></pre></td></tr></table></figure>
<p>You can use it today, using transpilers such as Traceur Compiler, Babel or Rollup. But, that will be for another post.</p>
<h1 id="Summary">Summary<a href="#Summary" class="headerlink" title="Summary"></a></h1><p>We learned about how to create Node.js modules and use it in our code.  Modules allow us to reuse code easily. They provide functionality that is isolated from other modules. Required is used to load modules. Export and module exports allow defining what parts of our code we want to expose. We also explored the difference between module.exports and exports. Finally, we took a quick pick about what’s coming up for modules using <code>imports</code>.</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;Modules are a key concept to understand Node.js projects. We cover Node modules: require, exports and the future import.&lt;/p&gt;
    
    </summary>
    
      <category term="Programming" scheme="http://adrianmejia.com/categories/Programming/"/>
    
      <category term="Web Development" scheme="http://adrianmejia.com/categories/Programming/Web-Development/"/>
    
    
      <category term="javascript" scheme="http://adrianmejia.com/tags/javascript/"/>
    
      <category term="NodeJS" scheme="http://adrianmejia.com/tags/NodeJS/"/>
    
  </entry>
  
  <entry>
    <title>List tasks in NPM, Grunt, Gulp and Rake</title>
    <link href="http://adrianmejia.com/blog/2016/06/25/List-tasks-in-npm-grunt-gulp-and-rake/"/>
    <id>http://adrianmejia.com/blog/2016/06/25/List-tasks-in-npm-grunt-gulp-and-rake/</id>
    <published>2016-06-25T19:14:49.000Z</published>
    <updated>2016-08-14T19:12:25.000Z</updated>
    
    <content type="html"><![CDATA[<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">npm run</div><div class="line">grunt --help</div><div class="line">gulp --tasks</div><div class="line">rake --tasks</div></pre></td></tr></table></figure>
]]></content>
    
    <summary type="html">
    
      &lt;figure class=&quot;highlight bash&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;div class=&quot;line&quot;&gt;1&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;2&lt;/div&gt;&lt;div class=&quot;line&quot;&gt;3&lt;/div
    
    </summary>
    
      <category term="Programming" scheme="http://adrianmejia.com/categories/Programming/"/>
    
      <category term="Web Development" scheme="http://adrianmejia.com/categories/Programming/Web-Development/"/>
    
    
      <category term="javascript" scheme="http://adrianmejia.com/tags/javascript/"/>
    
      <category term="gruntjs" scheme="http://adrianmejia.com/tags/gruntjs/"/>
    
      <category term="gulpjs" scheme="http://adrianmejia.com/tags/gulpjs/"/>
    
  </entry>
  
  <entry>
    <title>Creating custom AngularJS directives for beginners</title>
    <link href="http://adrianmejia.com/blog/2016/04/08/creating-custom-angularjs-directives-for-beginners/"/>
    <id>http://adrianmejia.com/blog/2016/04/08/creating-custom-angularjs-directives-for-beginners/</id>
    <published>2016-04-08T20:41:32.000Z</published>
    <updated>2016-04-08T20:41:32.000Z</updated>
    
    <content type="html"><![CDATA[<p>Directives are one of the most important concepts to understand Angular. This tutorial takes through the basics and beyond. We will cover how to build your own HTML extensions through directives.</p>
<a id="more"></a>
<p>Angular framework relies heavily on them to teach the browser new HTML tags. Directives are a powerful tool to create reusable web components. Directives not only could be defined as new HTML tags but also as attributes, CSS classes or even HTML comments. Angular comes with many built-in (core) directives that offer numerous functionalities to your web applications right away. Furthermore, it also allows us to define our own through custom directives. We are going to focus on the later.</p>
<p>Let’s say we want to create a new HTML component that the browsers doesn’t support yet, like a To-do list:</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">my-todo</span> <span class="attr">list</span>=<span class="string">"todo"</span> <span class="attr">title</span>=<span class="string">"Angular Todo"</span>&gt;</span><span class="tag">&lt;/<span class="name">my-todo</span>&gt;</span></div></pre></td></tr></table></figure>
<p>If you paste that code in any browser, it will not do much. We need to use Angular to teach the browser how to interpret this new HTML element called “my-todo”. We do this by defining a new directive with its attributes.</p>
<p>Let’s initialize our app and define our new directive:</p>
<p>Create a new file called “script.js”</p>
<figure class="highlight javascript"><figcaption><span>script.js</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> app = angular.module(<span class="string">'myApp'</span>, []);</div><div class="line"></div><div class="line">app.directive(<span class="string">'myTodo'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    <span class="keyword">return</span> &#123;</div><div class="line">      restrict: <span class="string">'EA'</span>,</div><div class="line">      templateUrl: <span class="string">'todo.tpl.html'</span>,</div><div class="line">      scope: &#123;</div><div class="line">        list: <span class="string">'='</span>,</div><div class="line">        title: <span class="string">'@'</span></div><div class="line">      &#125;</div><div class="line">    &#125;;</div><div class="line">  &#125;);</div></pre></td></tr></table></figure>
<p>Don’t get scared if you don’t understand what’s going on right now. By the end of this tutorial, you will be able to know what each line is doing.</p>
<p>In the first line, we initialize an angular module called “myApp”.  That will return an “app” instance where we can start defining our Angular app.</p>
<p>We start by adding a directive called “myTodo”, notice that is different from “my-todo” that we used in the HTML code above. That’s because, by convention in HTML, tags names words are separated by a hyphen like “my-todo”. On the other hand, in Angular they match the same element with words joint together and capitalizing the beginning of each word, except the first one “myTodo”. This style of joining words is known as “camelCase”.</p>
<p>You will notice that a directive, takes a name “myTodo” and function. The later returns an object with a number of attributes depending on what we would like to accomplish.  In our case, we have three attributes: restrict, templateUrl, and scope. Let’s explain each one in that exact order.</p>
<h1 id="Restrict">Restrict<a href="#Restrict" class="headerlink" title="Restrict"></a></h1><p>The “restrict” attribute tells Angular, with one letter, how are we going to create our new directive. It can take four different values ‘E’, ‘A’, ‘C’, ‘M’ or combination of them like ‘EA’. Each one has it’s own meaning:</p>
<table>
<thead>
<tr>
<th>Restrict</th>
<th>Meaning</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>E</td>
<td>Implies we are going to use our directive as a new HTML element.</td>
<td><code>&lt;my-todo list=&quot;todo&quot; title=&quot;Element&quot;&gt; &lt;/my-todo&gt;</code></td>
</tr>
<tr>
<td>A</td>
<td>Means that our directive is going to take over any HTML element that has an attribute that matches our directive name.</td>
<td><code>&lt;div my-todo list=&quot;todo&quot; title=&quot;Attr&quot;&gt; &lt;/div&gt;</code></td>
</tr>
<tr>
<td>C</td>
<td>Indicates that our directive will be found in CSS classes.</td>
<td><code>&lt;div class=&quot;my-todo&quot; list=&quot;todo&quot; title=&quot;Class&quot;&gt; &lt;/div&gt;</code></td>
</tr>
<tr>
<td>M</td>
<td>Matches HTML comments.</td>
<td><code>&lt;!--directive:my-todo attributes goes here--&gt;</code></td>
</tr>
</tbody>
</table>
<p>Taking our To-do example, with the combined value ‘EA’, means that will match any element with our directive as an attribute, and also, it will match any element defined as “<my-todo>”</my-todo></p>
<p>It is a good practice only to use restrict to either ‘E’ or ‘A’ or both. Classes ‘C’ and comments ‘M’ could be easily misinterpreted. That’s why we are using just EA.</p>
<h1 id="Template">Template<a href="#Template" class="headerlink" title="Template"></a></h1><p>Templates are just HTML code that could be reuse multiple times with different values or text. In order to be generic enough, they use placeholders tied to variables that could be easily replaced. Let’s create the “todo.tpl.html” with the following content:</p>
<figure class="highlight html"><figcaption><span>todo.tpl.html</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>&#123;&#123;title&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">ng-repeat</span>=<span class="string">"todo in list"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">ng-model</span>=<span class="string">"todo.completed"</span>&gt;</span> &#123;&#123;todo.name&#125;&#125;</div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
<p>Notice that our template contains placeholders with a variable such as Creating custom AngularJS directives for beginners, which is going, to be replaced by real title text. Similarly,  is going to be replaced with a task name.</p>
<p>We just used our first built-in Angular directive, in this tutorial, “ng-repeat”. This directive is going to take an array of elements, like our list and repeat itself for each one of elements and refer to them as “todo”. In other words, if the list contains 4 tasks, we are going to see 4 checkboxes each one with the name of the individual tasks. We are going to explain where “title” and “list” comes in the next section.</p>
<p>Going back to our directive definition, we could have used “template” attribute instead of “templateUrl” and take inline html code directly, but often is hard to read and we would prefer to use “templateUrl” and defined as a separated file.</p>
<p>As you might figure it out, “templateUrl” takes the name of the file containing the template. If all templates and code are in the same directory just the name of the file will do. If they are in a different folder you will need to specify the full path to reach it. To keep it simple, we are going to have all files in a single directory.</p>
<h1 id="Scope">Scope<a href="#Scope" class="headerlink" title="Scope"></a></h1><p>Scopes are key concept to understand Angular. Scope is what glues JavaScript code with HTML and allow us to replace placeholders from templates with real values.</p>
<p>In our directive definition, we are creating a new “isolated scope” with two elements:</p>
<figure class="highlight javascript"><figcaption><span>Isolated scope</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">scope: &#123;</div><div class="line">  list: <span class="string">'='</span>,</div><div class="line">  title: <span class="string">'@'</span></div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>If you remember from our template, these are exactly the two placeholders that we had “title” and “list”. The symbols = and @ looks a little mysterious but they are not too cryptic once we know what they mean.</p>
<ul>
<li><code>@</code> Implies that the value of the attribute with the same name in the HTML element will be passed as a string. For instance, <my-todo title="The Directive"></my-todo>, will replace Creating custom AngularJS directives for beginners in our template for “The Directive”.</li>
<li><code>=</code> Binds to the value of the expression and to the literal value. This means that if we have an attribute list=“todo” and “todo” is equal to 5, then it will be replaced to 5 and not to the literal text “todo”. In our case, “todo” is going to be an array of tasks.</li>
</ul>
<p>Bear in mind, that in Angular we can have multiple scopes. So, our directives could be influenced by outer scopes. For instance, another scope could define “todo” as an array of elements. Here is where we introduce another important concept: controllers.</p>
<h1 id="Controllers">Controllers<a href="#Controllers" class="headerlink" title="Controllers"></a></h1><p>The main purpose of controllers is to set initial values the scope and also add behavior through functions. We are going to use a controller to define the “todo” list that we want to render with our newly created directive.</p>
<p>The way we create controllers is by attaching the controller to our Angular app instance. Let’s go back to script.js and append the following:</p>
<figure class="highlight javascript"><figcaption><span>script.js</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">app.controller(<span class="string">'main'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">$scope</span>)</span>&#123;</div><div class="line">  $scope.todo = [</div><div class="line">    &#123;name: <span class="string">'Create a custom directive'</span>, completed: <span class="literal">true</span>&#125;,</div><div class="line">    &#123;name: <span class="string">'Learn about restrict'</span>, completed: <span class="literal">true</span>&#125;,</div><div class="line">    &#123;name: <span class="string">'Master scopes'</span>, completed: <span class="literal">false</span>&#125;</div><div class="line">  ];</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p>Noticed that we defined our controller with the name “main” and pass along a function with the “$scope” parameter. This is important since, whatever we attach to the “$scope” variable it will become available in templates and other directives. We just defined our todo list as an array of objects with two properties name and completed.</p>
<h1 id="To-do-directive">To-do directive<a href="#To-do-directive" class="headerlink" title="To-do directive"></a></h1><p>So far, we have been preparing the grounds for our directive. We have created:</p>
<ul>
<li>“myApp” module</li>
<li>“myTodo” directive</li>
<li>“todo.tpl.html” template</li>
<li>“main” controller</li>
</ul>
<p>Now, is the time to put everything together and make it work!</p>
<p>Let’s create an index.html page with the following:</p>
<figure class="highlight html"><figcaption><span>index.html</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></div><div class="line"></div><div class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">data-require</span>=<span class="string">"angular.js@1.5.0"</span> <span class="attr">data-semver</span>=<span class="string">"1.5.0"</span> <span class="attr">src</span>=<span class="string">"https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line">   <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"script.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></div><div class="line"></div><div class="line">  <span class="tag">&lt;<span class="name">body</span> <span class="attr">ng-app</span>=<span class="string">"myApp"</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">ng-controller</span>=<span class="string">"main"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">my-todo</span> <span class="attr">list</span>=<span class="string">"todo"</span> <span class="attr">title</span>=<span class="string">"Angular To-do"</span>&gt;</span><span class="tag">&lt;/<span class="name">my-todo</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></div></pre></td></tr></table></figure>
<p>We add the AngularJS library first and then initialize the app using the built-in directive “ng-app”. Notice that this must match to module that we created “myApp” or it won’t work.</p>
<p>Later, we reference our controller using another core directive called “ng-controller”. Similarly to ng-app, it also takes a value that should match the one we defined, in this case “main” controller.  This main controller defines our “todo” as an array of tasks with names and whether they have been completed or not.</p>
<p>Finally, we start using our new directive! It takes two attributes the title and a list. If you remember, we defined a template inside the directive definition, so it knows how to render the content.</p>
<p>That’s all you need to make it work. Now try it!</p>
<iframe style="width: 100%; height: 400px;" src="//embed.plnkr.co/7ZDRclRJaJyTtRBKjIa3/" frameborder="0" allowfullscren="allowfullscren"></iframe>


<h1 id="Next-steps">Next steps<a href="#Next-steps" class="headerlink" title="Next steps"></a></h1><p>By now you should be looking at our new To-do list. We can reuse this new directive with new to-do lists as many times as we want. Just passing different values to “list” in our “my-todo” the browser will be able to render it for us. We can also define another controller with a different $scope.todo and our directive will respond accordantly.</p>
<p>We just walked through the main attributes to create directives and discuss how to use them. We learnt how to isolate the scope of our directive and just allow certain parameters into our templates such as “list” and “title”. Also, used the “restrict” attribute to allow our directive be created either as a new HTML element or as an attribute. Finally, we explore how to use templates and bind it with our scope variables.</p>
<h2 id="Related-Posts">Related Posts<a href="#Related-Posts" class="headerlink" title="Related Posts"></a></h2><ul>
<li><a href="/blog/2014/09/28/angularjs-tutorial-for-beginners-with-nodejs-expressjs-and-mongodb/">AngularJS Tutorial for Beginners</a></li>
<li><a href="/blog/2014/10/03/mean-stack-tutorial-mongodb-expressjs-angularjs-nodejs/">Angular and Node tutorial</a></li>
</ul>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;Directives are one of the most important concepts to understand Angular. This tutorial takes through the basics and beyond. We will cover how to build your own HTML extensions through directives.&lt;/p&gt;
    
    </summary>
    
      <category term="Technologies" scheme="http://adrianmejia.com/categories/Technologies/"/>
    
      <category term="Web Development" scheme="http://adrianmejia.com/categories/Technologies/Web-Development/"/>
    
    
      <category term="javascript" scheme="http://adrianmejia.com/tags/javascript/"/>
    
      <category term="angularjs" scheme="http://adrianmejia.com/tags/angularjs/"/>
    
  </entry>
  
  <entry>
    <title>How to scale a Nodejs app based on number of users</title>
    <link href="http://adrianmejia.com/blog/2016/03/23/how-to-scale-a-nodejs-app-based-on-number-of-users/"/>
    <id>http://adrianmejia.com/blog/2016/03/23/how-to-scale-a-nodejs-app-based-on-number-of-users/</id>
    <published>2016-03-23T21:34:11.000Z</published>
    <updated>2016-03-23T21:34:11.000Z</updated>
    
    <content type="html"><![CDATA[<p>Massive success is the best that could happen to any application. But, it could be a blessing and a curse for developers. Dealing with downtime, high availability and trying to scale. The following is a guideline on how to scale the web applications as the number of users grows.</p>
<a id="more"></a>
<p>One of the most dreaded questions is: ‘Would that scale?’. The following is a guideline on how to grow the web applications as the number of users grows. Scaling an application too early is more painful than beneficial. This guide provides a way how to start simple and scale as the number of users grows.</p>
<p><strong>Common Server Setups For Scaling Your Web Application</strong></p>
<p>The examples and solutions will be as practical as possible. We might use references to Amazon Web Services (AWS), Digital Ocean or other cloud solutions. Also, there are some NodeJS/Nginx references, but they could easily be translated to other technologies.</p>
<p>You may notice, that the measurement we are using is “concurrent user”, which means all users are hitting the web app at the same time. It’s different from the number of users supported (which might be higher) since it’s unlikely that all users are hitting the app at the same time. However, we are going to use “concurrent user” since it’s easier to explain.</p>
<h1 id="Local-host-1-concurrent-users">Local host (1 concurrent users)<a href="#Local-host-1-concurrent-users" class="headerlink" title="Local host (1 concurrent users)"></a></h1><p>You are the only one using your app on your localhost.</p>
<p>There is no need to worry about scale.</p>
<h1 id="Single-Server-2-9-concurrent-users">Single Server (2 - 9 concurrent users)<a href="#Single-Server-2-9-concurrent-users" class="headerlink" title="Single Server (2 - 9 concurrent users)"></a></h1><p>You deployed your app to the wild! 👏🏻 You and your colleges (and maybe close friends) are the only users so far.</p>
<p>Everything is great on a single server as long as you are using a web server that uses an event model like Nginx. NodeJS by nature uses an event-driven and non-blocking I/O model. It means that it won’t block with a single request, rather it will handle all the request and reply as data from database or services comes available in a callback/promise. Your Node app will spend most of the time waiting for the database or file system to respond. In the meantime, it can take multiple requests.</p>
<p>Your app should be a monolith (single app) right now, and it’s fine. No need to complicate your life for just a few users yet.If people are reporting bugs, unfortunately, as you make changes, you will need to take it down the app while updating the server. Using AWS t2.micro/t2.nano or equivalent (1 CPU/ 1 GB RAM) will do.</p>
<img src="/images/10_users.png" title="Single Server Setup">
<p>The “Single Server Setup” is the simplest. Web application and database share the same resources (CPU, Memory RAM, I/O).</p>
<h1 id="Vertical-Scaling-10-99-concurrent-users">Vertical Scaling (10 - 99 concurrent users)<a href="#Vertical-Scaling-10-99-concurrent-users" class="headerlink" title="Vertical Scaling (10 - 99 concurrent users)"></a></h1><p>You decided to talk about your app in your social networks 👍🏻. Your friends from Facebook and other social network start clicking the link to your web app at once and you are getting around 100 users.</p>
<p>Requests might start to take longer, and things start to become slower. You need a bigger box! This is called <strong>vertical scaling</strong>. Vertical scale means upgrading a single server hardware with more resources such as higher/faster CPU, RAM, HDD, and I/O.</p>
<p>If you are using AWS, you might upgrade to a t2.medium or equivalent (2 CPU / 4 GB RAM). An additional benefit of having multi CPU cores. We can run two instances of your NodeJS and load balance it with Nginx. Multiple instances of your app mean that you could achieve zero-downtime deployment/updates. You can upgrade one server while the other keeps serving the requests. For example, take down server #1, while server #2 continues serving the request. Then, bring up server #1 and take down server #2 to update it. In the end, no request will be dropped, and your app is fully updated.</p>
<img src="/images/100_users.png" title="Scaling a Single Server">
<p>This setup has several improvements over the previous one:</p>
<ul>
<li>Nginx takes care of users requests and accomplish two functions: static filers server and reverse proxy. It serve by itself all static files (CSS, JS, Images) without touching the web app. The request that needs the app to resolve are redirected it, this is called reverse proxy.</li>
<li>Zero-downtime upgrades.</li>
</ul>
<h1 id="Horizontal-Scaling-100-999-concurrent-users">Horizontal Scaling (100 - 999 concurrent users)<a href="#Horizontal-Scaling-100-999-concurrent-users" class="headerlink" title="Horizontal Scaling (100 - 999 concurrent users)"></a></h1><p>Looks like the hard work has paid off and your app continue growing to around 1,000 users! 🙌🏻</p>
<p>After some time, the app is becoming slow again. Probably, the bottleneck is on the I/O. Database is taking longer to respond. We could keep upgrading to m4.xlarge or equivalent (4 CPU / 16 GB RAM). 4 CPU means that you could have also have multiple instances of the database/app. This is called <strong>horizontal scaling</strong>.</p>
<p>There is a point where vertical scaling is not cost/effective anymore especially. For instance, on look at this comparison and prices from Digital Ocean:</p>
<img src="/images/vertical_vs_horizontal_scaling.png" title="Vertical vs Horizontal Scaling">
<p>On AWS will a little bit more wider the price range: $37.44/mo vs $172.08/mo.</p>
<p>Vertical scaling has another issue: all your eggs are in one basket. If the server goes down, you’re screwed! On the other hand, horizontal scaling will give you redundancy and failover capabilities if done right.</p>
<p>At this point, it’s better to start scaling horizontally rather than vertically. The bottleneck is most likely on the database. So, we can:</p>
<ul>
<li>Move the database to a different server and scale it independently</li>
<li>Add replica set if the database hits its limit and db caching if it makes sense.</li>
</ul>
<p>Since the Node is very efficient, it will spend most of the time waiting for the database to return data. So, the main limitation will be dictated by the network limits. You might need to play also with <code>/etc/security/limits.d</code> and <code>/etc/sysctl.conf</code> based on your needs. For instance the maximum number of requests queued are determined by <code>net.core.somaxconn</code>, which defaults to 128. Change it to <code>1024</code> so we can meet the 100 - 999 range of users. From now on, let’s handle 1000 users per application server.</p>
<h1 id="Multi-servers-1-000-concurrent-users">Multi-servers (1,000+ concurrent users)<a href="#Multi-servers-1-000-concurrent-users" class="headerlink" title="Multi-servers (1,000+ concurrent users)"></a></h1><p>The app keeps growing and now we need to prepare to support around 10k users!</p>
<p>We can improve our previous setup, as follows:</p>
<ul>
<li>Add load balancer (e.g. ELB) and add app units.</li>
<li>Use multiple availability zones (AZ) in a region (e.g. us-east-1, us-west-1), which one are connected through low latency links.</li>
<li>Split static files to different server/service for easier maintenance. (e.g. AWS S3 and CloudFront CDN). Add CDN for static files for optimizing cross-origin performance and lower the latency. You can store assets such as Javascript, CSS, images, videos, and so on.</li>
</ul>
<p>Using Elastic Load Balancer (ELB) with Route 53 is Amazon AWS specific, but there are similar solutions for other clouds providers. ELB is a load balancer managed by AWS and is available in all existing AZ. ELB has health checks so it won’t route to a failing host. It also can manage around 1000s instances.</p>
<img src="/images/10k_users.png" title="Horizontal Scaling">
<p>In this server setup, we started growing horizontally rather than vertically. In other words, we separated web application from database and scale each one with multiple instances. There are several advantages of having the database in a different server than the app:</p>
<ul>
<li>Application and database doesn’t fight for the same resources.</li>
<li>We can scale each tier (app, db) independently to as many as we need.</li>
</ul>
<p>The cons is that getting this setup is more complicated. Furthermore, since app and db are not in the same server performance issues might arise due to network latency or bandwidth limits. It maximize performance, it’s recommended to use private networks with low latency and high speed links.</p>
<h1 id="Microservices-100-000-concurrent-users">Microservices (100,000+ concurrent users)<a href="#Microservices-100-000-concurrent-users" class="headerlink" title="Microservices (100,000+ concurrent users)"></a></h1><p>This is it! We need to plan the infrastructure to allow us to grow to infinity! ∞</p>
<p>So far, we have been leveraging vertical and horizontal scaling, we have separated web apps from databases instances, and deploy them to multiple regions. However, we have been a single code based that handles all the work in our application. We can break it down into smaller pieces and scale them as needed. Going from monolith to microservices.</p>
<p>It’s time to take down our web app monolith and break it down into multiple smaller and independent components (microservices/SOA) that we can scale independently. We don’t have to do the break down all at once. We can have the monolith keep doing what it was doing and start writing small client apps performs some of the task that the main app used to do. Later, we can use the load balancer to redirect the traffic to the new small service instead of the main app. Eventually, we can remove the code from the monolith since the new microservice has fully replaced it. Repeat this process as many time as needed to create new microservices. It should looks something like this:</p>
<img src="/images/1m_users.png" title="Microservices Setup">
<p>If you notice, we have three new components that can scale independently as needed: Users, Products Catalog, and Orders for instance. Another advantages of having microservices is that we can have split the database as well.</p>
<h1 id="Automate-Chores-1-000-000-concurrent-users">Automate Chores (1,000,000+ concurrent users)<a href="#Automate-Chores-1-000-000-concurrent-users" class="headerlink" title="Automate Chores (1,000,000+ concurrent users)"></a></h1><p>OMG! That’s so many people, get you champagne bottle out and celebrate 🎉after you automate!</p>
<p><strong>Automate</strong> as much as you can. The infrastructure is getting fat. We have db replicas and sharding, horizontal scaling, multiple regions and multi-AZ, autoscaling.</p>
<p><strong>Highly Available, Multi-Region</strong> At this point, to scale we just keep adding instances and spreading across availability zones and regions based on the source of the traffic. If you notice that a significant amount of traffic is coming from Australia and Germany maybe it’s the time to make your app available there (e.g. ap-southeast-2, eu-central-1). Bear in mind that regions doesn’t provide low latency links between them. One way to work around this issue is sharding the database.</p>
<p><strong>Autoscaling</strong> It would be a waste if you always allocate servers for peak capacity. User traffic has peaks (e.g. Black Friday) and valleys (e.g. 4 am.). That said, it’s better to put in place an autoscaling option that allows the network to adjust to the traffic conditions. There are multiple strategies to autoscale such as CPU utilization, scale based on latency or based on network traffic.</p>
<p><strong>Metrics</strong> You will also need metrics, monitoring and centralize logging. Measure everything that can be measured. Server nodes might start to fail randomly, and you don’t want to login/SSH into each one to determine the cause. You can avoid that by having a centralized logging solution such as the ELK stack (Elasticsearch, Logstash, and Kibana). For monitoring, you can try DataDog, it has very nice visualization about the servers and CPU/RAM stats. Actully, in DataDog you can aggregate any data that you want.</p>
<p><strong>Customization</strong> Databases might still be a headache to scale. If you identify that your use case it’s better solved with a different NoSQL solution, go for it. Try always to not reinvent the wheel, but if there’s no solution out there for your particular need, consider doing your own.</p>
<p>For more general guidelines <a href="/blog/2016/01/09/how-to-build-scalable-apps/">read my previous post</a>.</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;Massive success is the best that could happen to any application. But, it could be a blessing and a curse for developers. Dealing with downtime, high availability and trying to scale. The following is a guideline on how to scale the web applications as the number of users grows.&lt;/p&gt;
    
    </summary>
    
      <category term="Technologies" scheme="http://adrianmejia.com/categories/Technologies/"/>
    
    
      <category term="production" scheme="http://adrianmejia.com/tags/production/"/>
    
      <category term="scalability" scheme="http://adrianmejia.com/tags/scalability/"/>
    
  </entry>
  
  <entry>
    <title>How to build scalable apps?</title>
    <link href="http://adrianmejia.com/blog/2016/01/09/how-to-build-scalable-apps/"/>
    <id>http://adrianmejia.com/blog/2016/01/09/how-to-build-scalable-apps/</id>
    <published>2016-01-09T15:43:27.000Z</published>
    <updated>2016-01-09T15:43:27.000Z</updated>
    
    <content type="html"><![CDATA[<p>Scaling application is not an easy topic to cover in one post. So in this first post, you can find “the mindset” to build scalable apps using the 12-factor principles. In the <a href="/blog/2016/03/23/how-to-scale-a-nodejs-app-based-on-number-of-users/">next post</a>, you will find more down to earth examples one how to scale based on the number of users.</p>
<p>The Twelve steps are a compilation of guidelines to ensure apps can scale up without significant changes and tooling. These are very suitable for cloud platforms and continuous deployment. Furthermore, these principles are language agnostic, so it will work with any framework.</p>
<a id="more"></a>
<p><strong>The Twelve Factor Principles</strong></p>
<h1 id="One-codebase-per-app-multiple-deployments">One codebase per app, multiple deployments<a href="#One-codebase-per-app-multiple-deployments" class="headerlink" title="One codebase per app, multiple deployments"></a></h1><p><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> <em>DO</em></p>
<ul>
<li>One codebase to rule all deployment environments: production, staging, local and so on and differentiate them from config files (see #3).</li>
</ul>
<p><i class="fa fa-thumbs-o-down" aria-hidden="true"></i> <em>DON’T</em></p>
<ul>
<li>Multiple apps sharing the same code. INSTEAD the common code should be extracted from a library and included through a dependency manager.</li>
</ul>
<h1 id="Declare-and-isolate-dependencies">Declare and isolate dependencies<a href="#Declare-and-isolate-dependencies" class="headerlink" title="Declare and isolate dependencies"></a></h1><p><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> <em>DO</em></p>
<ul>
<li>Have a dependency declaration manifest (e.g. packages.json, Gemfile)</li>
<li>Execute dependencies in isolation per app (e.g. bundle exec).</li>
</ul>
<p><i class="fa fa-thumbs-o-down" aria-hidden="true"></i> <em>DON’T</em></p>
<ul>
<li>Rely on implicit existence of system-wide packages (e.g. curl, ImageMagik). INSTEAD vendor them into the app.</li>
</ul>
<h1 id="Store-the-config-in-the-environment">Store the config in the environment<a href="#Store-the-config-in-the-environment" class="headerlink" title="Store the config in the environment"></a></h1><p><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> <em>DO</em></p>
<ul>
<li>Separate app’s config (AWS S3, passwords, Google/Fb/Tw/APIs credentials, deployment hostname) from the code.</li>
<li>Keep the code ready in a way that if were open source, it wouldn’t compromise any credentials.</li>
<li>Use/commit ‘config’ files with sensitive information into repository. INSTEAD use environmental variables (env, env vars) which are easily changed between deployments and without changing code.</li>
</ul>
<p><i class="fa fa-thumbs-o-down" aria-hidden="true"></i> <em>DON’T</em></p>
<ul>
<li>Group config variables by environment (e.g. AWS_S3_PRODUCTION, AWS_S3_TEST, AWS_S3_QA, AWS_S3_STAGING, AWS_S3_JOE…). INSTEAD use clean environment variables (e.g. AWS_S3) that are managed individually per deploy.</li>
</ul>
<h1 id="Swappable-local-and-third-party-services">Swappable local and third party services<a href="#Swappable-local-and-third-party-services" class="headerlink" title="Swappable local and third party services"></a></h1><p><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> <em>DO</em></p>
<ul>
<li>Services like databases (e.g. MongoDB, PostgreSQL), message queues (e.g. RabbitMQ, Beanstalkd) should be accessed via URL or locator/credential stored in config.</li>
<li>Swapping local to production services should be done without any code changes.</li>
</ul>
<h1 id="Build-and-runtime">Build and runtime<a href="#Build-and-runtime" class="headerlink" title="Build and runtime"></a></h1><p><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> <em>DO</em></p>
<ul>
<li>Code changes flows in one direction only development -&gt; build -&gt; run time environments.</li>
</ul>
<h1 id="Execute-the-app-as-share-nothing-stateless-processes">Execute the app as share-nothing stateless processes<a href="#Execute-the-app-as-share-nothing-stateless-processes" class="headerlink" title="Execute the app as share-nothing stateless processes"></a></h1><p><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> <em>DO</em></p>
<ul>
<li>Store any persistent data in external services (such as databases)</li>
</ul>
<p><i class="fa fa-thumbs-o-down" aria-hidden="true"></i> <em>DON’T</em></p>
<ul>
<li>Use the filesystem/memory to save states. INSTEAD any instance of the app should be able to handle requests.</li>
</ul>
<h1 id="Export-services-via-port-binding">Export services via port binding<a href="#Export-services-via-port-binding" class="headerlink" title="Export services via port binding"></a></h1><p><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> <em>DO</em></p>
<ul>
<li>App is completely self-contained and communicates with other processes through port binding.</li>
</ul>
<h1 id="Scale-out-the-app-horizontally">Scale out the app horizontally<a href="#Scale-out-the-app-horizontally" class="headerlink" title="Scale out the app horizontally"></a></h1><p><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> <em>DO</em></p>
<ul>
<li>Scale app horizontally since the app is a stateless and share-nothing model.</li>
</ul>
<p><i class="fa fa-thumbs-o-down" aria-hidden="true"></i> <em>DON’T</em></p>
<ul>
<li>Daemonize. INSTEAD use operating system manager such as Upstart or init and Foreman in development.</li>
</ul>
<h1 id="Fast-startup-and-shutdown">Fast startup and shutdown<a href="#Fast-startup-and-shutdown" class="headerlink" title="Fast startup and shutdown"></a></h1><p><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> <em>DO</em></p>
<ul>
<li>app start in few seconds to serve requests or jobs.</li>
<li>shut down gracefully after receiving SIGTERM signal  (stop receiving new request/jobs, finish processing current request/job before stopping).</li>
</ul>
<h1 id="Keep-development-staging-and-production-as-similar-as-possible">Keep development, staging, and production as similar as possible<a href="#Keep-development-staging-and-production-as-similar-as-possible" class="headerlink" title="Keep development, staging, and production as similar as possible"></a></h1><p><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> <em>DO</em></p>
<ul>
<li>design app for continuous deployment keeping the tools gaps and deployment times as minimum as possible.</li>
<li>code from development to production should take few hours or just few minutes.</li>
<li>developers who wrote the code should be able to deploy it to production.</li>
<li>keep production and development tool the same as possible</li>
</ul>
<p><i class="fa fa-thumbs-o-down" aria-hidden="true"></i> <em>DON’T</em></p>
<ul>
<li>use different services on production and development (e.g. development using SQLite and production ProtgreSQL).</li>
</ul>
<h1 id="Logs-goes-to-stdout">Logs goes to stdout<a href="#Logs-goes-to-stdout" class="headerlink" title="Logs goes to stdout"></a></h1><p><i class="fa fa-thumbs-o-down" aria-hidden="true"></i> <em>DON’T</em></p>
<ul>
<li>write logs to a particular location in the filesystem. INSTEAD send them to STDOUT, so they can be routed as will depending the environment (e.g. output to terminal in development and output to log file in production)</li>
</ul>
<h1 id="Admin-processes">Admin processes<a href="#Admin-processes" class="headerlink" title="Admin processes"></a></h1><p><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> <em>DO</em></p>
<ul>
<li>favor languages/frameworks that use REPL shell out of the box to do admin tasks such as migrating databases, running consoles or running one-time scripts.</li>
</ul>
<p>This is just the beginning follow up with <a href="/blog/2016/03/23/how-to-scale-a-nodejs-app-based-on-number-of-users/">this next post</a>.</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;Scaling application is not an easy topic to cover in one post. So in this first post, you can find “the mindset” to build scalable apps using the 12-factor principles. In the &lt;a href=&quot;/blog/2016/03/23/how-to-scale-a-nodejs-app-based-on-number-of-users/&quot;&gt;next post&lt;/a&gt;, you will find more down to earth examples one how to scale based on the number of users.&lt;/p&gt;
&lt;p&gt;The Twelve steps are a compilation of guidelines to ensure apps can scale up without significant changes and tooling. These are very suitable for cloud platforms and continuous deployment. Furthermore, these principles are language agnostic, so it will work with any framework.&lt;/p&gt;
    
    </summary>
    
      <category term="Technologies" scheme="http://adrianmejia.com/categories/Technologies/"/>
    
    
      <category term="production" scheme="http://adrianmejia.com/tags/production/"/>
    
      <category term="scalability" scheme="http://adrianmejia.com/tags/scalability/"/>
    
  </entry>
  
  <entry>
    <title>Grunt JS tutorial from Beginner to Ninja</title>
    <link href="http://adrianmejia.com/blog/2014/10/07/grunt-js-tutorial-from-beginner-to-ninja/"/>
    <id>http://adrianmejia.com/blog/2014/10/07/grunt-js-tutorial-from-beginner-to-ninja/</id>
    <published>2014-10-07T14:41:13.000Z</published>
    <updated>2014-10-07T14:41:13.000Z</updated>
    
    <content type="html"><![CDATA[<p>Sometimes you find yourself doing the same tasks again and again, especially during web development. It is time to automate repetitive tasks and use that time in more creative activities. This is where Grunt comes in. Grunt is a popular task runner that runs on NodeJS. It can minify CSS/JavaScript, run linting tools (JSHint, JSlint, CSSlint), deploy to server, and run test cases when you change a file to name a few. All the information I found about Grunt and similar Javascript test runners were too verbose and not very helpful to get started quickly. So, I decided to make this tutorial.</p>
<a id="more"></a>
<h1 id="Beginner-Grunt-js-101">Beginner: Grunt.js 101<a href="#Beginner-Grunt-js-101" class="headerlink" title="Beginner: Grunt.js 101"></a></h1><p>Grunt.js is a Javascript task runner. At its bare core it does file manipulation (mkdir, reads, write, copy), print messages and helper methods to organize and configure multiple tasks. It takes care of differences among Operating Systems for you. However, the real power comes in with the number of available plugins ready to use. Usually named <code>grunt-contrib-*</code>. Let’s start from scratch!</p>
<h1 id="Hello-Wold-from-GruntJS">Hello Wold from GruntJS<a href="#Hello-Wold-from-GruntJS" class="headerlink" title="Hello Wold from GruntJS"></a></h1><p>You need to <a href="/blog/2014/10/01/creating-a-restful-api-tutorial-with-nodejs-and-mongodb/#nodejs">install Node.js and NPM</a> to follow along with this example.</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">mkdir grunt101 &amp;&amp; <span class="built_in">cd</span> grunt101</div><div class="line"></div><div class="line"><span class="comment"># start Node.js project and answer the questions (or leave it in blank)</span></div><div class="line">npm init</div><div class="line"></div><div class="line"><span class="comment"># add Grunt as a dependency</span></div><div class="line">npm install grunt  --save-dev</div></pre></td></tr></table></figure>
<p>If you run the grunt command you will get a message like this:</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">grunt</div><div class="line"><span class="comment"># A valid Gruntfile could not be found. Please see the getting started guide for more information on how to configure grunt: http://gruntjs.com/getting-started</span></div><div class="line"><span class="comment"># Fatal error: Unable to find Gruntfile.</span></div></pre></td></tr></table></figure>
<p>So, let’s create the <code>Gruntfile.js</code> file:</p>
<figure class="highlight javascript"><figcaption><span>Gruntfile.js</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> grunt = <span class="built_in">require</span>(<span class="string">'grunt'</span>);</div><div class="line"></div><div class="line">grunt.registerTask(<span class="string">'default'</span>, <span class="string">'default task description'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'hello world'</span>);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p>If you run <code>grunt</code> again, you will see a message. The default task is run when nothing else it is specified. We are going to create a 2nd task called ‘hello’ and it is going to accept a parameter that we can pass along with the task name separated with a colon. As follows: <code>grunt hello:adrian</code>. We can handle errors using <code>grunt.warn</code>. Every time a <code>grunt.warn</code> is found the task will stop executing, and it will give its warning message.. You can override using <code>--force</code>. Try all this commands and noticed the different effects: <code>grunt</code>, <code>grunt hello</code>, <code>grunt hello --force</code>, <code>grunt hello:adrian</code>.</p>
<figure class="highlight javascript"><figcaption><span>Gruntfile.js</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> grunt = <span class="built_in">require</span>(<span class="string">'grunt'</span>);</div><div class="line"></div><div class="line">grunt.registerTask(<span class="string">'default'</span>, <span class="string">'default task description'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'hello world'</span>);</div><div class="line">&#125;);</div><div class="line"></div><div class="line">grunt.registerTask(<span class="string">'hello'</span>, <span class="string">'say hello'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">name</span>)</span>&#123;</div><div class="line">  <span class="keyword">if</span>(!name || !name.length)</div><div class="line">    grunt.warn(<span class="string">'you need to provide a name.'</span>);</div><div class="line"></div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'hello '</span> + name);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p>We can chain multiple grunt tasks by using and array. Change the <code>Gruntfile.js</code> for the following and see what will happen when you type <code>grunt</code>.</p>
<figure class="highlight javascript"><figcaption><span>Gruntfile.js</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> grunt = <span class="built_in">require</span>(<span class="string">'grunt'</span>);</div><div class="line"></div><div class="line">grunt.registerTask(<span class="string">'world'</span>, <span class="string">'world task description'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'hello world'</span>);</div><div class="line">&#125;);</div><div class="line"></div><div class="line">grunt.registerTask(<span class="string">'hello'</span>, <span class="string">'say hello'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">name</span>)</span>&#123;</div><div class="line">  <span class="keyword">if</span>(!name || !name.length)</div><div class="line">    grunt.warn(<span class="string">'you need to provide a name.'</span>);</div><div class="line"></div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'hello '</span> + name);</div><div class="line">&#125;);</div><div class="line"></div><div class="line">grunt.registerTask(<span class="string">'default'</span>, [<span class="string">'world'</span>, <span class="string">'hello:adrian'</span>]);</div></pre></td></tr></table></figure>
<h1 id="Reference-1-Grunt-tasks-config-and-warnings">Reference 1: Grunt tasks, config and warnings<a href="#Reference-1-Grunt-tasks-config-and-warnings" class="headerlink" title="Reference 1: Grunt tasks, config and warnings"></a></h1><p>Here are some of the methods that we have used so far and some more that we will use in the next examples:</p>
<h2 id="Grunt-config">Grunt config<a href="#Grunt-config" class="headerlink" title="Grunt config"></a></h2><ul>
<li><p><a href="http://gruntjs.com/api/grunt.config#grunt.config.init" target="_blank" rel="external">grunt.initConfig(configObject)</a>: Initialize a configuration object. It can be accessed by <code>grunt.config.get</code>.</p>
</li>
<li><p><a href="http://gruntjs.com/api/grunt.config#grunt.config.get" target="_blank" rel="external">grunt.config.get([prop])</a>:  get the prop value from the <code>grunt.initConfig</code>. The property could be deeply nested (e.g. <code>concat.options.dest</code>) and the values inside <code>&lt;% %&gt;</code> are expanded.</p>
</li>
</ul>
<h2 id="Grunt-tasks">Grunt tasks<a href="#Grunt-tasks" class="headerlink" title="Grunt tasks"></a></h2><ul>
<li><a href="http://gruntjs.com/api/grunt.task#grunt.task.registertask" target="_blank" rel="external">grunt.registerTask(taskName[, description], taskFunction)</a>: register a task.<ul>
<li><strong>taskName</strong>: required to register the task and it allows the task to be e executed with <code>grunt taskName</code> or called by other grunt task.</li>
<li><strong>description</strong>: (optional) string describing task.</li>
<li><strong>taskFunction</strong>: function which can accept parameters separated by colons (:). E.g. <code>grunt taskName:arg1:arg2</code></li>
</ul>
</li>
</ul>
<ul>
<li><a href="http://gruntjs.com/api/grunt.task#grunt.task.registertask" target="_blank" rel="external">grunt.task.registerTask(taskName, taskList)</a>: register task.<ul>
<li><strong>taskName</strong>: required to register the task and it allows the task to be e executed with <code>grunt taskName</code> or called by other grunt task.</li>
<li><strong>taskList</strong>: array of taskNames to be executed, in the order specified, when the taskName is called. E.g.: <code>grunt.registerTask(&#39;concatAll&#39;, [&#39;concat:templates&#39;, &#39;concat:javascripts&#39;, &#39;concat:stylesheets&#39;]);</code></li>
</ul>
</li>
</ul>
<ul>
<li><a href="http://gruntjs.com/api/grunt.task#grunt.task.registermultitask" target="_blank" rel="external">grunt.registerMultiTask(taskName[, description], taskFunction)</a>: multi-tasks accepts the same parameters as <code>grunt.registerTask</code>. However, it reads <code>grunt.initConfig</code> parameters differently:<ol>
<li>Grunt looks for a config that matches the taskName.</li>
<li>MultiTask can have multiple configurations referred as <code>this.target</code> and the value as <code>this.data</code>.</li>
<li>All the “targets” are run if it is not specified otherwise.</li>
</ol>
</li>
</ul>
<figure class="highlight javascript"><figcaption><span>registerMultiTask Example</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line">grunt.initConfig(&#123;</div><div class="line">  print: &#123;</div><div class="line">    target1: [<span class="string">'index.html'</span>, <span class="string">'src/styles.css'</span>, <span class="number">2</span>],</div><div class="line">    target2: <span class="string">'data'</span>,</div><div class="line">    hello: <span class="string">'world'</span></div><div class="line">  &#125;</div><div class="line">&#125;);</div><div class="line"></div><div class="line">grunt.registerMultiTask(<span class="string">'print'</span>, <span class="string">'print targets'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</div><div class="line">  grunt.log.writeln(<span class="keyword">this</span>.target + <span class="string">': '</span> + <span class="keyword">this</span>.data);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p>You can specify one target <code>grunt print:hello</code> or run all them <code>grunt print</code> which will produce this output:</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">Running &quot;print:target1&quot; (print) task</div><div class="line">target1: index.html,src/styles.css,2</div><div class="line"></div><div class="line">Running &quot;print:target2&quot; (print) task</div><div class="line">target2: data</div><div class="line"></div><div class="line">Running &quot;print:hello&quot; (print) task</div><div class="line">hello: world</div></pre></td></tr></table></figure>
<h2 id="Grunt-Errors-and-Warnings">Grunt Errors and Warnings<a href="#Grunt-Errors-and-Warnings" class="headerlink" title="Grunt Errors and Warnings"></a></h2><ul>
<li><p><a href="http://gruntjs.com/api/grunt.fail#grunt.fail.warn" target="_blank" rel="external">grunt.fail.warn(error [, errorcode])</a>: prints to STDOUT a message and abort grunt executions. It can be override using <code>--force</code> and it can show the stack trace if <code>--stack</code> is given. e.g. <code>grunt taskName --force --stack</code>.</p>
</li>
<li><p><a href="http://gruntjs.com/api/grunt.fail#grunt.fail.fatal" target="_blank" rel="external">grunt.fail.fatal(error [, errorcode])</a>: similar to <code>warn</code>, displays message to STDOUT and terminate Grunt. Cannot be <code>--force</code>ed and it emits a beep unless <code>--no-color</code> parameter is passed. It also accepts <code>--stack</code>. E.g. <code>grunt taskName --no-color --stack</code>.</p>
</li>
</ul>
<h1 id="Example-Forex-and-grunt-multiple-async-calls-handling">Example: Forex and grunt multiple async calls handling<a href="#Example-Forex-and-grunt-multiple-async-calls-handling" class="headerlink" title="Example: Forex and grunt multiple async calls handling"></a></h1><p>The idea is get conversion rates from a base currency (e.g. USD) to a target currency (e.g. EUR). We are using a <code>registerMultiTask</code>, so the taskName ‘currency’ matches its property in the <code>config.init</code>. Notice that we can has additional arbitrary data such as endpoint URL.</p>
<p>Async calls can be a little tricky in Javascript. We are going to do multiple HTTP request. Since <code>http.get</code> is async Grunt will finish the task before even receiving any response. <code>this.async()</code> solves the issue, we just need to call it when we are done.</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">module</span>.exports = <span class="function"><span class="keyword">function</span>(<span class="params">grunt</span>)</span>&#123;</div><div class="line">  grunt.config.init(&#123;</div><div class="line">    currency: &#123;</div><div class="line">      USD: [<span class="string">'EUR'</span>, <span class="string">'GBP'</span>, <span class="string">'DOP'</span>],</div><div class="line">      DOP: [<span class="string">'USD'</span>]</div><div class="line">    &#125;,</div><div class="line"></div><div class="line">    endpoint: &#123;</div><div class="line">      host: <span class="string">'http://www.freecurrencyconverter3api.com'</span>,</div><div class="line">      path: <span class="string">'/api/v2/convert?compact=y&amp;q='</span></div><div class="line">    &#125;</div><div class="line">  &#125;);</div><div class="line"></div><div class="line">  grunt.registerMultiTask(<span class="string">'currency'</span>, <span class="string">'Fetches currency exchange rates'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</div><div class="line">    <span class="keyword">var</span> http = <span class="built_in">require</span>(<span class="string">'http'</span>),</div><div class="line">      done = <span class="keyword">this</span>.async(),</div><div class="line">      responses = <span class="number">0</span>;</div><div class="line"></div><div class="line">    <span class="keyword">var</span> baseCurrency = <span class="keyword">this</span>.target;</div><div class="line">    <span class="keyword">var</span> targetCurrencies = <span class="keyword">this</span>.data;</div><div class="line"></div><div class="line">    grunt.config.requires(<span class="string">'endpoint'</span>);</div><div class="line"></div><div class="line">    targetCurrencies.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">targetCurrency, i, arr</span>)</span>&#123;</div><div class="line">      <span class="keyword">var</span> convertTo = baseCurrency + <span class="string">'_'</span> + targetCurrency,</div><div class="line">        body = [];</div><div class="line">        url = grunt.config.get(<span class="string">'endpoint.host'</span>);</div><div class="line"></div><div class="line">      url += grunt.config.get(<span class="string">'endpoint.path'</span>) + convertTo;</div><div class="line"></div><div class="line">      http.get(url, <span class="function"><span class="keyword">function</span>(<span class="params">res</span>) </span>&#123;</div><div class="line">        res.on(<span class="string">'data'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">data</span>)</span>&#123;</div><div class="line">          body.push(data);</div><div class="line">        &#125;);</div><div class="line"></div><div class="line">        res.on(<span class="string">'end'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">          <span class="keyword">var</span> conversion = <span class="built_in">JSON</span>.parse(body.join());</div><div class="line">          grunt.log.ok(baseCurrency + <span class="string">'/'</span> + targetCurrency + <span class="string">' =&gt; '</span> + conversion[convertTo].val);</div><div class="line">          <span class="comment">// if got all responses: done!</span></div><div class="line">          <span class="keyword">if</span>(responses++ == arr.length - <span class="number">1</span>)</div><div class="line">            done();</div><div class="line">        &#125;);</div><div class="line">      &#125;).on(<span class="string">'error'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">err</span>) </span>&#123;</div><div class="line">        grunt.warn(<span class="string">'Please verify endpoint host and path: &lt;'</span>+ url +<span class="string">'&gt;. It might be incorrect or down.'</span>);</div><div class="line">        done(err);</div><div class="line">      &#125;);</div><div class="line">    &#125;);</div><div class="line">  &#125;);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h1 id="Reference-2-Grunt-Files-and-logs">Reference 2: Grunt Files and logs<a href="#Reference-2-Grunt-Files-and-logs" class="headerlink" title="Reference 2: Grunt Files and logs"></a></h1><h2 id="Grunt-logs">Grunt logs<a href="#Grunt-logs" class="headerlink" title="Grunt logs"></a></h2><p>All them stars with the prefix <code>grunt.log</code> and accepts a <code>msg</code> which is displayed to STDOUT (usually the screen). Here are the differences between them:</p>
<ul>
<li><a href="http://gruntjs.com/api/grunt.log#grunt.log.writeln-grunt.verbose.writeln" target="_blank" rel="external">writeln([msg]), write(msg) and subhead(msg)</a>: writes message to STDOUT. <code>grunt.log.writeln</code> will do the same as <code>grunt.log.write</code> but without trailing newline. <code>subhead(msg)</code> will print the message in bold and proceeded by a newline and a trailing newline as well.</li>
</ul>
<p>The following methods adds a “&gt;&gt;” before the message in the screen which could be of different colors depending on the method:</p>
<ul>
<li><code>grunt.log.error([msg])</code>: print message prefixed with a RED “&gt;&gt;”.</li>
<li><code>grunt.log.ok([msg])</code>: print message prefixed with a GREEN “&gt;&gt;”.</li>
</ul>
<h2 id="Grunt-files">Grunt files<a href="#Grunt-files" class="headerlink" title="Grunt files"></a></h2><p><strong>Files</strong></p>
<p>All has an optional attributes <code>options</code> that could be <code>encoding</code> among others.</p>
<ul>
<li><a href="http://gruntjs.com/api/grunt.file#grunt.file.write" target="_blank" rel="external">grunt.file.write(filepath, contents [, options])</a>: writes contents to file, creates path if necessary.</li>
<li><a href="http://gruntjs.com/api/grunt.file#grunt.file.read" target="_blank" rel="external">grunt.file.read(filepath [, options])</a>: returns file content.</li>
<li><a href="http://gruntjs.com/api/grunt.file#grunt.file.readjson" target="_blank" rel="external">grunt.file.readJSON(filepath [, options])</a>: reads file content and parse it to JSON.</li>
<li><a href="http://gruntjs.com/api/grunt.file#grunt.file.delete" target="_blank" rel="external">grunt.file.delete(filepath [, options])</a>: deletes files recursively.</li>
<li><a href="http://gruntjs.com/api/grunt.file#grunt.file.copy" target="_blank" rel="external">grunt.file.copy(srcpath, destpath [, options])</a>: copy file from <code>srcpath</code> to <code>destpath</code>.</li>
</ul>
<p><strong>Directories</strong></p>
<ul>
<li><a href="http://gruntjs.com/api/grunt.file#grunt.file.mkdir" target="_blank" rel="external">grunt.file.mkdir(dirpath [, mode])</a>: creates directory and any intermediary. Like <code>mkdir -p</code>.</li>
<li><a href="http://gruntjs.com/api/grunt.file#grunt.file.expand" target="_blank" rel="external">grunt.file.expand([options, ] patterns)</a>: returns an array with all the files matching a pattern. It can also accept and array of patterns. Preceding a patter with <code>!</code> will negate them. E.g. <code>[&#39;**/*.js&#39;, !**/*spec.js]</code> =&gt; get all javascript (including subdirectories) but NOT the ones that ends with spec.js.</li>
<li><a href="http://gruntjs.com/api/grunt.file#grunt.file.recurse" target="_blank" rel="external">grunt.file.recurse(rootdir, callback)</a>: expand path and return a callback function with the following signature <code>callback(abspath, rootdir, subdir, filename)</code>.</li>
</ul>
<h1 id="Example-2-Gruntfile-for-files-manipulation">Example 2: Gruntfile for files manipulation<a href="#Example-2-Gruntfile-for-files-manipulation" class="headerlink" title="Example 2: Gruntfile for files manipulation"></a></h1><p>GruntJS comes with built-in functions for basic <a href="https://github.com/gruntjs/grunt/blob/master/lib/grunt/file.js" target="_blank" rel="external">file system handling</a>. To see the function in action. Create four directories: <code>stylesheets</code>, <code>javascripts</code>, <code>templates</code> and put files on first three. The idea is to concatenate all the files into one index.html and placed it a newly created <code>public</code> folder.</p>
<p>Here’s the grunt file that will copy and concatenate all the files for us:</p>
<figure class="highlight javascript"><figcaption><span>Gruntfile.js</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">module</span>.exports = <span class="function"><span class="keyword">function</span>(<span class="params">grunt</span>)</span>&#123;</div><div class="line">  grunt.config.init(&#123;</div><div class="line">    concat: &#123;</div><div class="line">      options: &#123;</div><div class="line">        dest: <span class="string">'tmp'</span>,</div><div class="line">        templates: [<span class="string">'templates/header.html'</span>, <span class="string">'templates/footer.html'</span>],</div><div class="line">        javascripts: [<span class="string">'javascripts/*.js'</span>],</div><div class="line">        stylesheets: [<span class="string">'stylesheets'</span>]</div><div class="line">      &#125;</div><div class="line">    &#125;</div><div class="line">  &#125;);</div><div class="line"></div><div class="line">  <span class="keyword">var</span> recursiveConcat = <span class="function"><span class="keyword">function</span>(<span class="params">source, result</span>)</span>&#123;</div><div class="line">    grunt.file.expand(source).forEach(<span class="function"><span class="keyword">function</span>(<span class="params">file</span>)</span>&#123;</div><div class="line">      <span class="keyword">if</span>(grunt.file.isDir(file))&#123;</div><div class="line">        grunt.file.recurse(file, <span class="function"><span class="keyword">function</span>(<span class="params">f</span>)</span>&#123;</div><div class="line">          result = recursiveConcat(f, result);</div><div class="line">        &#125;);</div><div class="line">      &#125; <span class="keyword">else</span> &#123;</div><div class="line">        grunt.log.writeln(<span class="string">'Concatenating '</span> + file + <span class="string">' to other '</span> + result.length + <span class="string">' characters.'</span>);</div><div class="line">        result += grunt.file.read(file);</div><div class="line">      &#125;</div><div class="line">    &#125;);</div><div class="line">    <span class="keyword">return</span> result;</div><div class="line">  &#125;;</div><div class="line"></div><div class="line">  grunt.registerTask(<span class="string">'concat'</span>, <span class="string">'concatenates files'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">type</span>)</span>&#123;</div><div class="line">    grunt.config.requires(<span class="string">'concat.options.'</span> + type); <span class="comment">// fail the task if this propary is missing.</span></div><div class="line">    grunt.config.requires(<span class="string">'concat.options.dest'</span>);</div><div class="line"></div><div class="line">    <span class="keyword">var</span> files = grunt.config.get(<span class="string">'concat.options.'</span> + type),</div><div class="line">      dest = grunt.config.get(<span class="string">'concat.options.dest'</span>),</div><div class="line">      concatenated = recursiveConcat(files, <span class="string">''</span>);</div><div class="line"></div><div class="line">    grunt.log.writeln(<span class="string">'Writing '</span> + concatenated.length + <span class="string">' chars to '</span> + <span class="string">'tmp/'</span> + type);</div><div class="line">    grunt.file.write(dest + <span class="string">'/'</span> + type, concatenated);</div><div class="line">  &#125;);</div><div class="line"></div><div class="line">  grunt.registerTask(<span class="string">'concatAll'</span>, [<span class="string">'concat:templates'</span>, <span class="string">'concat:javascripts'</span>, <span class="string">'concat:stylesheets'</span>]);</div><div class="line">  grunt.registerTask(<span class="string">'default'</span>, [<span class="string">'concatAll'</span>]);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>A more complete example can be found in the repository where we have the join and open function as well.</p>
<h2 id="Reference-3-Inside-Grunt-tasks">Reference 3: Inside Grunt tasks<a href="#Reference-3-Inside-Grunt-tasks" class="headerlink" title="Reference 3: Inside Grunt tasks"></a></h2><p>Inside all Grunt task there are number of functions available through <code>this</code>:</p>
<ul>
<li><a href="http://gruntjs.com/inside-tasks#this.async" target="_blank" rel="external">this.async</a>: designed for async tasks. Grunt will normally end the task without waiting for the callback to be executed. If you need Grunt to wait use <code>done()</code>.</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> done = <span class="keyword">this</span>.async();</div><div class="line"></div><div class="line">http.get(<span class="string">'http://adrianmejia.com'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">res</span>)</span>&#123;</div><div class="line">  res.on(<span class="string">'data'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">data</span>)</span>&#123;</div><div class="line">    <span class="comment">// ... process data ...</span></div><div class="line">    done(); <span class="comment">// forces Grunt to wait until data is received.</span></div><div class="line">  &#125;)</div><div class="line">&#125;).on(<span class="function"><span class="keyword">function</span>(<span class="params">err</span>)</span>&#123;</div><div class="line">  done(err); <span class="comment">// or an error is received.</span></div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<ul>
<li><p><a href="http://gruntjs.com/inside-tasks#this.requires" target="_blank" rel="external">this.requires</a>: list of taskNames that should executed successfully first. E.g. <code>this.requires([&#39;concat&#39;, &#39;jshint&#39;])</code>.</p>
</li>
<li><p><a href="http://gruntjs.com/inside-tasks#this.name" target="_blank" rel="external">this.name</a>: this is the name of the task. E.g. <code>grunt hello</code>, then <code>this.name === &#39;name&#39;</code>.</p>
</li>
<li><p><a href="http://gruntjs.com/inside-tasks#this.args" target="_blank" rel="external">this.args</a>: returns an array with the parameters. E.g. <code>grunt hello:crazy:world</code>, then <code>this.args</code> will return <code>[&#39;crazy&#39;, &#39;world&#39;]</code>.</p>
</li>
<li><p><a href="http://gruntjs.com/inside-tasks#this.options" target="_blank" rel="external">this.options([defaultsObj])</a>: it gets options values from the <code>config.init</code>, optionally you can also pass an object containing the default values. Notice in the example bellow that even though console.log has a <code>this.options({gzip: true})</code> it gets override by the options parameters. If not one it is specified in the <code>config.init</code> then it will use the default gzip: true.</p>
</li>
</ul>
<p><strong>Inside MultiTasks</strong></p>
<p>Consider this <code>grunt.config.init</code> example:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">module</span>.exports = <span class="function"><span class="keyword">function</span>(<span class="params">grunt</span>)</span>&#123;</div><div class="line">  grunt.config.init(&#123;</div><div class="line">    multiTaskName: &#123;</div><div class="line">      options: &#123;</div><div class="line">        gzip: <span class="literal">false</span></div><div class="line">      &#125;,</div><div class="line">      target1: &#123;</div><div class="line">        src: <span class="string">'stylesheets/*.css'</span>,</div><div class="line">        dest: <span class="string">'public'</span>,</div><div class="line">        ext: <span class="string">'.min.css'</span></div><div class="line">      &#125;,</div><div class="line">      target2: &#123;</div><div class="line">        src: <span class="string">'*.js'</span>,</div><div class="line">        dest: <span class="string">'public'</span>,</div><div class="line">        ext: <span class="string">'.min.js'</span></div><div class="line">      &#125;</div><div class="line">    &#125;</div><div class="line">  &#125;);</div><div class="line"></div><div class="line">  grunt.registerMultiTask(<span class="string">'multiTaskName'</span>, <span class="string">'example'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    <span class="built_in">console</span>.log(<span class="string">'this.options'</span>, <span class="keyword">this</span>.options(&#123;gzip: <span class="literal">true</span>&#125;));</div><div class="line">    <span class="built_in">console</span>.log(<span class="string">'this.data'</span>, <span class="keyword">this</span>.data);</div><div class="line">    <span class="built_in">console</span>.log(<span class="string">'this.files'</span>, <span class="keyword">this</span>.files);</div><div class="line">    <span class="built_in">console</span>.log(<span class="string">'this.filesSrc'</span>, <span class="keyword">this</span>.filesSrc);</div><div class="line">  &#125;);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<figure class="highlight bash"><figcaption><span>Output example</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div></pre></td><td class="code"><pre><div class="line">grunt multiTaskName</div><div class="line"><span class="comment"># Running "multiTaskName:target1" (multiTaskName) task</span></div><div class="line"><span class="comment"># this.options &#123; gzip: false &#125;</span></div><div class="line"><span class="comment"># this.data &#123; src: 'stylesheets/*.css', dest: 'public', ext: '.min.css' &#125;</span></div><div class="line"><span class="comment"># this.files [ &#123; src: [Getter],</span></div><div class="line"><span class="comment">#     dest: 'public',</span></div><div class="line"><span class="comment">#     ext: '.min.css',</span></div><div class="line"><span class="comment">#     orig: &#123; src: [Object], dest: 'public', ext: '.min.css' &#125; &#125; ]</span></div><div class="line"><span class="comment"># this.filesSrc [ 'stylesheets/h1.css', 'stylesheets/h2.css' ]</span></div><div class="line"><span class="comment">#</span></div><div class="line"><span class="comment"># Running "multiTaskName:target2" (multiTaskName) task</span></div><div class="line"><span class="comment"># this.options &#123; gzip: false &#125;</span></div><div class="line"><span class="comment"># this.data &#123; src: '*.js', dest: 'public', ext: '.min.js' &#125;</span></div><div class="line"><span class="comment"># this.files [ &#123; src: [Getter],</span></div><div class="line"><span class="comment">#     dest: 'public',</span></div><div class="line"><span class="comment">#     ext: '.min.js',</span></div><div class="line"><span class="comment">#     orig: &#123; src: [Object], dest: 'public', ext: '.min.js' &#125; &#125; ]</span></div><div class="line"><span class="comment"># this.filesSrc [ 'Gruntfile.js' ]</span></div></pre></td></tr></table></figure>
<ul>
<li><p><a href="http://gruntjs.com/inside-tasks#this.target" target="_blank" rel="external">this.target</a>: name of the target current target. If you call it <code>grunt multiTaskName</code>, it will run like multiple tasks calling each target one at a time. <code>this.target</code> will be equal to <code>target1</code> and then <code>target2</code>.</p>
</li>
<li><p><a href="http://gruntjs.com/inside-tasks#this.files" target="_blank" rel="external">this.files</a>: return a (single) array that has all the properties for the current target. Take a look the the output above.</p>
</li>
<li><p><a href="http://gruntjs.com/inside-tasks#this.filessrc" target="_blank" rel="external">this.filesSrc</a>: it expands files and paths against <code>src</code> and return an array with them.</p>
</li>
<li><p><a href="http://gruntjs.com/inside-tasks#this.data" target="_blank" rel="external">this.data</a>: contains the raw data of the target parameters.</p>
</li>
</ul>
<h1 id="Intermediate-Using-Grunt-js-plugins">Intermediate: Using Grunt.js plugins<a href="#Intermediate-Using-Grunt-js-plugins" class="headerlink" title="Intermediate: Using Grunt.js plugins"></a></h1><p>Chances are that there is a plugin for most of your needs. Last time I checked there were 3,638 plugins for grunt. This are the 10 most popular:</p>
<h2 id="Installing-a-grunt-plugin">Installing a grunt plugin<a href="#Installing-a-grunt-plugin" class="headerlink" title="Installing a grunt plugin"></a></h2><p>Let’s say we want to install jshint.</p>
<ol>
<li>Get the plugin module</li>
</ol>
<p>Download it from npm:</p>
<p><code>npm install grunt-contrib-jshint --save-dev</code></p>
<p>or from github:</p>
<p><code>npm install https://github.com/YOUR_USERNAME/grunt-contrib-YOUR-PLUGIN --save-dev</code></p>
<ol>
<li>Load it in your Gruntfile</li>
</ol>
<p><code>grunt.loadNpmTasks(&#39;grunt-contrib-jshint&#39;);</code></p>
<p>or</p>
<p><code>grunt.loadNpmTasks(&#39;grunt-contrib-YOUR-PLUGIN&#39;);</code></p>
<h2 id="10-most-popular-grunt-plugins">10 most popular grunt plugins<a href="#10-most-popular-grunt-plugins" class="headerlink" title="10 most popular grunt plugins"></a></h2><p>1- <a href="https://github.com/gruntjs/grunt-contrib-jshint" target="_blank" rel="external">jshint</a>: Validate files with JSHint. Uses <code>.jshintrc</code> to settings.</p>
<figure class="highlight javascript"><figcaption><span>.jshintrc (example)</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line">&#123;</div><div class="line">  <span class="string">"curly"</span>: <span class="literal">true</span>,</div><div class="line">  <span class="string">"eqnull"</span>: <span class="literal">true</span>,</div><div class="line">  <span class="string">"eqeqeq"</span>: <span class="literal">true</span>,</div><div class="line">  <span class="string">"undef"</span>: <span class="literal">true</span>,</div><div class="line">  <span class="string">"globals"</span>: &#123;</div><div class="line">    <span class="string">"jQuery"</span>: <span class="literal">true</span></div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>2- <a href="https://github.com/gruntjs/grunt-contrib-watch" target="_blank" rel="external">watch</a>: Run predefined tasks whenever watched file patterns are added, changed or deleted. Spawn runs task in a child process but having set to <code>spawn: false</code> is faster.</p>
<figure class="highlight javascript"><figcaption><span>grunt.config.init (example)</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line">watch: &#123;</div><div class="line">  scripts: &#123;</div><div class="line">    files: [<span class="string">'**/*.js'</span>],</div><div class="line">    tasks: [<span class="string">'jshint'</span>],</div><div class="line">    options: &#123;</div><div class="line">      spawn: <span class="literal">false</span>,</div><div class="line">    &#125;,</div><div class="line">  &#125;,</div><div class="line">&#125;,</div></pre></td></tr></table></figure>
<p>3- <a href="https://github.com/gruntjs/grunt-contrib-uglify" target="_blank" rel="external">uglify</a>: minifies javascript files.
<figure class="highlight javascript"><figcaption><span>grunt.config.init (example)</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">uglify: &#123;</div><div class="line">  my_target: &#123;</div><div class="line">    files: &#123;</div><div class="line">      <span class="string">'dest/output.min.js'</span>: [<span class="string">'src/input1.js'</span>, <span class="string">'src/input2.js'</span>]</div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>4- <a href="https://github.com/gruntjs/grunt-contrib-clean" target="_blank" rel="external">clean</a>: Clean files and folders.
<figure class="highlight javascript"><figcaption><span>grunt.config.init (example)</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">clean: &#123;</div><div class="line">  <span class="comment">// Deletes all .js files, but skips min.js files</span></div><div class="line">  js: [<span class="string">"path/to/dir/*.js"</span>, <span class="string">"!path/to/dir/*.min.js"</span>]</div><div class="line"></div><div class="line">  <span class="comment">// delete all files and directories here</span></div><div class="line">  build: [<span class="string">"path/to/dir/one"</span>, <span class="string">"path/to/dir/two"</span>],</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>5- <a href="https://github.com/gruntjs/grunt-contrib-concat" target="_blank" rel="external">concat</a>: Concatenate files.
<figure class="highlight javascript"><figcaption><span>grunt.config.init (example simple)</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line">concat: &#123;</div><div class="line">  options: &#123;</div><div class="line">    separator: <span class="string">';'</span>,</div><div class="line">  &#125;,</div><div class="line">  dist: &#123;</div><div class="line">    src: [<span class="string">'src/intro.js'</span>, <span class="string">'src/project.js'</span>, <span class="string">'src/outro.js'</span>],</div><div class="line">    dest: <span class="string">'dist/built.js'</span>,</div><div class="line">  &#125;,</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<figure class="highlight javascript"><figcaption><span>grunt.config.init (adding banners and multiple targets)</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line">pkg: grunt.file.readJSON(<span class="string">'package.json'</span>),</div><div class="line">concat: &#123;</div><div class="line">  options: &#123;</div><div class="line">    stripBanners: <span class="literal">true</span>,</div><div class="line">    banner: <span class="string">'/*! &lt;%= pkg.name %&gt; - v&lt;%= pkg.version %&gt; - '</span> +</div><div class="line">      <span class="string">'&lt;%= grunt.template.today("yyyy-mm-dd") %&gt; */'</span>,</div><div class="line">  &#125;,</div><div class="line">  dist: &#123;</div><div class="line">    <span class="string">'dist/with_extras.js'</span>: [<span class="string">'src/main.js'</span>, <span class="string">'src/extras.js'</span>],</div><div class="line">  &#125;,</div><div class="line">&#125;,</div></pre></td></tr></table></figure>
<p>6- <a href="https://github.com/gruntjs/grunt-contrib-cssmin" target="_blank" rel="external">cssmin</a>: Compress CSS files.
<figure class="highlight javascript"><figcaption><span>grunt.config.init (example)</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">cssmin: &#123;</div><div class="line">  combine: &#123;</div><div class="line">    files: &#123;</div><div class="line">      <span class="string">'path/to/output.css'</span>: [<span class="string">'path/to/input_one.css'</span>, <span class="string">'path/to/input_two.css'</span>]</div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<figure class="highlight javascript"><figcaption><span>grunt.config.init (example with banner and adding .min.css extension)</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line">cssmin: &#123;</div><div class="line">  add_banner: &#123;</div><div class="line">    options: &#123;</div><div class="line">      banner: <span class="string">'/* My minified css file */'</span></div><div class="line">    &#125;,</div><div class="line">    files: [&#123;</div><div class="line">      expand: <span class="literal">true</span>,</div><div class="line">      cwd: <span class="string">'release/css/'</span>,</div><div class="line">      src: [<span class="string">'*.css'</span>, <span class="string">'!*.min.css'</span>],</div><div class="line">      dest: <span class="string">'release/css/'</span>,</div><div class="line">      ext: <span class="string">'.min.css'</span></div><div class="line">    &#125;]</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>7- <a href="https://github.com/gruntjs/grunt-contrib-connect" target="_blank" rel="external">connect</a>: runs server as long as Grunt is running. It can be persistent passing <code>keepalive</code> like this <code>grunt connect:keepalive</code>.</p>
<figure class="highlight javascript"><figcaption><span>grunt.config.init (example)</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">connect: &#123;</div><div class="line">  server: &#123;</div><div class="line">    options: &#123;</div><div class="line">      port: <span class="number">9001</span>,</div><div class="line">      base: <span class="string">'www-root'</span></div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>8- <a href="https://github.com/karma-runner/grunt-karma" target="_blank" rel="external">karma</a>: runs karma testing tool.</p>
<figure class="highlight javascript"><figcaption><span>grunt.config.init (example)</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">karma: &#123;</div><div class="line">  unit: &#123;</div><div class="line">    options: &#123;</div><div class="line">      files: [<span class="string">'test/**/*.js'</span>]</div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<figure class="highlight javascript"><figcaption><span>grunt.config.init (example referencing karma.conf and overriding parameters)</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line">karma: &#123;</div><div class="line">  unit: &#123;</div><div class="line">    configFile: <span class="string">'karma.conf.js'</span>,</div><div class="line">    runnerPort: <span class="number">9999</span>,</div><div class="line">    singleRun: <span class="literal">true</span>,</div><div class="line">    browsers: [<span class="string">'PhantomJS'</span>],</div><div class="line">    logLevel: <span class="string">'ERROR'</span></div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>9- <a href="https://github.com/gruntjs/grunt-contrib-less" target="_blank" rel="external">less</a>: Compile LESS files to CSS.
<figure class="highlight javascript"><figcaption><span>grunt.config.init (example)</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div></pre></td><td class="code"><pre><div class="line">less: &#123;</div><div class="line">  development: &#123;</div><div class="line">    options: &#123;</div><div class="line">      paths: [<span class="string">"assets/css"</span>]</div><div class="line">    &#125;,</div><div class="line">    files: &#123;</div><div class="line">      <span class="string">"path/to/result.css"</span>: <span class="string">"path/to/source.less"</span></div><div class="line">    &#125;</div><div class="line">  &#125;,</div><div class="line">  production: &#123;</div><div class="line">    options: &#123;</div><div class="line">      paths: [<span class="string">"assets/css"</span>],</div><div class="line">      cleancss: <span class="literal">true</span>,</div><div class="line">      modifyVars: &#123;</div><div class="line">        imgPath: <span class="string">'"http://mycdn.com/path/to/images"'</span>,</div><div class="line">        bgColor: <span class="string">'red'</span></div><div class="line">      &#125;</div><div class="line">    &#125;,</div><div class="line">    files: &#123;</div><div class="line">      <span class="string">"path/to/result.css"</span>: <span class="string">"path/to/source.less"</span></div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>10- <a href="https://github.com/sindresorhus/grunt-concurrent" target="_blank" rel="external">concurrent</a>: Run grunt tasks concurrently.</p>
<figure class="highlight javascript"><figcaption><span>grunt.config.init (example)</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">concurrent: &#123;</div><div class="line">  target1: [<span class="string">'coffee'</span>, <span class="string">'sass'</span>],</div><div class="line">  target2: [<span class="string">'jshint'</span>, <span class="string">'mocha'</span>],</div><div class="line">  target3: &#123;</div><div class="line">    tasks: [<span class="string">'nodemon'</span>, <span class="string">'watch'</span>],</div><div class="line">    options: &#123;</div><div class="line">      logConcurrentOutput: <span class="literal">true</span></div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>In the next blog post, we will continue the tutorial with using GruntJS in a web application, making your own plugins and a comparison between other task runners tools such as Gulp, Gulp, Brunch, Rake::Pipeline and Broccoli.</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;Sometimes you find yourself doing the same tasks again and again, especially during web development. It is time to automate repetitive tasks and use that time in more creative activities. This is where Grunt comes in. Grunt is a popular task runner that runs on NodeJS. It can minify CSS/JavaScript, run linting tools (JSHint, JSlint, CSSlint), deploy to server, and run test cases when you change a file to name a few. All the information I found about Grunt and similar Javascript test runners were too verbose and not very helpful to get started quickly. So, I decided to make this tutorial.&lt;/p&gt;
    
    </summary>
    
      <category term="Technologies" scheme="http://adrianmejia.com/categories/Technologies/"/>
    
      <category term="Web Development" scheme="http://adrianmejia.com/categories/Technologies/Web-Development/"/>
    
    
      <category term="javascript" scheme="http://adrianmejia.com/tags/javascript/"/>
    
      <category term="gruntjs" scheme="http://adrianmejia.com/tags/gruntjs/"/>
    
      <category term="nodejs" scheme="http://adrianmejia.com/tags/nodejs/"/>
    
  </entry>
  
  <entry>
    <title>MEAN Stack Tutorial MongoDB ExpressJS AngularJS NodeJS (Part III)</title>
    <link href="http://adrianmejia.com/blog/2014/10/03/mean-stack-tutorial-mongodb-expressjs-angularjs-nodejs/"/>
    <id>http://adrianmejia.com/blog/2014/10/03/mean-stack-tutorial-mongodb-expressjs-angularjs-nodejs/</id>
    <published>2014-10-03T10:59:34.000Z</published>
    <updated>2016-08-07T01:47:53.000Z</updated>
    
    <content type="html"><![CDATA[<p>We are going to build a full stack Todo App using the MEAN (MongoDB, ExpressJS, AngularJS and NodeJS). This is the last part of <a href="/tags/Tutorial-MEAN-Stack/">three-post series tutorial</a>.</p>
<a id="more"></a>
<p>Before completing the app, let’s cover some background about the this stack. If you rather jump to the hands-on part click here to <a href="#start">get started</a>.</p>
<h1 id="Why-MEAN-stack">Why MEAN stack?<a href="#Why-MEAN-stack" class="headerlink" title="Why MEAN stack?"></a></h1><p><a href="#start">TL; DR</a>: NodeJS has been built from bottom up a non-blocking I/O paradigm, which gives you more efficiency per CPU core than using threads in other languages like <a href="http://strongloop.com/strongblog/node-js-is-faster-than-java/" target="_blank" rel="external">Java</a>.</p>
<p>LAMP (Linux-Apache-MySQL-PHP) has dominated web application stack for many years now. Well-known platforms such as Wikipedia, Wordpress, and even Facebook uses it or started with it. Enterprise, usually, used go down the Java path: Hibernate, Spring, Struts, JBoss. More agile frameworks also have been used such as Ruby on Rails and for Python Django and Pylon.</p>
<img src="/images/mean_vs_lamp_stack.png" title="LAMP vs MEAN stack">
<p><strong>Ubiquitous</strong></p>
<p>Well, it turns out, that JavaScript it is everywhere. It used to be limited to browsers. But, now you can found it in smartphones, servers, robots, Arduino, RaspberryPi… Thus, it does not matter what technology you use to build web applications, you need to be familiar with Javascript. In that case, then, it is a time saver to use wherever it fits, especially for building web applications. MEAN stack is embracing that, using Javascript to create end-to-end web applications.
​
<strong>Non-blocking architecture</strong></p>
<p>JavaScript is a dynamic, object-oriented, and functional scripting language. One of the features that make it win over Java Applets decades ago, it was its lightness and non-blocking event loop.
Blocking means that when one line of code is executing, the rest of it is locked waiting to finish. On the other hand, non-blocking gives to each line of code a shot and then through callbacks it can come back when an event happens.
Programming languages that are blocking (Java, Ruby, Python, PHP, …) overcomes concurrency using many threads of execution while JavaScript handles it using non-blocking event loop in a single thread.</p>
<img src="/images/blocking_vs_non_blocking_io.png">
<p>As you can see, a single thread of execution in Node can handle perform multiple tasks vs a non-blocking style that execute each one sequentially. You can read more about it in <a href="[strongloop.com](http://strongloop.com/strongblog/node-js-is-faster-than-java/)" target="_blank">NodeJS faster than Java</a> article.</p>
<p>Some companies like <a href="https://www.paypal-engineering.com/2013/11/22/node-js-at-paypal/" target="_blank" rel="external">Paypal</a> moved from Java backend to NodeJS and reported a increased performance, lower average response times, and development speed gains.  Similarly happens to <a href="https://engineering.groupon.com/2013/misc/i-tier-dismantling-the-monoliths/" target="_blank" rel="external">Groupon</a> that came from Java/Rails monoliths.</p>
<p><strong>Agile and vibrant community</strong></p>
<p>The community behind Javascript is quite vibrant. It has permeated in almost all the fields of technology: data visualization, server-side, databases, robotics, building tools and many more.</p>
<p><a id="start"></a></p>
<h1 id="TODO-app-with-MEAN">TODO app with MEAN<a href="#TODO-app-with-MEAN" class="headerlink" title="TODO app with MEAN"></a></h1><p>In this section are going to put together everything that we learnt in the <a href="/blog/2014/09/28/angularjs-tutorial-for-beginners-with-nodejs-expressjs-and-mongodb/">two</a> <a href="/blog/2014/10/01/creating-a-restful-api-tutorial-with-nodejs-and-mongodb/">previous</a> tutorials.</p>
<h2 id="MEAN-Backend-with-MongoDB-ExpressJS-and-NodeJS">MEAN Backend with MongoDB, ExpressJS and NodeJS<a href="#MEAN-Backend-with-MongoDB-ExpressJS-and-NodeJS" class="headerlink" title="MEAN Backend with MongoDB, ExpressJS and NodeJS"></a></h2><p>In the <a href="/blog/2014/10/01/creating-a-restful-api-tutorial-with-nodejs-and-mongodb/">previous post</a>, we have gone through the process of building a RESTful API and we are going to be building on top of that. <a href="https://github.com/amejiarosario/todoAPIjs" target="_blank" rel="external">Repository here</a>.</p>
<figure class="highlight bash"><figcaption><span>Getting the back-end code build on Part II</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">git <span class="built_in">clone</span> https://github.com/amejiarosario/todoAPIjs.git</div></pre></td></tr></table></figure>
<h2 id="MEAN-stack-front-end-with-AngularJS">MEAN stack front-end with AngularJS<a href="#MEAN-stack-front-end-with-AngularJS" class="headerlink" title="MEAN stack front-end with AngularJS"></a></h2><p>Similarly, we have build a very lean todoApp in the <a href="/blog/2014/09/28/angularjs-tutorial-for-beginners-with-nodejs-expressjs-and-mongodb/">first part</a> of this tutorial. You can <a href="https://gist.githubusercontent.com/amejiarosario/068143b53e54db43ef38/raw/ngTodo.html" target="_blank" rel="external">download the file</a> to follow along and see it in action <a href="https://cdn.rawgit.com/amejiarosario/068143b53e54db43ef38/raw/ngTodo.html" target="_blank" rel="external">here</a>. You might notice the angularJS app is very simple and even it is entirely in one file for simplicity sake. In further tutorials, we are going to make it more modular, split in files, add tests and stylesheets.</p>
<p>Let’s go first to the ExpressJS app (todoAPIjs) and review the default routing system:</p>
<ol>
<li><code>app.js</code> loads the all the routes.</li>
<li>The root path (<code>/</code>) is mounted on the <code>routes/index.js</code></li>
<li><code>routes/index.js</code> sets the variable title and renders <code>index.ejs</code>.</li>
</ol>
<figure class="highlight javascript"><figcaption><span>Tracing ExpressJS index route</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// app.js</span></div><div class="line"><span class="keyword">var</span> routes = <span class="built_in">require</span>(<span class="string">'./routes/index'</span>);</div><div class="line">app.use(<span class="string">'/'</span>, routes);</div><div class="line"></div><div class="line"><span class="comment">// ./routes/index.js</span></div><div class="line">router.get(<span class="string">'/'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">req, res</span>) </span>&#123;</div><div class="line">  res.render(<span class="string">'index'</span>, &#123; title: <span class="string">'Express'</span> &#125;);</div><div class="line">&#125;);</div><div class="line"></div><div class="line"><span class="comment">// ./views/index.ejs</span></div><div class="line">    &lt;h1&gt;<span class="xml"><span class="tag">&lt;<span class="name">%=</span> <span class="attr">title</span> %&gt;</span><span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></div><div class="line">    &lt;p&gt;Welcome to &lt;%= title %&gt;<span class="xml"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></div></pre></td></tr></table></figure>
<p>The best place to load our <code>./views/index.ejs</code>. So let’s copy the body content from ngTodo.html content in there and change in <code>./routes/index.js</code> title to “ngTodo App”. Don’t forget to add ng-app on the top. <code>&lt;html ng-app=&quot;app&quot;&gt;</code>.</p>
<p><a href="https://github.com/amejiarosario/todoAPIjs/commit/ebf20f4093aa20c867777b4b3db825429b54a20d" target="_blank" rel="external">diff</a></p>
<h1 id="Wiring-up-the-App">Wiring up the App<a href="#Wiring-up-the-App" class="headerlink" title="Wiring up the App"></a></h1><h2 id="AngularJS-Read-with-http">AngularJS Read with $http<a href="#AngularJS-Read-with-http" class="headerlink" title="AngularJS Read with $http"></a></h2><p>As you might notice, in the factory, we have a fixed array. We need to change it to communicate with the API that we just build.</p>
<p><code>$http</code> is Anguar core sevice that allow to make <code>XMLHttpRequest</code> or <code>jsonp</code> request. You can either pass an object with http verb and url or call call $http.verb (<code>$http.get</code>, <code>$http.post</code>).</p>
<p><code>$http</code> returns a promise which has a <code>success</code> and <code>error</code> function.</p>
<figure class="highlight javascript"><figcaption><span>AngularJS $HTTP Usage Example</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line">$http(&#123;method: <span class="string">'GET'</span>, url: <span class="string">'/todos'</span>&#125;).</div><div class="line">  success(<span class="function"><span class="keyword">function</span>(<span class="params">data, status, headers, config</span>) </span>&#123;</div><div class="line">    <span class="comment">// this callback will be called asynchronously</span></div><div class="line">    <span class="comment">// when the response is available.</span></div><div class="line">    <span class="built_in">console</span>.log(<span class="string">'todos: '</span>, data );</div><div class="line">  &#125;).</div><div class="line">  error(<span class="function"><span class="keyword">function</span>(<span class="params">data, status, headers, config</span>) </span>&#123;</div><div class="line">    <span class="comment">// called asynchronously if an error occurs</span></div><div class="line">    <span class="comment">// or server returns response with an error status.</span></div><div class="line">    <span class="built_in">console</span>.log(<span class="string">'Oops and error'</span>, data);</div><div class="line">  &#125;);</div></pre></td></tr></table></figure>
<p>Let’s try it out in our app. Go to <code>views/index.ejs</code> and do this changes:</p>
<figure class="highlight javascript"><figcaption><span>Using $http to retrieve data from database</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// Service</span></div><div class="line">.factory(<span class="string">'Todos'</span>, [<span class="string">'$http'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">$http</span>)</span>&#123;</div><div class="line">  <span class="keyword">return</span> $http.get(<span class="string">'/todos'</span>);</div><div class="line">&#125;])</div><div class="line"></div><div class="line"><span class="comment">// Controller</span></div><div class="line">.controller(<span class="string">'TodoController'</span>, [<span class="string">'$scope'</span>, <span class="string">'Todos'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">$scope, Todos</span>) </span>&#123;</div><div class="line">  Todos.success(<span class="function"><span class="keyword">function</span>(<span class="params">data</span>)</span>&#123;</div><div class="line">    $scope.todos = data;</div><div class="line">  &#125;).error(<span class="function"><span class="keyword">function</span>(<span class="params">data, status</span>)</span>&#123;</div><div class="line">    <span class="built_in">console</span>.log(data, status);</div><div class="line">    $scope.todos = [];</div><div class="line">  &#125;);</div><div class="line">&#125;])</div></pre></td></tr></table></figure>
<p><a href="https://github.com/amejiarosario/todoAPIjs/commit/0221aebd62e88445629debe4f132684686cf48ec" target="_blank" rel="external">diff</a></p>
<p><code>$http.get</code> will request data using the <code>GET</code> method.</p>
<blockquote>
<p>Try it in your browser!s If you have data from the <a href="http://adrianmejia.com/blog/2014/10/01/creating-a-restful-api-tutorial-with-nodejs-and-mongodb/#browser-and-postman">previous tutorial</a> you should be able to see it.</p>
</blockquote>
<p>To <strong>start the server</strong>, you can use
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">npm start</div></pre></td></tr></table></figure></p>
<p>or if you have it installed</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">nodemon</div></pre></td></tr></table></figure>
<h2 id="AngularJS-Read-with-resource">AngularJS Read with $resource<a href="#AngularJS-Read-with-resource" class="headerlink" title="AngularJS Read with $resource"></a></h2><p>If you click in one of the Todo elements and get redirected to the detail page, you will not see anything yet. We need to update the <code>TodoDetailCtrl</code> first. Even though we already have the GET verb working. We have a different URL requirement for <code>/todos/:id</code> for the other methods. There’s an Angular service that has a higher level of abstraction of $http to deal with RESTful requests. It is called <code>$resource</code>.</p>
<p>Initialize as:
<code>$resource(url, [paramDefaults], [actions], options);</code></p>
<p>It comes with the following actions already defined; it is missing one though… Can you tell?</p>
<figure class="highlight javascript"><figcaption><span>$resource actions</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">&#123; <span class="string">'get'</span>:    &#123;method:<span class="string">'GET'</span>&#125;,  <span class="comment">// get individual record</span></div><div class="line">  <span class="string">'save'</span>:   &#123;method:<span class="string">'POST'</span>&#125;, <span class="comment">// create record</span></div><div class="line">  <span class="string">'query'</span>:  &#123;method:<span class="string">'GET'</span>, isArray:<span class="literal">true</span>&#125;, <span class="comment">// get list all records</span></div><div class="line">  <span class="string">'remove'</span>: &#123;method:<span class="string">'DELETE'</span>&#125;, <span class="comment">// remove record</span></div><div class="line">  <span class="string">'delete'</span>: &#123;method:<span class="string">'DELETE'</span>&#125; &#125;; <span class="comment">// same, remove record</span></div></pre></td></tr></table></figure>
<p>The instances are used in the following way (examples will come later):</p>
<ul>
<li>GET: <code>Resource.get([parameters], [success], [error])</code></li>
<li>Non-GET: <code>Resource.action([parameters], postData, [success], [error])</code></li>
<li>Non-GET: <code>resourceInstance.$action([parameters], [success], [error])</code></li>
</ul>
<p><code>$resource</code> is not part of the Angular core, so it requires to <code>ngResource</code> and the dependency. We can get it from the CDN:</p>
<figure class="highlight html"><figcaption><span>ngResource dependency</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-resource.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div></pre></td></tr></table></figure>
<p>This is what need to set it up:</p>
<figure class="highlight javascript"><figcaption><span>$resource.query()</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line">  <span class="comment">// add ngResource dependency</span></div><div class="line">  angular.module(<span class="string">'app'</span>, [<span class="string">'ngRoute'</span>, <span class="string">'ngResource'</span>])</div><div class="line"></div><div class="line">  <span class="comment">// ...</span></div><div class="line"></div><div class="line">        .factory(<span class="string">'Todos'</span>, [<span class="string">'$resource'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">$resource</span>)</span>&#123;</div><div class="line">          <span class="keyword">return</span> $resource(<span class="string">'/todos/:id'</span>, <span class="literal">null</span>, &#123;</div><div class="line">            <span class="string">'update'</span>: &#123; method:<span class="string">'PUT'</span> &#125;</div><div class="line">          &#125;);</div><div class="line">        &#125;])</div><div class="line"><span class="comment">// ...</span></div><div class="line">        .controller(<span class="string">'TodoController'</span>, [<span class="string">'$scope'</span>, <span class="string">'Todos'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">$scope, Todos</span>) </span>&#123;</div><div class="line">          $scope.todos = Todos.query();</div><div class="line">        &#125;])</div></pre></td></tr></table></figure>
<p>Angular will render an empty <code>$scope.todos</code>. but, when <code>Todos.query()</code> comes with the data from the server it will re-render the UI.</p>
<p><a href="https://github.com/amejiarosario/todoAPIjs/commit/2aff6fe004bf7f7b2cd1b91d53e6958c3b158a20" target="_blank" rel="external">diff</a></p>
<h2 id="AngularJS-Create">AngularJS Create<a href="#AngularJS-Create" class="headerlink" title="AngularJS Create"></a></h2><p>We will need to create a new text box, a button to send a <code>POST</code> request to server and add it to the <code>$scope</code>.</p>
<blockquote>
<p>We are using inline templates with <code>id=&quot;/todos.html&quot;</code> and <code>id=&quot;/todoDetails.html&quot;</code>. They are not physical files. Just <code>ng-template</code> that we create in the <a href="/blog/2014/09/28/angularjs-tutorial-for-beginners-with-nodejs-expressjs-and-mongodb/">part I</a> of these <a href="/tags/Tutorial-MEAN-Stack/">tutorial series</a>.</p>
</blockquote>
<p>Add this code at the bottom of the <code>id=&quot;/todos.html&quot;</code> template:</p>
<figure class="highlight html"><figcaption><span>New textbox for adding Todos</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">New task <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">ng-model</span>=<span class="string">"newTodo"</span>&gt;</span><span class="tag">&lt;<span class="name">button</span> <span class="attr">ng-click</span>=<span class="string">"save()"</span>&gt;</span>Create<span class="tag">&lt;/<span class="name">button</span>&gt;</span></div></pre></td></tr></table></figure>
<p>Notice that we are using a new directive <code>ng-click</code>, this one executes a function when it clicked. Angular makes sure that the behaviour is consistent across different browsers.</p>
<figure class="highlight javascript"><figcaption><span>Save function $resource.$save(...)</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line">.controller(<span class="string">'TodoController'</span>, [<span class="string">'$scope'</span>, <span class="string">'Todos'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">$scope, Todos</span>) </span>&#123;</div><div class="line">  $scope.todos = Todos.query();</div><div class="line"></div><div class="line">  $scope.save = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    <span class="keyword">if</span>(!$scope.newTodo || $scope.newTodo.length &lt; <span class="number">1</span>) <span class="keyword">return</span>;</div><div class="line">    <span class="keyword">var</span> todo = <span class="keyword">new</span> Todos(&#123; name: $scope.newTodo, completed: <span class="literal">false</span> &#125;);</div><div class="line"></div><div class="line">    todo.$save(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">      $scope.todos.push(todo);</div><div class="line">      $scope.newTodo = <span class="string">''</span>; <span class="comment">// clear textbox</span></div><div class="line">    &#125;);</div><div class="line">  &#125;</div><div class="line">&#125;])</div></pre></td></tr></table></figure>
<p><a href="https://github.com/amejiarosario/todoAPIjs/commit/46dd14023e2d9eff72d1366dbba9c9c8c872e07b" target="_blank" rel="external">diff</a></p>
<h2 id="Show-Todo-details">Show Todo details<a href="#Show-Todo-details" class="headerlink" title="Show Todo details"></a></h2><p>Every time you click a todo link, it is showing an empty fields. Let’s fix that. First we need set the real <code>_id</code> to the links instead of <code>$index</code>.</p>
<figure class="highlight html"><figcaption><span>Change the ID link in the `id="/todos.html"` template (fragment)</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">li</span> <span class="attr">ng-repeat</span>=<span class="string">"todo in todos | filter: search"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">ng-model</span>=<span class="string">"todo.completed"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#/&#123;&#123;todo._id&#125;&#125;"</span>&gt;</span>&#123;&#123;todo.name&#125;&#125;<span class="tag">&lt;/<span class="name">a</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">li</span>&gt;</span></div></pre></td></tr></table></figure>
<figure class="highlight javascript"><figcaption><span>Update TodoDetailCtrl with $resource.get</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">.controller(<span class="string">'TodoDetailCtrl'</span>, [<span class="string">'$scope'</span>, <span class="string">'$routeParams'</span>, <span class="string">'Todos'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">$scope, $routeParams, Todos</span>) </span>&#123;</div><div class="line">  $scope.todo = Todos.get(&#123;id: $routeParams.id &#125;);</div><div class="line">&#125;])</div></pre></td></tr></table></figure>
<p>Notice the change from
<code>$scope.todo = Todos[$routeParams.id];</code>
to
<code>$scope.todo = Todos.get({id: $routeParams.id });</code></p>
<p>Now you should be able to see the details :)</p>
<p><a href="https://github.com/amejiarosario/todoAPIjs/commit/2484107294163a25621fba3785601adb32229ae9" target="_blank" rel="external">diff</a></p>
<h2 id="AngularJS-Update-in-line-editing">AngularJS Update (in-line editing)<a href="#AngularJS-Update-in-line-editing" class="headerlink" title="AngularJS Update (in-line editing)"></a></h2><p>This is going to be a very cool feature. Let’s meet these new directives:</p>
<ul>
<li><p><strong>ng-show</strong>: this directive shows the element if the expression evaluates to true. Otherwise, the content is hidden.</p>
</li>
<li><p><strong>ng-change</strong>: directive for input elements that evaluates the expression after any change.</p>
</li>
</ul>
<p>Replace the template with <code>id=&quot;/todos.html&quot;</code> with the following:</p>
<figure class="highlight html"><figcaption><span>Template todos.html</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line"><span class="comment">&lt;!-- Template --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/ng-template"</span> <span class="attr">id</span>=<span class="string">"/todos.html"</span>&gt;</span><span class="xml"></span></div><div class="line">  Search: <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">ng-model</span>=<span class="string">"search.name"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">ul</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">ng-repeat</span>=<span class="string">"todo in todos | filter: search"</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">ng-model</span>=<span class="string">"todo.completed"</span> <span class="attr">ng-change</span>=<span class="string">"update($index)"</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">a</span> <span class="attr">ng-show</span>=<span class="string">"!editing[$index]"</span> <span class="attr">href</span>=<span class="string">"#/&#123;&#123;todo._id&#125;&#125;"</span>&gt;</span>&#123;&#123;todo.name&#125;&#125;<span class="tag">&lt;/<span class="name">a</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">button</span> <span class="attr">ng-show</span>=<span class="string">"!editing[$index]"</span> <span class="attr">ng-click</span>=<span class="string">"edit($index)"</span>&gt;</span>edit<span class="tag">&lt;/<span class="name">button</span>&gt;</span></div><div class="line"></div><div class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">ng-show</span>=<span class="string">"editing[$index]"</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">ng-model</span>=<span class="string">"todo.name"</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">button</span> <span class="attr">ng-show</span>=<span class="string">"editing[$index]"</span> <span class="attr">ng-click</span>=<span class="string">"update($index)"</span>&gt;</span>Update<span class="tag">&lt;/<span class="name">button</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">button</span> <span class="attr">ng-show</span>=<span class="string">"editing[$index]"</span> <span class="attr">ng-click</span>=<span class="string">"cancel($index)"</span>&gt;</span>Cancel<span class="tag">&lt;/<span class="name">button</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></div><div class="line">  New task <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">ng-model</span>=<span class="string">"newTodo"</span>&gt;</span><span class="tag">&lt;<span class="name">button</span> <span class="attr">ng-click</span>=<span class="string">"save()"</span>&gt;</span>Create<span class="tag">&lt;/<span class="name">button</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div></pre></td></tr></table></figure>
<p>Now let’s change the controller to handle the inline editing:</p>
<figure class="highlight javascript"><figcaption><span>Todo Controller</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div></pre></td><td class="code"><pre><div class="line">.controller(<span class="string">'TodoController'</span>, [<span class="string">'$scope'</span>, <span class="string">'Todos'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">$scope, Todos</span>) </span>&#123;</div><div class="line">  $scope.editing = [];</div><div class="line">  $scope.todos = Todos.query();</div><div class="line"></div><div class="line">  $scope.save = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    <span class="keyword">if</span>(!$scope.newTodo || $scope.newTodo.length &lt; <span class="number">1</span>) <span class="keyword">return</span>;</div><div class="line">    <span class="keyword">var</span> todo = <span class="keyword">new</span> Todos(&#123; name: $scope.newTodo, completed: <span class="literal">false</span> &#125;);</div><div class="line"></div><div class="line">    todo.$save(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">      $scope.todos.push(todo);</div><div class="line">      $scope.newTodo = <span class="string">''</span>; <span class="comment">// clear textbox</span></div><div class="line">    &#125;);</div><div class="line">  &#125;</div><div class="line"></div><div class="line">  $scope.update = <span class="function"><span class="keyword">function</span>(<span class="params">index</span>)</span>&#123;</div><div class="line">    <span class="keyword">var</span> todo = $scope.todos[index];</div><div class="line">    Todos.update(&#123;id: todo._id&#125;, todo);</div><div class="line">    $scope.editing[index] = <span class="literal">false</span>;</div><div class="line">  &#125;</div><div class="line"></div><div class="line">  $scope.edit = <span class="function"><span class="keyword">function</span>(<span class="params">index</span>)</span>&#123;</div><div class="line">    $scope.editing[index] = angular.copy($scope.todos[index]);</div><div class="line">  &#125;</div><div class="line"></div><div class="line">  $scope.cancel = <span class="function"><span class="keyword">function</span>(<span class="params">index</span>)</span>&#123;</div><div class="line">    $scope.todos[index] = angular.copy($scope.editing[index]);</div><div class="line">    $scope.editing[index] = <span class="literal">false</span>;</div><div class="line">  &#125;</div><div class="line">&#125;])</div></pre></td></tr></table></figure>
<p>We added a new variable <code>$scope.editing</code> which shows or hides the form to edit the values. Furthermore, notice ng-click functions: edit, update and cancel.</p>
<blockquote>
<p>Let’s see what they do. Try it out!</p>
</blockquote>
<p>While were are editing notice that we copy the original todo task into the editing variable. This server for two purposes:</p>
<ol>
<li><p>It evaluates to <code>true</code> and show the forms with <code>ng-show</code></p>
</li>
<li><p>It holds a copy of the original value in case we press cancel.</p>
</li>
</ol>
<p>Now, going to the Todo Details. We would like that to be updated as well and add notes.</p>
<figure class="highlight html"><figcaption><span>Todo Details</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/ng-template"</span> <span class="attr">id</span>=<span class="string">"/todoDetails.html"</span>&gt;</span><span class="xml"></span></div><div class="line">  <span class="tag">&lt;<span class="name">h1</span>&gt;</span>&#123;&#123; todo.name &#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></div><div class="line">  completed: <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">ng-model</span>=<span class="string">"todo.completed"</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>&gt;</span></div><div class="line">  note: <span class="tag">&lt;<span class="name">textarea</span> <span class="attr">ng-model</span>=<span class="string">"todo.note"</span>&gt;</span><span class="tag">&lt;/<span class="name">textarea</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>&gt;</span></div><div class="line"></div><div class="line">  <span class="tag">&lt;<span class="name">button</span> <span class="attr">ng-click</span>=<span class="string">"update()"</span>&gt;</span>Update<span class="tag">&lt;/<span class="name">button</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"/"</span>&gt;</span>Cancel<span class="tag">&lt;/<span class="name">a</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div></pre></td></tr></table></figure>
<p>Similarly, we added an update method. However, this time we do not need to pass any index, since it is just one todo at a time. After it has been saved, it goes back to root path <code>/</code>.</p>
<figure class="highlight javascript"><figcaption><span>TodoDetailCtrl controller</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line">.controller(<span class="string">'TodoDetailCtrl'</span>, [<span class="string">'$scope'</span>, <span class="string">'$routeParams'</span>, <span class="string">'Todos'</span>, <span class="string">'$location'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">$scope, $routeParams, Todos, $location</span>) </span>&#123;</div><div class="line">  $scope.todo = Todos.get(&#123;id: $routeParams.id &#125;);</div><div class="line"></div><div class="line">  $scope.update = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    Todos.update(&#123;id: $scope.todo._id&#125;, $scope.todo, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">      $location.url(<span class="string">'/'</span>);</div><div class="line">    &#125;);</div><div class="line">  &#125;</div><div class="line">&#125;])</div></pre></td></tr></table></figure>
<blockquote>
<p>Awesome! Time to check it out in the browser!</p>
</blockquote>
<p><code>$location.url([url])</code> is a getter/setter method that allows us to change url, thus routing/view.</p>
<p><a href="https://github.com/amejiarosario/todoAPIjs/commit/b6394448e1e1e8384815877df764507d6562dc4d" target="_blank" rel="external">diff</a></p>
<h2 id="AngularJS-Delete">AngularJS Delete<a href="#AngularJS-Delete" class="headerlink" title="AngularJS Delete"></a></h2><p>These are the changes added to perform the remove functionality:</p>
<p>A. Add removes button in the <code>li</code> element:
<figure class="highlight html"><figcaption><span>todos.html Template</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">ng-show</span>=<span class="string">"!editing[$index]"</span> <span class="attr">ng-click</span>=<span class="string">"remove($index)"</span>&gt;</span>remove<span class="tag">&lt;/<span class="name">button</span>&gt;</span></div></pre></td></tr></table></figure></p>
<p>Do the same for the details Template</p>
<figure class="highlight html"><figcaption><span>todoDetails.html Template</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">ng-click</span>=<span class="string">"remove()"</span>&gt;</span>Remove<span class="tag">&lt;/<span class="name">button</span>&gt;</span></div></pre></td></tr></table></figure>
<p>B. Add remove functionality in the controllers
<figure class="highlight javascript"><figcaption><span>TodoController</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">$scope.remove = <span class="function"><span class="keyword">function</span>(<span class="params">index</span>)</span>&#123;</div><div class="line">  <span class="keyword">var</span> todo = $scope.todos[index];</div><div class="line">  Todos.remove(&#123;id: todo._id&#125;, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    $scope.todos.splice(index, <span class="number">1</span>);</div><div class="line">  &#125;);</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>And also in the details controllers</p>
<figure class="highlight javascript"><figcaption><span>todoDetails controller</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">$scope.remove = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">  Todos.remove(&#123;id: $scope.todo._id&#125;, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    $location.url(<span class="string">'/'</span>);</div><div class="line">  &#125;);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>When we remove elements from the todos array <code>$scope.todos.splice(index, 1)</code> they also disappear from the DOM. Very cool, huh?</p>
<p><a href="https://github.com/amejiarosario/todoAPIjs/commit/b9ff3a863c78d72e71b5cc9eb573bb3cb9d87179" target="_blank" rel="external">diff</a></p>
<blockquote>
<p><strong>Congratulations! You are now a MEAN developer!</strong></p>
</blockquote>
<h1 id="What’s-next">What’s next?<a href="#What’s-next" class="headerlink" title="What’s next?"></a></h1><p>Learn how to use GruntJS to automate repetitive tasks in your MEAN Stack workflow.</p>
<p><a href="/blog/2014/10/07/grunt-js-tutorial-from-beginner-to-ninja/">GruntJS Tutorial</a></p>
<p>Also, you can learn more about full-stack framework solutions.</p>
<h2 id="Full-Stack-Javascript-Web-Frameworks">Full-Stack Javascript Web Frameworks<a href="#Full-Stack-Javascript-Web-Frameworks" class="headerlink" title="Full-Stack Javascript Web Frameworks"></a></h2><p>What we did in these three series tutorial could have been done with just few keystrokes in the comamnd line ;). However, it’s good to know what’s going on. But at this point you do. So, I will introduce you to some frameworks that can save you a lot of time.</p>
<p><strong>Using MEAN.io</strong></p>
<p><a href="http://mean.io" target="_blank" rel="external">MeanIO</a> uses a customized CLI tool: ‘mean’. Its approach for modularity is leaned towards self-contained packages that have code for both client and server files. At moment of writing this, it has nine packages ranging from MEAN-Admin, Translation, file uploads, image crop and more.</p>
<p><strong>Using MEAN.js</strong></p>
<p><a href="http://meanjs.org/" target="_blank" rel="external">MeanJS</a> it is a fork from the creator of MEAN.IO, it uses Yeoman generators to generate Angular’s CRUD modules, routes, controllers, views, services, and more. Also has generators for Express: models, controllers, routes and tests. It has excellent documentation.</p>
<h2 id="Others-Frameworks-to-look-at">Others Frameworks to look at<a href="#Others-Frameworks-to-look-at" class="headerlink" title="Others Frameworks to look at"></a></h2><ul>
<li><a href="https://www.meteor.com/" target="_blank" rel="external">Meteor</a> - Meteor is an open-source platform for building top-quality web apps in a fraction of the time, whether you’re an expert developer or just getting started.</li>
<li><a href="http://sailsjs.org/" target="_blank" rel="external">Sails</a> - The web framework of your dreams.
for your next web application.</li>
<li><a href="https://developer.yahoo.com/cocktails/mojito/" target="_blank" rel="external">Yahoo! Mojito</a> - A JavaScript MVC framework for mobile applications, one of the Yahoo! Cocktails.</li>
<li><a href="http://towerjs.org" target="_blank" rel="external">Tower.js</a> - Small components for building apps, manipulating data, and automating a distributed infrastructure.</li>
</ul>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;We are going to build a full stack Todo App using the MEAN (MongoDB, ExpressJS, AngularJS and NodeJS). This is the last part of &lt;a href=&quot;/tags/Tutorial-MEAN-Stack/&quot;&gt;three-post series tutorial&lt;/a&gt;.&lt;/p&gt;
    
    </summary>
    
      <category term="Technologies" scheme="http://adrianmejia.com/categories/Technologies/"/>
    
      <category term="Web Development" scheme="http://adrianmejia.com/categories/Technologies/Web-Development/"/>
    
    
      <category term="javascript" scheme="http://adrianmejia.com/tags/javascript/"/>
    
      <category term="Tutorial_MEAN-Stack" scheme="http://adrianmejia.com/tags/Tutorial-MEAN-Stack/"/>
    
      <category term="angularjs" scheme="http://adrianmejia.com/tags/angularjs/"/>
    
      <category term="mean stack" scheme="http://adrianmejia.com/tags/mean-stack/"/>
    
  </entry>
  
  <entry>
    <title>Creating RESTful APIs with NodeJS and MongoDB Tutorial (Part II)</title>
    <link href="http://adrianmejia.com/blog/2014/10/01/creating-a-restful-api-tutorial-with-nodejs-and-mongodb/"/>
    <id>http://adrianmejia.com/blog/2014/10/01/creating-a-restful-api-tutorial-with-nodejs-and-mongodb/</id>
    <published>2014-10-01T21:26:42.000Z</published>
    <updated>2016-08-06T22:26:37.000Z</updated>
    
    <content type="html"><![CDATA[<p>Welcome to this RESTful API using Node.js (Express.js) and MongoDB (mongoose) tutorial! We are going to learn how to install and use each component individually and then proceed to create a RESTful API.</p>
<a id="more"></a>
<h1 id="What-is-a-RESTful-API">What is a RESTful API?<a href="#What-is-a-RESTful-API" class="headerlink" title="What is a RESTful API?"></a></h1><p>REST stands for Representational State Transfer. It is an architecture that allows <code>client-server</code> communication through a uniform interface. They are also <code>stateless</code>, <code>cachable</code> and has property called <code>idempotence</code>. It means that the side effect of identical requests have the same effect as the same single request.</p>
<p>HTTP RESTful API’s are compose of:</p>
<ul>
<li>HTTP methods, e.g. GET, PUT, DELETE, PATCH, POST, …</li>
<li>Base URI, e.g. <code>http://adrianmejia.com</code></li>
<li>URL path, e.g. <code>/blog/2014/10/01/creating-a-restful-api-tutorial-with-nodejs-and-mongodb/</code></li>
<li>Media type, e.g. <code>html</code>, <code>JSON</code>, <code>XML</code>, <code>Microformats</code>, <code>Atom</code>, <code>Images</code>…</li>
</ul>
<p>Here’s is a summary what we want to implement:</p>
<table>
<thead>
<tr>
<th>Resource (URI)</th>
<th>POST (create)</th>
<th>GET (read)</th>
<th>PUT (update)</th>
<th>DELETE (destroy)</th>
</tr>
</thead>
<tbody>
<tr>
<td>/todos</td>
<td>create new task</td>
<td>list tasks</td>
<td>N/A (update all)</td>
<td>N/A (destroy all)</td>
</tr>
<tr>
<td>/todos/1</td>
<td>error</td>
<td>show task ID 1</td>
<td>update task ID 1</td>
<td>destroy task ID 1</td>
</tr>
</tbody>
</table>
<p><strong>NOTE</strong> for this tutorial:</p>
<ul>
<li>Format will be JSON.</li>
<li>Bulk updates and bulk destroys are not safe, so we will not be implementing those.</li>
<li><strong>CRUD</strong> functionality: POST == <strong>C</strong>REATE, GET == <strong>R</strong>EAD, PUT == <strong>U</strong>PDATE, DELETE == <strong>D</strong>ELETE.</li>
</ul>
<h1 id="Installing-the-MEAN-Stack-Backend">Installing the MEAN Stack Backend<a href="#Installing-the-MEAN-Stack-Backend" class="headerlink" title="Installing the MEAN Stack Backend"></a></h1><p>In this section, we are going to install the backend components of the MEAN stack: MongoDB, NodeJS and ExpressJS. If you already are familiar with them, then jump to <a href="#wiring-up-the-mean-stack">wiring the stack</a>. Otherwise, enjoy the ride!</p>
<h2 id="Installing-MongoDB">Installing MongoDB<a href="#Installing-MongoDB" class="headerlink" title="Installing MongoDB"></a></h2><p>MongoDB is a document-oriented NoSQL database (Big Data ready). It stores data in JSON-like format and allows to perform SQL-like queries against it.</p>
<p>You can installed following the <a href="http://docs.mongodb.org/manual/installation/" target="_blank">instructions here</a>.</p>
<p>If you have a <strong>Mac</strong> and <a href="http://brew.sh/" target="_blank">brew</a> it’s just:</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">brew install mongodb &amp;&amp; mongod</div></pre></td></tr></table></figure>
<p>In <strong>Ubuntu</strong>:</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">sudo apt-get -y install mongodb</div></pre></td></tr></table></figure>
<p>After you have them installed, check version as follows:</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># Mac</span></div><div class="line">mongod --version</div><div class="line"><span class="comment"># =&gt; db version v2.6.4</span></div><div class="line"><span class="comment"># =&gt; 2014-10-01T19:07:26.649-0400 git version: nogitversion</span></div><div class="line"></div><div class="line"><span class="comment"># Ubuntu</span></div><div class="line">mongod --version</div><div class="line"><span class="comment"># =&gt; db version v2.0.4, pdfile version 4.5</span></div><div class="line"><span class="comment"># =&gt; Wed Oct  1 23:06:54 git version: nogitversion</span></div></pre></td></tr></table></figure>
<h2 id="Installing-NodeJS">Installing NodeJS<a href="#Installing-NodeJS" class="headerlink" title="Installing NodeJS"></a></h2><p>The Node official definition is:</p>
<blockquote><p>Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js’ package ecosystem, npm, is the largest ecosystem of open source libraries in the world.</p>
<footer><strong>Node.js Website</strong><cite><a href="https://nodejs.org" target="_blank" rel="external">nodejs.org</a></cite></footer></blockquote>
<p>In short, NodeJS allows you to run Javascript outside the browser, in this case, on the web server. <abbr title="Node Package Manager">NPM</abbr> allows you to install/publish node packages with ease.</p>
<p>To install it, you can go to <a href="http://nodejs.org/" target="_blank">NodeJS Website</a>.</p>
<p>Since Node versions changes very often. You can use the <abbr title="Node Version Manager">NVM</abbr> (Node Version Manager) on <strong>Ubuntu</strong> and Mac with:</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># download NPM</span></div><div class="line">curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.4/install.sh | bash</div><div class="line"></div><div class="line"><span class="comment"># load NPM</span></div><div class="line"><span class="built_in">export</span> NVM_DIR=<span class="string">"<span class="variable">$HOME</span>/.nvm"</span></div><div class="line">[ <span class="_">-s</span> <span class="string">"<span class="variable">$NVM_DIR</span>/nvm.sh"</span> ] &amp;&amp; . <span class="string">"<span class="variable">$NVM_DIR</span>/nvm.sh"</span> <span class="comment"># This loads nvm</span></div><div class="line"></div><div class="line"><span class="comment"># Install latest stable version</span></div><div class="line">nvm install stable</div></pre></td></tr></table></figure>
<p>Check out <a href="https://github.com/creationix/nvm" target="_blank">https://github.com/creationix/nvm</a> for more details.</p>
<p>Also, on <strong>Mac</strong> and <a href="http://brew.sh" target="_blank">brew</a> you can do:</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">brew install nodejs</div></pre></td></tr></table></figure>
<p>After you got it installed, check node version and npm (node package manager) version:
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">node -v</div><div class="line"><span class="comment"># =&gt; v6.2.2</span></div><div class="line"></div><div class="line">npm -v</div><div class="line"><span class="comment"># =&gt; 3.9.5</span></div></pre></td></tr></table></figure></p>
<h2 id="Installing-ExpressJS">Installing ExpressJS<a href="#Installing-ExpressJS" class="headerlink" title="Installing ExpressJS"></a></h2><p>ExpressJS is web application framework that runs on NodeJS. Allows you to build web applications and APIs endpoints (mode details later).</p>
<p>We are going to create a project folder first, and then add <code>express</code> as a dependency.
Let’s use <abbr title="Node Package Manager">NPM</abbr> init command to get us started.</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># create project folder</span></div><div class="line">mkdir todo-app</div><div class="line"></div><div class="line"><span class="comment"># move to the folder and initialize the project</span></div><div class="line"><span class="built_in">cd</span> todo-app</div><div class="line">npm init .  <span class="comment"># press enter multiple times to accept all defaults</span></div><div class="line"></div><div class="line"><span class="comment"># install express v4.14 and save it as dependency</span></div><div class="line">npm install express@4.14 --save</div></pre></td></tr></table></figure>
<p>Notice that after the last command, <code>express</code> should be added to package.json with the version <code>4.14.x</code>.</p>
<h1 id="Using-MongoDB-with-Mongoose">Using MongoDB with Mongoose<a href="#Using-MongoDB-with-Mongoose" class="headerlink" title="Using MongoDB with Mongoose"></a></h1><p>Mongoose is an <abbr title="Node Package Manager">NPM</abbr> package that allows to interact with MongoDB. You can install it as follows:</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">npm install mongoose@4.5.8 --save</div></pre></td></tr></table></figure>
<p>If follow the previous steps you should have all you need to complete this tutorial. We are going to build an API that allow users to CRUD (Create-Read-Update-Delete) Todo tasks from database.</p>
<h2 id="Mongoose-CRUD">Mongoose CRUD<a href="#Mongoose-CRUD" class="headerlink" title="Mongoose CRUD"></a></h2><p>CRUD == <strong>C</strong>reate-<strong>R</strong>ead-<strong>U</strong>pdate-<strong>D</strong>elete</p>
<p>We are going to create, read, update and delete data from MongoDB using Mongoose/Node. First, you need to have mongodb up and running:</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># run mongo daemon</span></div><div class="line">mongod</div></pre></td></tr></table></figure>
<p>Keep mongo running in a terminal window and while in the folder <code>todoApp</code> type <code>node</code> to enter in the node CLI. Then:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// Load mongoose package</span></div><div class="line"><span class="keyword">var</span> mongoose = <span class="built_in">require</span>(<span class="string">'mongoose'</span>);</div><div class="line"></div><div class="line"><span class="comment">// Connect to MongoDB and create/use database called todoAppTest</span></div><div class="line">mongoose.connect(<span class="string">'mongodb://localhost/todoAppTest'</span>);</div><div class="line"></div><div class="line"><span class="comment">// Create a schema</span></div><div class="line"><span class="keyword">var</span> TodoSchema = <span class="keyword">new</span> mongoose.Schema(&#123;</div><div class="line">  name: <span class="built_in">String</span>,</div><div class="line">  completed: <span class="built_in">Boolean</span>,</div><div class="line">  note: <span class="built_in">String</span>,</div><div class="line">  updated_at: &#123; type: <span class="built_in">Date</span>, <span class="keyword">default</span>: <span class="built_in">Date</span>.now &#125;,</div><div class="line">&#125;);</div><div class="line"></div><div class="line"><span class="comment">// Create a model based on the schema</span></div><div class="line"><span class="keyword">var</span> Todo = mongoose.model(<span class="string">'Todo'</span>, TodoSchema);</div></pre></td></tr></table></figure>
<p>Great! Now, let’s test that we can save and edit data.</p>
<h2 id="Mongoose-Create">Mongoose Create<a href="#Mongoose-Create" class="headerlink" title="Mongoose Create"></a></h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"></div><div class="line"><span class="comment">// Create a todo in memory</span></div><div class="line"><span class="keyword">var</span> todo = <span class="keyword">new</span> Todo(&#123;name: <span class="string">'Master NodeJS'</span>, completed: <span class="literal">false</span>, note: <span class="string">'Getting there...'</span>&#125;);</div><div class="line"></div><div class="line"><span class="comment">// Save it to database</span></div><div class="line">todo.save(<span class="function"><span class="keyword">function</span>(<span class="params">err</span>)</span>&#123;</div><div class="line">  <span class="keyword">if</span>(err)</div><div class="line">    <span class="built_in">console</span>.log(err);</div><div class="line">  <span class="keyword">else</span></div><div class="line">    <span class="built_in">console</span>.log(todo);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p>If you take a look to Mongo you will notice that we just created an entry. You can easily visualize data using <a href="https://robomongo.org/" target="_blank">Robomongo</a>:</p>
<img src="http://i.imgur.com/DI6Vxwq.png" title="Viewing data with Robomongo">
<p>You can also build the object and save in one step using <code>create</code>:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">Todo.create(&#123;name: <span class="string">'Create something with Mongoose'</span>, completed: <span class="literal">true</span>, note: <span class="string">'this is one'</span>&#125;, <span class="function"><span class="keyword">function</span>(<span class="params">err, todo</span>)</span>&#123;</div><div class="line">  <span class="keyword">if</span>(err) <span class="built_in">console</span>.log(err);</div><div class="line">  <span class="keyword">else</span> <span class="built_in">console</span>.log(todo);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h2 id="Mongoose-Read-and-Query">Mongoose Read and Query<a href="#Mongoose-Read-and-Query" class="headerlink" title="Mongoose Read and Query"></a></h2><p>So far we have been able to save data, now we are going explore how to query the information.
There are multiple options for reading/querying data:</p>
<ul>
<li>Model.find(conditions, [fields], [options], [callback])</li>
<li>Model.findById(id, [fields], [options], [callback])</li>
<li>Model.findOne(conditions, [fields], [options], [callback])</li>
</ul>
<p>Some examples:</p>
<figure class="highlight javascript"><figcaption><span>Find all</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// Find all data in the Todo collection</span></div><div class="line">Todo.find(<span class="function"><span class="keyword">function</span> (<span class="params">err, todos</span>) </span>&#123;</div><div class="line">  <span class="keyword">if</span> (err) <span class="keyword">return</span> <span class="built_in">console</span>.error(err);</div><div class="line">  <span class="built_in">console</span>.log(todos)</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p>The result is something like this:
<figure class="highlight plain"><figcaption><span>results</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line">[ &#123; _id: 57a6116427f107adef36c2f2,</div><div class="line">    name: &apos;Master NodeJS&apos;,</div><div class="line">    completed: false,</div><div class="line">    note: &apos;Getting there...&apos;,</div><div class="line">    __v: 0,</div><div class="line">    updated_at: 2016-08-06T16:33:40.606Z &#125;,</div><div class="line">  &#123; _id: 57a6142127f107adef36c2f3,</div><div class="line">    name: &apos;Create something with Mongoose&apos;,</div><div class="line">    completed: true,</div><div class="line">    note: &apos;this is one&apos;,</div><div class="line">    __v: 0,</div><div class="line">    updated_at: 2016-08-06T16:45:21.143Z &#125; ]</div></pre></td></tr></table></figure></p>
<p>You can also add queries</p>
<figure class="highlight javascript"><figcaption><span>Find with queries</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// callback function to avoid duplicating it all over</span></div><div class="line"><span class="keyword">var</span> callback = <span class="function"><span class="keyword">function</span> (<span class="params">err, data</span>) </span>&#123;</div><div class="line">  <span class="keyword">if</span> (err) &#123; <span class="keyword">return</span> <span class="built_in">console</span>.error(err); &#125;</div><div class="line">  <span class="keyword">else</span> &#123; <span class="built_in">console</span>.log(data); &#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="comment">// Get ONLY completed tasks</span></div><div class="line">Todo.find(&#123;completed: <span class="literal">true</span> &#125;, callback);</div><div class="line"></div><div class="line"><span class="comment">// Get all tasks ending with `JS`</span></div><div class="line">Todo.find(&#123;name: <span class="regexp">/JS$/</span> &#125;, callback);</div></pre></td></tr></table></figure>
<p>You can chain multiple queries, e.g.:</p>
<figure class="highlight javascript"><figcaption><span>Chaining queries</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> oneYearAgo = <span class="keyword">new</span> <span class="built_in">Date</span>();</div><div class="line">oneYearAgo.setYear(oneYearAgo.getFullYear() - <span class="number">1</span>);</div><div class="line"></div><div class="line"><span class="comment">// Get all tasks staring with `Master`, completed</span></div><div class="line">Todo.find(&#123;name: <span class="regexp">/^Master/</span>, completed: <span class="literal">true</span> &#125;, callback);</div><div class="line"></div><div class="line"><span class="comment">// Get all tasks staring with `Master`, not completed and created from year ago to now...</span></div><div class="line">Todo.find(&#123;name: <span class="regexp">/^Master/</span>, completed: <span class="literal">false</span> &#125;).where(<span class="string">'updated_at'</span>).gt(oneYearAgo).exec(callback);</div></pre></td></tr></table></figure>
<p>MongoDB query language is very powerful. We can combine regular expressions, date comparison and more!</p>
<h2 id="Mongoose-Update">Mongoose Update<a href="#Mongoose-Update" class="headerlink" title="Mongoose Update"></a></h2><p>Moving on, we are now going to explore how to update data.
Each model has an <code>update</code> method which accepts multiple queries, the first one is the find query and the second one is the update fields.</p>
<ul>
<li>Model.update(conditions, update, [options], [callback])</li>
<li>Model.findByIdAndUpdate(id, [update], [options], [callback])</li>
<li>Model.findOneAndUpdate([conditions], [update], [options], [callback])</li>
</ul>
<p>Alternatively, the method <code>findOneAndUpdate</code> could be used to update just one and return an object.</p>
<figure class="highlight javascript"><figcaption><span>Todo.update and Todo.findOneAndUpdate</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"></div><div class="line"><span class="comment">// Model.update(conditions, update, [options], [callback])</span></div><div class="line"><span class="comment">// update `multi`ple tasks from complete false to true</span></div><div class="line"></div><div class="line">Todo.update(&#123; name: <span class="regexp">/master/i</span> &#125;, &#123; completed: <span class="literal">true</span> &#125;, &#123; multi: <span class="literal">true</span> &#125;, callback);</div><div class="line"></div><div class="line"><span class="comment">//Model.findOneAndUpdate([conditions], [update], [options], [callback])</span></div><div class="line">Todo.findOneAndUpdate(&#123;name: <span class="regexp">/JS$/</span> &#125;, &#123;completed: <span class="literal">false</span>&#125;, callback);</div></pre></td></tr></table></figure>
<p>As you might noticed the batch updates (<code>multi: true</code>) doesn’t show the data, rather shows the number of fields that were modified.</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">&#123; ok: <span class="number">1</span>, nModified: <span class="number">1</span>, n: <span class="number">1</span> &#125;</div></pre></td></tr></table></figure>
<p>Here is what they mean:</p>
<ul>
<li><code>n</code> means the number of records that matches the query</li>
<li><code>nModified</code> represents the number of documents that were modified with update query.</li>
</ul>
<h2 id="Mongoose-Delete">Mongoose Delete<a href="#Mongoose-Delete" class="headerlink" title="Mongoose Delete"></a></h2><p><code>update</code> and <code>remove</code> mongoose API are identical, the only difference it is that no elements are returned. Try it on your own ;)</p>
<ul>
<li>Model.remove(conditions, [callback])</li>
<li>Model.findByIdAndRemove(id, [options], [callback])</li>
<li>Model.findOneAndRemove(conditions, [options], [callback])</li>
</ul>
<h1 id="ExpressJS-and-Middlewares">ExpressJS and Middlewares<a href="#ExpressJS-and-Middlewares" class="headerlink" title="ExpressJS and Middlewares"></a></h1><p>ExpressJS is a complete web framework solution. It has HTML template solutions (jade, ejs, handlebars, hogan.js) and CSS precompilers (less, stylus, compass). Through middlewares layers, it handles: cookies, sessions, caching, CSRF, compression and many more.</p>
<p><strong>Middlewares</strong> are pluggable processors that runs on each request made to the server. You can have any number of middlewares that will process the request one by one in a serial fashion. Some middlewares might alter the request input. Others, might create log outputs, add data and pass it to the <code>next()</code> middleware in the chain.</p>
<p>We can use the middlewares using <code>app.use</code>. That will apply for all request. If you want to be more specific, you can use <code>app.verb</code>. For instance: app.get, app.delete, app.post, app.update, …</p>
<p><img src="/images/express-middlewares.png" alt="ExpressJS Middlewares"></p>
<p>Let’s give some examples of middlewares to drive the point home.</p>
<p>Say you want to log the IP of the client on each request:</p>
<figure class="highlight javascript"><figcaption><span>Log the client IP on every request</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">app.use(<span class="function"><span class="keyword">function</span> (<span class="params">req, res, next</span>) </span>&#123;</div><div class="line">  <span class="keyword">var</span> ip = req.headers[<span class="string">'x-forwarded-for'</span>] || req.connection.remoteAddress;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'Client IP:'</span>, ip);</div><div class="line">  next();</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p>Notice that each middleware has 3 parameters:</p>
<ul>
<li><code>req</code>: contain all the requests objects like URLs, path, …</li>
<li><code>res</code>: is the response object where we can send the reply back to the client.</li>
<li><code>next</code>: continue with the next middleware in the chain.</li>
</ul>
<p>You can also specify a path that you want the middleware to activate on.</p>
<figure class="highlight javascript"><figcaption><span>Middleware mounted on "/todos/:id" and log the request method</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">app.use(<span class="string">'/todos/:id'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">req, res, next</span>) </span>&#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'Request Type:'</span>, req.method);</div><div class="line">  next();</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p>And finally you can use <code>app.get</code> to catch GET request with matching route, reply the request with a <code>response.send</code> and end the middleware chain. Let’s use what we learned on <a href="#mongoose-read-and-query">mongoose read</a> to reply with a user data matching the <code>id</code>.</p>
<figure class="highlight javascript"><figcaption><span>Middleware mounted on "/todos/:id" and returns</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">app.get(<span class="string">'/todos/:id'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">req, res, next</span>) </span>&#123;</div><div class="line">  Todo.findById(req.params.id, <span class="function"><span class="keyword">function</span>(<span class="params">err, todo</span>)</span>&#123;</div><div class="line">    <span class="keyword">if</span>(err) res.send(err);</div><div class="line">    res.json(todo);</div><div class="line">  &#125;);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p>Notice that all previous middlewares called <code>next()</code> except this last one, because it sends a respond (in JSON) to the client with the requeste <code>todo</code> data.</p>
<p>Hopefully, you don’t have to develop a bunch of middlewares besides routes, since ExpressJS has a bunch of middlewares available.</p>
<h2 id="Default-Express-4-0-middlewares">Default Express 4.0 middlewares<a href="#Default-Express-4-0-middlewares" class="headerlink" title="Default Express 4.0 middlewares"></a></h2><ul>
<li><p><a href="https://github.com/expressjs/morgan" target="_blank">morgan</a>: logger</p>
</li>
<li><p><a href="https://github.com/expressjs/body-parser" target="_blank">body-parser</a>: parse the body so you can access parameters in requests in <code>req.body</code>. e.g. <code>req.body.name</code>.</p>
</li>
<li><p><a href="https://github.com/expressjs/cookie-parser" target="_blank">cookie-parser</a>: parse the cookies so you can access parameters in cookies <code>req.cookies</code>. e.g. <code>req.cookies.name</code>.</p>
</li>
<li><p><a href="https://github.com/expressjs/serve-favicon" target="_blank">serve-favicon</a>: exactly that, serve favicon from route <code>/favicon.ico</code>. Should be call on the top before any other routing/middleware takes place to avoids unnecessary parsing.</p>
</li>
</ul>
<h2 id="Other-ExpressJS-Middlewares">Other ExpressJS Middlewares<a href="#Other-ExpressJS-Middlewares" class="headerlink" title="Other ExpressJS Middlewares"></a></h2><p>The following middlewares are not added by default, but It’s nice to know they exist at least:</p>
<ul>
<li><p><a href="https://github.com/expressjs/compression" target="_blank">compression</a>: compress all request. e.g. <code>app.use(compression())</code></p>
</li>
<li><p><a href="https://github.com/expressjs/session" target="_blank">session</a>: create sessions. e.g. <code>app.use(session({secret: &#39;Secr3t&#39;}))</code></p>
</li>
<li><p><a href="https://github.com/expressjs/method-override" target="_blank">method-override</a>: <code>app.use(methodOverride(&#39;_method&#39;))</code> Override methods to the one specified on the <code>_method</code> param. e.g. <code>GET /resource/1?_method=DELETE</code> will become <code>DELETE /resource/1</code>.</p>
</li>
<li><p><a href="https://github.com/expressjs/response-time" target="_blank">response-time</a>: <code>app.use(responseTime())</code> adds <code>X-Response-Time</code> header to responses.</p>
</li>
<li><p><a href="https://github.com/expressjs/errorhandler" target="_blank">errorhandler</a>: Aid development, by sending full error stack traces to the client when an error occurs. <code>app.use(errorhandler())</code>. It is good practice to surround it with an if statement to check <code>process.env.NODE_ENV === &#39;development&#39;</code>.</p>
</li>
<li><p><a href="https://github.com/expressjs/vhost" target="_blank">vhost</a>: Allows you to use different stack of middlewares depending on the request <code>hostname</code>. e.g. <code>app.use(vhost(&#39;*.user.local&#39;, userapp))</code> and <code>app.use(vhost(&#39;assets-*.example.com&#39;, staticapp))</code> where <code>userapp</code> and <code>staticapp</code> are different express instances with different middlewares.</p>
</li>
<li><p><a href="https://github.com/expressjs/csurf" target="_blank">csurf</a>: Adds a <strong>C</strong>ross-<strong>s</strong>ite <strong>r</strong>equest <strong>f</strong>orgery (CSRF) protection by adding a token to responds either via <code>session</code> or <code>cookie-parser</code> middleware. <code>app.use(csrf());</code></p>
</li>
<li><p><a href="https://github.com/expressjs/timeout" target="_blank">timeout</a>: halt execution if it takes more that a given time. e.g. <code>app.use(timeout(&#39;5s&#39;));</code>. However you need to check by yourself under every request with a middleware that checks <code>if (!req.timedout) next();</code>.</p>
</li>
</ul>
<h1 id="Wiring-up-the-MEAN-Stack">Wiring up the MEAN Stack<a href="#Wiring-up-the-MEAN-Stack" class="headerlink" title="Wiring up the MEAN Stack"></a></h1><p>In the next sections, we are going to put together everything that we learn from and build an API. They can be consume by browsers, mobile apps and even other servers.
<img src="/images/api_uses.png" title="API Consumers"></p>
<h2 id="Bootstrapping-ExpressJS">Bootstrapping ExpressJS<a href="#Bootstrapping-ExpressJS" class="headerlink" title="Bootstrapping ExpressJS"></a></h2><p>After a detour in Node CLI, MongoDB, Mongoose, tools and middlewares land we are back to our express todoApp. This time to create the routes and finalize our RESTful API.</p>
<p>Express has a separate package called <code>express-generator</code>, which can help us to get started with out API.</p>
<figure class="highlight bash"><figcaption><span>Install and run "express-generator"</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># install it globally using -g</span></div><div class="line">npm install express-generator -g</div><div class="line"></div><div class="line"><span class="comment"># create todo-app API with EJS views (instead the default Jade)</span></div><div class="line">express todo-api <span class="_">-e</span></div><div class="line"></div><div class="line"><span class="comment">#   create : todo-api</span></div><div class="line"><span class="comment">#   create : todo-api/package.json</span></div><div class="line"><span class="comment">#   create : todo-api/app.js</span></div><div class="line"><span class="comment">#   create : todo-api/public</span></div><div class="line"><span class="comment">#   create : todo-api/public/javascripts</span></div><div class="line"><span class="comment">#   create : todo-api/routes</span></div><div class="line"><span class="comment">#   create : todo-api/routes/index.js</span></div><div class="line"><span class="comment">#   create : todo-api/routes/users.js</span></div><div class="line"><span class="comment">#   create : todo-api/public/stylesheets</span></div><div class="line"><span class="comment">#   create : todo-api/public/stylesheets/style.css</span></div><div class="line"><span class="comment">#   create : todo-api/views</span></div><div class="line"><span class="comment">#   create : todo-api/views/index.ejs</span></div><div class="line"><span class="comment">#   create : todo-api/views/layout.ejs</span></div><div class="line"><span class="comment">#   create : todo-api/views/error.ejs</span></div><div class="line"><span class="comment">#   create : todo-api/public/images</span></div><div class="line"><span class="comment">#   create : todo-api/bin</span></div><div class="line"><span class="comment">#   create : todo-api/bin/www</span></div><div class="line"><span class="comment">#</span></div><div class="line"><span class="comment">#   install dependencies:</span></div><div class="line"><span class="comment">#     $ cd todo-api &amp;&amp; npm install</span></div><div class="line"><span class="comment">#</span></div><div class="line"><span class="comment">#   run the app:</span></div><div class="line"><span class="comment">#     $ DEBUG=todo-app:* npm start</span></div></pre></td></tr></table></figure>
<p>This will create a new folder called <code>todo-api</code>. Let’s go ahead and install the dependencies and run the app:</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># install dependencies</span></div><div class="line"><span class="built_in">cd</span> todo-api &amp;&amp; npm install</div><div class="line"></div><div class="line"><span class="comment"># run the app</span></div><div class="line">PORT=4000 npm start</div></pre></td></tr></table></figure>
<p>Use your browser to go to <a href="http://0.0.0.0:4000" target="_blank" rel="external">http://0.0.0.0:4000</a>, and you should see a message “Welcome to Express”</p>
<h2 id="Connect-ExpressJS-to-MongoDB">Connect ExpressJS to MongoDB<a href="#Connect-ExpressJS-to-MongoDB" class="headerlink" title="Connect ExpressJS to MongoDB"></a></h2><p>In this section we are going to access MongoDB using our newly created express app. Hopefully, you have installed MongoDB in the <a href="#mongodb">setup section</a>, and you can start it typing (if you haven’t yet):</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">mongod</div></pre></td></tr></table></figure>
<p>Install the MongoDB driver for NodeJS called mongoose:</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">npm install mongoose --save</div></pre></td></tr></table></figure>
<p>Notice <code>--save</code>. It will add it to the <code>todo-api/package.json</code></p>
<p>Next, you need to require mongoose in the <code>todo-api/app.js</code></p>
<figure class="highlight javascript"><figcaption><span>Add to app.js</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// load mongoose package</span></div><div class="line"><span class="keyword">var</span> mongoose = <span class="built_in">require</span>(<span class="string">'mongoose'</span>);</div><div class="line"></div><div class="line"><span class="comment">// Use native Node promises</span></div><div class="line">mongoose.Promise = global.Promise;</div><div class="line"></div><div class="line"><span class="comment">// connect to MongoDB</span></div><div class="line">mongoose.connect(<span class="string">'mongodb://localhost/todo-api'</span>)</div><div class="line">  .then(() =&gt;  <span class="built_in">console</span>.log(<span class="string">'connection succesful'</span>))</div><div class="line">  .catch((err) =&gt; <span class="built_in">console</span>.error(err));</div></pre></td></tr></table></figure>
<p>Now, When you run <code>npm start</code> or <code>./bin/www</code>, you will notice the message <code>connection successful</code>. Great!</p>
<p>You can find the repository <a href="https://github.com/amejiarosario/todoAPIjs" target="_blank" rel="external">here</a> and the diff code at this point:
<a href="https://github.com/amejiarosario/todoAPIjs/commit/948a32391d208dd1303d67b443456a377e93fb8d" target="_blank" rel="external">diff</a></p>
<h2 id="Creating-the-Todo-model-with-Mongoose">Creating the Todo model with Mongoose<a href="#Creating-the-Todo-model-with-Mongoose" class="headerlink" title="Creating the Todo model with Mongoose"></a></h2><p>It is show time! All the above was setup and preparation for this moment. Let bring the API to life.</p>
<p>Create a <code>models</code> directory and a <code>Todo.js</code> model:</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">mkdir models</div><div class="line">touch models/Todo.js</div></pre></td></tr></table></figure>
<p>In the <code>models/Todo.js</code>:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> mongoose = <span class="built_in">require</span>(<span class="string">'mongoose'</span>);</div><div class="line"></div><div class="line"><span class="keyword">var</span> TodoSchema = <span class="keyword">new</span> mongoose.Schema(&#123;</div><div class="line">  name: <span class="built_in">String</span>,</div><div class="line">  completed: <span class="built_in">Boolean</span>,</div><div class="line">  note: <span class="built_in">String</span>,</div><div class="line">  updated_at: &#123; type: <span class="built_in">Date</span>, <span class="keyword">default</span>: <span class="built_in">Date</span>.now &#125;,</div><div class="line">&#125;);</div><div class="line"></div><div class="line"><span class="built_in">module</span>.exports = mongoose.model(<span class="string">'Todo'</span>, TodoSchema);</div></pre></td></tr></table></figure>
<p><a href="https://github.com/amejiarosario/todoAPIjs/commit/afc908027339b22f10de3b77518ac0728668d470" target="_blank" rel="external">diff</a></p>
<p>What’s going up there? Isn’t MongoDB suppose to be schemaless? Well, it is schemaless and very flexible indeed. However, very often we want bring sanity to our API/WebApp through validations and enforcing a schema to keep a consistent structure. Mongoose does that for us, which is nice.</p>
<p>You can use the following types:</p>
<ul>
<li>String</li>
<li>Boolean</li>
<li>Date</li>
<li>Array</li>
<li>Number</li>
<li>ObjectId</li>
<li>Mixed</li>
<li>Buffer</li>
</ul>
<h1 id="API-clients-Browser-Postman-and-curl">API clients (Browser, Postman and curl)<a href="#API-clients-Browser-Postman-and-curl" class="headerlink" title="API clients (Browser, Postman and curl)"></a></h1><p>I know you have not created any route yet. However, in the next sections you will. These are just three ways to retrieve, change and delete data from your future API.</p>
<h2 id="Curl">Curl<a href="#Curl" class="headerlink" title="Curl"></a></h2><figure class="highlight bash"><figcaption><span>Create tasks</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># Create task</span></div><div class="line">curl -XPOST http://localhost:3000/todos <span class="_">-d</span> <span class="string">'name=Master%20Routes&amp;completed=false&amp;note=soon...'</span></div><div class="line"></div><div class="line"><span class="comment"># List tasks</span></div><div class="line">curl -XGET http://localhost:3000/todos</div></pre></td></tr></table></figure>
<h2 id="Browser-and-Postman">Browser and Postman<a href="#Browser-and-Postman" class="headerlink" title="Browser and Postman"></a></h2><p>If you open your browser and type <code>localhost:3000/todos</code> you will see all the tasks (when you implement it). However, you cannot do post commands by default. For further testing let’s use a Chrome plugin called <a href="https://chrome.google.com/webstore/detail/postman-rest-client/fdmmgilgnpjigdojojpjoooidkmcomcm?hl=en" target="_blank">Postman</a>. It allows you to use all the HTTP VERBS easily and check <code>x-www-form-urlencoded</code> for adding parameters.</p>
<img src="/images/postman_post.png" title="Postman POST example">
<blockquote>
<p>Don’t forget to check <code>x-www-form-urlencoded</code> or it won’t work ;)</p>
</blockquote>
<h2 id="Websites-and-Mobile-Apps">Websites and Mobile Apps<a href="#Websites-and-Mobile-Apps" class="headerlink" title="Websites and Mobile Apps"></a></h2><p>Probably this is the main consumers of the APIs. You can interact with RESTful APIs using jQuery’s <code>$ajax</code> and its wrappers, BackboneJS’s Collections/models, AngularJS’s <code>$http</code> or <code>$resource</code>, among many other libraries/frameworks and mobile clients.</p>
<p>In the end, we are going to explain how to use AngularJS to interact with this API.</p>
<h1 id="ExpressJS-Routes">ExpressJS Routes<a href="#ExpressJS-Routes" class="headerlink" title="ExpressJS Routes"></a></h1><p>To sum up we want to achieve the following:</p>
<table>
<thead>
<tr>
<th>Resource (URI)</th>
<th>POST (create)</th>
<th>GET (read)</th>
<th>PUT (update)</th>
<th>DELETE (destroy)</th>
</tr>
</thead>
<tbody>
<tr>
<td>/todos</td>
<td>create new task</td>
<td>list tasks</td>
<td>error</td>
<td>error</td>
</tr>
<tr>
<td>/todos/:id</td>
<td>error</td>
<td>show task :id</td>
<td>update task :id</td>
<td>destroy task ID 1</td>
</tr>
</tbody>
</table>
<p>Let’s setup the routes</p>
<figure class="highlight bash"><figcaption><span>Create a new route called `todos.js` in the `routes` folder or rename `users.js`</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">mv routes/users.js routes/todos.js</div></pre></td></tr></table></figure>
<p>In <code>app.js</code> add new <code>todos</code> route or just replace <code>./routes/users</code> for <code>./routes/todos</code></p>
<figure class="highlight javascript"><figcaption><span>Adding todos routes</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> todos = <span class="built_in">require</span>(<span class="string">'./routes/todos'</span>);</div><div class="line">app.use(<span class="string">'/todos'</span>, todos);</div></pre></td></tr></table></figure>
<p>All set! Now, let’s go back and edit our <code>routes/todos.js</code>.</p>
<h2 id="List-GET-todos">List: GET /todos<a href="#List-GET-todos" class="headerlink" title="List: GET /todos"></a></h2><p>Remember <a href="#mongoose-read-and-query"> mongoose query api</a>? Here’s how to use it in this context:</p>
<figure class="highlight javascript"><figcaption><span>routes/todos.js</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> express = <span class="built_in">require</span>(<span class="string">'express'</span>);</div><div class="line"><span class="keyword">var</span> router = express.Router();</div><div class="line"></div><div class="line"><span class="keyword">var</span> mongoose = <span class="built_in">require</span>(<span class="string">'mongoose'</span>);</div><div class="line"><span class="keyword">var</span> Todo = <span class="built_in">require</span>(<span class="string">'../models/Todo.js'</span>);</div><div class="line"></div><div class="line"><span class="comment">/* GET /todos listing. */</span></div><div class="line">router.get(<span class="string">'/'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">req, res, next</span>) </span>&#123;</div><div class="line">  Todo.find(<span class="function"><span class="keyword">function</span> (<span class="params">err, todos</span>) </span>&#123;</div><div class="line">    <span class="keyword">if</span> (err) <span class="keyword">return</span> next(err);</div><div class="line">    res.json(todos);</div><div class="line">  &#125;);</div><div class="line">&#125;);</div><div class="line"></div><div class="line"><span class="built_in">module</span>.exports = router;</div></pre></td></tr></table></figure>
<p>Harvest time! We don’t have any task in database but at least we verify it is working:</p>
<figure class="highlight bash"><figcaption><span>Testing all together</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># Start database</span></div><div class="line">mongod</div><div class="line"></div><div class="line"><span class="comment"># Start Webserver (in other terminal tab)</span></div><div class="line">npm start</div><div class="line"></div><div class="line"><span class="comment"># Test API (in other terminal tab)</span></div><div class="line">curl localhost:3000/todos</div><div class="line"><span class="comment"># =&gt; []%</span></div></pre></td></tr></table></figure>
<p><a href="https://github.com/amejiarosario/todoAPIjs/commit/54ab912ea9aa2b6633ae12816beb6e6c3d2702e6" target="_blank" rel="external">diff</a></p>
<p>If it returns an empty array <code>[]</code> you are all set. If you get errors, try going back and making sure you didn’t forget anything or write a comment at the end of the post for help.</p>
<h2 id="Create-POST-todos">Create: POST /todos<a href="#Create-POST-todos" class="headerlink" title="Create: POST /todos"></a></h2><p>Back in <code>routes/todos.js</code>, we are going to add the ability to create using <a href="#mongoose-create">mongoose create</a>. Could you make it work before looking at the next example?</p>
<figure class="highlight javascript"><figcaption><span>routes/todos.js (showing just create route)</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"></div><div class="line"><span class="comment">/* POST /todos */</span></div><div class="line">router.post(<span class="string">'/'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">req, res, next</span>) </span>&#123;</div><div class="line">  Todo.create(req.body, <span class="function"><span class="keyword">function</span> (<span class="params">err, post</span>) </span>&#123;</div><div class="line">    <span class="keyword">if</span> (err) <span class="keyword">return</span> next(err);</div><div class="line">    res.json(post);</div><div class="line">  &#125;);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p><a href="https://github.com/amejiarosario/todoAPIjs/commit/28b60c4bf9c6d8b08c3351f725e17c7f40a077be" target="_blank" rel="external">diff</a></p>
<p>Few things:</p>
<ul>
<li>We are using the <code>router.post</code> instead of <code>router.get</code>.</li>
<li>You have to stop and run the server again: <code>npm start</code>.</li>
</ul>
<p>Everytime you change a file you have to stop and start the web server. Let’s fix that using <code>nodemon</code> to refresh automatically:</p>
<figure class="highlight bash"><figcaption><span>Nodemon</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># install nodemon globally</span></div><div class="line">npm install nodemon -g</div><div class="line"></div><div class="line"><span class="comment"># Run web server with nodemon</span></div><div class="line">nodemon</div></pre></td></tr></table></figure>
<h2 id="Show-GET-todos-id">Show: GET /todos/:id<a href="#Show-GET-todos-id" class="headerlink" title="Show: GET /todos/:id"></a></h2><p>This is a snap with <a href="#mongoose-read-and-query"><code>Todo.findById</code></a> and <code>req.params</code>. Notice that <code>params</code> matches the placeholder name we set while defining the route. <code>:id</code> in this case.</p>
<figure class="highlight javascript"><figcaption><span>routes/todos.js (showing just show route)</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/* GET /todos/id */</span></div><div class="line">router.get(<span class="string">'/:id'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">req, res, next</span>) </span>&#123;</div><div class="line">  Todo.findById(req.params.id, <span class="function"><span class="keyword">function</span> (<span class="params">err, post</span>) </span>&#123;</div><div class="line">    <span class="keyword">if</span> (err) <span class="keyword">return</span> next(err);</div><div class="line">    res.json(post);</div><div class="line">  &#125;);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p><a href="https://github.com/amejiarosario/todoAPIjs/commit/7d8bc67178a4f162858395845c076d9223926bf8" target="_blank" rel="external">diff</a></p>
<p>Let’s test what we have so far!</p>
<figure class="highlight bash"><figcaption><span>Testing the API with Curl</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># Start Web Server on port 4000 (default is 3000)</span></div><div class="line">PORT=4000 nodemon</div><div class="line"></div><div class="line"><span class="comment"># Create a todo using the API</span></div><div class="line">curl -XPOST http://localhost:4000/todos <span class="_">-d</span> <span class="string">'name=Master%20Routes&amp;completed=false&amp;note=soon...'</span></div><div class="line"><span class="comment"># =&gt; &#123;"__v":0,"name":"Master Routes","completed":false,"note":"soon...","_id":"57a655997d2241695585ecf8"&#125;%</span></div><div class="line"></div><div class="line"><span class="comment"># Get todo by ID (use the _id from the previous request, in my case "57a655997d2241695585ecf8")</span></div><div class="line">curl -XGET http://localhost:4000/todos/57a655997d2241695585ecf8</div><div class="line">&#123;<span class="string">"_id"</span>:<span class="string">"57a655997d2241695585ecf8"</span>,<span class="string">"name"</span>:<span class="string">"Master Routes"</span>,<span class="string">"completed"</span>:<span class="literal">false</span>,<span class="string">"note"</span>:<span class="string">"soon..."</span>,<span class="string">"__v"</span>:0&#125;%</div><div class="line"></div><div class="line"><span class="comment"># Get all elements (notice it is an array)</span></div><div class="line">curl -XGET http://localhost:4000/todos</div><div class="line">[&#123;<span class="string">"_id"</span>:<span class="string">"57a655997d2241695585ecf8"</span>,<span class="string">"name"</span>:<span class="string">"Master Routes"</span>,<span class="string">"completed"</span>:<span class="literal">false</span>,<span class="string">"note"</span>:<span class="string">"soon..."</span>,<span class="string">"__v"</span>:0&#125;]%</div></pre></td></tr></table></figure>
<h2 id="Update-PUT-todos-id">Update: PUT /todos/:id<a href="#Update-PUT-todos-id" class="headerlink" title="Update: PUT /todos/:id"></a></h2><p>Back in <code>routes/todos.js</code>, we are going to update tasks. This one you can do it before looking at the example bellow, review <a href="#mongoose-update">findByIdAndUpdate</a> and give it a try!</p>
<figure class="highlight javascript"><figcaption><span>routes/todos.js (showing just update route)</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/* PUT /todos/:id */</span></div><div class="line">router.put(<span class="string">'/:id'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">req, res, next</span>) </span>&#123;</div><div class="line">  Todo.findByIdAndUpdate(req.params.id, req.body, <span class="function"><span class="keyword">function</span> (<span class="params">err, post</span>) </span>&#123;</div><div class="line">    <span class="keyword">if</span> (err) <span class="keyword">return</span> next(err);</div><div class="line">    res.json(post);</div><div class="line">  &#125;);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p><a href="https://github.com/amejiarosario/todoAPIjs/commit/00dafe491e0d0b59fa53e86d8c187c42d7824200" target="_blank" rel="external">diff</a></p>
<figure class="highlight bash"><figcaption><span>curl update</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># Use the ID from the todo, in my case 57a655997d2241695585ecf8</span></div><div class="line">curl -XPUT http://localhost:4000/todos/57a655997d2241695585ecf8 <span class="_">-d</span> <span class="string">"note=hola"</span></div><div class="line"><span class="comment"># =&gt; &#123;"_id":"57a655997d2241695585ecf8","name":"Master Routes","completed":true,"note":"hola","__v":0&#125;%</span></div></pre></td></tr></table></figure>
<h2 id="Destroy-DELETE-todos-id">Destroy: DELETE /todos/:id<a href="#Destroy-DELETE-todos-id" class="headerlink" title="Destroy: DELETE /todos/:id"></a></h2><p>Finally, the last one! Almost identical to <code>update</code>, use <a href="#mongoose-delete"><code>findByIdAndRemove</code></a>.</p>
<figure class="highlight javascript"><figcaption><span>routes/todos.js (showing just update route)</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/* DELETE /todos/:id */</span></div><div class="line">router.delete(<span class="string">'/:id'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">req, res, next</span>) </span>&#123;</div><div class="line">  Todo.findByIdAndRemove(req.params.id, req.body, <span class="function"><span class="keyword">function</span> (<span class="params">err, post</span>) </span>&#123;</div><div class="line">    <span class="keyword">if</span> (err) <span class="keyword">return</span> next(err);</div><div class="line">    res.json(post);</div><div class="line">  &#125;);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p><a href="https://github.com/amejiarosario/todoAPIjs/commit/cbf5366e2b4e1a683ed50d2148ed6a548616d3f8" target="_blank" rel="external">diff</a></p>
<p>Is it working? Cool, you are done then!
Is NOT working? take a look at the <a href="https://github.com/amejiarosario/todoAPIjs" target="_blank" rel="external">full repository</a>.</p>
<h1 id="What’s-next">What’s next?<a href="#What’s-next" class="headerlink" title="What’s next?"></a></h1><p>Connecting AngularJS with this endpoint. Checkout the third tutorial of this series.</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;Welcome to this RESTful API using Node.js (Express.js) and MongoDB (mongoose) tutorial! We are going to learn how to install and use each component individually and then proceed to create a RESTful API.&lt;/p&gt;
    
    </summary>
    
      <category term="Technologies" scheme="http://adrianmejia.com/categories/Technologies/"/>
    
      <category term="Web Development" scheme="http://adrianmejia.com/categories/Technologies/Web-Development/"/>
    
    
      <category term="javascript" scheme="http://adrianmejia.com/tags/javascript/"/>
    
      <category term="NodeJS" scheme="http://adrianmejia.com/tags/NodeJS/"/>
    
      <category term="ExpressJS" scheme="http://adrianmejia.com/tags/ExpressJS/"/>
    
      <category term="MongoDB" scheme="http://adrianmejia.com/tags/MongoDB/"/>
    
      <category term="Tutorial_MEAN-Stack" scheme="http://adrianmejia.com/tags/Tutorial-MEAN-Stack/"/>
    
  </entry>
  
  <entry>
    <title>AngularJS tutorial for beginners with NodeJS ExpressJS and MongoDB (Part I)</title>
    <link href="http://adrianmejia.com/blog/2014/09/28/angularjs-tutorial-for-beginners-with-nodejs-expressjs-and-mongodb/"/>
    <id>http://adrianmejia.com/blog/2014/09/28/angularjs-tutorial-for-beginners-with-nodejs-expressjs-and-mongodb/</id>
    <published>2014-09-29T03:50:24.000Z</published>
    <updated>2016-08-06T23:31:57.000Z</updated>
    
    <content type="html"><![CDATA[<p>This tutorial is meant to be as clear as possible. At the same time, we are going to cover the concepts that you will need most of the time. All the good stuff without the fat :)</p>
<a id="more"></a>
<p>We are going to start building all the examples in a single HTML file! It embedded JavaScript and NO styles/CSS for <strong>simplicity</strong>. Don’t worry, in the next tutorials, we will learn how to split use Angular modules. We are going to break down the code, add testing to it and styles.</p>
<h1 id="What-is-Angular-js">What is Angular.js?<a href="#What-is-Angular-js" class="headerlink" title="What is Angular.js?"></a></h1><p>Angular.js is a MVW (Model-View-Whatever) open-source JavaScript web framework that facilitates the creation of single-page applications (SPA) and data-driven apps.</p>
<h2 id="AngularJS-vs-jQuery-vs-BackboneJS-vs-EmberJS">AngularJS vs jQuery vs BackboneJS vs EmberJS<a href="#AngularJS-vs-jQuery-vs-BackboneJS-vs-EmberJS" class="headerlink" title="AngularJS vs jQuery vs BackboneJS vs EmberJS"></a></h2><p><a href="#start">TL; DR</a>: AngularJS is awesome for building testable single page applications (SPA). Also, excel with data-driven and CRUD apps. <a href="#start">Show me the code!.</a></p>
<p>AngularJS motto is</p>
<blockquote>
<p>HTML enhanced for web apps!</p>
</blockquote>
<p>It extends standard HTML tags and properties to bind events and data into it using JavaScript. It has a different approach to other libraries. jQuery, Backbone.Js, Ember.js and similar… they are more leaned towards “Unobtrusive JavaScript”.</p>
<p>Traditional JavaScript frameworks, use IDs and classes in the elements. That gives the advantage of separating structure (HTML) from behavior (Javascript). Yet, it does not do any better on code complexity and readability. Angular instead declares the event handlers right in the element that they act upon.</p>
<p>Times have changed since then. Let’s examine how AngularJS tries to ease code complexity and readability:</p>
<ul>
<li><strong>Unit testing</strong> ready: JavaScript is, usually, hard to unit test. When you have DOM manipulations and business logic together (e.g. jQuery based code). AngularJS keeps DOM manipulation in the HTML and business logic separated. Data and dependencies are <code>$injected</code> as needed.</li>
<li><strong>DOM manipulation</strong> where they are used. It decouples DOM manipulation from application logic.</li>
<li>AngularJS is also excellent for <strong>single-page applications (SPA)</strong>.</li>
<li>Different <strong>browsers implement</strong> features differently, but fret not. Angular’s directive (or HTML extensions) take care of the differences for you.</li>
<li><strong>Global namespace</strong> expressions and methods definitions are scoped within controllers. So, they do not pollute the global namespace.</li>
<li><strong>Data models</strong> are plain old JavaScript objects (POJO).</li>
<li>Write less code: AngualarJS features save you from much boilerplate code.</li>
<li>AngularJS provides solutions for writing modular code and dependencies management.</li>
</ul>
<p>Without further ado, let’s dive in!</p>
<p><a id="start"></a></p>
<h1 id="AngularJS-Main-Components">AngularJS Main Components<a href="#AngularJS-Main-Components" class="headerlink" title="AngularJS Main Components"></a></h1><p>AngularJS has an <a href="https://docs.angularjs.org/api" target="_blank">extensive API</a> and components. In this tutorial we are going to focus on the most important ones, such as directives, modules, services, controllers and related concepts.</p>
<h2 id="AngularJS-Directives">AngularJS Directives<a href="#AngularJS-Directives" class="headerlink" title="AngularJS Directives"></a></h2><p>The first concept you need to know about AngularJS is what are directives.</p>
<p><strong>Directives</strong> are extensions of HTML markups. They could take the form of attributes, element names, CSS class and or even HTML comments. When the AngularJS framework is loaded, everything inside <code>ng-app</code> it’s compiled. The directives are bound to data, events, and DOM transformations.</p>
<p>Notice in the following example that there are two directives: ng-app and ng-model.</p>
<p>Notice in the following example that there are two directives: <code>ng-app</code> and <code>ng-model</code>.</p>
<figure class="highlight html"><figcaption><span>Hello World in AngularJS</span><a href="http://codepen.io/amejiarosario/pen/KdLaq" target="_blank" rel="external">link</a></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">ng-app</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Hello World in AngularJS<span class="tag">&lt;/<span class="name">title</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">ng-model</span>=<span class="string">"name"</span>&gt;</span> Hello &#123;&#123; name &#125;&#125;</div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></div></pre></td></tr></table></figure>
<p>We going to learn about some of the main built-in directives as we go:</p>
<ul>
<li><p><strong>ng-app</strong>: is a directive that bootstraps AngularJS. It designates the caller element as the root. It’s usually placed on <code>&lt;html&gt;</code> or <code>&lt;body&gt;</code>.</p>
</li>
<li><p><strong>ng-model</strong>: is a directive that binds usually form elements. For instance, <code>input</code>, <code>select</code>, <code>checkboxes</code>, <code>textarea</code>. They keep data (model) and visual elements (HTML) in sync.</p>
</li>
<li><p><strong>{{ name }}</strong> <code>{{ }}</code> are a way of binding models to elements in HTML. In the example above, the <code>ng-model</code> name is bound to the placeholder <code>{{ name }}</code>. Play with the example below to see how the placeholder is updated real-time to whatever you type in the textbox.</p>
</li>
</ul>
<p>Data binding AngularJS example:</p>
<p data-height="268" data-theme-id="0" data-slug-hash="KdLaq" data-default-tab="result" data-user="amejiarosario" class="codepen">See the Pen <a href="http://codepen.io/amejiarosario/pen/KdLaq/" target="_blank" rel="external">KdLaq</a> by Adrian Mejia (<a href="http://codepen.io/amejiarosario" target="_blank" rel="external">@amejiarosario</a>) on <a href="http://codepen.io" target="_blank" rel="external">CodePen</a>.</p>

<p>You can create your own directives. Checkout the this tutorial for more: <a href="/blog/2016/04/08/creating-custom-angularjs-directives-for-beginners/">creating-custom-angularjs-directives-for-beginners</a>. It will go deeper into directives.</p>
<h2 id="AngularJS-Data-Binding">AngularJS Data Binding<a href="#AngularJS-Data-Binding" class="headerlink" title="AngularJS Data Binding"></a></h2><p><strong>Data binding</strong> is an AngularJS feature that synchronizes your model data with your HTML. That’s great because models are the “single source of truth”. You do not have to worry about updating them. Here’s a graph from <a href="http://docs.angularjs.org" target="_blank">docs.angularjs.org</a>.</p>
<img src="/images/Two_Way_Data_Binding.png" title="Two Data Binding in Angular Templates">
<p>Whenever the HTML is changed, the model gets updated. Wherever the model gets updated it is reflected in HTML.</p>
<h2 id="AngularJS-Scope">AngularJS Scope<a href="#AngularJS-Scope" class="headerlink" title="AngularJS Scope"></a></h2><p><code>$scope</code> it is an object that contains all the data to which HTML is bound. They are the glue your javascript code (controllers) and the view (HTML). Everything that is attached to the <code>$scope</code>, it is  <code>$watch</code>ed by AngularJS and updated.</p>
<p>Scopes can be bound to javascript functions. Also, you could have more than one <code>$scope</code> and inherit from outer ones. More on this, in the controller’s section.</p>
<h2 id="AngularJS-Controllers">AngularJS Controllers<a href="#AngularJS-Controllers" class="headerlink" title="AngularJS Controllers"></a></h2><p>Angular.js <strong>controllers</strong> are code that “controls” certain sections containing DOM elements. They encapsulate the behavior, callbacks and glue <code>$scope</code> models with views. Let’s see an example to drive the concept home:</p>
<figure class="highlight html"><figcaption><span>AngularJS Controller Example</span><a href="http://codepen.io/amejiarosario/pen/spuCm" target="_blank" rel="external">link</a></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">body</span> <span class="attr">ng-controller</span>=<span class="string">"TodoController"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">ul</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">ng-repeat</span>=<span class="string">"todo in todos"</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">ng-model</span>=<span class="string">"todo.completed"</span>&gt;</span></div><div class="line">      &#123;% raw  %&#125;&#123;&#123; todo.name &#125;&#125;&#123;% endraw %&#125;</div><div class="line">    <span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></div><div class="line"></div><div class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></div><div class="line">    <span class="function"><span class="keyword">function</span> <span class="title">TodoController</span>(<span class="params">$scope</span>)</span>&#123;</div><div class="line">      $scope.todos = [</div><div class="line">        &#123; name: <span class="string">'Master HTML/CSS/Javascript'</span>, completed: <span class="literal">true</span> &#125;,</div><div class="line">        &#123; name: <span class="string">'Learn AngularJS'</span>, completed: <span class="literal">false</span> &#125;,</div><div class="line">        &#123; name: <span class="string">'Build NodeJS backend'</span>, completed: <span class="literal">false</span> &#125;,</div><div class="line">        &#123; name: <span class="string">'Get started with ExpressJS'</span>, completed: <span class="literal">false</span> &#125;,</div><div class="line">        &#123; name: <span class="string">'Setup MongoDB database'</span>, completed: <span class="literal">false</span> &#125;,</div><div class="line">        &#123; name: <span class="string">'Be awesome!'</span>, completed: <span class="literal">false</span> &#125;,</div><div class="line">      ]</div><div class="line">    &#125;</div><div class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div></pre></td></tr></table></figure>
<p>AngularJS controller interactive example:</p>
<p data-height="268" data-theme-id="0" data-slug-hash="spuCm" data-default-tab="result" data-user="amejiarosario" class="codepen">See the Pen <a href="http://codepen.io/amejiarosario/pen/spuCm/" target="_blank" rel="external">spuCm</a> by Adrian Mejia (<a href="http://codepen.io/amejiarosario" target="_blank" rel="external">@amejiarosario</a>) on <a href="http://codepen.io" target="_blank" rel="external">CodePen</a>.</p>

<p>As you might notice we have new friends: <code>ng-controller</code>, <code>ng-repeat</code> and <code>$scope</code>.</p>
<ul>
<li><p><strong><code>ng-controller</code></strong> is a directive that tells angular what function controller to use for a particular view. Every time AngularJS loads, it reads the <code>ng-controller</code> argument (in this case “TodoController”). Then, it will look for a function in plain old javascript object (POJO) with the same name or for <code>angular.controller</code> matching name.</p>
</li>
<li><p><strong><code>$scope</code></strong> As mentioned earlier <code>$scope</code>‘s are the glue between the data models in the controllers and the views. Take a look to our “TodoController” it has a parameter named <code>$scope</code>. AngularJS is going to pass (<code>$inject</code>) that parameter, and whatever you attach to it, it will be available in the view. In this example is the particular is the <code>todos</code> array of objects.</p>
</li>
<li><p><strong><code>ng-repeat</code></strong> as its name implies, it is going to “repeat” the element and sub-elements where this directive is declared. It is going to iterate for each element in the <code>$scope.todos</code> array.</p>
</li>
<li><p><strong><code>ng-model</code></strong> notice that the checkbox is bound to the <code>todo.completed</code>. If <code>todo.completed</code> is true, then the checkbox is going to be checked and vice versa.</p>
</li>
</ul>
<h2 id="AngularJS-Modules">AngularJS Modules<a href="#AngularJS-Modules" class="headerlink" title="AngularJS Modules"></a></h2><p>Modules are a way to encapsulate different parts of your application. They allow reusing code in other places.  Here’s an example of how to rewrite our controller using modules.</p>
<figure class="highlight javascript"><figcaption><span>AngularJS Module Example</span><a href="http://codepen.io/amejiarosario/pen/spuCm" target="_blank" rel="external">link</a></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">angular.module(<span class="string">'app'</span>, [])</div><div class="line">  .controller(<span class="string">'TodoController'</span>, [<span class="string">'$scope'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">$scope</span>) </span>&#123;</div><div class="line">    $scope.todos = [</div><div class="line">      &#123; title: <span class="string">'Learn Javascript'</span>, completed: <span class="literal">true</span> &#125;,</div><div class="line">      &#123; title: <span class="string">'Learn Angular.js'</span>, completed: <span class="literal">false</span> &#125;,</div><div class="line">      &#123; title: <span class="string">'Love this tutorial'</span>, completed: <span class="literal">true</span> &#125;,</div><div class="line">      &#123; title: <span class="string">'Learn Javascript design patterns'</span>, completed: <span class="literal">false</span> &#125;,</div><div class="line">      &#123; title: <span class="string">'Build Node.js backend'</span>, completed: <span class="literal">false</span> &#125;,</div><div class="line">    ];</div><div class="line">  &#125;]);</div></pre></td></tr></table></figure>
<p>Notice the <code>&lt;html ng-app=&quot;app&quot;&gt;</code> in the example below</p>
<p data-height="268" data-theme-id="0" data-slug-hash="uFfqG" data-default-tab="result" data-user="amejiarosario" class="codepen">See the Pen <a href="http://codepen.io/amejiarosario/pen/uFfqG/" target="_blank" rel="external">uFfqG</a> by Adrian Mejia (<a href="http://codepen.io/amejiarosario" target="_blank" rel="external">@amejiarosario</a>) on <a href="http://codepen.io" target="_blank" rel="external">CodePen</a>.</p>

<p>Using modules brings many advantages. They can be loaded in any order, and parallel dependency loading. Also, tests can only load the required modules and keep it fast, clear view of the dependencies.</p>
<h2 id="AngularJS-Templates">AngularJS Templates<a href="#AngularJS-Templates" class="headerlink" title="AngularJS Templates"></a></h2><p>Templates contain HTML and Angular elements (directives, markup, filters or form controls). They can be cached and referenced by an id.</p>
<p>Here’s an example:</p>
<figure class="highlight html"><figcaption><span>AngularJS Template Example</span><a href="https://gist.github.com/amejiarosario/eebd176cb1796769ec2b" target="_blank" rel="external">download</a></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/ng-template"</span> <span class="attr">id</span>=<span class="string">"/todos.html"</span>&gt;</span><span class="javascript"></span></div><div class="line">  &lt;ul&gt;</div><div class="line">    <span class="xml"><span class="tag">&lt;<span class="name">li</span> <span class="attr">ng-repeat</span>=<span class="string">"todo in todos"</span>&gt;</span></span></div><div class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">ng-model</span>=<span class="string">"todo.completed"</span>&gt;</span></div><div class="line">      &#123;&#123; todo.name &#125;&#125;</div><div class="line">    <span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div></pre></td></tr></table></figure>
<p>Does the code inside looks familiar? ;)</p>
<p>Notice they are inside the <code>script</code> and has a type of <code>text/ng-template</code>.</p>
<h2 id="AngularJS-Routes-ngRoutes">AngularJS Routes (ngRoutes)<a href="#AngularJS-Routes-ngRoutes" class="headerlink" title="AngularJS Routes (ngRoutes)"></a></h2><p>ngRoutes module allows changing what we see in the app depending on the URL (route). It, usually, uses templates to inject the HTML into the app.</p>
<p>It does not come with AngularJS core module, so we have to list it as a dependency. We are going to get it from Google CDN:</p>
<p><code>&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.min.js&quot;&gt;&lt;/script&gt;</code></p>
<p><strong>NEW FEATURE</strong>: add notes to the todo tasks. Let’s start with the routes!</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">angular.module(<span class="string">'app'</span>, [<span class="string">'ngRoute'</span>])</div><div class="line">  .config([<span class="string">'$routeProvider'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">$routeProvider</span>) </span>&#123;</div><div class="line">    $routeProvider</div><div class="line">      .when(<span class="string">'/'</span>, &#123;</div><div class="line">        templateUrl: <span class="string">'/todos.html'</span>,</div><div class="line">        controller: <span class="string">'TodoController'</span></div><div class="line">      &#125;);</div><div class="line">  &#125;]);</div></pre></td></tr></table></figure>
<p data-height="268" data-theme-id="0" data-slug-hash="CmnFH" data-default-tab="result" data-user="amejiarosario" class="codepen">See the Pen <a href="http://codepen.io/amejiarosario/pen/CmnFH/" target="_blank" rel="external">CmnFH</a> by Adrian Mejia (<a href="http://codepen.io/amejiarosario" target="_blank" rel="external">@amejiarosario</a>) on <a href="http://codepen.io" target="_blank" rel="external">CodePen</a>.</p>

<ul>
<li><p>First notice that we removed <code>ng-controller=&quot;TodoController&quot;</code> from the body tag. The controllers are now called based on the route.</p>
</li>
<li><p><code>ngView</code> is a directive used by <code>$routeProvider</code> to render HTML into it. Every time the URL changes, it will inject a new HTML template and controller into ngView.</p>
</li>
</ul>
<h2 id="AngularJS-Services-Factories">AngularJS Services (Factories)<a href="#AngularJS-Services-Factories" class="headerlink" title="AngularJS Services (Factories)"></a></h2><p>Notice that if you want to create a 2nd controller and share $scope.todos it is not possible right now. That is when services become handy. Services are a way to inject data dependencies into controllers. They are created through factories. Let’s see it in action:</p>
<figure class="highlight javascript"><figcaption><span>AngularJS Service Factory Example</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div></pre></td><td class="code"><pre><div class="line">angular.module(<span class="string">'app'</span>, [<span class="string">'ngRoute'</span>])</div><div class="line"></div><div class="line">  .factory(<span class="string">'Todos'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    <span class="keyword">return</span> [</div><div class="line">      &#123; name: <span class="string">'AngularJS Directives'</span>, completed: <span class="literal">true</span> &#125;,</div><div class="line">      &#123; name: <span class="string">'Data binding'</span>, completed: <span class="literal">true</span> &#125;,</div><div class="line">      &#123; name: <span class="string">'$scope'</span>, completed: <span class="literal">true</span> &#125;,</div><div class="line">      &#123; name: <span class="string">'Controllers and Modules'</span>, completed: <span class="literal">true</span> &#125;,</div><div class="line">      &#123; name: <span class="string">'Templates and routes'</span>, completed: <span class="literal">true</span> &#125;,</div><div class="line">      &#123; name: <span class="string">'Filters and Services'</span>, completed: <span class="literal">false</span> &#125;,</div><div class="line">      &#123; name: <span class="string">'Get started with Node/ExpressJS'</span>, completed: <span class="literal">false</span> &#125;,</div><div class="line">      &#123; name: <span class="string">'Setup MongoDB database'</span>, completed: <span class="literal">false</span> &#125;,</div><div class="line">      &#123; name: <span class="string">'Be awesome!'</span>, completed: <span class="literal">false</span> &#125;,</div><div class="line">    ];</div><div class="line">  &#125;)</div><div class="line"></div><div class="line">  .controller(<span class="string">'TodoController'</span>, [<span class="string">'$scope'</span>, <span class="string">'Todos'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">$scope, Todos</span>) </span>&#123;</div><div class="line">    $scope.todos = Todos;</div><div class="line">  &#125;])</div></pre></td></tr></table></figure>
<p>We are now injecting the data dependency <code>Todo</code> into the controllers. This way we could reuse the data to any controller or module that we need to. This is not only used for static data like the array. But we could also do server calls using <code>$http</code> or even RESTful  <code>$resource</code>.</p>
<p>Let’s say we want to show the details of the task when we click on it. For that, we need to create a 2nd controller, template, and route that uses this service:</p>
<p data-height="268" data-theme-id="0" data-slug-hash="pGkhg" data-default-tab="result" data-user="amejiarosario" class="codepen">See the Pen <a href="http://codepen.io/amejiarosario/pen/pGkhg/" target="_blank" rel="external">pGkhg</a> by Adrian Mejia (<a href="http://codepen.io/amejiarosario" target="_blank" rel="external">@amejiarosario</a>) on <a href="http://codepen.io" target="_blank" rel="external">CodePen</a>.</p>


<p>(NOTE: Click on the links and it will take you to the todo details. Use backspace key to go back to the main menu)</p>
<p>This is what is happening:</p>
<ol>
<li>In the <code>HTML</code> tab, we created a second template <code>/todoDetails.html</code> which contains the todo details we want to show.</li>
<li>Also, in our previous template <code>/todos.html</code> we want to have a link that points to the <code>todo</code> detail. We are using the <code>$index</code> which is the corresponding order number in a <code>ng-repeat</code>.</li>
<li>In the <code>JS</code> tab, we created a new <code>$routeProvider</code> . It points to a new controller <code>TodoDetailCtrl</code> and the template that we created on #1. The <code>:id</code> parameter it is accessible in the controllers through <code>$routeParams</code>.</li>
<li>We Created the new controller <code>TodoDetailCtrl</code>. Also, we injected the dependencies which are <code>$scope</code>, <code>Todos</code> (factory), and <code>$routeParams</code> which will have the <code>id</code> param.</li>
<li>Set the <code>$scope</code> in the new controller. Instead of using the whole array, we are going to select only the one that we need using the <code>id</code> that we set in step #2.</li>
</ol>
<p>NOTE: in codepen, you will not see the URL. If you want to see it changing, you can download the whole example an open it from <a href="https://gist.github.com/amejiarosario/f0a82c7a0eec4786f1c9" target="_blank">here</a>.</p>
<h2 id="AngularJS-Filters">AngularJS Filters<a href="#AngularJS-Filters" class="headerlink" title="AngularJS Filters"></a></h2><p>Filters allow you to format and transform data. They change the output of expressions inside the curly braces. AngularJS comes with a bunch of useful filters.</p>
<p><strong>Built-in Filters</strong>:</p>
<ul>
<li><em>filter</em>: search for a given string in an array and return matches.</li>
<li><em>Number</em>: adds comma-separated 1000’s and two decimal places.</li>
<li><em>Currency</em>: the same as <em>Number</em> and adds a $ in front.</li>
<li><em>Date</em>: takes a Unix timestamp (e.g. 1288323623006) or date string and output it in the format that you specify (e.g. ‘longDate’ or fragments ‘yyyy’ for a four-digit year). For a full list see <a href="https://docs.angularjs.org/api/ng/filter/date" target="_blank">here</a>.</li>
<li><em>JSON</em>: converts javascript objects to JSON strings.</li>
<li><em>lowercase</em>/<em>uppercase</em>: converts strings to lowercase/uppercase.</li>
<li><em>limitTo</em>: number of elements from an array to show.</li>
<li><em>orderBy</em>: order array of objects by a key that you specify.</li>
</ul>
<p><strong>Note</strong> you can also chain many filters and also define your own filters.</p>
<p data-height="268" data-theme-id="0" data-slug-hash="tyuDK" data-default-tab="result" data-user="amejiarosario" class="codepen">See the Pen <a href="http://codepen.io/amejiarosario/pen/tyuDK/" target="_blank" rel="external">tyuDK</a> by Adrian Mejia (<a href="http://codepen.io/amejiarosario" target="_blank" rel="external">@amejiarosario</a>) on <a href="http://codepen.io" target="_blank" rel="external">CodePen</a>.</p>

<blockquote>
<p><strong>NEW FEATURE</strong>: Search todo tasks by name. Let’s use a filter to solve that problem.</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/ng-template"</span> <span class="attr">id</span>=<span class="string">"/todos.html"</span>&gt;</span><span class="xml"></span></div><div class="line">  Search: <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">ng-model</span>=<span class="string">"search.name"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">ul</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">ng-repeat</span>=<span class="string">"todo in todos | filter: search"</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">ng-model</span>=<span class="string">"todo.completed"</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#/&#123;&#123;$index&#125;&#125;"</span>&gt;</span>&#123;&#123;todo.name&#125;&#125;<span class="tag">&lt;/<span class="name">a</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div></pre></td></tr></table></figure>
<p>Notice that we are using <code>search.name</code> in the <code>ng-model</code> for search. That will limit the search to the <code>name</code> attribute and <code>search.notes</code> will look inside the notes only. Guest what <code>search</code> would do then? Precisely! It searches in all the attributes. Fork the following example and try it out:</p>
<p data-height="268" data-theme-id="0" data-slug-hash="ahwbz" data-default-tab="result" data-user="amejiarosario" class="codepen">See the Pen <a href="http://codepen.io/amejiarosario/pen/ahwbz/" target="_blank" rel="external">ahwbz</a> by Adrian Mejia (<a href="http://codepen.io/amejiarosario" target="_blank" rel="external">@amejiarosario</a>) on <a href="http://codepen.io" target="_blank" rel="external">CodePen</a>.</p>

<h1 id="What’s-next">What’s next?<a href="#What’s-next" class="headerlink" title="What’s next?"></a></h1><p>Congrats! You have completed part 1 of this <a href="/tags/Tutorial-MEAN-Stack/">3 part series</a>. We are going to build upon the things learned in here, in the next post we are going to setup a backend in NodeJS and MongoDB and connect it to AngularJS to provide a full featured CRUD app. Continue with:</p>
<ul>
<li><p>Part II - <a href="/blog/2014/10/01/creating-a-restful-api-tutorial-with-nodejs-and-mongodb/">NodeJS/ExpressJS and MongoDB/Mongoose</a></p>
</li>
<li><p>Part III - <a href="/blog/2014/10/03/mean-stack-tutorial-mongodb-expressjs-angularjs-nodejs/">MEAN Stack: Wiring all together</a></p>
</li>
</ul>
<p>I also have created BackboneJS tutorials check it out:</p>
<ul>
<li><a href="/blog/categories/backbonejs">BackboneJS Tutorials</a></li>
</ul>
<h3 id="ng-test">ng-test<a href="#ng-test" class="headerlink" title="ng-test"></a></h3><p>Congrats, you have reached this far! It is time to test what you have learned. Test-Driven Learning (TDL) ;). Here’s the challenge: open <a href="https://gist.githubusercontent.com/amejiarosario/26751cb85d088fd59c28/raw/c2dde0797c8d47d359c2137fc9a15a9228c272ca/index.html" target="_blank">this file</a> on your favorite code editor. Copy the boilerplate code and built the full app that we just build in the previous examples. Of course, you can take a peek from time to time if you get stuck ;)</p>
<p>Download this file as…:</p>
<p><a href="https://gist.githubusercontent.com/amejiarosario/26751cb85d088fd59c28/raw/c2dde0797c8d47d359c2137fc9a15a9228c272ca/index.html" target="_blank" rel="external">index.html</a></p>
<p>-OR-</p>
<p>Fork and edit online:</p>
<p data-height="268" data-theme-id="0" data-slug-hash="degzC" data-default-tab="result" data-user="amejiarosario" class="codepen">See the Pen <a href="http://codepen.io/amejiarosario/pen/degzC/" target="_blank" rel="external">degzC</a> by Adrian Mejia (<a href="http://codepen.io/amejiarosario" target="_blank" rel="external">@amejiarosario</a>) on <a href="http://codepen.io" target="_blank" rel="external">CodePen</a>.</p>

<h3 id="ng-solution">ng-solution<a href="#ng-solution" class="headerlink" title="ng-solution"></a></h3><p>This is the full solution and you can see it <a href="https://cdn.rawgit.com/amejiarosario/068143b53e54db43ef38/raw/b703b591bc84f2d59a2a483169294e2fb232419d/ngTodo.html#/" target="_blank">live in here</a>.</p>
<script src="//gist.github.com/068143b53e54db43ef38.js"></script>
<script async src="//codepen.io/assets/embed/ei.js"></script>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;This tutorial is meant to be as clear as possible. At the same time, we are going to cover the concepts that you will need most of the time. All the good stuff without the fat :)&lt;/p&gt;
    
    </summary>
    
      <category term="Technologies" scheme="http://adrianmejia.com/categories/Technologies/"/>
    
      <category term="Web Development" scheme="http://adrianmejia.com/categories/Technologies/Web-Development/"/>
    
    
      <category term="javascript" scheme="http://adrianmejia.com/tags/javascript/"/>
    
      <category term="Tutorial_MEAN-Stack" scheme="http://adrianmejia.com/tags/Tutorial-MEAN-Stack/"/>
    
      <category term="angularjs" scheme="http://adrianmejia.com/tags/angularjs/"/>
    
  </entry>
  
  <entry>
    <title>How company X make money?</title>
    <link href="http://adrianmejia.com/blog/2014/03/09/how-company-x-make-money/"/>
    <id>http://adrianmejia.com/blog/2014/03/09/how-company-x-make-money/</id>
    <published>2014-03-10T01:39:42.000Z</published>
    <updated>2014-03-10T01:39:42.000Z</updated>
    
    <content type="html"><![CDATA[<p>Have you ever wonder how the companies that offer free services make money? Such as Instagram, Evernote, Facebook, Twitter, LinkedIn, Google Maps, so on… or if it is even profitable to keep free users using their services. We would go through several revenue models and hopefully, it will throw you some light next time you decide to roll your own startup.</p>
<a id="more"></a>
<p><a href="#start">TL; DR</a>: Go to the interactive company revenue checker.</p>
<h3 id="Revenues-Models">Revenues Models<a href="#Revenues-Models" class="headerlink" title="Revenues Models"></a></h3><p>Let’s start first giving some perspective what models are actually giving the most revenues. In 2013, App Store, reported that free apps brought the 71% of the revenue! Even more than paid apps… how’s that even possible!?</p>
<img src="/images/revenue-breakdown.png">
<div style="clear:both"></div>

<p>(source: <a href="http://techcrunch.com/2013/03/28/in-app-purchase-revenue-hits-record-high-accounts-for-76-of-u-s-iphone-app-revenue-90-in-asian-markets/" target="_blank">techcrunch</a>)</p>
<p><link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/css/base/jquery.ui.all.min.css"></p>
<p><link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"></p>
<link rel="stylesheet" type="text/css" href="/stylesheets/company_revenue.css">



<p>Ok, let’s discuss some revenue models to understand this. There are 3 main models:</p>
<ul>
<li><p><strong>Freemium</strong>: apps are free to download and use. However, quite often some different features are sold separately (e.g. new levels, specialized functions, remove ads, more capacity, and so on). E.g. Pandora, Hulu, Google Docs.</p>
</li>
<li><p><strong>Premium</strong>: users paid upfront a fixed price for the application. After you pay for it, you are able to download it. Usually new software updates are free. E.g. MS Office 365.</p>
</li>
<li><p><strong>Subscription</strong>: users paid a fixed price which is automatically charged every certain time. Magazines in the iOS Newsstand are a good example of this subscription based model. Subscriptions have generally lower prices than premium accounts. E.g. Netfix.</p>
</li>
</ul>
<p>Freemium is not as “free” as it might seem in the surface, there are indirect ways of getting revenues from it:</p>
<ul>
<li><p><strong>Advertising</strong>: the application/service is free to use, but it contains ads or  interruption banners for an couple of minutes in order to raise revenue. This model is usually applied along with freemium apps and to remove the  ads users have to pay a subscription. E.g. Spotify.</p>
</li>
<li><p><strong>Selling data</strong>:  user information and behavior inside the application is sell to interested 3rd-parties. Usually used with freemium apps and specified in the terms of used.</p>
</li>
<li><p><strong>Transaction</strong>: the application is free to use generally and charges a percentage or fixed fee with every users’ transaction made. For example, it allows you to publish your item on their site for free but when you sell it, it charges you a fee. Or publish a project in a site and when it reaches certain goal a percentage fee is applied. E.g. eBay, Kickstarter.</p>
</li>
<li><p><strong>Online lead generation</strong>:  collects user’s information sometimes in an exchange of a product or service and then resell the information to companies interested indirectly. It’s different from the selling data model because the information is not sold to 3rd party directly, but indirectly. Influencing users desitions based on 3rd party companies affiliated and users’ interests, likes and behaviors. E.g. Mint, LinkedIn.</p>
</li>
<li><p><strong>Donations</strong>: (it’s self-explanatory) Services/apps are free, but it encourages users to contribute throughout donations to support the development.</p>
</li>
</ul>
<p>After reading these, you might have more clues why free apps are so much win nowadays. They helped to create those million-dollar-per-day games! (remembered FlappyBird, Candycrush, Farmville…) In a market where there is enough competition, having a free option will take you to large numbers of users quicker and broader, because of the low barrier to entry. For instance, Whatsapp had at certain point 10k of daily downloads, after moving it to $1 it download rate drops 10 times, they finally opted for yearly subscriptions.</p>
<p>Subscription-based revenue are also a model worth doing a special mention. It brings a steady flow of income to companies and usually comes in different tiers to fulfill users need. But, it has to be flexible enough, because it might limit hard core users which might be willing to pay more for taking the product to a new level.</p>
<p> Click at the companies logos to see if their revenue models are profitable or not. You might get surprised! If some information is not accurate please leave a comment and if you are wondering about another company not listed here, let me know and I will add it :) </p>


<p><a id="start"></a></p>
<div id="company_revenue">
  <ul id="companies-holder"></ul>
</div>

<div style="clear:both"></div>

<script src="https://code.jquery.com/jquery-1.7.1.min.js" integrity="sha256-iBcUE/x23aI6syuqF7EeT/+JFBxjPs5zeFJEXxumwb0=" crossorigin="anonymous"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>

<script type="text/javascript">
  String.prototype.titleize = function() {
    return this.replace(/_/g, " ").replace(/(?:^|\s)\S/g, function(a) { return a.toUpperCase(); });
  };
</script>

<script type="text/template" id="company-icon">
  <li class="company-item">
    <a href="#<%= name %>" class="company-icon" data-company="<%= name %>" title="How does <%= name.titleize() %> make money?">
      <span>
          <img src="/images/logo_<%= name %>.png" alt="<%= name %>">
      </span>
    </a>
  </li>
</script>

<script type="text/template" id="company-detail">
  <section id="company-details-<%= name %>" class="company-details">
    <h2>How does <%= name.titleize() %> make money?</h2>
    <input type="hidden" autofocus>
    <div>
      <ul>
        <li class="advertising revenue-<%= revenues.advertising > 0 ? 'active' : 'inactive' %>"><i class="fa fa-bullhorn"></i> Advertising</li>
        <li class="freemium revenue-<%= revenues.freemium > 0? 'active' : 'inactive' %>"><i class="fa fa-users"></i> Freemium</li>
        <li class="subscribers revenue-<%= revenues.subscribers > 0 ? 'active' : 'inactive' %>"><i class="fa fa-credit-card"></i> Subscribers</li>
        <li class="premium revenue-<%= revenues.premium > 0 ? 'active' : 'inactive' %>"><i class="fa fa-money"></i> Premium</li>
        <li class="lead_gen revenue-<%= revenues.lead_gen > 0 ? 'active' : 'inactive' %>"><i class="fa fa-random"></i> Lead Gen</li>
        <li class="transactions revenue-<%= revenues.transactions > 0 ? 'active' : 'inactive' %>"><i class="fa fa-code-fork"></i> Transactions/Royalties</li>
        <li class="selling_data revenue-<%= revenues.selling_data > 0 ? 'active' : 'inactive' %>"><i class="fa fa-globe"></i> Selling Data</li>
      </ul>
    </div>
    <div class="profitable <%= profitable ? 'active' : 'inactive' %>">
      Profitable? <%= profitable ? 'Yes' : 'No' %> <i class="fa fa-thumbs-o-<%= profitable ? 'up' : 'down' %>"></i>
      <%= revenue.length > 0 ? "<br><small>Revenue: "+revenue+"</small>" : "" %>
    </div>
    <p><small><%= description %></small></p>
    <div id="sources">
      Sources: <% _.each(sources, function(s, i){ %>
        <a href="<%= s %>" target="_blank"><%= i+1 %></a>
      <% }) %>
    </div>
  </section>
</script>

<script type="text/javascript">
var companies = [{
  name: 'instagram',
  revenues: {
    freemium: 1,
  },
  revenue: "",
  profitable: false,
  description: "Before selling to Facebook they were not making money. They are trying to incorporate Ads.",
  type: ["social-media"],
  sources: ["https://www.facebook.com/careers/department?req=a0IA000000CxvB4MAJ", "http://adage.com/article/digital/instagram-ads-a-risky-bet-facebook/244945/"]
},{
  name: 'facebook',
  revenues: {
    advertising: 0.85,
    freemium: 1,
  },
  profitable: true,
  revenue: "US$ 7.872 billion (2013)",
  description: "Advertising is the main source of revenue but also some small percentage comes from payments, web apps and other sources.",
  type: ["social-media"],
  sources: ["http://en.wikipedia.org/wiki/Facebook", "http://www.nytimes.com/2012/02/05/opinion/sunday/facebook-is-using-you.html?pagewanted=all&_moc.semityn.www&_r=0", "http://readwrite.com/2012/05/22/how-does-facebook-make-money#awesm=~oy2VCCNkvevfHC", "http://www.splatf.com/2012/02/facebook-revenue/", "http://blog.tweetsmarter.com/social-media/infographic-how-does-twitter-make-money-how-do-other-social-sites-do-it/"]
},{
  name: 'whatsapp',
  revenues: {
    advertising:0,
    freemium:1,
    subscribers:1,
    premium:0,
    lead_gen:0,
    transactions:0,
    selling_data:0
  },
  profitable: true,
  revenue: "",
  description: "The company is based on Freemium model for firt year. Later, it has a subscription of $1 per year.",
  type: ["social-media"],
  sources: ["http://blogs.wsj.com/digits/2013/12/19/whatsapp-hits-400-million-users-wants-to-stay-independent/", "http://www.quora.com/WhatsApp-Messenger/How-much-revenue-is-WhatsApp-generating", "http://news.yahoo.com/whatsapp-now-making-more-money-google-play-ios-220028493.html", "http://gigaom.com/2013/07/17/why-whatsapps-new-subscription-model-makes-perfect-sense/", "http://www.buzzle.com/articles/how-does-whatsapp-make-money.html"]
},{
  name: 'twitter',
  revenues: {
    advertising: 0.85,
    freemium: 1,
  },
  profitable: true,
  revenue: "US$ 317 million (2012)",
  description: "Mostly on corporate advertising and payments from 'promoted' tweets.",
  type: ["social-media"],
  sources: ["http://blog.tweetsmarter.com/social-media/infographic-how-does-twitter-make-money-how-do-other-social-sites-do-it/", "http://www.bbc.com/news/business-24397472", ""]
},{
  name: 'kickstarter',
  revenues: {
    transactions: 1,
    // freemium: 1,
  },
  profitable: true,
  revenue: "US$ 12 million?",
  description: "Charges a 5% for successfully funded projects.",
  type: ["social-media"],
  sources: ["https://www.kickstarter.com/help", "http://qz.com/184019/how-kickstarter-users-raised-nearly-1-billion-the-really-long-tail-of-crowdfunding/"]
},{
  name: 'skype',
  revenues: {
    advertising:0,
    freemium:1,
    subscribers:1,
    premium:0,
    lead_gen:0,
    transactions:0,
    selling_data:0
  },
  revenue: "US$ 740 million (2009)",
  profitable: true,
  description: "Skype-to-skype calls are free, but users can buy additional features.",
  type: ["social-media"],
  sources: ["https://support.skype.com/en/faq/FA335/how-does-skype-make-money"]
},{
  name: 'groupon',
  revenues: {
    advertising:0,
    freemium:1,
    subscribers:0,
    premium:0,
    lead_gen:0,
    transactions:1,
    selling_data:0
  },
  revenue: "US$ 2.573 billion (2013)",
  profitable: true,
  description: "Groupon takes charges a fee to seller for every deal sold. It's one of the fastest growing company in the world. Going from $30.5 million in year one to $713.4 million in year two.",
  type: ["ecommerce"],
  sources: ["http://www.reuters.com/article/2012/05/14/us-groupon-idUSBRE84D16H20120514", "http://www.incomediary.com/10-weird-ways-big-companies-make-money-online"]
},{
  name: 'ebay',
  revenues: {
    advertising:1,
    freemium:0,
    subscribers:0,
    premium:0,
    lead_gen:0,
    transactions:1,
    selling_data:0
  },
  revenue: "US$ 16.05 billion (2013)",
  profitable: true,
  description: "Fees are only applied to sellers for each transactions.",
  type: ["ecommerce"],
  sources: ["http://www.reuters.com/article/2012/05/14/us-groupon-idUSBRE84D16H20120514"]
},{
  name: 'mint',
  revenues: {
    advertising:0,
    freemium:0,
    subscribers:0,
    premium:0,
    lead_gen:1,
    transactions:0,
    selling_data:0
  },
  revenue: "",
  profitable: true,
  description: "Mint get paid a small fee when user switch to a new bank or company.",
  type: ["app"],
  sources: ["https://www.mint.com/how-it-works/free/"]
},{
  name: 'linkedin',
  revenues: {
    advertising:1,
    freemium:1,
    subscribers:1,
    premium:0,
    lead_gen:0,
    transactions:0,
    selling_data:1
  },
  revenue: "US$1.52 billion (2013)",
  profitable: true,
  description: "Sells user's data to companies and recruiters.",
  type: ["social-media"],
  sources: ["https://intelligence.businessinsider.com/welcome"]
},{
  name: 'amazon_kindle',
  revenues: {
    advertising:0,
    freemium:0,
    subscribers:0,
    premium:1,
    lead_gen:0,
    transactions:0,
    selling_data:0
  },
  revenue: "",
  profitable: false,
  description: "Amazon loses money with Kindle but at the same time makes money selling digital content on it.",
  type: ["hardware"],
  sources: [""]
},{
  name: 'microsoft_xbox',
  revenues: {
    advertising:1,
    freemium:1,
    subscribers:1,
    premium:1,
    lead_gen:0,
    transactions:1,
    selling_data:0
  },
  revenue: "",
  profitable: true,
  description: "Xbox console and games cost money (premium), charges $50 annually (subscribers) in addition to ads.",
  type: ["hardware"],
  sources: [""]
},{
  name: 'stack_overflow',
  revenues: {
    advertising:1,
    freemium:0,
    subscribers:0,
    premium:0,
    lead_gen:0,
    transactions:0,
    selling_data:0
  },
  revenue: "",
  profitable: true,
  description: "Ads, banners and sponsored results.",
  type: ["social-media"],
  sources: ["http://questions-and-answers.findthebest.com/q/17/2521/How-does-Stack-Overflow-make-money"]
},{
  name: 'netflix',
  revenues: {
    advertising:0,
    freemium:0,
    subscribers:1,
    premium:0,
    lead_gen:0,
    transactions:0,
    selling_data:0
  },
  revenue: "US$4.37 billion (2013)",
  profitable: true,
  description: "Just subscribers.",
  type: ["streaming"],
  sources: [""]
},{
  name: 'pandora',
  revenues: {
    advertising:1,
    freemium:1,
    subscribers:1,
    premium:0,
    lead_gen:0,
    transactions:0,
    selling_data:0
  },
  revenue: "US$274 million (2012)",
  profitable: true,
  description: "For free users presents adds, for subscribers does not.",
  type: ["streaming"],
  sources: [""]
},{
  name: 'spotify',
  revenues: {
    advertising:1,
    freemium:1,
    subscribers:1,
    premium:0,
    lead_gen:0,
    transactions:0,
    selling_data:0
  },
  revenue: "",
  profitable: false,
  description: "It has been reporting loses for a couple of years due to royalty payments.",
  type: ["streaming"],
  sources: ["http://mashable.com/2012/10/05/spotify-revenues/", "http://techcrunch.com/2013/07/31/spotify-doubles-revenues-in-2012-while-losing-money-highlighting-royalty-squeeze/", "http://www.telegraph.co.uk/technology/news/10490613/Spotify-pays-500m-in-royalties-in-2013.html"]
},{
  name: 'firefox',
  revenues: {
    advertising:0,
    freemium:0,
    subscribers:0,
    premium:0,
    lead_gen:0,
    transactions:1,
    selling_data:0
  },
  revenue: "US$311 million (2012)",
  profitable: true,
  description: "Most of the income comes from royalties from the Firefox search box. Their search partners includes Google, Bing, Yahoo, Yandex, Amazon, eBay and others. Also donations and grants.",
  type: ["browser"],
  sources: ["http://www.extremetech.com/internet/92558-how-browsers-make-money-or-why-google-needs-firefox", "http://www.mozilla.org/en-US/foundation/annualreport/2012/faq/"]
},{
  name: 'craigslist',
  revenues: {
    advertising:1,
    freemium:1,
    subscribers:0,
    premium:0,
    lead_gen:0,
    transactions:1,
    selling_data:0
  },
  revenue: "US$27 million (2013)",
  profitable: true,
  description: "Ads and charging users for posting in selected categories.",
  type: ["webapps"],
  sources: ["http://www.craigslist.org/about/factsheet"]
},{
  name: 'dropbox',
  revenues: {
    advertising:0,
    freemium:1,
    subscribers:1,
    premium:0,
    lead_gen:0,
    transactions:1,
    selling_data:0
  },
  revenue: "US$200 million (2013)",
  profitable: true,
  description: "A fixed capacity for free, to increase it users have to subscribe.",
  type: ["webapp"],
  sources: ["http://techcrunch.com/2013/11/19/if-dropboxs-2013-revenue-is-200m-an-8b-valuation-is-pretty-steep/"]
},{
  name: 'google',
  revenues: {
    advertising:1,
    freemium:0,
    subscribers:0,
    premium:0,
    lead_gen:0,
    transactions:0,
    selling_data:0
  },
  revenue: "US$59.82 billion (2013)",
  profitable: true,
  description: "Ad products is their main source of revenue (AdSense and AdWords)",
  type: ["webapp", "search"],
  sources: ["http://blogoscoped.com/archive/2009-01-07-n84.html", "http://en.wikipedia.org/wiki/Google"]
},{
  name: 'shopify',
  revenues: {
    advertising:0,
    freemium:0,
    subscribers:1,
    premium:0,
    lead_gen:0,
    transactions:1,
    selling_data:0
  },
  revenue: "US$100 million?",
  profitable: true,
  description: "Ad products is their main source of revenue (AdSense and AdWords)",
  type: ["webapp", "search"],
  sources: ["http://signalvnoise.com/posts/2378-profitable-proud-shopify", "http://www.shopify.com/2013", "http://www.theglobeandmail.com/report-on-business/small-business/sb-money/business-funding/a-rare-startup-success-story-shopify-hits-1-billion-milestone/article15892998/"]
},{
  name: 'airbnb',
  revenues: {
    advertising:0,
    freemium:0,
    subscribers:1,
    premium:0,
    lead_gen:0,
    transactions:1,
    selling_data:0
  },
  revenue: "US$1 billion?",
  profitable: true,
  description: "Charge to travelers a fee of 6-12% and hosts pay a 3% for every booking on their site.",
  type: ["webapp", "social-media"],
  sources: ["http://www.theglobeandmail.com/report-on-business/small-business/sb-money/business-funding/a-rare-startup-success-story-shopify-hits-1-billion-milestone/article15892998/", "http://www.businessinsider.com/airbnb-billion-revenues-2013-1"]
},{
  name: 'zynga',
  revenues: {
    advertising:1,
    freemium:1,
    subscribers:0,
    premium:0,
    lead_gen:0,
    transactions:0,
    selling_data:0
  },
  revenue: "US$873.266 million (2013)",
  profitable: true,
  description: "Zynga makes money through people purchasing credits for games and also throught partnerships.",
  type: ["webapp", "games"],
  sources: ["http://www.theglobeandmail.com/report-on-business/small-business/sb-money/business-funding/a-rare-startup-success-story-shopify-hits-1-billion-milestone/article15892998/"]
},{
  name: 'world_of_warcraft',
  revenues: {
    advertising:1,
    freemium:0,
    subscribers:1,
    premium:0,
    lead_gen:0,
    transactions:0,
    selling_data:0
  },
  revenue: "US$93 million (2013)",
  profitable: true,
  description: "Charges $15 per month to users. They also sends expasions packs and discs.",
  type: ["webapp", "games"],
  sources: ["http://www.theglobeandmail.com/report-on-business/small-business/sb-money/business-funding/a-rare-startup-success-story-shopify-hits-1-billion-milestone/article15892998/", "http://www.tomshardware.com/news/microtransactions-world-of-warcraft-revenues-mmorpg-in-game-store,24236.html"]
},{
  name: 'hulu',
  revenues: {
    advertising:1,
    freemium:0,
    subscribers:1,
    premium:0,
    lead_gen:0,
    transactions:0,
    selling_data:0
  },
  revenue: "US$1 billion (2013)",
  profitable: true,
  description: "Free service has Ads, limitations and restrictions, which are removed for subscribed users.",
  type: ["webapp", "streaming"],
  sources: ["http://gigaom.com/2013/12/18/hulu-2013-1-billion-in-revenue-5-million-subscribers-in-2013/"]
}];

$(function(){
  var $container = $('#companies-holder');

  _.each(companies, function printCompanies(company){
    var $company = _.template($("#company-icon").html(), company);
    $container.append($company);

    var $details = _.template($("#company-detail").html(), company);
    $container.append($details);
  });

  $(".company-icon").on('click', function(e){
    e.preventDefault();
    var name = $(this).data('company');
    var $description = $("#company-details-"+name);

    $description.dialog({
      dialogClass: "company-details-modal",
      modal: true,
      hide: { effect: "explode", duration: 300 },
    });
    $(".ui-widget-overlay").on("click", function() {  $(".ui-dialog-content").dialog().dialog("close"); });
  });
});

</script>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;Have you ever wonder how the companies that offer free services make money? Such as Instagram, Evernote, Facebook, Twitter, LinkedIn, Google Maps, so on… or if it is even profitable to keep free users using their services. We would go through several revenue models and hopefully, it will throw you some light next time you decide to roll your own startup.&lt;/p&gt;
    
    </summary>
    
      <category term="Technologies" scheme="http://adrianmejia.com/categories/Technologies/"/>
    
    
      <category term="startups" scheme="http://adrianmejia.com/tags/startups/"/>
    
  </entry>
  
  <entry>
    <title>Cheap Airplay receiver with Raspberry Pi</title>
    <link href="http://adrianmejia.com/blog/2014/02/15/cheap-airplay-receiver-with-raspberry-pi/"/>
    <id>http://adrianmejia.com/blog/2014/02/15/cheap-airplay-receiver-with-raspberry-pi/</id>
    <published>2014-02-15T17:59:26.000Z</published>
    <updated>2014-02-15T17:59:26.000Z</updated>
    
    <content type="html"><![CDATA[<p>I got excited about the idea of having a Raspberry Pi. It is in essence one of the smallest complete computer that you can get for $35 bucks! Ok, after I got one I had to do something useful with it… So I make it a Airplay receiver to play music remotely from any of my apple devices!</p>
<a id="more"></a>
<p>There is a couple of ways to make it work. The easiest one is to install the RaspBMC, a popular media center.(<a href="http://www.raspberrypi.org/downloads" target="_blank" rel="external">http://www.raspberrypi.org/downloads</a>)
You can even turn it into a home theater (<a href="http://www.makeuseof.com/tag/raspberry-pi-home-theater-system/" target="_blank" rel="external">http://www.makeuseof.com/tag/raspberry-pi-home-theater-system/</a>).
However, I’m not going to explain any of those ways because just installing them gives you 99% of the functionality. As a developer, I want to have control of the computers, and I’m not afraid of the console. So, I installed Raspbian instead, which is a lightweight Ubuntu/Debian Linux optimized for Raspberry Pi.</p>
<p>#Getting started</p>
<p><strong>1. Install Raspbian “wheezy”</strong></p>
<p>Download the image from <a href="http://www.raspberrypi.org/downloads" target="_blank" rel="external">http://www.raspberrypi.org/downloads</a> and follow the instructions. You have to format the SD card and “copy” the image. You can download this formatting tool: <a href="https://www.sdcard.org/downloads/formatter_4" target="_blank" rel="external">https://www.sdcard.org/downloads/formatter_4</a>. After that, plug the SD card in Raspberry, also the Ethernet cable and power cord. For more instructions follow <a href="http://lifehacker.com/5976912/a-beginners-guide-to-diying-with-the-raspberry-pi" target="_blank">http://lifehacker.com/5976912/a-beginners-guide-to-diying-with-the-raspberry-pi</a>.</p>
<p><strong>2.  Setup Pi</strong></p>
<p>You need to connect it to an HDMI display to set it up using a USB mouse and keyboard or you can use SSH if you had set that up.</p>
<p><strong>3. Access the Terminal</strong></p>
<p>From the terminal type the following commands in you Raspberry Pi:</p>
<p>Become root and update the system
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">sudo apt-get update &amp;&amp; sudo apt-get upgrade</div></pre></td></tr></table></figure></p>
<p><strong>3. Setup Audio</strong></p>
<p>Audio ports could either be bind to the HDMI connection or to the audio output jack (you need sudo to execute any sound command).
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">sudo amixer cset numid=3 1</div></pre></td></tr></table></figure></p>
<p>Connect the speakers to you Raspberry Pi. You can test that they work with these:</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">sudo speaker-test -t pink -l 1</div><div class="line">sudo speaker-test -t sine -l 1</div></pre></td></tr></table></figure>
<p>You can also adjust the volume
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">sudo alsamixer</div></pre></td></tr></table></figure></p>
<p><strong>4. Install Airplay software</strong></p>
<p>I tested with 2 different programs, both of them did the trick for me.</p>
<ul>
<li><a href="https://github.com/juhovh/shairplay" target="_blank" rel="external">https://github.com/juhovh/shairplay</a></li>
<li><a href="https://github.com/abrasive/shairport" target="_blank" rel="external">https://github.com/abrasive/shairport</a></li>
</ul>
<p>The latter is more popular so I will give the instructions for that one:</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">apt-get install -y libssl-dev libavahi-client-dev libasound2-dev git</div><div class="line">git <span class="built_in">clone</span> https://github.com/abrasive/shairport.git</div><div class="line"><span class="built_in">cd</span> shairport</div><div class="line">./configure</div><div class="line">make</div><div class="line">./shairport <span class="_">-a</span> <span class="string">'AirPi'</span></div></pre></td></tr></table></figure>
<p><strong>5. Run Airplay (shairport) on boot.</strong></p>
<p>It’s nice to run airport receiver automatically when you connect your Pi.</p>
<p>Create a file to start shairport
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">nano /etc/init.d/airplay</div></pre></td></tr></table></figure></p>
<p>Type the following into <code>airplay</code>:</p>
<figure class="highlight bash"><figcaption><span>airplay</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="meta">#!/bin/bash</span></div><div class="line">/usr/<span class="built_in">local</span>/bin/shairport <span class="_">-a</span> <span class="string">"AirPi"</span></div></pre></td></tr></table></figure>
<p>Close the editing mode and exit the file. Then register the script to be run on boot.
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">chmod a+x /etc/init.d/airplay</div><div class="line">update-rc.d airplay defaults</div></pre></td></tr></table></figure></p>
<p>Reboot your Pi and you are good to go!
(If you have any questions you can write a comment below)</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;I got excited about the idea of having a Raspberry Pi. It is in essence one of the smallest complete computer that you can get for $35 bucks! Ok, after I got one I had to do something useful with it… So I make it a Airplay receiver to play music remotely from any of my apple devices!&lt;/p&gt;
    
    </summary>
    
      <category term="Technologies" scheme="http://adrianmejia.com/categories/Technologies/"/>
    
    
      <category term="raspberrypi" scheme="http://adrianmejia.com/tags/raspberrypi/"/>
    
  </entry>
  
  <entry>
    <title>Algorithms for dummies (Part 1): Big-O Notation and Sorting</title>
    <link href="http://adrianmejia.com/blog/2014/02/13/algorithms-for-dummies-part-1-sorting/"/>
    <id>http://adrianmejia.com/blog/2014/02/13/algorithms-for-dummies-part-1-sorting/</id>
    <published>2014-02-13T13:28:51.000Z</published>
    <updated>2014-02-13T13:28:51.000Z</updated>
    
    <content type="html"><![CDATA[<p>After being developing software for a while,  I realized that there is a couple of ways to become better at it. One it’s through your experience: writing code, working on projects, getting hands dirty… Other one it’s learning algorithms and design patterns. In other words through leveraging the experience of other computer scientists. Learning to use algorithms efficiently can instantly add to you the equivalent of 10 years of experience or more. Let’s get started and add new tools to our arsenal!</p>
<a id="more"></a>
<p>How do you know a piece of code that you just wrote is good enough?  When you modify a program, how do you know if it is better as you found it? How do scale programs to handle huge amount of data? In fact, You cannot improve what you can’t measure.</p>
<p>How to measure them? We could count the number of seconds it takes to execute and compare it with other one. However, it’s not just troublesome to timers around code but if we run it in different hardware (e.g. supercomputer) it will seem like more efficient when indeed it’s exactly the same program. Let’s illustrate a better way with an example. Let’s say you want to sort an array of n integers.</p>
<h1 id="Sorting-Algorithms">Sorting Algorithms<a href="#Sorting-Algorithms" class="headerlink" title="Sorting Algorithms"></a></h1><figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">void</span> <span class="title">sort</span><span class="params">(<span class="keyword">int</span>[] arr)</span></span>&#123;</div><div class="line">  <span class="keyword">for</span>(<span class="keyword">int</span> x=<span class="number">1</span>; x &lt; arr.length; x++)</div><div class="line">    <span class="keyword">for</span>(<span class="keyword">int</span> y=x; y &gt; <span class="number">0</span> &amp;&amp; arr[y-<span class="number">1</span>] &gt; arr[y]; y--)&#123;</div><div class="line">        <span class="keyword">int</span> t = arr[y];</div><div class="line">        arr[y] = arr[y-<span class="number">1</span>];</div><div class="line">        arr[y-<span class="number">1</span>] = t;</div><div class="line">      &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>Do you recognize this algorithm? It’s called Insertion sort. It has two nested loops, which means that as the number of elements n in the array <code>arr</code> grows it will take approximately n * n longer to perform the sorting. In big-O notation, this will be represented like O(n^2). More on this notation later.</p>
<p>What would happen if the array arr is already sorted? That would be the best-case scenario. The inner for loop will never go through all the elements in the array then (because <code>arr[y-1] &gt; arr[y]</code>  won’t be met). So the algorithm in run in O(n).</p>
<p>We are not living in an ideal world. So O(n^2) will be probably the average time complexity. Can you think a better way of sorting an array of elements?</p>
<p>Take some minutes to think and come back…</p>
<h2 id="Merge-Sort">Merge Sort<a href="#Merge-Sort" class="headerlink" title="Merge Sort"></a></h2><p>A more efficient algorithm is the Merge sort. It uses the principle of divide and conquer to solve the problem faster. The idea is the follows:</p>
<img src="/images/mergesort.gif">
<ul>
<li>Divide the array in half</li>
<li>Divide the halves by half until 2 or 3 elements are remaining</li>
<li>Sort each of these halves</li>
<li>Merge them back together</li>
</ul>
<p>Can you determine the time complexity of mergesort?</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">void</span> <span class="title">sort</span><span class="params">(<span class="keyword">int</span>[] arr)</span></span>&#123;</div><div class="line">  <span class="keyword">int</span>[] helper = <span class="keyword">new</span> <span class="keyword">int</span>[arr.length];</div><div class="line">  mergesort(arr, helper, <span class="number">0</span>, arr.length-<span class="number">1</span>);</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="function"><span class="keyword">void</span> <span class="title">mergesort</span><span class="params">(<span class="keyword">int</span>[] arr, <span class="keyword">int</span>[] helper, <span class="keyword">int</span> low, <span class="keyword">int</span> high)</span></span>&#123;</div><div class="line">  <span class="keyword">if</span>(low &lt; high)&#123;</div><div class="line">    <span class="keyword">int</span> middle = (high+low)/<span class="number">2</span>;</div><div class="line">    mergesort(arr, helper, low, middle);</div><div class="line">    mergesort(arr, helper, middle+<span class="number">1</span>, high);</div><div class="line">    merge(arr, helper, low, middle, high);</div><div class="line">  &#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="function"><span class="keyword">void</span> <span class="title">merge</span><span class="params">(<span class="keyword">int</span>[] arr, <span class="keyword">int</span>[] helper, <span class="keyword">int</span> low, <span class="keyword">int</span> middle, <span class="keyword">int</span> high)</span></span>&#123;</div><div class="line">  <span class="keyword">for</span> (<span class="keyword">int</span> x=low; x &lt;= high; x++) &#123;</div><div class="line">    helper[x] = arr[x];</div><div class="line">  &#125;</div><div class="line"></div><div class="line">  <span class="keyword">int</span> left = low;</div><div class="line">  <span class="keyword">int</span> curr = low;</div><div class="line">  <span class="keyword">int</span> right = middle+<span class="number">1</span>;</div><div class="line"></div><div class="line">  <span class="keyword">while</span>(left &lt;= middle &amp;&amp; right &lt;= high) &#123;</div><div class="line">    <span class="keyword">if</span>(helper[right] &gt; helper[left])</div><div class="line">      arr[curr++] = helper[left++];</div><div class="line">    <span class="keyword">else</span></div><div class="line">      arr[curr++] = helper[right++];</div><div class="line">  &#125;</div><div class="line"></div><div class="line">  <span class="keyword">while</span>(left &lt;= middle)</div><div class="line">    arr[curr++] = helper[left++];</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>Even though the code is much longer, the algorithm is much more efficient.</p>
<img src="/images/insertion_vs_mergsort.png">
<p>It would take some more knowledge to derive the running time mathematically, and we haven’t covered that yet. However, bear with me, it’s O(n log(n)). Let’s sum up:</p>
<p>Algorithm | best | average | worst | space complexity
Insertion Sort | O(n) | O(n^2) | O(n^2) | O(1)
Merge sort | O(n log(n)) | O(n log(n)) | O(n log(n)) | O(n)</p>
<p>Notice that the table has also the space complexity. How much space does the algorithms take is also an important parameter to compare algorithms. The merge sort uses an additional array that’s way its space complexity is <code>O(n)</code>, however, the insertion sort uses <code>O(1)</code> because it does the sorting in-place.</p>
<h1 id="Big-O-Notation">Big O Notation<a href="#Big-O-Notation" class="headerlink" title="Big O Notation"></a></h1><p>Big O is defined as the asymptotic upper limit of a function. In plain english, it means that is a function that cover the maximum values a function could take. As we saw a little earlier this notation help us to predict performance and compare algorithms.</p>
<table>
<thead>
<tr>
<th>Growth Rate</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Constant</td>
</tr>
<tr>
<td>log(n)</td>
<td>Logarithmic</td>
</tr>
<tr>
<td>n</td>
<td>Linear</td>
</tr>
<tr>
<td>n log(n)</td>
<td>Linearithmic</td>
</tr>
<tr>
<td>n^2</td>
<td>Quadratic</td>
</tr>
<tr>
<td>n^3</td>
<td>Cubic</td>
</tr>
<tr>
<td>2^n</td>
<td>Exponential</td>
</tr>
</tbody>
</table>
<p>This is kinda abstract let’s see what it means in code:</p>
<table>
  <tr>
    <th>Growth Rate</th>
    <th>Name</th>
    <th>Code Example</th>
    <th>description</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Constant</td>
    <td><pre>a= b + 1;</pre></td>
    <td>statement (one line of code)</td>
  </tr>
  <tr>
    <td>log(n)</td>
    <td>Logarithmic</td>
    <td>
      <pre>
      while(n&gt;1){
        n=n/2;
      }
      </pre>
    </td>
    <td>Divide in half (binary search)</td>
  </tr>
  <tr>
    <td>n</td>
    <td>Linear</td>
    <td>
      <pre>
for(c=0; c&lt;n; c++){
  a+=1;
}
</pre></td>
    <td>Loop</td>
  </tr>
  <tr>
    <td>n*log(n)</td>
    <td>Linearithmic</td>
    <td>Mergesort, Quicksort, …</td>
    <td>Effective sorting algorithms</td>
  </tr>
  <tr>
    <td>n^2</td>
    <td>Quadratic</td>
    <td>
      <pre>
for(c=0; c&lt;n; c++){
  for(i=0; i&lt;n; i++){
    a+=1;
  }
}
</pre>
    </td>
    <td>Double loop</td>
  </tr>
  <tr>
    <td>n^3</td>
    <td>Cubic</td>
    <td>
      <pre>
for(c=0; c&lt;n; c++){
  for(i=0; i&lt;n; i++){
    for(x=0; x&lt;n; x++){
      a+=1;
    }
  }
}
</pre>
    </td>
    <td>Triple loop</td>
  </tr>
  <tr>
    <td>2^n</td>
    <td>Exponential</td>
    <td>Trying to braeak a password generating all possible combinations</td>
    <td>Exhaustive search</td>
  </tr>
</table>

<p>That’s all for this first part 1. I will continue publishing this tutorials every week or so. Stay tune!</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;After being developing software for a while,  I realized that there is a couple of ways to become better at it. One it’s through your experience: writing code, working on projects, getting hands dirty… Other one it’s learning algorithms and design patterns. In other words through leveraging the experience of other computer scientists. Learning to use algorithms efficiently can instantly add to you the equivalent of 10 years of experience or more. Let’s get started and add new tools to our arsenal!&lt;/p&gt;
    
    </summary>
    
      <category term="Technologies" scheme="http://adrianmejia.com/categories/Technologies/"/>
    
      <category term="Algorithms" scheme="http://adrianmejia.com/categories/Technologies/Algorithms/"/>
    
    
      <category term="big o" scheme="http://adrianmejia.com/tags/big-o/"/>
    
      <category term="algorithms" scheme="http://adrianmejia.com/tags/algorithms/"/>
    
  </entry>
  
  <entry>
    <title>Backbone.js for absolute beginners - getting started (part 4: Routers)</title>
    <link href="http://adrianmejia.com/blog/2012/09/13/backbone-js-for-absolute-beginners-getting-started-part-4/"/>
    <id>http://adrianmejia.com/blog/2012/09/13/backbone-js-for-absolute-beginners-getting-started-part-4/</id>
    <published>2012-09-13T18:41:00.000Z</published>
    <updated>2012-09-13T18:41:00.000Z</updated>
    
    <content type="html"><![CDATA[<p>This tutorial is about BackboneJS Routes.</p>
<a id="more"></a>
<p>The part 3 of this tutorial is <a href="/blog/2012/09/13/backbonejs-for-absolute-beginners-getting-started-part-3/">here</a>.</p>
<h1 id="Backbone-Router">Backbone.Router<a href="#Backbone-Router" class="headerlink" title="Backbone.Router"></a></h1><p>You could build web application without using the routers.  However, if you want to make reference to certain ‘state’ or location of the web application, you need a reference (link/URL) to it. This is where routers come to rescue.</p>
<p>Routing in most of JS application are achieved by hash-tags. E.g. If you take a look of Gmail URL you will see something like:</p>
<p><code>https://mail.google.com/mail/u/0/#inbox/139c0d48e11d986b</code></p>
<p>where the <code>#inbox/139c0d48e11d986b</code> is the hash-tag which reference some email location.</p>
<p>In backbone, routes are hash maps that match URL patterns to functions. You can use parameter parts, such as <code>todos/:id</code>, or using splats <code>file/*path</code> you will match all the parameters from the splat on. For that reason, the splat parameter should be always the last matcher.</p>
<h2 id="Initializing-the-Router">Initializing the Router<a href="#Initializing-the-Router" class="headerlink" title="Initializing the Router"></a></h2><p>In our Todo app, we are going to use routers to filter between the tasks that are pending and the ones that have been completed. So, let’s initialize the routes this way:</p>
<figure class="highlight js"><figcaption><span>Define Router</span><a href="https://raw.github.com/amejiarosario/Backbone-tutorial/327ac4fc4657e73fdf7157e230b1ed7cd1519667/backbone-tutorial.html" target="_blank" rel="external">Full Code</a></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">app.Router = Backbone.Router.extend(&#123;</div><div class="line">  routes: &#123;</div><div class="line">    <span class="string">'*filter'</span> : <span class="string">'setFilter'</span></div><div class="line">  &#125;,</div><div class="line">  setFilter: <span class="function"><span class="keyword">function</span>(<span class="params">params</span>) </span>&#123;</div><div class="line">    <span class="built_in">console</span>.log(<span class="string">'app.router.params = '</span> + params); <span class="comment">// just for didactical purposes.</span></div><div class="line">    <span class="built_in">window</span>.filter = params.trim() || <span class="string">''</span>;</div><div class="line">    app.todoList.trigger(<span class="string">'reset'</span>);</div><div class="line">  &#125;</div><div class="line">&#125;);</div><div class="line"></div></pre></td></tr></table></figure>
<p>Now, you need to initialize it, adding this lines:</p>
<figure class="highlight diff"><figcaption><span>Initialize router</span><a href="https://raw.github.com/amejiarosario/Backbone-tutorial/327ac4fc4657e73fdf7157e230b1ed7cd1519667/backbone-tutorial.html" target="_blank" rel="external">Full Code</a></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">     //--------------</div><div class="line">     // Initializers</div><div class="line">     //--------------</div><div class="line"></div><div class="line"><span class="addition">+    app.router = new app.Router();</span></div><div class="line"><span class="addition">+    Backbone.history.start();</span></div><div class="line">     app.appView = new app.AppView();</div><div class="line"></div></pre></td></tr></table></figure>
<p>You can test that you router is working just typing <code>#anything/that/you/want</code> and seeing the parameter in you browser’s console.</p>
<h2 id="2-6-1-Processing-the-routes">2.6.1 Processing the routes<a href="#2-6-1-Processing-the-routes" class="headerlink" title="2.6.1 Processing the routes"></a></h2><p>Before rendering the list of items, you need to check the parameters to wether show only the pending ones, or the completed or show them all. As shown in the code snipet below.</p>
<figure class="highlight diff"><figcaption><span>Processing the routes in app.AppView</span><a href="https://raw.github.com/amejiarosario/Backbone-tutorial/327ac4fc4657e73fdf7157e230b1ed7cd1519667/backbone-tutorial.html" target="_blank" rel="external">Full Code</a></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div></pre></td><td class="code"><pre><div class="line"></div><div class="line"><span class="meta">@@ -164,7 +177,18 @@</span></div><div class="line">       &#125;,</div><div class="line">       addAll: function()&#123;</div><div class="line">         this.$('#todo-list').html(''); // clean the todo list</div><div class="line"><span class="deletion">-        app.todoList.each(this.addOne, this);</span></div><div class="line"><span class="addition">+        // filter todo item list</span></div><div class="line"><span class="addition">+        switch(window.filter)&#123;</span></div><div class="line"><span class="addition">+          case 'pending':</span></div><div class="line"><span class="addition">+            _.each(app.todoList.remaining(), this.addOne);</span></div><div class="line"><span class="addition">+            break;</span></div><div class="line"><span class="addition">+          case 'completed':</span></div><div class="line"><span class="addition">+            _.each(app.todoList.completed(), this.addOne);</span></div><div class="line"><span class="addition">+            break;</span></div><div class="line"><span class="addition">+          default:</span></div><div class="line"><span class="addition">+            app.todoList.each(this.addOne, this);</span></div><div class="line"><span class="addition">+            break;</span></div><div class="line"><span class="addition">+        &#125;</span></div><div class="line">       &#125;,</div><div class="line">       newAttributes: function()&#123;</div><div class="line">         return &#123;</div><div class="line"></div><div class="line"></div></pre></td></tr></table></figure>
<p>If you try adding the words <code>#/pending</code> or <code>#/completed</code> at the end of the URL you’ll get an error!. That’s a good sign, it means the routes are working, but we haven’t implemented the <code>app.todoList.remaining()</code> and <code>app.todoList.completed()</code>. So, that’s next:</p>
<figure class="highlight diff"><figcaption><span>Defining completed and remaining functions in app.TodoList</span><a href="https://raw.github.com/amejiarosario/Backbone-tutorial/327ac4fc4657e73fdf7157e230b1ed7cd1519667/backbone-tutorial.html" target="_blank" rel="external">Full Code</a></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line"></div><div class="line"><span class="meta">@@ -85,7 +90,15 @@</span></div><div class="line">     //--------------</div><div class="line">     app.TodoList = Backbone.Collection.extend(&#123;</div><div class="line">       model: app.Todo,</div><div class="line"><span class="deletion">-      localStorage: new Store("backbone-todo")</span></div><div class="line"><span class="addition">+      localStorage: new Store("backbone-todo"),</span></div><div class="line"><span class="addition">+      completed: function() &#123;</span></div><div class="line"><span class="addition">+        return this.filter(function( todo ) &#123;</span></div><div class="line"><span class="addition">+          return todo.get('completed');</span></div><div class="line"><span class="addition">+        &#125;);</span></div><div class="line"><span class="addition">+      &#125;,</span></div><div class="line"><span class="addition">+      remaining: function() &#123;</span></div><div class="line"><span class="addition">+        return this.without.apply( this, this.completed() );</span></div><div class="line"><span class="addition">+      &#125;</span></div><div class="line">     &#125;);</div><div class="line"></div></pre></td></tr></table></figure>
<p>Now, if you try again adding the hash-tags it will work! But, it will be better if the user can have links to that instead of typing URLs. So, let’s add them.</p>
<figure class="highlight diff"><figcaption><span>Show routes' links</span><a href="https://raw.github.com/amejiarosario/Backbone-tutorial/327ac4fc4657e73fdf7157e230b1ed7cd1519667/backbone-tutorial.html" target="_blank" rel="external">Full Code</a></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div></pre></td><td class="code"><pre><div class="line"></div><div class="line"><span class="meta">@@ -32,6 +32,11 @@</span></div><div class="line">     &lt;header id="header"&gt;</div><div class="line">       &lt;h1&gt;Todos&lt;/h1&gt;</div><div class="line">       &lt;input id="new-todo" placeholder="What needs to be done?" autofocus&gt;</div><div class="line"><span class="addition">+      &lt;div&gt;</span></div><div class="line"><span class="addition">+        &lt;a href="#/"&gt;show all&lt;/a&gt; |</span></div><div class="line"><span class="addition">+        &lt;a href="#/pending"&gt;show pending&lt;/a&gt; |</span></div><div class="line"><span class="addition">+        &lt;a href="#/completed"&gt;show completed&lt;/a&gt;</span></div><div class="line"><span class="addition">+      &lt;/div&gt;</span></div><div class="line">     &lt;/header&gt;</div><div class="line">     &lt;section id="main"&gt;</div><div class="line">       &lt;ul id="todo-list"&gt;&lt;/ul&gt;</div><div class="line"></div><div class="line"></div></pre></td></tr></table></figure>
<p>Well, that’s all! If completed these 4 parts tutorial you will be familiar with the main Backbone modules (Models, Collections, Views, Events, and Routes). To increase you knowledge you can follow the following resources:</p>
<ul>
<li><a href="https://github.com/documentcloud/backbone/blob/master/backbone.js" target="_blank" rel="external">Backbone’s Source code - it’s the ultimate source of true</a></li>
<li><a href="http://backbonejs.org/?utm_source=adrianmejia.com" target="_blank" rel="external">Official documentation</a></li>
</ul>
<h1 id="What’s-next">What’s next?<a href="#What’s-next" class="headerlink" title="What’s next?"></a></h1><p>Write a server API in NodeJS to apply the learned here:</p>
<ul>
<li><a href="/blog/2014/10/01/creating-a-restful-api-tutorial-with-nodejs-and-mongodb/" target="_blank">Creating a RESTful API with NodeJS and MongoDB</a></li>
</ul>
<p>Now, do a Todo app in AngularJS:</p>
<ul>
<li><a href="/blog/2014/09/28/angularjs-tutorial-for-beginners-with-nodejs-expressjs-and-mongodb/" target="_blank">AngularJS tutorial for beginners with NodeJS ExpressJS and MongoDB</a></li>
</ul>
<p>Hope it was helpful!</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;This tutorial is about BackboneJS Routes.&lt;/p&gt;
    
    </summary>
    
      <category term="Technologies" scheme="http://adrianmejia.com/categories/Technologies/"/>
    
      <category term="Web Development" scheme="http://adrianmejia.com/categories/Technologies/Web-Development/"/>
    
    
      <category term="javascript" scheme="http://adrianmejia.com/tags/javascript/"/>
    
      <category term="backbonejs" scheme="http://adrianmejia.com/tags/backbonejs/"/>
    
      <category term="tutorial_backbonejs" scheme="http://adrianmejia.com/tags/tutorial-backbonejs/"/>
    
  </entry>
  
  <entry>
    <title>Backbone.js for absolute beginners - getting started (part 3: CRUD)</title>
    <link href="http://adrianmejia.com/blog/2012/09/13/backbonejs-for-absolute-beginners-getting-started-part-3/"/>
    <id>http://adrianmejia.com/blog/2012/09/13/backbonejs-for-absolute-beginners-getting-started-part-3/</id>
    <published>2012-09-13T05:37:00.000Z</published>
    <updated>2012-09-13T05:37:00.000Z</updated>
    
    <content type="html"><![CDATA[<p>In tutorial we are going to continue learning about BackboneJS: CRUD.</p>
<a id="more"></a>
<p>The part 2 of this tutorial is <a href="/blog/2012/09/13/backbone-js-for-absolute-beginners-getting-started-part-2/">here</a>.</p>
<h1 id="Todo-item-list-CRUD">Todo item list CRUD<a href="#Todo-item-list-CRUD" class="headerlink" title="Todo item list CRUD"></a></h1><p>There are a couple of features that we could improve. Let’s implement the CRUD (Create-Read-Update-Delete) for the item list.</p>
<h2 id="C-reate">C-reate<a href="#C-reate" class="headerlink" title="C-reate"></a></h2><p>We are already can create item list from the console (2.3) and also from the UI (2.4.3). So, it’s done.</p>
<h2 id="U-pdate">U-pdate<a href="#U-pdate" class="headerlink" title="U-pdate"></a></h2><p>What if you make a mistake and want to change the text on some of your to-do list. Furthermore, you can notice that the checkboxes states are not persistent when you reload the pages. Let’s fix both problems.</p>
<p>1.-    You want to respond to a double click event showing up a text box, where the user can change the text. First, let’s add the HTML in the <code>item-template</code> template below the label tag.</p>
<p><code>&lt;input class=&quot;edit&quot; value=&quot;&lt;%- title %&gt;&quot;&gt;</code></p>
<p>2.- If you refresh, you will notice that there are both displaying at the same time. So, you can hide them properly with the following CSS.
<figure class="highlight css"><figcaption><span>CSS</span><a href="https://raw.github.com/amejiarosario/Backbone-tutorial/3840dc802d6f311528298639150a5f52364c1975/backbone-tutorial.html" target="_blank" rel="external">Full Code</a></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"></div><div class="line"><span class="selector-id">#todo-list</span> <span class="selector-tag">input</span><span class="selector-class">.edit</span> &#123;</div><div class="line">  <span class="attribute">display</span>: none; <span class="comment">/* Hides input box*/</span></div><div class="line">&#125;</div><div class="line"><span class="selector-id">#todo-list</span> <span class="selector-class">.editing</span> <span class="selector-tag">label</span> &#123;</div><div class="line">  <span class="attribute">display</span>: none; <span class="comment">/* Hides label text when .editing*/</span></div><div class="line">&#125;</div><div class="line"><span class="selector-id">#todo-list</span> <span class="selector-class">.editing</span> <span class="selector-tag">input</span><span class="selector-class">.edit</span> &#123;</div><div class="line">  <span class="attribute">display</span>: inline; <span class="comment">/* Shows input text box when .editing*/</span></div><div class="line">&#125;</div><div class="line"></div></pre></td></tr></table></figure></p>
<p>3.- Then, we need to add the events to the TodoView class to respond to the changes.</p>
<figure class="highlight js"><figcaption><span>Todo Model</span><a href="https://raw.github.com/amejiarosario/Backbone-tutorial/3840dc802d6f311528298639150a5f52364c1975/backbone-tutorial.html" target="_blank" rel="external">Full Code</a></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div></pre></td><td class="code"><pre><div class="line"></div><div class="line"><span class="comment">// renders individual todo items list (li)</span></div><div class="line">app.TodoView = Backbone.View.extend(&#123;</div><div class="line">  tagName: <span class="string">'li'</span>,</div><div class="line">  template: _.template($(<span class="string">'#item-template'</span>).html()),</div><div class="line">  render: <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    <span class="keyword">this</span>.$el.html(<span class="keyword">this</span>.template(<span class="keyword">this</span>.model.toJSON()));</div><div class="line">    <span class="keyword">this</span>.input = <span class="keyword">this</span>.$(<span class="string">'.edit'</span>);</div><div class="line">    <span class="keyword">return</span> <span class="keyword">this</span>; <span class="comment">// enable chained calls</span></div><div class="line">  &#125;,</div><div class="line">  initialize: <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    <span class="keyword">this</span>.model.on(<span class="string">'change'</span>, <span class="keyword">this</span>.render, <span class="keyword">this</span>);</div><div class="line">  &#125;,</div><div class="line">  events: &#123;</div><div class="line">    <span class="string">'dblclick label'</span> : <span class="string">'edit'</span>,</div><div class="line">    <span class="string">'keypress .edit'</span> : <span class="string">'updateOnEnter'</span>,</div><div class="line">    <span class="string">'blur .edit'</span> : <span class="string">'close'</span></div><div class="line">  &#125;,</div><div class="line">  edit: <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    <span class="keyword">this</span>.$el.addClass(<span class="string">'editing'</span>);</div><div class="line">    <span class="keyword">this</span>.input.focus();</div><div class="line">  &#125;,</div><div class="line">  close: <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    <span class="keyword">var</span> value = <span class="keyword">this</span>.input.val().trim();</div><div class="line">    <span class="keyword">if</span>(value) &#123;</div><div class="line">      <span class="keyword">this</span>.model.save(&#123;title: value&#125;);</div><div class="line">    &#125;</div><div class="line">    <span class="keyword">this</span>.$el.removeClass(<span class="string">'editing'</span>);</div><div class="line">  &#125;,</div><div class="line">  updateOnEnter: <span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</div><div class="line">    <span class="keyword">if</span>(e.which == <span class="number">13</span>)&#123;</div><div class="line">      <span class="keyword">this</span>.close();</div><div class="line">    &#125;</div><div class="line">   &#125;</div><div class="line">&#125;);</div><div class="line"></div></pre></td></tr></table></figure>
<p>You can find the <a href="https://github.com/amejiarosario/Backbone-tutorial/commit/3840dc802d6f311528298639150a5f52364c1975" target="_blank" rel="external">diff</a> that were added to implement the update feature.</p>
<p><a href="https://github.com/amejiarosario/Backbone-tutorial/commit/19fa69e654ae5d370385675e4ffed615532b9934" target="_blank" rel="external">Here</a> are the changes to fix the update for the checkboxes.</p>
<h2 id="D-elete">D-elete<a href="#D-elete" class="headerlink" title="D-elete"></a></h2><p>To be able to remove to-do items, we need to add a remove button in each item and listen to the click event on it, which will trigger the destroy function in the selected todo object.</p>
<p>1.- Add the HTML markup for the remove button.</p>
<figure class="highlight diff"><figcaption><span>Remove Button into item template</span><a href="https://raw.github.com/amejiarosario/Backbone-tutorial/1267e531ae3ef508eb32e5308c2cc965f02d1b45/backbone-tutorial.html" target="_blank" rel="external">Full Code</a></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"></div><div class="line"><span class="meta">@@ -47,6 +47,7 @@</span></div><div class="line">       &lt;input class="toggle" type="checkbox" &lt;%= completed ? 'checked' : '' %&gt;&gt;</div><div class="line">       &lt;label&gt;&lt;%- title %&gt;&lt;/label&gt;</div><div class="line">       &lt;input class="edit" value="&lt;%- title %&gt;"&gt;</div><div class="line"><span class="addition">+      &lt;button class="destroy"&gt;remove&lt;/button&gt;</span></div><div class="line">     &lt;/div&gt;</div><div class="line">   &lt;/script&gt;</div><div class="line"></div></pre></td></tr></table></figure>
<p>2.- Listen for the click event in the button that you just created.</p>
<figure class="highlight diff"><figcaption><span>Add event listeners for the Remove Button in app.TodoView</span><a href="https://raw.github.com/amejiarosario/Backbone-tutorial/1267e531ae3ef508eb32e5308c2cc965f02d1b45/backbone-tutorial.html" target="_blank" rel="external">Full Code</a></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div></pre></td><td class="code"><pre><div class="line"></div><div class="line"><span class="meta">@@ -105,12 +106,14 @@</span></div><div class="line">       &#125;,</div><div class="line">       initialize: function()&#123;</div><div class="line">         this.model.on('change', this.render, this);</div><div class="line"><span class="addition">+        this.model.on('destroy', this.remove, this); // remove: Convenience Backbone'</span></div><div class="line">       &#125;,</div><div class="line">       events: &#123;</div><div class="line">         'dblclick label' : 'edit',</div><div class="line">         'keypress .edit' : 'updateOnEnter',</div><div class="line">         'blur .edit' : 'close',</div><div class="line"><span class="deletion">-        'click .toggle': 'toggleCompleted'</span></div><div class="line"><span class="addition">+        'click .toggle': 'toggleCompleted',</span></div><div class="line"><span class="addition">+        'click .destroy': 'destroy'</span></div><div class="line">       &#125;,</div><div class="line">       edit: function()&#123;</div><div class="line">         this.$el.addClass('editing');</div><div class="line"></div></pre></td></tr></table></figure>
<p>3.- Add the destroy method to the TodoView.</p>
<figure class="highlight diff"><figcaption><span>Add the destroy method to app.TodoView</span><a href="https://raw.github.com/amejiarosario/Backbone-tutorial/1267e531ae3ef508eb32e5308c2cc965f02d1b45/backbone-tutorial.html" target="_blank" rel="external">Full Code</a></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"></div><div class="line"><span class="meta">@@ -130,7 +133,10 @@</span></div><div class="line">       &#125;,</div><div class="line">       toggleCompleted: function()&#123;</div><div class="line">         this.model.toggle();</div><div class="line"><span class="deletion">-      &#125;</span></div><div class="line"><span class="addition">+      &#125;,</span></div><div class="line"><span class="addition">+      destroy: function()&#123;</span></div><div class="line"><span class="addition">+        this.model.destroy();</span></div><div class="line"><span class="addition">+      &#125;</span></div><div class="line">     &#125;);</div><div class="line"></div></pre></td></tr></table></figure>
<p>You can download the full working code so far in <a href="https://raw.github.com/amejiarosario/Backbone-tutorial/1267e531ae3ef508eb32e5308c2cc965f02d1b45/backbone-tutorial.html" target="_blank" rel="external">here</a> and you can visualize the changes needed to implement the delete feature in <a href="https://github.com/amejiarosario/Backbone-tutorial/commit/1267e531ae3ef508eb32e5308c2cc965f02d1b45" target="_blank" rel="external">here</a></p>
<h1 id="What’s-next">What’s next?<a href="#What’s-next" class="headerlink" title="What’s next?"></a></h1><p>Continue with the <a href="/blog/2012/09/13/backbone-js-for-absolute-beginners-getting-started-part-4/">4th part</a> and learn about Backbone’s Routes!</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;In tutorial we are going to continue learning about BackboneJS: CRUD.&lt;/p&gt;
    
    </summary>
    
      <category term="Technologies" scheme="http://adrianmejia.com/categories/Technologies/"/>
    
      <category term="Web Development" scheme="http://adrianmejia.com/categories/Technologies/Web-Development/"/>
    
    
      <category term="javascript" scheme="http://adrianmejia.com/tags/javascript/"/>
    
      <category term="backbonejs" scheme="http://adrianmejia.com/tags/backbonejs/"/>
    
      <category term="tutorial_backbonejs" scheme="http://adrianmejia.com/tags/tutorial-backbonejs/"/>
    
  </entry>
  
  <entry>
    <title>Backbone.js for absolute beginners - getting started (part 2: Models, Collections and Views)</title>
    <link href="http://adrianmejia.com/blog/2012/09/13/backbone-js-for-absolute-beginners-getting-started-part-2/"/>
    <id>http://adrianmejia.com/blog/2012/09/13/backbone-js-for-absolute-beginners-getting-started-part-2/</id>
    <published>2012-09-13T04:08:00.000Z</published>
    <updated>2012-09-13T04:08:00.000Z</updated>
    
    <content type="html"><![CDATA[<p>This tutorial builts on top of the <a href="/blog/2012/09/11/backbone-dot-js-for-absolute-beginners-getting-started/">first part</a> and continue with BacboneJS’s Models, Collections and Views.</p>
<a id="more"></a>
<h1 id="Todo-App-in-Backbone">Todo App in Backbone<a href="#Todo-App-in-Backbone" class="headerlink" title="Todo App in Backbone"></a></h1><p>After completing this example app, you will have experience and basic understanding of all the modules of Backbone!</p>
<p>(Updated: 2013-02-02, 2013-11-24)
Notice: This tutorial was written using Backbone v.0.9.x, now version 1.1.x or later are out. However, all the principles explained here applies for both.</p>
<p><strong>Todo app Boiler plate</strong></p>
<p>Let’s start again with the initial <a href="https://raw.github.com/amejiarosario/Backbone-tutorial/439ff34409dfc01adca7f9f96efcd726295f1aac/backbone-tutorial.html" target="_blank" rel="external">HTML file</a> used on 1.1. Now, instead of div#container let’s add the following HTML code:</p>
<figure class="highlight html"><figcaption><span>HTML Structure</span><a href="https://raw.github.com/amejiarosario/Backbone-tutorial/fe0efb0fd0c4c3c4cb5fd61e9917165082f9a562/backbone-tutorial.html" target="_blank" rel="external">Full Code</a></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">section</span> <span class="attr">id</span>=<span class="string">"todoapp"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">header</span> <span class="attr">id</span>=<span class="string">"header"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>Todos<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">id</span>=<span class="string">"new-todo"</span> <span class="attr">placeholder</span>=<span class="string">"What needs to be done?"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">header</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">section</span> <span class="attr">id</span>=<span class="string">"main"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">ul</span> <span class="attr">id</span>=<span class="string">"todo-list"</span>&gt;</span><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">section</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">section</span>&gt;</span></div><div class="line"></div></pre></td></tr></table></figure>  
<p>We are going to implement a To-do list, which is basically un-ordered list (ul) of elements with checkboxes.</p>
<h1 id="Backbone-Model">Backbone.Model<a href="#Backbone-Model" class="headerlink" title="Backbone.Model"></a></h1><p>Models are the heart of every application. It contains the interactive data and the logic surrounding it, such as data validation, getters and setters, default values, data initialization, conversions and so on.
For our example, we are going to create a model called <code>Todo</code>, which will store a string of text (title) and whether the task has been completed or not.</p>
<figure class="highlight js"><figcaption><span>Todo Model</span><a href="https://raw.github.com/amejiarosario/Backbone-tutorial/fe0efb0fd0c4c3c4cb5fd61e9917165082f9a562/backbone-tutorial.html" target="_blank" rel="external">Full Code</a></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"></div><div class="line"><span class="keyword">var</span> app = &#123;&#125;; <span class="comment">// create namespace for our app</span></div><div class="line"></div><div class="line">app.Todo = Backbone.Model.extend(&#123;</div><div class="line">  defaults: &#123;</div><div class="line">    title: <span class="string">''</span>,</div><div class="line">    completed: <span class="literal">false</span></div><div class="line">  &#125;</div><div class="line">&#125;);</div><div class="line"></div></pre></td></tr></table></figure>
<p>Notice, that for convention classes names are capitalize, while instance variables and objects are not. Another important aspect of models it’s that their properties are dynamic; they can be created on the fly and doesn’t have any specific type associated.</p>
<p><strong>Test what you just coded!</strong></p>
<p>After you completed the code snippet above you can open your browser console (chrome’s console: ctrl+shift+i -or- ⌘+alt+i) and try this out, to get familiar with the models:</p>
<figure class="highlight js"><figcaption><span>Practice in your Browser\'s console</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> todo = <span class="keyword">new</span> app.Todo(&#123;title: <span class="string">'Learn Backbone.js'</span>, completed: <span class="literal">false</span>&#125;); <span class="comment">// create object with the attributes specified.</span></div><div class="line">todo.get(<span class="string">'title'</span>); <span class="comment">// "Learn Backbone.js"</span></div><div class="line">todo.get(<span class="string">'completed'</span>); <span class="comment">// false</span></div><div class="line">todo.get(<span class="string">'created_at'</span>); <span class="comment">// undefined</span></div><div class="line">todo.set(<span class="string">'created_at'</span>, <span class="built_in">Date</span>());</div><div class="line">todo.get(<span class="string">'created_at'</span>); <span class="comment">// "Wed Sep 12 2012 12:51:17 GMT-0400 (EDT)"</span></div></pre></td></tr></table></figure>
<h1 id="Backbone-Collection">Backbone.Collection<a href="#Backbone-Collection" class="headerlink" title="Backbone.Collection"></a></h1><p>As its name indicates, collections are ordered sets of models, where you can get and set models in the collection, listen for events when any element in the collection changes, and fetching for model’s data from the server.</p>
<p>E.g.: <code>todoList.fetch();</code></p>
<p>Collections allows to save data (in database, file, memory), and it requires a reference to it. Therefore, you need to specify the <code>url</code> parameter with a relative url, where the model’s resource would be located on the server. Otherwise, you will get errors like:</p>
<p><code>A &quot;url&quot; property or function must be specified</code></p>
<p>We are not going to use a backend server for simplicity (I will do a new post for that); instead we are going to use HTML5’s local storage for persistence through a Backbone’s plugin. So, we need to define the localStorage property instead of URL. You need to include the backbone-localstorage.js with the rest of your libs as <a href="https://raw.github.com/amejiarosario/Backbone-tutorial/fe0efb0fd0c4c3c4cb5fd61e9917165082f9a562/backbone-tutorial.html" target="_blank" rel="external">shown in the full code</a>:</p>
<p><code>&lt;script src=&quot;http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.0/backbone.localStorage-min.js&quot; type=&quot;text/javascript&quot;&gt;</code></p>
<figure class="highlight js"><figcaption><span>Todo list Collection</span><a href="https://raw.github.com/amejiarosario/Backbone-tutorial/fe0efb0fd0c4c3c4cb5fd61e9917165082f9a562/backbone-tutorial.html" target="_blank" rel="external">Full Code</a></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">app.TodoList = Backbone.Collection.extend(&#123;</div><div class="line">  model: app.Todo,</div><div class="line">  localStorage: <span class="keyword">new</span> Store(<span class="string">"backbone-todo"</span>)</div><div class="line">&#125;);</div><div class="line"></div><div class="line"><span class="comment">// instance of the Collection</span></div><div class="line">app.todoList = <span class="keyword">new</span> app.TodoList();</div><div class="line"></div></pre></td></tr></table></figure>
<p><strong>Test what you just your coded!</strong></p>
<p>(Google’s Chrome console shortcuts: ctrl+shift+i -or- ⌘+alt+i)</p>
<figure class="highlight js"><figcaption><span>Practice in your Browser\'s console</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> todoList = <span class="keyword">new</span> app.TodoList()</div><div class="line">todoList.create(&#123;title: <span class="string">'Learn Backbone\'s Collection'</span>&#125;); <span class="comment">// notice: that `completed` will be set to false by default.</span></div><div class="line"><span class="keyword">var</span> lmodel = <span class="keyword">new</span> app.Todo(&#123;title: <span class="string">'Learn Models'</span>, completed: <span class="literal">true</span>&#125;);</div><div class="line">todoList.add(lmodel);</div><div class="line">todoList.pluck(<span class="string">'title'</span>);     <span class="comment">// ["Learn Backbone's Collection", "Learn Models"]</span></div><div class="line">todoList.pluck(<span class="string">'completed'</span>); <span class="comment">// [false, true]</span></div><div class="line"><span class="built_in">JSON</span>.stringify(todoList);    <span class="comment">// "[&#123;"title":"Learn Backbone's Collection","completed":false,"id":"d9763e99-2267-75f5-62c3-9d7e40742aa6"&#125;,&#123;"title":"Learn Models","completed":true&#125;]"</span></div></pre></td></tr></table></figure>
<h1 id="Backbone-View">Backbone.View<a href="#Backbone-View" class="headerlink" title="Backbone.View"></a></h1><p>As mentioned in <a href="/blog/2012/09/11/backbone-dot-js-for-absolute-beginners-getting-started/#1.2">1.2</a>, Views doesn’t have the HTML markups for our application, but instead (It’s like the controller in MVC frameworks) process data and link it to templates and it finally render HTML based on events or data changes.</p>
<h2 id="Basic-Properties">Basic Properties<a href="#Basic-Properties" class="headerlink" title="Basic Properties"></a></h2><p>There are 4 basic properties in a view: el, initialize, render, and events.</p>
<p>We have already seen the first 3 and will see later the fourth one. Do you remember the Hello World View from <a href="/blog/2012/09/11/backbone-dot-js-for-absolute-beginners-getting-started/#1.2">1.2</a>?</p>
<figure class="highlight js"><figcaption><span>Example of a Backbone.View</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> AppView = Backbone.View.extend(&#123;</div><div class="line">  <span class="comment">// el - stands for element. Every view has a element associate in with HTML</span></div><div class="line">  <span class="comment">//      content will be rendered.</span></div><div class="line">  el: <span class="string">'#container'</span>,</div><div class="line">  <span class="comment">// It's the first function called when this view it's instantiated.</span></div><div class="line">  initialize: <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    <span class="keyword">this</span>.render();</div><div class="line">  &#125;,</div><div class="line">  <span class="comment">// $el - it's a cached jQuery object (el), in which you can use jQuery functions</span></div><div class="line">  <span class="comment">//       to push content. Like the Hello World in this case.</span></div><div class="line">  render: <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    <span class="keyword">this</span>.$el.html(<span class="string">"Hello World"</span>);</div><div class="line">  &#125;</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h2 id="view-el"><code>view.el</code><a href="#view-el" class="headerlink" title="view.el"></a></h2><p>Every view needs to reference a DOM at all times. Therefore, the view will inject content into this element. This is the <code>el</code> property. <code>this.el</code> is created from view’s <code>el</code>,<code>tagName</code>, <code>className</code>, <code>id</code> or <code>attributes</code> properties. If none of these are specified, then this.el is an empty <code>div</code>. The <code>view.$el</code> it’s a cached jQuery object of the view’s element (view.el).  </p>
<h2 id="Initialize-construtor">Initialize/construtor<a href="#Initialize-construtor" class="headerlink" title="Initialize/construtor"></a></h2><p>Here you have the option to pass parameters that will be attached to a model, collection or view.el.   </p>
<h2 id="render"><code>render</code><a href="#render" class="headerlink" title="render"></a></h2><p>This function injects the markup into the elements. Not all views require having a render function, as you are going to see in the sample code, they can call other view’s render functions.    </p>
<h2 id="delegated-events">delegated events<a href="#delegated-events" class="headerlink" title="delegated events"></a></h2><p>Events are written in the following format:</p>
<p><code>{&quot;&lt;EVENT_TYPE&gt; &lt;ELEMENT_ID&gt;&quot;: &quot;&lt;CALLBACK_FUNTION&gt;&quot;}</code></p>
<p>E.g.</p>
<p><code>events: {&#39;keypress #new-todo&#39;: &#39;createTodoOnEnter&#39;}</code></p>
<p>in jQuery it would be something like:</p>
<p><code>$(&#39;#new-todo&#39;).keypress(createTodoOnEnter);</code></p>
<h1 id="Todo-View">Todo View<a href="#Todo-View" class="headerlink" title="Todo View"></a></h1><p>Now back to our To-do application: We need a view that renders each of the todo model objects into the page. The <code>item-template</code> and <code>app.TodoView</code> will render each todo item.</p>
<figure class="highlight html"><figcaption><span>item-template</span><a href="https://raw.github.com/amejiarosario/Backbone-tutorial/fe0efb0fd0c4c3c4cb5fd61e9917165082f9a562/backbone-tutorial.html" target="_blank" rel="external">Full Code</a></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/template"</span> <span class="attr">id</span>=<span class="string">"item-template"</span>&gt;</span><span class="javascript"></span></div><div class="line">  &lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">"view"</span>&gt;</div><div class="line">    <span class="xml"><span class="tag">&lt;<span class="name">input</span> <span class="attr">class</span>=<span class="string">"toggle"</span> <span class="attr">type</span>=<span class="string">"checkbox"</span>&gt;</span></span></div><div class="line">    <span class="tag">&lt;<span class="name">label</span>&gt;</span><span class="tag">&lt;<span class="name">%-</span> <span class="attr">title</span> %&gt;</span><span class="tag">&lt;/<span class="name">label</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"></div></pre></td></tr></table></figure>
<p>In the following block of code we have the Backbone.View which uses the above template (<code>#item-template</code>) to fill it out the title from the <code>model</code> we pass along.</p>
<figure class="highlight js"><figcaption><span>Todo View</span><a href="https://raw.github.com/amejiarosario/Backbone-tutorial/fe0efb0fd0c4c3c4cb5fd61e9917165082f9a562/backbone-tutorial.html" target="_blank" rel="external">Full Code</a></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"></div><div class="line"><span class="comment">// renders individual todo items list (li)</span></div><div class="line">app.TodoView = Backbone.View.extend(&#123;</div><div class="line">  tagName: <span class="string">'li'</span>,</div><div class="line">  template: _.template($(<span class="string">'#item-template'</span>).html()),</div><div class="line">  render: <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    <span class="keyword">this</span>.$el.html(<span class="keyword">this</span>.template(<span class="keyword">this</span>.model.toJSON()));</div><div class="line">    <span class="keyword">return</span> <span class="keyword">this</span>; <span class="comment">// enable chained calls</span></div><div class="line">  &#125;</div><div class="line">&#125;);</div><div class="line"></div></pre></td></tr></table></figure>
<p>When we instanciate the views, they can receive any parameter that we need. In our case we call it <code>model</code> so we need to instanciated with a model (e.g. todo):</p>
<p><code>var view = new app.TodoView({model: todo});</code></p>
<p>Also notice that it’s using a <code>tagName: li</code> instead of the just <code>el</code> from before. This mean that the new render elements will be wrapped around a <code>&lt;li&gt;&lt;/li&gt;</code></p>
<h1 id="Backbone-Events">Backbone.Events<a href="#Backbone-Events" class="headerlink" title="Backbone.Events"></a></h1><p>This module can be mixed with any object and give it the pub/sub (observer patter) behaviour. Events provides a couple of methods from which we are going to discuss: <code>on</code>, <code>off</code> and <code>trigger</code>. (If this you are familiar with then in jQuery, they will work the same way + some nice built-in features)</p>
<p><strong>Subscribing to Events with on</strong>
<code>object.on(event, callback, [context])</code></p>
<p>Also called bind. It binds an object to an event and a callback. When that event it’s triggered it executes the callback.</p>
<p>E.g.
<code>todoList.on(&#39;add&#39;, this.addAll, this);</code></p>
<p>Everytime a new item is <code>add</code>ed to a Backbone.Collection the event <code>add</code> is triggered. In the example above, after the event is triggered the todoList’s callback <code>addAll()</code> is executed and the current object is passed with <code>this</code> as a <code>context</code>.</p>
<p>Events can also be set on arbitrary objects using underscore.js <code>extend</code> function:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> object = &#123;&#125;,</div><div class="line">    callback = <span class="function"><span class="keyword">function</span>(<span class="params">msg</span>) </span>&#123; <span class="built_in">console</span>.log(<span class="string">"Triggered "</span> + msg); &#125;;</div><div class="line"></div><div class="line">_.extend(object, Backbone.Events);</div><div class="line"></div><div class="line">object.on(<span class="string">"my_event"</span>, callback);</div><div class="line"></div><div class="line">object.trigger(<span class="string">"my_event"</span>, <span class="string">"my custom event"</span>);</div></pre></td></tr></table></figure>
<h1 id="App-View">App View<a href="#App-View" class="headerlink" title="App View"></a></h1><p>Now, we need another view that take a collection and render each of the individual items. We are going to call it ‘AppView’. Take a look through this code and try to identify each of the elements (we have already describe them in the previous sections).</p>
<figure class="highlight js"><figcaption><span>Todo View</span><a href="https://raw.github.com/amejiarosario/Backbone-tutorial/fe0efb0fd0c4c3c4cb5fd61e9917165082f9a562/backbone-tutorial.html" target="_blank" rel="external">Full Code</a></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div></pre></td><td class="code"><pre><div class="line"></div><div class="line"><span class="comment">// renders the full list of todo items calling TodoView for each one.</span></div><div class="line">app.AppView = Backbone.View.extend(&#123;</div><div class="line">  el: <span class="string">'#todoapp'</span>,</div><div class="line">  initialize: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">    <span class="keyword">this</span>.input = <span class="keyword">this</span>.$(<span class="string">'#new-todo'</span>);</div><div class="line">    <span class="comment">// when new elements are added to the collection render then with addOne</span></div><div class="line">    app.todoList.on(<span class="string">'add'</span>, <span class="keyword">this</span>.addOne, <span class="keyword">this</span>);</div><div class="line">    app.todoList.on(<span class="string">'reset'</span>, <span class="keyword">this</span>.addAll, <span class="keyword">this</span>);</div><div class="line">    app.todoList.fetch(); <span class="comment">// Loads list from local storage</span></div><div class="line">  &#125;,</div><div class="line">  events: &#123;</div><div class="line">    <span class="string">'keypress #new-todo'</span>: <span class="string">'createTodoOnEnter'</span></div><div class="line">  &#125;,</div><div class="line">  createTodoOnEnter: <span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</div><div class="line">    <span class="keyword">if</span> ( e.which !== <span class="number">13</span> || !<span class="keyword">this</span>.input.val().trim() ) &#123; <span class="comment">// ENTER_KEY = 13</span></div><div class="line">      <span class="keyword">return</span>;</div><div class="line">    &#125;</div><div class="line">    app.todoList.create(<span class="keyword">this</span>.newAttributes());</div><div class="line">    <span class="keyword">this</span>.input.val(<span class="string">''</span>); <span class="comment">// clean input box</span></div><div class="line">  &#125;,</div><div class="line">  addOne: <span class="function"><span class="keyword">function</span>(<span class="params">todo</span>)</span>&#123;</div><div class="line">    <span class="keyword">var</span> view = <span class="keyword">new</span> app.TodoView(&#123;model: todo&#125;);</div><div class="line">    $(<span class="string">'#todo-list'</span>).append(view.render().el);</div><div class="line">  &#125;,</div><div class="line">  addAll: <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    <span class="keyword">this</span>.$(<span class="string">'#todo-list'</span>).html(<span class="string">''</span>); <span class="comment">// clean the todo list</span></div><div class="line">    app.todoList.each(<span class="keyword">this</span>.addOne, <span class="keyword">this</span>);</div><div class="line">  &#125;,</div><div class="line">  newAttributes: <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    <span class="keyword">return</span> &#123;</div><div class="line">      title: <span class="keyword">this</span>.input.val().trim(),</div><div class="line">      completed: <span class="literal">false</span></div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line">&#125;);</div><div class="line"></div><div class="line"><span class="comment">//--------------</span></div><div class="line"><span class="comment">// Initializers</span></div><div class="line"><span class="comment">//--------------   </span></div><div class="line"></div><div class="line">app.appView = <span class="keyword">new</span> app.AppView();     </div><div class="line"></div></pre></td></tr></table></figure>
<h1 id="What’s-next">What’s next?<a href="#What’s-next" class="headerlink" title="What’s next?"></a></h1><p> Continue with the <a href="/blog/2012/09/13/backbonejs-for-absolute-beginners-getting-started-part-3/">3rd part</a> and learn how to make CRUD for your models!</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;This tutorial builts on top of the &lt;a href=&quot;/blog/2012/09/11/backbone-dot-js-for-absolute-beginners-getting-started/&quot;&gt;first part&lt;/a&gt; and continue with BacboneJS’s Models, Collections and Views.&lt;/p&gt;
    
    </summary>
    
      <category term="Technologies" scheme="http://adrianmejia.com/categories/Technologies/"/>
    
      <category term="Web Development" scheme="http://adrianmejia.com/categories/Technologies/Web-Development/"/>
    
    
      <category term="javascript" scheme="http://adrianmejia.com/tags/javascript/"/>
    
      <category term="backbonejs" scheme="http://adrianmejia.com/tags/backbonejs/"/>
    
      <category term="tutorial_backbonejs" scheme="http://adrianmejia.com/tags/tutorial-backbonejs/"/>
    
  </entry>
  
  <entry>
    <title>Backbone.js for Absolute Beginners - Getting started (Part 1: Intro)</title>
    <link href="http://adrianmejia.com/blog/2012/09/11/backbone-dot-js-for-absolute-beginners-getting-started/"/>
    <id>http://adrianmejia.com/blog/2012/09/11/backbone-dot-js-for-absolute-beginners-getting-started/</id>
    <published>2012-09-12T02:50:00.000Z</published>
    <updated>2012-09-12T02:50:00.000Z</updated>
    
    <content type="html"><![CDATA[<p>Backbone.js is a JavaScript library, among many others, that is gaining special attention in the web development community because it’s ease of use and the structure that it provides to JavaScript applications.</p>
<p>Notice that BackboneJS is not a framework but a library. The difference is who is in control. Using a library YOU are in control, but using a framework there is an inversion of control: the framework calls you. Libraries give you a lot of flexibility, while frameworks has opinionated ways of doing things but can save you writing boiler plate code. Follow my <a href="/blog/categories/angularjs/">AngularJS</a> tutorial series for a framework solution.</p>
<p>Let’s dive into BackboneJS! and see how this flexible library can bring order to your Javascript!</p>
<a id="more"></a>
<h1 id="Brief-Background">Brief Background<a href="#Brief-Background" class="headerlink" title="Brief Background"></a></h1><p><a href="#start">TL; DR</a>: You need to use JavaScript heavily in order to make responsive and interactive web applications. <a href="#start">Jump to this and get started.</a></p>
<p>The web application development process has been evolving over the years. In the beginning web applications were just static HTML pages, which required programmers to change the code (HTML, CSS, JS) in order to change the content. Later, in web 2.0, server side programming languages (like PHP, Ruby, Java, …) were added to generate HTML pages dynamically based on user input and data stored in database. That was a huge improvement, and most of the pages served today use this approach. However, to provide the web site with even more responsiveness, speed, and enhanced user interaction, it requires bringing the logic closer to the client (browser).  There are a couple of languages that can run in the browsers besides JS, such as Java, Flash and others. However, these require extra plugins and are not as ubiquitous as JavaScript.</p>
<p>Web applications nowadays require heavy use of JavaScript to generate content on the fly. The user needn’t wait between requests and page refreshes. A lot of the logic/code that used to be on the server side is being moved to the client side. JS allows web sites to render only content that changes without needing to reload the full-page on every request. Examples of this kind of web applicqtion are Gmail, Pandora, Pinterest, Nokia Maps 3D and others.</p>
<p>A common problem with large JS web application developed is that they can become pretty messy really quickly. The lack of structure makes the code hard to maintain. This is where Backbone comes into play. It provides structure to organize the code and increase maintainability. Backbone is not the only framework like this; in fact, there are many JS frameworks that attempt to offer similar benefits, like Ember.js, Angular.js and so on. However, I choose Backbone because it’s one of the most widely used frameworks in its category. It has a vibrant community and it’s also being fully used in production for a considerable number of big companies like: Wal-Mart mobile, Groupon, Khan Academy, Pandora, Wordpress, Foursquare, and so on.</p>
<p><a id="start"></a></p>
<h1 id="BackboneJS-Overview">BackboneJS Overview<a href="#BackboneJS-Overview" class="headerlink" title="BackboneJS Overview"></a></h1><p><strong>Just enough to get started with Backbone.js</strong></p>
<p>Backbone.js has hard dependency on underscore.js and a soft dependency on jQuery. It’s made up of the following modules:</p>
<ul>
<li>Views</li>
<li>Events</li>
<li>Models</li>
<li>Collections</li>
<li>Routers</li>
</ul>
<p><strong>Shut up and show me the code!</strong></p>
<p>Alright! the way we are going to explore all of these modules is through examples. This is a practical tutorial that I wished I had it when I stared learning. This is a fat-free walkthrough of Backbone.js, as simple as possible, with all the code in one file for didactical purposes (no hidden magic tricks, all cards are on the table).</p>
<p>The first example is a ‘Hello World’ app in Backbone and the second is a ‘to do’ app. After working through these two example apps, you’ll see every Backbone module and have a practical understanding about them.</p>
<h1 id="Hello-World-in-Backbone-js">Hello World in Backbone.js<a href="#Hello-World-in-Backbone-js" class="headerlink" title="Hello World in Backbone.js"></a></h1><p>You can follow along with this tutorial’s code in this <a href="https://github.com/amejiarosario/Backbone-tutorial/commits/" target="_blank" rel="external">repository</a>. Each feature implemented is a new commit, so you can easily see what changed in every step.</p>
<p><strong>Simple HTML5 and Backbone boilerplate</strong></p>
<p>To get started, download <a href="https://raw.github.com/amejiarosario/Backbone-tutorial/439ff34409dfc01adca7f9f96efcd726295f1aac/backbone-tutorial.html" target="_blank" rel="external">this simple html file</a>. This file  contains the libraries that you’ll need (jQuery, Underscore.js, Backbone.js and Backbone-localStorage.js) and the placeholders for your HTML and JS code. Don’t worry about the libraries, we are going to explain them as we need them.</p>
<p>After downloading the aformentioned file, notice the HTML where your entire page will be built using Backbone.Views!</p>
<p>Your entire js app will be loaded here:</p>
<p><code>&lt;div id=&quot;container&quot;&gt;Loading...&lt;/div&gt;</code></p>
<h2 id="Backbone’s-Views">Backbone’s Views<a href="#Backbone’s-Views" class="headerlink" title="Backbone’s Views"></a></h2><p>Backbone’s Views are the equivalent of ‘controllers’ on MVC frameworks (like Ruby on Rails), if you are not familiar with MVC frameworks, that’s okay. Backbone’s Views glue together user events (clicks, pressed keys, etc.), render HTML views and templates, and interact with models which contains the data of the application.</p>
<p>Here is an example of a Backbone.view: READ THE CODE AND COMMENTS, then insert this code in the javascript block of the HTML file you downloaded.</p>
<figure class="highlight js"><figcaption><span>Simple Backbone.View</span><a href="https://raw.github.com/amejiarosario/Backbone-tutorial/0bf69185f4463a75cb2d5553f8d1ea197323ccff/backbone-tutorial.html" target="_blank" rel="external">Full Code</a></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> AppView = Backbone.View.extend(&#123;</div><div class="line">  <span class="comment">// el - stands for element. Every view has a element associate in with HTML</span></div><div class="line">  <span class="comment">//      content will be rendered.</span></div><div class="line">  el: <span class="string">'#container'</span>,</div><div class="line">  <span class="comment">// It's the first function called when this view it's instantiated.</span></div><div class="line">  initialize: <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    <span class="keyword">this</span>.render();</div><div class="line">  &#125;,</div><div class="line">  <span class="comment">// $el - it's a cached jQuery object (el), in which you can use jQuery functions</span></div><div class="line">  <span class="comment">//       to push content. Like the Hello World in this case.</span></div><div class="line">  render: <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    <span class="keyword">this</span>.$el.html(<span class="string">"Hello World"</span>);</div><div class="line">  &#125;</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h2 id="Test-the-app">Test the app<a href="#Test-the-app" class="headerlink" title="Test the app"></a></h2><p>After copying the code, open the file, refresh the browser and you should see the ‘Hello World’ message, right? Wait, if you’re just seeing the ‘Loading…’ it’s because you need to initialize the view first.</p>
<p><code>var appView = new AppView();</code></p>
<p>Yay! You have your “Hello Wold” in Backbone and an introduction to the View module. (Full code is <a href="https://raw.github.com/amejiarosario/Backbone-tutorial/0bf69185f4463a75cb2d5553f8d1ea197323ccff/backbone-tutorial.html" target="_blank" rel="external">here</a>)</p>
<h2 id="Backbone’s-Templates">Backbone’s Templates<a href="#Backbone’s-Templates" class="headerlink" title="Backbone’s Templates"></a></h2><p>Backbone has a utility/helper library called <a href="http://underscorejs.org/?utm_source=adrianmejia.com" target="_blank" rel="external">underscore.js</a> and you can use their template solution out of box. You can also use any other template solution that you want like <a href="https://github.com/janl/mustache.js" target="_blank" rel="external">mustache</a> or <a href="https://github.com/wycats/handlebars.js" target="_blank" rel="external">handlebars</a>. Let’s stick with _.js for simplicity’s sake.</p>
<p>_.js templates have the following syntax,</p>
<p><code>_.template(templateString, [data], [settings])</code></p>
<p>where in the <code>templateString</code> you use the place holder <code>&lt;%= %&gt;</code> and <code>&lt;%- %&gt;</code> to dynamically insert data. The later allows for HTML escape while the first one doesn’t. Moreover, you can use <code>&lt;% %&gt;</code> to run any javascript code.</p>
<p>Let’s see it in action and rewrite our “Hello World” using a _.js template instead.</p>
<figure class="highlight js"><figcaption><span>Simple Backbone.View and Templates</span><a href="https://raw.github.com/amejiarosario/Backbone-tutorial/c5b131278ecde92f33882c9a2c22ee4119e57d77/backbone-tutorial.html" target="_blank" rel="external">Full Code</a></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> AppView = Backbone.View.extend(&#123;</div><div class="line">  el: $(<span class="string">'#container'</span>),</div><div class="line">  <span class="comment">// template which has the placeholder 'who' to be substitute later</span></div><div class="line">  template: _.template(<span class="string">"&lt;h3&gt;Hello &lt;%= who %&gt;&lt;/h3&gt;"</span>),</div><div class="line">  initialize: <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    <span class="keyword">this</span>.render();</div><div class="line">  &#125;,</div><div class="line">  render: <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    <span class="comment">// render the function using substituting the varible 'who' for 'world!'.</span></div><div class="line">    <span class="keyword">this</span>.$el.html(<span class="keyword">this</span>.template(&#123;who: <span class="string">'world!'</span>&#125;));</div><div class="line">    <span class="comment">//***Try putting your name instead of world.</span></div><div class="line">  &#125;</div><div class="line">&#125;);</div><div class="line"></div><div class="line"><span class="keyword">var</span> appView = <span class="keyword">new</span> AppView();</div></pre></td></tr></table></figure>
<p>Run the app again and verify that it’s working with the template.</p>
<h1 id="What’s-next">What’s next?<a href="#What’s-next" class="headerlink" title="What’s next?"></a></h1><p>Continue with the <a href="/blog/2012/09/13/backbone-js-for-absolute-beginners-getting-started-part-2/">2nd part</a> and learn more about Backbone’s Models, Collections, View and Events!</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;Backbone.js is a JavaScript library, among many others, that is gaining special attention in the web development community because it’s ease of use and the structure that it provides to JavaScript applications.&lt;/p&gt;
&lt;p&gt;Notice that BackboneJS is not a framework but a library. The difference is who is in control. Using a library YOU are in control, but using a framework there is an inversion of control: the framework calls you. Libraries give you a lot of flexibility, while frameworks has opinionated ways of doing things but can save you writing boiler plate code. Follow my &lt;a href=&quot;/blog/categories/angularjs/&quot;&gt;AngularJS&lt;/a&gt; tutorial series for a framework solution.&lt;/p&gt;
&lt;p&gt;Let’s dive into BackboneJS! and see how this flexible library can bring order to your Javascript!&lt;/p&gt;
    
    </summary>
    
      <category term="Technologies" scheme="http://adrianmejia.com/categories/Technologies/"/>
    
      <category term="Web Development" scheme="http://adrianmejia.com/categories/Technologies/Web-Development/"/>
    
    
      <category term="javascript" scheme="http://adrianmejia.com/tags/javascript/"/>
    
      <category term="backbonejs" scheme="http://adrianmejia.com/tags/backbonejs/"/>
    
      <category term="tutorial_backbonejs" scheme="http://adrianmejia.com/tags/tutorial-backbonejs/"/>
    
  </entry>
  
  <entry>
    <title>Instagram mobile design secrets revealed</title>
    <link href="http://adrianmejia.com/blog/2012/05/06/instagram-mobile-design-secrets-revealed/"/>
    <id>http://adrianmejia.com/blog/2012/05/06/instagram-mobile-design-secrets-revealed/</id>
    <published>2012-05-07T01:45:00.000Z</published>
    <updated>2012-05-07T01:45:00.000Z</updated>
    
    <content type="html"><![CDATA[<p>Instagram is a very nice iPhone App. It allows you to give effects to your photos easily. Additionally, it’s blazing fast to upload your photos, and share them in other social networks such as Facebook, Twitter and/or Foursquare.</p>
<p>This app went from 0 to 12 million users in just 12 months! And today 30+ million users in less than 2 years. Go through the slideshows bellow and you can see why. This app has some design features that that improves a lot the user experience. One of them, it’s responding to the user actions instantly even though the task is still performing in the background…</p>
<a id="more"></a>
<p>More details in the slide:</p>
<script async class="speakerdeck-embed" data-id="4ede6e9cad0da6004d000175" data-ratio="1.299492385786802" src="//speakerdeck.com/assets/embed.js"></script>


<p>Scaling Instagram has also an interesting history:</p>
<script async class="speakerdeck-embed" data-id="4f86746753373601f1006e39" data-ratio="1.3333333333333333" src="//speakerdeck.com/assets/embed.js"></script>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;Instagram is a very nice iPhone App. It allows you to give effects to your photos easily. Additionally, it’s blazing fast to upload your photos, and share them in other social networks such as Facebook, Twitter and/or Foursquare.&lt;/p&gt;
&lt;p&gt;This app went from 0 to 12 million users in just 12 months! And today 30+ million users in less than 2 years. Go through the slideshows bellow and you can see why. This app has some design features that that improves a lot the user experience. One of them, it’s responding to the user actions instantly even though the task is still performing in the background…&lt;/p&gt;
    
    </summary>
    
      <category term="Technologies" scheme="http://adrianmejia.com/categories/Technologies/"/>
    
    
      <category term="startups" scheme="http://adrianmejia.com/tags/startups/"/>
    
      <category term="production" scheme="http://adrianmejia.com/tags/production/"/>
    
      <category term="scalability" scheme="http://adrianmejia.com/tags/scalability/"/>
    
  </entry>
  
  <entry>
    <title>Blog migration explained: Drupal 7 to Jekyll</title>
    <link href="http://adrianmejia.com/blog/2012/04/27/blog-migration-explained-drupal-7-to-jekyll/"/>
    <id>http://adrianmejia.com/blog/2012/04/27/blog-migration-explained-drupal-7-to-jekyll/</id>
    <published>2012-04-28T02:00:00.000Z</published>
    <updated>2012-04-28T02:00:00.000Z</updated>
    
    <content type="html"><![CDATA[<p>This post is a guide on how to extract your blog posts information from Drupal 7 to other systems. And also automatically create a redirect files from the old blog to the new one. In this case, I migrated to Jerkyll/Octopress blog but from the data extracted in with my script you can migrate any other blog system. Hopefully, this will save you a lot of time if you need to do the same task. If you run into troubles go to last section of the post it has some suggestions.
<a id="more"></a></p>
<h2 id="Extract-data-from-Drupal-7-site">Extract data from Drupal 7 site<a href="#Extract-data-from-Drupal-7-site" class="headerlink" title="Extract data from Drupal 7 site"></a></h2><h3 id="SQL-extraction">SQL extraction<a href="#SQL-extraction" class="headerlink" title="SQL extraction"></a></h3><p>You need to extract the data from your Drupal 7, there are several ways. You can connect to your web host via ssh and generate SQL dump.</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">mysqldump –uUSERNAME –pPASSWORD DATABASE &gt; FILENAME.sql</div></pre></td></tr></table></figure>
<p>(replace the UPPERCASE letters with your settings)</p>
<p>You can download the file *.sql to your computer and run the following command to install to upload the data in your local database.</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">mysql –uUSERNAME –pPASSWORD DATABASE &lt; FILENAME.sql</div></pre></td></tr></table></figure>
<p>If you have a access to you phpmyadmin in your host server you can download your sql dump file through that also. Other method is to use a local port fordwarding using SSH… anyways, get access to your database.</p>
<h3 id="Run-the-script">Run the script<a href="#Run-the-script" class="headerlink" title="Run the script"></a></h3><p>The 2nd and final step is to run the script that does all the magic. Below I will explain how it works in case that you want to customize.</p>
<script src="//gist.github.com/2515239.js?file=drupal2jekyll.rb"></script>
<p>Replace the place holders with your actual values:</p>
<ul>
<li>OLD_DOMAIN</li>
<li>NEW_DOMAIN</li>
<li>ENV[‘DRUPAL_DATABASE’]</li>
<li>ENV[‘DB_USER’]</li>
<li>ENV[‘DB_PASSWORD’]</li>
</ul>
<p>After you run it, it will generate 3 folders:</p>
<ul>
<li>_post: has all your post in the Jekyll style (categories and tags and everything)</li>
<li>_draft: not published posts if any</li>
<li>drupal_redirect: for each url of your posts it has a folder with a redirect index.php file to your new domain.</li>
</ul>
<p>Copy each of this folder to their respective places. Copy the content to your drupal_redirect to the root of your old blog and that’s it. It will redirect all your all blog URLs to your new site.</p>
<h3 id="Behind-the-scenes…">Behind the scenes…<a href="#Behind-the-scenes…" class="headerlink" title="Behind the scenes…"></a></h3><p>First, you need to extract the data from your Drupal site. I reversed engineer the database in order to extract the post, title, url alias (slug), tags, publish info, format and the last version of the post. The query that does all the magic is the following one:</p>
<figure class="highlight sql"><figcaption><span>Drupal 7 Query to extract all the post info</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">SELECT</span></div><div class="line">n.nid,</div><div class="line">n.title,</div><div class="line">n.created,</div><div class="line">n.changed,</div><div class="line">b.body_value <span class="keyword">AS</span> <span class="string">'body'</span>,</div><div class="line">b.body_summary,</div><div class="line">b.body_format,</div><div class="line">n.status,</div><div class="line">l.alias <span class="keyword">AS</span> <span class="string">'slug'</span>,</div><div class="line"><span class="keyword">GROUP_CONCAT</span>( d.name SEPARATOR <span class="string">', '</span> ) <span class="keyword">AS</span> <span class="string">'tags'</span></div><div class="line"></div><div class="line"><span class="keyword">FROM</span> url_alias l, node n</div><div class="line"><span class="keyword">JOIN</span> field_data_body b <span class="keyword">ON</span> b.entity_id = n.nid</div><div class="line"><span class="keyword">JOIN</span> taxonomy_index t <span class="keyword">ON</span> t.nid = n.nid</div><div class="line"><span class="keyword">JOIN</span> taxonomy_term_data d <span class="keyword">ON</span> t.tid = d.tid</div><div class="line"></div><div class="line"><span class="keyword">WHERE</span> n.type = <span class="string">'blog'</span></div><div class="line"><span class="keyword">AND</span> b.revision_id = n.vid</div><div class="line"><span class="keyword">AND</span> l.source = <span class="keyword">CONCAT</span>( <span class="string">'node/'</span>, n.nid )</div><div class="line"></div><div class="line"><span class="keyword">GROUP</span> <span class="keyword">BY</span> n.nid</div></pre></td></tr></table></figure>
<p>As might notice, it concatenates all the tags separated by comma and also finds the alias of the url if is called node. Also you can also find the url alias for other pages such as terms or taxonomies. But let’s keep it simple and get the posts urls.</p>
<p>Finally, the script will use the data from this query to generate the new posts files and also to create the redirect files.</p>
<p>As might notice, it concatenates all the tags separated by comma and also finds the alias of the url if is called node. Also you can also find the url alias for other pages such as terms or taxonomies. But let’s keep it simple and get the posts urls.</p>
<p>Finally, the script will use the data from this query to generate the new posts files and also to create the redirect files.</p>
<h3 id="Troubleshooting">Troubleshooting<a href="#Troubleshooting" class="headerlink" title="Troubleshooting"></a></h3><p>I had a hard time having the mysql gem work with seqel in my Mac OS X 10.7 (Lion) and ruby 1.9.2.</p>
<p>I got the following errors:</p>
<ul>
<li>Library not loaded: libmysqlclient.18.dylib (LoadError)
Sequel::DatabaseConnectionError: Mysql::ClientError::ServerGoneError: The MySQL server has gone away mysql2 ruby</li>
<li>“LoadError: require ‘mysql’ did not define Mysql::CLIENT_MULTI_RESULTS!”</li>
<li>“You are probably using the pure ruby mysql.rb driver, which Sequel does not support. You need to install the C based adapter, and make sure that the mysql.so file is loaded instead of the mysql.rb file.”</li>
<li>Sequel::AdapterNotFound: LoadError: require ‘mysql’ did not define Mysql::CLIENT_MULTI_RESULTS! You are probably using the pure ruby mysql.rb driver, which Sequel does not support. You need to install the C based adapter, and make sure that the mysql.so file is loaded instead of the mysql.rb file.</li>
<li>And others…</li>
</ul>
<h4 id="Solution">Solution:<a href="#Solution" class="headerlink" title="Solution:"></a></h4><p>The mysql gem have been abandoned, so you also need mysql2 to work propery with sequel</p>
<figure class="highlight bash"><figcaption><span>bash Install MySQL gems</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">$ sudo gem install sequel</div><div class="line">$ sudo gem install mysql -- --with-mysql-config=/usr/<span class="built_in">local</span>/mysql/bin/mysql_config</div><div class="line">$ sudo gem install mysql2 -- --with-mysql-config=/usr/<span class="built_in">local</span>/mysql/bin/mysql_config</div></pre></td></tr></table></figure>
<p>also  you need to copy the following lib:</p>
<figure class="highlight bash"><figcaption><span>Reference needed libs</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ sudo ln <span class="_">-s</span> /usr/<span class="built_in">local</span>/mysql/lib/libmysqlclient.18.dylib /usr/lib/libmysqlclient.18.dylib</div></pre></td></tr></table></figure>
<p>That should work.</p>
<p>Just if you are courious there is another gem called ruby-mysql, with which you can connect to mysql. But it doesn’t work with sequel</p>
<figure class="highlight bash"><figcaption><span>Alternative gem to connect to mysql (ruby-mysql)</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">$ gem install ruby-mysql -- --with-mysql-config=/usr/<span class="built_in">local</span>/mysql/bin/mysql_config</div><div class="line">$ irb</div><div class="line">&gt; require <span class="string">'mysql'</span></div><div class="line">&gt; db = Mysql.real_connect(<span class="string">"SERVER"</span>,<span class="string">"USER"</span>,<span class="string">"PASSWORD"</span>,<span class="string">"DATABASE"</span>)</div></pre></td></tr></table></figure>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;This post is a guide on how to extract your blog posts information from Drupal 7 to other systems. And also automatically create a redirect files from the old blog to the new one. In this case, I migrated to Jerkyll/Octopress blog but from the data extracted in with my script you can migrate any other blog system. Hopefully, this will save you a lot of time if you need to do the same task. If you run into troubles go to last section of the post it has some suggestions.
    
    </summary>
    
      <category term="Technologies" scheme="http://adrianmejia.com/categories/Technologies/"/>
    
    
      <category term="drupal" scheme="http://adrianmejia.com/tags/drupal/"/>
    
  </entry>
  
  <entry>
    <title>Spring MVC 3 + AJAX (getJSON) and solving 406 Not Accepted</title>
    <link href="http://adrianmejia.com/blog/2012/04/27/spring-mvc-3-plus-ajax-getjson-and-solving-406-not-accepted/"/>
    <id>http://adrianmejia.com/blog/2012/04/27/spring-mvc-3-plus-ajax-getjson-and-solving-406-not-accepted/</id>
    <published>2012-04-27T06:17:00.000Z</published>
    <updated>2012-04-27T06:17:00.000Z</updated>
    
    <content type="html"><![CDATA[<p>I wanted to add AJAX to Spring MVC application. So, I did what most us do, go through the documentation or blog of the Spring Source. But, after playing around I didn’t get it to work properly so here are some details that might save you some time.</p>

<a id="more"></a>
<p>After I follow the instructions in <a href="http://blog.springsource.org/2010/01/25/ajax-simplifications-in-spring-3-0/%20" target="_blank">AJAX in Spring 3.0</a> I got some error “406 Not Accepted”, so let’s explain how to make it work:</p>

<h1 id="Server-Side">Server Side<a href="#Server-Side" class="headerlink" title="Server Side"></a></h1><p>First you need to setup the actions/methods that the ajax client will call and provide that data in a request. In the server side we are going to use Spring MVC and reply using a JSON format.</p>
<p>1. You need the annotation <strong>&lt;mvc:annotation-driven /&gt;</strong> in your spring.xml or servelet-web-context.xml<br>2. Then, you need to create your controller action that will reply to the AJAX invocation. Let’s see the following example. E.g. ProductController.java&nbsp;</p>

<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="meta">@RequestMapping</span> (value=<span class="string">"/itemdescription"</span>, method=RequestMethod.GET, headers=<span class="string">"Accept=application/json"</span>)</div><div class="line"><span class="keyword">public</span> <span class="meta">@ResponseBody</span> <span class="function">Product <span class="title">getItemDescription</span><span class="params">(@RequestParam String id)</span></span>&#123;</div><div class="line">  <span class="comment">// code…</span></div><div class="line">  <span class="keyword">return</span> yourProduct;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>There are a couple of things to point out here. Notice the return @ResponseBody Product type. So, you need to create create a POJO (Plain java class with the data that you want to send along with it’s getters and setters). E.g. Product.java.&nbsp;</p>
<p>Also, notice the @ResponseBody annotation. This annotation allow you to translate the Product object into a JSON representation. But, this is not magic! and you need a couple of JARs to make it work (additionally to the annotation metined in step (1):</p>
<ol>
<li><a href="http://mvnrepository.com/artifact/org.codehaus.jackson/jackson-core-asl" target="_blank" rel="external">http://mvnrepository.com/artifact/org.codehaus.jackson/jackson-core-asl</a></li>
<li><a href="http://mvnrepository.com/artifact/org.codehaus.jackson/jackson-mapper-asl" target="_blank" rel="external">http://mvnrepository.com/artifact/org.codehaus.jackson/jackson-mapper-asl</a></li>
</ol>
<p>Use maven or download and place this JARs in the lib manually.</p>

<h1 id="Client-Side">Client Side<a href="#Client-Side" class="headerlink" title="Client Side"></a></h1><p>On the client side, I’m using jQuery and the code looks like this:</p>


<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> jqxhr = $.getJSON(<span class="string">"/&lt;your-servlet-name&gt;/itemdescription?id="</span> + itemId, <span class="function"><span class="keyword">function</span>(<span class="params">result</span>) </span>&#123;</div><div class="line">    <span class="comment">//res=jQuery.stringify(result);</span></div><div class="line"></div><div class="line">    <span class="keyword">if</span> (result != <span class="literal">null</span>) &#123;</div><div class="line">      $.each(result, <span class="function"><span class="keyword">function</span>(<span class="params">key, value</span>) </span>&#123;</div><div class="line">        <span class="keyword">if</span> (key === <span class="string">"descr"</span>) &#123;</div><div class="line">          descr.val(value);</div><div class="line">          userdescr.val(value);</div><div class="line">        &#125;</div><div class="line">      &#125;);</div><div class="line">    &#125; <span class="keyword">else</span> &#123;</div><div class="line">      descr.val(<span class="string">""</span>);</div><div class="line">      userdescr.val(<span class="string">""</span>);</div><div class="line">    &#125;</div><div class="line">  &#125;)</div><div class="line">  <span class="comment">// .success(function() &#123; console.log("2nd function second success"); &#125;)</span></div><div class="line">  .error(<span class="function"><span class="keyword">function</span>(<span class="params">XMLHttpRequest, textStatus, errorThrown</span>) </span>&#123;</div><div class="line">    <span class="built_in">console</span>.log(<span class="string">"error "</span> + textStatus + <span class="string">": "</span> + errorThrown);</div><div class="line">  &#125;)</div><div class="line">  <span class="comment">// .complete(function() &#123; console.log("complete"); &#125;);</span></div></pre></td></tr></table></figure>
<p>There are some function there that are useful for debugging like printing out errors to the console and complete function. Notice also that $.getJSON is expenting the reponse in of a appplication/json type. So be sure that you have the “Accept=application/json” in your controller on the server side.</p>
<p>Finally you can customize the javascript fragment shown above and place it in your webpage (JSP, HTML,…) in a ready document. (Also, It was also useful for me to add a delay after the document ready function because otherwise it conflicted with dojo framework apply to the same component. But remove the timeout if you want to)</p>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">"document.ready"</span>);</div><div class="line">  setTimeout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</div><div class="line">    $(_itemId).keyup(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</div><div class="line">      checkItemId($(_itemId).val(), $(_descr), $(_userdescr));</div><div class="line">    &#125;);</div><div class="line">    $(_itemId).blur(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</div><div class="line">      checkItemId($(_itemId).val(), $(_descr), $(_userdescr));</div><div class="line">    &#125;);</div><div class="line">  &#125;, <span class="number">100</span>);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p>&nbsp;</p>
<p>&nbsp;That’s all you need.</p>

<h1 id="Troubleshooting">Troubleshooting<a href="#Troubleshooting" class="headerlink" title="Troubleshooting"></a></h1><p>As mentioned before the spring mvc blog explain more in details each of the steps but lack some minor details that are key to make it work. I was getting “406 Not Accepted” because I didn’t have the jackson jars that the @ResponseBody needs to convert java objects to JSON. And also you need to add the Accept Request header in the controller.</p>
<p>Using Firebug in Firefox is very tab Net &gt; XHR you can see all your ajax request and reponses. Very useful for debugging. Hope this save you some time and frustration. Any question or suggestion fee free to comment below or contact me.</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;I wanted to add AJAX to Spring MVC application. So, I did what most us do, go through the documentation or blog of the Spring Source. But, after playing around I didn’t get it to work properly so here are some details that might save you some time.&lt;/p&gt;
    
    </summary>
    
      <category term="Technologies" scheme="http://adrianmejia.com/categories/Technologies/"/>
    
      <category term="Troubleshooting" scheme="http://adrianmejia.com/categories/Technologies/Troubleshooting/"/>
    
    
      <category term="java" scheme="http://adrianmejia.com/tags/java/"/>
    
      <category term="spring mvc" scheme="http://adrianmejia.com/tags/spring-mvc/"/>
    
  </entry>
  
  <entry>
    <title>Adding Subversion (SVN) Properties to your code</title>
    <link href="http://adrianmejia.com/blog/2012/02/11/adding-subversion-svn-properties-to-your-code/"/>
    <id>http://adrianmejia.com/blog/2012/02/11/adding-subversion-svn-properties-to-your-code/</id>
    <published>2012-02-11T05:00:00.000Z</published>
    <updated>2012-02-11T23:35:31.000Z</updated>
    
    <content type="html"><![CDATA[<p>When you are coding in a team enviroment it&#39;s good to have the subversion properties in your files, that way any other developer can see quickly who made the last changes and when.</p>
<p>You can add the following lines at the bottom of your code:</p>
<a id="more"></a>
<div>
    //—————————————————————————–</div>
<div>
    // &nbsp;REVISION HISTORY</div>
<div>
    // &nbsp;$LastChangedDate: $</div>
<div>
    // &nbsp;$Revision: $</div>
<div>
    // &nbsp;$LastChangedBy: $</div>
<div>
    // &nbsp;$Id: $</div>
<div>
    //—————————————————————————–</div>
<div>
    &nbsp;</div>
<div>
    And when you perform your svn commit will be automatically populated something like this:</div>
<div>
    //—————————————————————————–</div>
<div>
    // &nbsp;REVISION HISTORY</div>
<div>
    // &nbsp;$LastChangedDate: 2012-02-11 18:24:39 -0500 (Sat, 11 Feb 2012) $</div>
<div>
    // &nbsp;$Revision: 61 $</div>
<div>
    // &nbsp;$LastChangedBy: adriansky $</div>
<div>
    // &nbsp;$Id: Heap.java 61 2012-02-11 23:24:39Z adriansky $</div>
<div>
    //—————————————————————————–</div>
<div>
    &nbsp;</div>
<div>
    Also you need to set the SVN properties for that file. The Properties that you need are the following:</div>
<ul>
    <li>
        svn:eol-style &nbsp;—&gt; LF</li>
    <li>
        svn:keywords —&gt; LastChangedDate Revision LastChangedBy Id</li>
</ul>
<div>
    If you are using Eclipse you can edit it following this steps:</div>
<ol>
    <li>
        right click file you want to add svn properties</li>
    <li>
        Menu team &gt; set properties (image bellow)</li>
    <li>
        Select the Property name from the combobox&nbsp;(image bellow)</li>
    <li>
        Add the text property in the text box&nbsp;(image bellow)</li>
    <li>
        You can also use files to avoid all the typing every time. right click and &#39;save as…&#39; to &lt;<a href="http://adrianmejiarosario.com/sites/default/files/svn-keywords.txt" target="_blank">svn-keywords</a>&gt; and&nbsp;&lt;<a href="http://adrianmejiarosario.com/sites/default/files/svn-eol-style.txt" onclick="window.open(this.href, '', 'resizable=no,status=no,location=no,toolbar=no,menubar=no,fullscreen=no,scrollbars=no,dependent=no'); return false;" target="_blank" rel="external">svn-eol-property</a>&gt;.</li>
    <li>
        Commit and you are all set.</li>
</ol>
<p>Eclipse Menu to add svn properties</p>
<p>
<!-- <img alt="Eclipse SVN Property Menu" src="http://adrianmejiarosario.com/sites/default/files/svnprop1.png" style="width: 600px; height: 564px; " /> -->
</p>
<p>Adding SVN properties typing</p>
<p>
<!-- <img alt="" src="http://adrianmejiarosario.com/sites/default/files/svnprop2.png" style="width: 525px; height: 520px; " /> -->
</p>
<p>Adding SVN property from file</p>
<p>
<!-- <img alt="SVN property from file" src="http://adrianmejiarosario.com/sites/default/files/svnprop3.png" style="width: 525px; height: 520px; " /> -->
</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;When you are coding in a team enviroment it&amp;#39;s good to have the subversion properties in your files, that way any other developer can see quickly who made the last changes and when.&lt;/p&gt;
&lt;p&gt;You can add the following lines at the bottom of your code:&lt;/p&gt;
    
    </summary>
    
    
  </entry>
  
  <entry>
    <title>How do I change the Ruby/Python version Textmate uses?</title>
    <link href="http://adrianmejia.com/blog/2012/02/09/how-do-i-change-the-ruby-python-version-textmate-uses/"/>
    <id>http://adrianmejia.com/blog/2012/02/09/how-do-i-change-the-ruby-python-version-textmate-uses/</id>
    <published>2012-02-09T05:00:00.000Z</published>
    <updated>2012-02-09T05:50:04.000Z</updated>
    
    <content type="html"><![CDATA[<p>&nbsp;</p>
<p>I&#39;m using textMate to develop ruby code. It&#39;s very handy because I can run it just pressing (cmd-R). But by default it&#39;s running ruby 1.8.7 and I want 1.9.2 version.</p>
<a id="more"></a>
<p>This is the steps to change it:</p>
<p>Find the right path with</p>
<div>
    <div>
        <strong>~$ &nbsp;which rvm-auto-ruby</strong></div>
    <div>
        /Users/adrian/.rvm/bin/rvm-auto-ruby</div>
</div>
<div>
    <strong>~$ &nbsp;which python3.2</strong></div>
<div>
    /usr/local/bin/python3.2</div>
<div>
    &nbsp;</div>
<p>Then copy it to TextMate preferences in a new variable called &quot;TM_RUBY&quot;, and &quot;TM_PYTHON&quot; as shown bellow:</p>
<p>
<!-- <img alt="" src="http://adrianmejiarosario.com/sites/default/files/Screen%20Shot%202012-02-09%20at%201.50.41%20AM.png" style="width: 792px; height: 402px; " /> -->
</p>
<p>
<!-- <img alt="" src="http://adrianmejiarosario.com/sites/default/files/Screen%20Shot%202012-02-09%20at%2012.48.17%20AM.png" style="width: 600px; height: 320px; " /> -->
</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;I&amp;#39;m using textMate to develop ruby code. It&amp;#39;s very handy because I can run it just pressing (cmd-R). But by default it&amp;#39;s running ruby 1.8.7 and I want 1.9.2 version.&lt;/p&gt;
    
    </summary>
    
    
  </entry>
  
  <entry>
    <title>Get Started with the web crawler Apache Nutch 1.x </title>
    <link href="http://adrianmejia.com/blog/2012/02/04/get-started-with-the-web-crawler-apache-nutch-1-x/"/>
    <id>http://adrianmejia.com/blog/2012/02/04/get-started-with-the-web-crawler-apache-nutch-1-x/</id>
    <published>2012-02-04T05:00:00.000Z</published>
    <updated>2012-02-04T06:32:32.000Z</updated>
    
    <content type="html"><![CDATA[<p></p><p>Apache Nutch is an open source <strong>scalable</strong> Web crawler written in Java and based on Lucene/Solr for the indexing and search part.&nbsp;It has a highly modular architecture, allowing developers to create plug-ins for media-type parsing, data retrieval, querying and clustering. [<a href="http://en.wikipedia.org/wiki/Nutch" target="_blank" rel="external">*</a>]</p>
<a id="more"></a><p></p>
<h1 id="Motivation">Motivation<a href="#Motivation" class="headerlink" title="Motivation"></a></h1><p><div>
    By using Nutch, we can find web page hyperlinks in an automated manner, reduce lots of maintenance work, for example checking broken links, and create a copy of all the visited pages for searching over. That&rsquo;s where Apache Solr comes in. Solr is an open source full text search framework, with Solr we can search the visited pages from Nutch. Luckily, integration between Nutch and Solr is pretty straightforward.</div></p>
<p><div>
    &nbsp;</div></p>
<p><div>
    Whole-web crawling is designed to handle very large crawls which may take weeks to complete, running on multiple machines. This also permits more control over the crawl process, and incremental crawling. It is important to note that whole web crawling does not necessarily mean crawling the entire world wide web. We can limit a whole web crawl to just a list of the URLs we want to crawl. This is done by using a filter just like we the one we used when we did the crawl command. [<a href="http://wiki.apache.org/nutch/NutchTutorial" target="_blank" rel="external">*</a>]</div></p>
<p><div>
    &nbsp;</div></p>
<p><div>
    Some of the advantages of Nutch, when compared to a simple Fetcher</div></p>
<ul>
    <li>
        highly scalable and relatively feature rich crawler</li>
    <li>
        features like politeness which obeys robots.txt rules</li>
    <li>
        robust and scalable - you can run Nutch on a cluster of 100 machines</li>
    <li>
        quality - you can bias the crawling to fetch &ldquo;important&rdquo; pages first</li>
</ul>

<h2 id="Basics-about-Nutch">Basics about Nutch<a href="#Basics-about-Nutch" class="headerlink" title="Basics about Nutch"></a></h2><p>First you need to know that, Nutch data is composed of:</p>
<ul>
<li>The crawl database, or <strong>crawldb</strong>. This contains information about every url known to Nutch, including whether it was fetched, and, if so, when.</li>
<li>The link database, or <strong>linkdb</strong>. This contains the list of known links to each url, including both the source url and anchor text of the link.</li>
<li>A set of <strong>segments</strong>. Each segment is a set of urls that are fetched as a unit. Segments are directories with the following subdirectories:</li>
</ul>
<ol>
<li><strong>crawl_generate</strong> names a set of urls to be fetche</li>
<li><strong>crawl_fetch</strong> contains the status of fetching each url</li>
<li><strong>content</strong> contains the raw content retrieved from each url</li>
<li><strong>parse_text</strong> contains the parsed text of each url</li>
<li><strong>parse_data</strong> contains outlinks and metadata parsed from each url</li>
<li><strong>crawl_parse</strong> contains the outlink urls, used to update the crawldb</li>
</ol>
<h2 id="Nutch-and-Hadoop">Nutch and Hadoop<a href="#Nutch-and-Hadoop" class="headerlink" title="Nutch and Hadoop"></a></h2><p>As of the official Nutch 1.3 release the source code architecture has been greatly simplified to allow us to run Nutch in one of two modes; namely local and deploy. By default, Nutch no longer comes with a Hadoop distribution, however when run in local mode e.g. running Nutch in a single process on one machine, then we use Hadoop as a dependency. This may suit you fine if you have a small site to crawl and index, but most people choose Nutch because of its capability to run on in deploy mode, within a Hadoop cluster. This gives you the benefit of a distributed file system (HDFS) and MapReduce processing style. &nbsp;If you are interested in deployed mode <a href="http://wiki.apache.org/nutch/NutchHadoopTutorial" target="_blank">read here</a>.</p>
<h1 id="Getting-hands-dirt-with-Nutch">Getting hands dirt with Nutch<a href="#Getting-hands-dirt-with-Nutch" class="headerlink" title="Getting hands dirt with Nutch"></a></h1><h2 id="Setup-Nutch-from-binary-distribution">Setup Nutch from binary distribution<a href="#Setup-Nutch-from-binary-distribution" class="headerlink" title="Setup Nutch from binary distribution"></a></h2><p><ol>
    <li>
        Unzip your binary Nutch package to $HOME/nutch-1.3</li>
    <li>
        cd $HOME/nutch-1.3/runtime/local</li>
    <li>
        From now on, we are going to use ${NUTCH_RUNTIME_HOME} to refer to the current directory.</li>
</ol></p>
<p><div>
    &nbsp;</div></p>
<div>

<h2 id="Verify-your-Nutch-installation">Verify your Nutch installation<a href="#Verify-your-Nutch-installation" class="headerlink" title="Verify your Nutch installation"></a></h2><p><ol>
    <li>
        run &quot;bin/nutch&quot;</li>
    <li>
        You can confirm a correct installation if you seeing the following: &nbsp;Usage: nutch [-core] COMMAND</li>
</ol></p>
<p><div>
    <u>Some troubleshooting tips:</u></div></p>
<p><div>
    Run the following command if you are seeing &quot;Permission denied&quot;:</div></p>
<p><div>
    chmod +x bin/nutch</div></p>
<p><div>
    Setup JAVA_HOME if you are seeing JAVA_HOME not set. On Mac, you can run the following command or add it to ~/.bashrc:</div></p>
<p><div>
    export JAVA_HOME=/System/Library/Frameworks/JavaVM.framework/Versions/1.6/Home #mac</div></p>
<p><div>
    Ubuntu:</div></p>
<p><div>
    export JAVA_HOME=/usr/lib/jvm/java-1.6.0-openjdk&nbsp;</div></p>
<p><div>
    export NUTCH_HOME=/var/www/nutch-1.3/runtime/local</div></p>
<p><div>
    &nbsp;</div></p>
<p><div>
    <u>Example of using Nutch to crawl wikipedia pages:</u></div></p>
<p><div>
    Here we are try to crawl&nbsp;<span class="s2"><a href="http://en.wikipedia.org/wiki/Collective_intelligence" target="_blank" rel="external">http://en.wikipedia.org/wiki/Collective_intelligence</a>&nbsp;and sublinks in the same domain.</span></div></p>
<p><ol class="ol1">
    <li class="li1">
        $ cd NUTCH_HOME/runtime/local</li>
    <li class="li2">
        <span class="s1">$ echo &quot;<a href="http://en.wikipedia.org/wiki/Collective_intelligence" target="_blank" rel="external"><span class="s2">http://en.wikipedia.org/wiki/Collective_intelligence</span></a>&quot; &gt; urls</span></li>
    <li class="li1">
        add: <code>+^http://([a-z0-9]*\.)*wikipedia.org/</code> in&nbsp;conf/regex-urlfilter.txt</li>
    <li class="li1">
        $ bin/nutch crawl urls -dir crawl-wiki-ci -depth 2</li>
    <li class="li1">
        <b>statistics associated with the crawldb</b>
        <ol class="ol1">
            <li class="li1">
                $ nutch readdb crawl-wiki-ci/crawldb/ -stats
                <ol class="ol1">
                    <li class="li1">
                        CrawlDb statistics start: crawl-wiki-ci/crawldb/Statistics for CrawlDb: crawl-wiki-ci/crawldb/<br>
                        TOTAL urls:&nbsp;&nbsp;&nbsp;&nbsp; 2727<br>
                        retry 0:&nbsp;&nbsp;&nbsp;&nbsp; 2727<br>
                        min score:&nbsp;&nbsp;&nbsp;&nbsp; 0.0<br>
                        avg score:&nbsp;&nbsp;&nbsp;&nbsp; 8.107811E-4<br>
                        max score:&nbsp;&nbsp;&nbsp;&nbsp; 1.341<br>
                        status 1 (db_unfetched):&nbsp;&nbsp;&nbsp;&nbsp; 2665<br>
                        status 2 (db_fetched):&nbsp;&nbsp;&nbsp;&nbsp; 61<br>
                        status 3 (db_gone):&nbsp;&nbsp;&nbsp;&nbsp; 1<br>
                        CrawlDb statistics: done</li>
                </ol>
            </li>
        </ol>
    </li>
    <li class="li1">
        <b>Dump of the URLs from the crawldb</b>
        <ol class="ol1">
            <li class="li1">
                $ nutch readdb crawl-wiki-ci/crawldb/ -dump crawl-wiki-ci/stats
                <ol class="ol1">
                    <li class="li1">
                        <span class="s3"><a href="http://en.wikipedia.org/wiki/Special:RecentChangesLinked/MIT_Center_for_Collective_Intelligence" target="_blank" rel="external"><span class="s2">http://en.wikipedia.org/wiki/Special:RecentChangesLinked/MIT_Center_for_Collective_Intelligence</span></a></span>&nbsp;&nbsp;&nbsp;&nbsp; Version: 7Status: 1 (db_unfetched)<br>
                        Fetch time: Sat Feb 04 00:50:50 EST 2012<br>
                        Modified time: Wed Dec 31 19:00:00 EST 1969<br>
                        Retries since fetch: 0<br>
                        Retry interval: 2592000 seconds (30 days)<br>
                        Score: 1.9607843E-4<br>
                        Signature: null<br>
                        Metadata:<br>
                        &hellip;.&nbsp;</li>
                </ol>
            </li>
        </ol>
    </li>
    <li class="li1">
        <b>Top 10 highest rate links</b>
        <ol class="ol1">
            <li class="li1">
                $ nutch readdb crawl-wiki-ci/crawldb/ -topN 10 crawl-wiki-ci/stats/top10/
                <ol class="ol1">
                    <li class="li2">
                        <span class="s1">1.3416613&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://en.wikipedia.org/wiki/Collective_intelligence" target="_blank" rel="external"><span class="s2">http://en.wikipedia.org/wiki/Collective_intelligence</span></a>0.030499997&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://en.wikipedia.org/wiki/Howard_Bloom" target="_blank" rel="external"><span class="s2">http://en.wikipedia.org/wiki/Howard_Bloom</span></a><br>
                        0.02763889&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://en.wikipedia.org/wiki/Groupthink" target="_blank" rel="external"><span class="s2">http://en.wikipedia.org/wiki/Groupthink</span></a><br>
                        0.02591739&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://en.wikipedia.org/wiki/Wikipedia" target="_blank" rel="external"><span class="s2">http://en.wikipedia.org/wiki/Wikipedia</span></a><br>
                        0.024347823&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://en.wikipedia.org/wiki/Pierre_L%C3%A9vy_(philosopher)" target="_blank" rel="external"><span class="s2">http://en.wikipedia.org/wiki/Pierre<em>L%C3%A9vy</em>(philosopher)</span></a><br>
                        0.023733648&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://en.wikipedia.org/wiki/Wikipedia:Citation_needed" target="_blank" rel="external"><span class="s2">http://en.wikipedia.org/wiki/Wikipedia:Citation_needed</span></a><br>
                        0.017142152&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://en.wikipedia.org/w/opensearch_desc.php" target="_blank" rel="external"><span class="s2">http://en.wikipedia.org/w/opensearch_desc.php</span></a><br>
                        0.016599996&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://en.wikipedia.org/wiki/Artificial_intelligence" target="_blank" rel="external"><span class="s2">http://en.wikipedia.org/wiki/Artificial_intelligence</span></a><br>
                        0.016499996&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://en.wikipedia.org/wiki/Consensus_decision_making" target="_blank" rel="external"><span class="s2">http://en.wikipedia.org/wiki/Consensus_decision_making</span></a><br>
                        0.015199998&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://en.wikipedia.org/wiki/Group_selection" target="_blank" rel="external"><span class="s2">http://en.wikipedia.org/wiki/Group_selection</span></a></span></li>
                </ol>
            </li>
        </ol>
    </li>
    <li class="li1">
        <b>Dump of a Nutch segment</b>
        <ol class="ol1">
            <li class="li1">
                $ nutch readseg -dump crawl-wiki-ci/segments/20120204004509/ crawl-wiki-ci/stats/segments
                <ol class="ol1">
                    <li class="li1">
                        CrawlDatum::Version: 7<br>
                        Status: 1 (db_unfetched)<br>
                        Fetch time: Sat Feb 04 00:45:03 EST 2012<br>
                        Modified time: Wed Dec 31 19:00:00 EST 1969<br>
                        Retries since fetch: 0<br>
                        Retry interval: 2592000 seconds (30 days)<br>
                        Score: 1.0<br>
                        Signature: null<br>
                        Metadata: <em>ngt</em>: 1328334307529</li>
                    <li class="li1">
                        <br>
                        Content::<br>
                        Version: -1<br>
                        url: <a href="http://en.wikipedia.org/wiki/Collective_intelligence" target="_blank" rel="external"><span class="s4">http://en.wikipedia.org/wiki/Collective_intelligence</span></a><br>
                        base: <a href="http://en.wikipedia.org/wiki/Collective_intelligence" target="_blank" rel="external"><span class="s4">http://en.wikipedia.org/wiki/Collective_intelligence</span></a><br>
                        contentType: application/xhtml+xml<br>
                        metadata: Content-Language=en Age=52614 Content-Length=29341 Last-Modified=Sat, 28 Jan 2012 17:27:22 GMT <em>fst</em>=33 nutch.segment.name=20120204004509 Connection=close X-Cache-Lookup=MISS from <a href="http://sq72.wikimedia.org/" target="_blank" rel="external"><span class="s4">sq72.wikimedia.org:80</span></a> Server=Apache X-Cache=MISS from <a href="http://sq72.wikimedia.org/" target="_blank" rel="external"><span class="s4">sq72.wikimedia.org</span></a> X-Content-Type-Options=nosniff Cache-Control=private, s-maxage=0, max-age=0, must-revalidate Vary=Accept-Encoding,Cookie Date=Fri, 03 Feb 2012 15:08:18 GMT Content-Encoding=gzip nutch.crawl.score=1.0 Content-Type=text/html; charset=UTF-8<br>
                        Content:<br>
                        &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank" rel="external"><span class="s4">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</span></a>&quot;&gt;<br>
                        &lt;html lang=&quot;en&quot; dir=&quot;ltr&quot; class=&quot;client-nojs&quot; xmlns=&quot;<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external"><span class="s4">http://www.w3.org/1999/xhtml</span></a>&quot;&gt;<br>
                        &lt;head&gt;<br>
                        &lt;title&gt;Collective intelligence - Wikipedia, the free encyclopedia&lt;/title&gt;<br>
                        &lt;meta &hellip;.<b>&nbsp;</b></li>
                </ol>
            </li>
        </ol>
    </li>
</ol></p>
<p></p><p class="li1">&nbsp;</p><p></p>
<p></p><p class="li1"><b>References:</b></p><p></p>
<ul>
    <li class="li1">
        <a href="http://wiki.apache.org/nutch/NutchTutorial" target="_blank" rel="external">http://wiki.apache.org/nutch/NutchTutorial</a></li>
    <li class="li1">
        <a href="http://en.wikipedia.org/wiki/Nutch" target="_blank" rel="external">http://en.wikipedia.org/wiki/Nutch</a></li>
</ul>
</div>]]></content>
    
    <summary type="html">
    
      &lt;p&gt;&lt;p&gt;Apache Nutch is an open source &lt;strong&gt;scalable&lt;/strong&gt; Web crawler written in Java and based on Lucene/Solr for the indexing and search part.&amp;nbsp;It has a highly modular architecture, allowing developers to create plug-ins for media-type parsing, data retrieval, querying and clustering. [&lt;a href=&quot;http://en.wikipedia.org/wiki/Nutch&quot;&gt;*&lt;/a&gt;]&lt;/p&gt;
    
    </summary>
    
      <category term="Technologies" scheme="http://adrianmejia.com/categories/Technologies/"/>
    
    
      <category term="web crawlers" scheme="http://adrianmejia.com/tags/web-crawlers/"/>
    
  </entry>
  
  <entry>
    <title>SSH login without password</title>
    <link href="http://adrianmejia.com/blog/2012/01/19/ssh-login-without-password/"/>
    <id>http://adrianmejia.com/blog/2012/01/19/ssh-login-without-password/</id>
    <published>2012-01-19T05:00:00.000Z</published>
    <updated>2012-01-19T20:27:03.000Z</updated>
    
    <content type="html"><![CDATA[<p>If you want to login to a remote server using SSH and don&#39;t have to type the password again and again, here is a little trick</p>

<a id="more"></a>
<p>$&nbsp;cat ~/.ssh/id_rsa.pub | ssh &lt;user&gt;@&lt;server.domain&gt; &#39;cat &gt;&gt; .ssh/authorized_keys&#39;</p>
<p>After you run this and enter your password (for the last time), you can login to your server just typing:</p>
<p>$ ssh &lt;user&gt;@&lt;server.domain&gt;</p>
<p>You are all set.</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;If you want to login to a remote server using SSH and don&amp;#39;t have to type the password again and again, here is a little trick&lt;/p&gt;
    
    </summary>
    
    
  </entry>
  
  <entry>
    <title>Concentration problems? Procastination? You&#39;re not the only one.</title>
    <link href="http://adrianmejia.com/blog/2012/01/04/concentration-problems-procastination-youre-not-the-only-one/"/>
    <id>http://adrianmejia.com/blog/2012/01/04/concentration-problems-procastination-youre-not-the-only-one/</id>
    <published>2012-01-04T05:00:00.000Z</published>
    <updated>2012-01-04T16:46:24.000Z</updated>
    
    <content type="html"><![CDATA[<p>&nbsp;</p>
<p>Procastination and concentration problems are big deals from a lot of people, specially for students. There are too many distractions that are more fun than our homework.</p>
<a id="more"></a>
<p>I read an interesting&nbsp;<a href="http://altmedicine.about.com/od/optimumhealthessentials/a/Concentration.htm" target="_blank" rel="external">article about concentration</a>&nbsp;that I&#39;d like to share a summary with my own notes:</p>
<p>There is no substitute for paying attention… here are Five tips to improve your attention/concentration/focus/productivity:</p>
<p><strong>F =&nbsp;</strong><u><strong>Five More Rule</strong></u></p>
<div>
    There are two kinds of people – those who have learned how to work through frustration, and those who wish they had. From now on, if you&#39;re in the middle of a task and tempted to give up – just do 5 MORE. Read 5 MORE pages. Finish 5 MORE math problems. Work 5 MORE minutes.</div>
<div>
    &nbsp;</div>
<div>
    <strong>O =&nbsp;<u>One Think At a Time</u></strong></div>
<div>
    &nbsp;</div>
<div>
    Quite self-explantory, isn&#39;t it? We know the theory, now let&#39;s put in practice.</div>
<div>
    &nbsp;</div>
<div>
    <div>
        <strong>C =&nbsp;<u>Conquer Procrastination</u></strong></div>
    <div>
        &nbsp;</div>
    <div>
        Don&#39;t feel like concentrating? Are you putting off a task or project you&#39;re supposed to be working on? That&#39;s a form of procrastination. R. D. Clyde said, &quot;It&#39;s amazing how long it takes to complete something we&#39;re not working on.&quot; ~ Every time you catch yourself doing something that you are not suppose to be doing (facebook, twitter, 9gag) quite it right away, and get back to your homework/work.</div>
    <div>
        &nbsp;</div>
    <div>
        <strong>U =&nbsp;<u>Use Your Hands as Blinkers</u></strong></div>
    <div>
        &nbsp;</div>
    <div>
        Give multi-tasking a rest. Focus in one task at time!</div>
    <div>
        &nbsp;</div>
    <div>
        <strong>S =&nbsp;<u>See As If For the First or Last Time</u></strong></div>
    <div>
        &nbsp;</div>
    <div>
        uhm… maybe not very useful but it says: Want to know how to be &quot;here and now&quot; and fully present instead of mindlessly rushing here, there, and everywhere? Frederick Franck said, &quot;When the eye wakes up to see again, it suddenly stops taking anything for granted.&quot; Evelyn Underhill said, &quot;For lack of attention, a thousand forms of loveliness elude us every day.&quot;</div>
    <div>
        &nbsp;</div>
    <div>
        <div>
            <strong>What people have said about concentration</strong></div>
        <ul>
            <li>
                &quot;I used to think the human brain was the most fascinating part of the body, and then I realized, &#39;What is telling me that?&#39;&quot; - Emo Phillips</li>
            <li>
                &quot;I&#39;m getting so absent-minded and forgetful. Sometimes in the middle of a sentence, I . . . &quot; - Milton Berle&nbsp;</li>
            <li>
                &quot;Iron rusts from disuse, stagnant water loses its purity and in cold weather becomes frozen, even so does inaction sap the vigors of the mind.&quot; Leonardo da Vinci&nbsp;</li>
            <li>
                &quot;Tell me to what you pay attention, and I will tell you who you are.&quot; - Jose Ortega y Gasset</li>
            <li>
                I would go without shirt or shoe sooner than lose for a minute the two separate sides of my head.&quot; - Rudyard Kipling</li>
            <li>
                &quot;It&#39;s not that I don&#39;t want to listen to people. I very much want to listen to people. I jut can&#39;t hear them over my talking.&quot; - Paula Poundstone</li>
        </ul>
    </div>
</div>
<p>&nbsp;</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;Procastination and concentration problems are big deals from a lot of people, specially for students. There are too many distractions that are more fun than our homework.&lt;/p&gt;
    
    </summary>
    
    
  </entry>
  
  <entry>
    <title>Learning Algorithms from Scratch / Algorithms for Dummies</title>
    <link href="http://adrianmejia.com/blog/2011/12/22/learning-algorithms-from-scratch-algorithms-for-dummies/"/>
    <id>http://adrianmejia.com/blog/2011/12/22/learning-algorithms-from-scratch-algorithms-for-dummies/</id>
    <published>2011-12-22T05:00:00.000Z</published>
    <updated>2011-12-22T19:27:07.000Z</updated>
    
    <content type="html"><![CDATA[<p>When you are programming you face challenges all the way. Getting the problems solved is just the tip of the iceberg, getting it done efficiently is the rest.</p>

<a id="more"></a>
<p><hr>
<strong>Update</strong></p>
<p>Graphs are gone in this post. I re-made this post and added more information and images. Checkout it out at: <a href="/blog/2014/02/13/algorithms-for-dummies-part-1-sorting/">http://adrianmejia.com/blog/2014/02/13/algorithms-for-dummies-part-1-sorting/</a></p>
<hr>

<p class="p1"><b>Why should you care for efficiency?</b></p>
<p class="p1">Solutions to the same problem might take years with certain algorithm, and just minutes using efficient algorithms. For instance, if you have applications that are used for thousands of people over internet, every fraction of second counts. Therefore, efficient algorithms is a must.</p>
<p class="p1"><b>How I do my algorithms more efficient?</b></p>
<p class="p1">To improve something you first need to know the actual state. In this case you need to measure the actual effectiveness of your algorithm in other to improve it. It&#39;s very common to use running time analysis to measure the speed of algorithms independently from the hardware used (old pc, supercomputer it doesn&#39;t matter).&nbsp;</p>
<p class="p1"><b>Run-time analysis</b></p>
<p class="p1">A common way to analyze the algorithms is using the big-O notation. The good thing about this notation is that is independent from the computer used to run the algorithm. You know that if you use a very slow computer (e.g. pentium I) v.s. a supercomputer use in NASA, the latter will run the program much faster. Big-O notation abstract the hardware and just focus in the algorithm per se. The only variable in the big-O notation gives the relative time needed to process an algorithm in function of the input n. Let&#39;s clarify this with an example.</p>
<p class="p1"><strong>Ex.1</strong> - You want to sort an array A of n integers.&nbsp;</p>
<p class="p1">Depending in the algorithm used to do that you may have:</p>
<ul>
    <li class="p1">
        <b>selection</b> sort has a running time of O(n^2);</li>
    <li class="p1">
        <b>merge sort</b> –&gt; O(n log n)</li>
</ul>
<p class="p1">Right now, it doesn&#39;t matter if are not familiar with these algorithms (we will cover this the next lessons), the point here is that we have n integer and big-O notations give us a mathematical expression that is in function of the input n. If you&nbsp;<a href="http://fooplot.com/index.php?&amp;type0=0&amp;type1=0&amp;type2=0&amp;type3=0&amp;type4=0&amp;y0=x%5E2&amp;y1=x*log%28x%29&amp;y2=&amp;y3=&amp;y4=&amp;r0=&amp;r1=&amp;r2=&amp;r3=&amp;r4=&amp;px0=&amp;px1=&amp;px2=&amp;px3=&amp;px4=&amp;py0=&amp;py1=&amp;py2=&amp;py3=&amp;py4=&amp;smin0=0&amp;smin1=0&amp;smin2=0&amp;smin3=0&amp;smin4=0&amp;smax0=2pi&amp;smax1=2pi&amp;smax2=2pi&amp;smax3=2pi&amp;smax4=2pi&amp;thetamin0=0&amp;thetamin1=0&amp;thetamin2=0&amp;thetamin3=0&amp;thetamin4=0&amp;thetamax0=2pi&amp;thetamax1=2pi&amp;thetamax2=2pi&amp;thetamax3=2pi&amp;thetamax4=2pi&amp;ipw=0&amp;ixmin=-5&amp;ixmax=5&amp;iymin=-3&amp;iymax=3&amp;igx=1&amp;igy=1&amp;igl=1&amp;igs=0&amp;iax=1&amp;ila=1&amp;xmin=-5&amp;xmax=5&amp;ymin=-3&amp;ymax=3" target="_blank" rel="external"><span class="s1">plot in a graph n^2 and n log n</span></a>. You&#39;ll see that n^2 grows much faster than n log(n). That means that the algorithm n^2 will take longer than n*log(n) to process as the size of the array n increases.</p>
<p class="p1"><b>Common order of Growth</b></p>
<p class="p1">To give you an idea of the common order of growth of runtime expressions. Take a look at the following graph and table. The slower the function growth the better is the algorithm. In order from better performance to worst is:</p>
<p class="p1">1 – log n – n – n log n – n^2 – n^3 – 2^n – n! …</p>
<p class="p2">


<!-- <img alt="" src="http://adrianmejiarosario.com/sites/default/files/Screen%20Shot%202011-12-22%20at%203.22.12%20PM.png"  /> -->


</p>
<p class="p2">


<!-- <img alt="" src="http://adrianmejiarosario.com/sites/default/files/Screen%20Shot%202011-12-22%20at%203.23.45%20PM.png"  /> -->


</p>
<p class="p1"><b>Approximate growth rate from code.</b></p>
<p class="p1">There are a whole theory and math behind the Big-O notation and other notations related. At this time, just take a look of the typical code and its growth order.</p>
<p class="p1">


<!-- <img alt="" src="http://adrianmejiarosario.com/sites/default/files/Screen%20Shot%202011-12-22%20at%204.51.48%20PM.png"  /> -->


</p>
<p><strong>Cases (the good, the bad, and the ugly)</strong></p>
<p>Remember that n is the number of elements in the input. All this runtime growth rate are in function of the input elements. There is another important thing to consider about the input elements: the order! The order of the input elements matters, and that&#39;s why algorithms are analyzed in 3 different cases:</p>
<ol>
    <li>
        Worst-case performance: the input is distributed as worst as it could be for an algorithm. &nbsp;&nbsp;</li>
    <li>
        Average-case scenario: approximation of the most common arrange of inputs.</li>
    <li>
        Best-case scenario: most favorable distribution of the inputs.</li>
    <li>
        One more: Space. this is how much space the algorithm cosume to execute.&nbsp;</li>
</ol>
<p class="p2">If you want more depth in these topic read here:&nbsp;</p>
<ul>
    <li class="p2">
        <span>Analysis (</span><a href="http://gcu.googlecode.com/files/02Analysis.pdf" target="_blank" rel="external">pdf</a><span>) (</span><a href="http://gcu.googlecode.com/files/02Analysis.key.zip" target="_blank" rel="external">keynote</a><span>)</span></li>
    <li class="p2">
        <span>Algorithm @&nbsp;</span>ocw.mit.edu: lectures <a href="http://ocw.mit.edu/courses/electrical-engineering-and-computer-science/6-046j-introduction-to-algorithms-sma-5503-fall-2005/video-lectures/lecture-1-administrivia-introduction-analysis-of-algorithms-insertion-sort-mergesort" target="_blank" rel="external">1 </a>and <a href="http://ocw.mit.edu/courses/electrical-engineering-and-computer-science/6-046j-introduction-to-algorithms-sma-5503-fall-2005/video-lectures/lecture-2-asymptotic-notation-recurrences-substitution-master-method" target="_blank" rel="external">2</a></li>
    <li class="p2">
        <a href="http://algs4.cs.princeton.edu/home/" target="_blank" rel="external">http://algs4.cs.princeton.edu/home/</a></li>
</ul>
<p class="p2">&nbsp;</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;When you are programming you face challenges all the way. Getting the problems solved is just the tip of the iceberg, getting it done efficiently is the rest.&lt;/p&gt;
    
    </summary>
    
      <category term="Technologies" scheme="http://adrianmejia.com/categories/Technologies/"/>
    
      <category term="Algorithms" scheme="http://adrianmejia.com/categories/Technologies/Algorithms/"/>
    
    
      <category term="big o" scheme="http://adrianmejia.com/tags/big-o/"/>
    
      <category term="algorithms" scheme="http://adrianmejia.com/tags/algorithms/"/>
    
  </entry>
  
  <entry>
    <title>How to remove programs from the start up in Mac OS X</title>
    <link href="http://adrianmejia.com/blog/2011/11/18/how-to-remove-programs-from-the-start-up-in-mac-os-x/"/>
    <id>http://adrianmejia.com/blog/2011/11/18/how-to-remove-programs-from-the-start-up-in-mac-os-x/</id>
    <published>2011-11-18T05:00:00.000Z</published>
    <updated>2011-11-18T17:18:23.000Z</updated>
    
    <content type="html"><![CDATA[<p>Well… I have done this so many times in Windows (it&#39;s just executing &quot;msconfig&quot; you can edit the startup items).&nbsp;Today, I had the need to do the same in the Mac OS X Lion.</p>
<a id="more"></a>

<p>Here is how to do it</p>
<ol>
    <li>
        System Preferences &gt; Users &amp; Groups</li>
    <li>
        Tab &quot;Login Items&quot;</li>
    <li>
        You can remove the programs (-) from the list and they won&#39;t show up in the next startup.</li>
</ol>
<p>
<!-- <img alt="Login Items Mac" src="http://adrianmejiarosario.com/sites/default/files/loginItems.png" style="width: 669px; height: 501px; " /> -->
</p>
<p>&nbsp;</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;Well… I have done this so many times in Windows (it&amp;#39;s just executing &amp;quot;msconfig&amp;quot; you can edit the startup items).&amp;nbsp;Today, I had the need to do the same in the Mac OS X Lion.&lt;/p&gt;
    
    </summary>
    
    
  </entry>
  
  <entry>
    <title>Regular Expressions in C# and Java - CSV Example</title>
    <link href="http://adrianmejia.com/blog/2011/11/10/regular-expressions-in-c-and-java-csv-example/"/>
    <id>http://adrianmejia.com/blog/2011/11/10/regular-expressions-in-c-and-java-csv-example/</id>
    <published>2011-11-10T05:00:00.000Z</published>
    <updated>2011-11-10T15:09:57.000Z</updated>
    
    <content type="html"><![CDATA[<p>Regular expressions are used to find matches in texts. The following is a real application of Regex in C# and Java.&nbsp;</p>
<a id="more"></a>
<div>
    <div>
        CSV are files that all the data is separated by a comma. E.g:</div>
    <pre>
name,line1,line2,city,zip code,country</pre>
    <div>
        You cand easily use String.Split() in C# to get all the values. But, there are cases when the data can contain comma. E.g:</div>
    <pre>
&quot;Mr. John Doe, Jr.&quot;,7926 Glenbrook Dr., 14623</pre>
    <div>
        In this case a regular expression (regex) could be use to determine if the comma is inside a quote or not.</div>
    <div>
        &nbsp;</div>
    <div>
        C# Example:</div>
    <div>
        &nbsp;</div>
    <div>
        <pre>
    public string[] parseCSV(string line)
    {
        List&lt;string&gt; datalist = new List&lt;string&gt;();

        /<em>
         </em> Define a regular expression for csv.
         <em> This Pattern will match on either quoted text or text between commas, including
         </em> whitespace, and accounting for beginning and end of line.
         <em>/

        Regex rx = new Regex(&quot;\&quot;([^\&quot;]</em>)\&quot;|(?&lt;=,|^)([^,]<em>)(?:,|$)&quot;,
          RegexOptions.Compiled | RegexOptions.IgnoreCase);

        // Find matches.
        MatchCollection matches = rx.Matches(line);

        // Report the number of matches found.
        Console.WriteLine(&quot;{0} matches found.&quot;, matches.Count);

        // Report on each match.
        foreach (Match match in matches)
        {
            if (match.Groups[1].Value.Length &gt; 0)
                datalist.Add(match.Groups[1].Value); // match csv values inside commas
            else
                datalist.Add(match.Groups[2].Value); // match csv values outside commas
        }
        return datalist.ToArray();
    }</em></pre>
    </div>
    <div>
        &nbsp;</div>
    <div>
        &nbsp;</div>
    <div>
        Java Example:</div>
    <div>
        <pre>
    public String[] parse(String csvLine) {
        Pattern csvPattern = Pattern.compile(&quot;\&quot;([^\&quot;])\&quot;|(?&lt;=,|^)([^,]*)(?:,|$)&quot;);
        matcher = csvPattern.matcher(csvLine);
        allMatches.clear();
        String match;

        while (matcher.find()) {
                match = matcher.group(1);

                if (match!=null) {
                        allMatches.add(match);
                }
                else {
                        allMatches.add(matcher.group(2));
                }
        }

        size = allMatches.size();
        if (size &gt; 0) {
                return allMatches.toArray(new String[size]);
        }
        else {
                return new String[0];
        }
    } </pre>
    </div>
</div>
<p>&nbsp;</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;Regular expressions are used to find matches in texts. The following is a real application of Regex in C# and Java.&amp;nbsp;&lt;/p&gt;
    
    </summary>
    
      <category term="Technologies" scheme="http://adrianmejia.com/categories/Technologies/"/>
    
    
      <category term="c#" scheme="http://adrianmejia.com/tags/c/"/>
    
      <category term="java" scheme="http://adrianmejia.com/tags/java/"/>
    
  </entry>
  
  <entry>
    <title>How to execute SQL statements on MS Access?</title>
    <link href="http://adrianmejia.com/blog/2011/11/09/how-to-execute-sql-statements-on-ms-access/"/>
    <id>http://adrianmejia.com/blog/2011/11/09/how-to-execute-sql-statements-on-ms-access/</id>
    <published>2011-11-09T05:00:00.000Z</published>
    <updated>2011-11-09T16:12:16.000Z</updated>
    
    <content type="html"><![CDATA[<p>Sometimes is quicker to use SQL statements than create tables using the MS Access Visual Designer. For instance, if you already have the SQL code from other databases this could be useful.
<a id="more"></a></p>
<p>Here are the steps of how to create a new table programmatically in Access (2007):</p>
<ol>
<li>Open/create your database on MS Access</li>
<li>Menu: ‘Databases Tools’ &gt; ‘Visual Basic’ (this will open the visual basic editor</li>
<li>in the Visual Basic Editor, Menu: Run</li>
<li>Insert the name of your macro and click ‘create’ button</li>
<li>Insert a code similar to the shown below. Replace the path in ‘OpenDatabase’ with your database path; and fill ‘dbs.Execute’ with your own SQL statements</li>
</ol>
<p>Sub createdb()
    Dim dbs As Database</p>
<pre><code>&apos; Modify this line to include the path to Northwind
&apos; on your computer.
Set dbs = OpenDatabase(&quot;C:\\amr\\projects\\sites\\files\\tf_pledge_reminder_email.accdb&quot;)

&apos; Create a table with two text fields.
dbs.Execute &quot;create table RIT_TF_PLG_REM_EMAIL_TEST2 (   pref_mail_name  VARCHAR(60), pd_to_date      NUMBER,   this_payment    NUMBER )&quot;

dbs.Close
</code></pre><p>End Sub</p>
<ol>
<li>Menu: Run</li>
<li>You are all set.</li>
</ol>
<p>If you have any questions you can contact me or write a comment</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;Sometimes is quicker to use SQL statements than create tables using the MS Access Visual Designer. For instance, if you already have the SQL code from other databases this could be useful.
    
    </summary>
    
    
  </entry>
  
</feed>