atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">

  <title><![CDATA[Mirco Zeiss]]></title>
  <link href="http://mircozeiss.com/atom.xml" rel="self"/>
  <link href="http://mircozeiss.com/"/>
  <updated>2014-02-02T14:16:05+01:00</updated>
  <id>http://mircozeiss.com/</id>
  <author>
    <name><![CDATA[Mirco Zeiss]]></name>
    
  </author>
  <generator uri="http://octopress.org/">Octopress</generator>

  
  <entry>
    <title type="html"><![CDATA[Lockit - an Express authentication solution]]></title>
    <link href="http://mircozeiss.com/lockit-an-express-authentication-solution/"/>
    <updated>2014-01-15T10:51:00+01:00</updated>
    <id>http://mircozeiss.com/lockit-an-express-authentication-solution</id>
    <content type="html"><![CDATA[<p>What does every app need? <strong>Users!</strong></p>

<p>What does every app therefore need to have? An <strong>authentication solution</strong>:</p>

<ul>
<li>signup new users</li>
<li>allow existing users to login</li>
<li>help users who forgot their password</li>
<li>etc.</li>
</ul>


<p>What&#8217;s the most annoying part to write when building a new app?
The <strong>user authentication solution</strong>.</p>

<p>Focus on building your app instead of reinventing the wheel and use <a href="https://github.com/zeMirco/lockit">lockit</a>.</p>

<h3>Concept</h3>

<p>Lockit is inspired by Ruby&#8217;s <a href="https://github.com/plataformatec/devise">devise</a>.
It consists of multiple single purpose modules that you could also use on their own.
The main module <code>lockit</code> is just a wrapper around those</p>

<ul>
<li><a href="https://github.com/zeMirco/lockit-login">lockit-login</a></li>
<li><a href="https://github.com/zeMirco/lockit-signup">lockit-signup</a></li>
<li><a href="https://github.com/zeMirco/lockit-delete-account">lockit-delete-account</a></li>
<li><a href="https://github.com/zeMirco/lockit-forgot-password">lockit-forgot-password</a></li>
<li><a href="https://github.com/zeMirco/lockit-sendmail">lockit-sendmail</a></li>
<li><a href="https://github.com/zeMirco/lockit-couchdb-adapter">lockit-couchdb-adapter</a></li>
<li><a href="https://github.com/zeMirco/lockit-mongodb-adapter">lockit-mongodb-adapter</a></li>
<li><a href="https://github.com/zeMirco/lockit-utilities">lockit-utilities</a></li>
<li><a href="https://github.com/zeMirco/lockit-template-blank">lockit-template-blank</a></li>
</ul>


<p>When you have problems please try to open an issue in the according repository.</p>

<h3>How to use</h3>

<p>Install the module and the adapter for your database (couchdb or mongodb) via npm</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>npm install lockit lockit-couchdb-adapter</span></code></pre></td></tr></table></div></figure>


<p>Create a <code>config.js</code> in your <code>app/</code> folder with your database settings</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="c1">// database settings for CouchDB</span>
</span><span class='line'><span class="nx">exports</span><span class="p">.</span><span class="nx">db</span> <span class="o">=</span> <span class="s1">&#39;couchdb&#39;</span><span class="p">;</span>
</span><span class='line'><span class="nx">exports</span><span class="p">.</span><span class="nx">dbUrl</span> <span class="o">=</span> <span class="s1">&#39;http://127.0.0.1:5984/test&#39;</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'><span class="c1">// or if you want to use MongoDB</span>
</span><span class='line'><span class="c1">// exports.db = &#39;mongodb&#39;;</span>
</span><span class='line'><span class="c1">// exports.dbUrl = &#39;mongodb://127.0.0.1/test&#39;;</span>
</span><span class='line'><span class="c1">// exports.dbCollection = &#39;users&#39;;</span>
</span></code></pre></td></tr></table></div></figure>


<p><strong>Important!</strong> If you are using CouchDB you need to create the necessary views first.
Lockit comes with a helper file that does it automatically for you. Simply run</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">config</span><span class="o">=</span><span class="p">[</span><span class="nx">PATH</span><span class="p">]</span> <span class="nx">node</span> <span class="nx">node_modules</span><span class="o">/</span><span class="nx">lockit</span><span class="o">/</span><span class="nx">createCouchViews</span><span class="p">.</span><span class="nx">js</span>
</span></code></pre></td></tr></table></div></figure>


<p>[PATH] should be the location of your config.js, i.e.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">config</span><span class="o">=</span><span class="p">.</span><span class="o">/</span><span class="nx">config</span><span class="p">.</span><span class="nx">js</span> <span class="nx">node</span> <span class="nx">node_modules</span><span class="o">/</span><span class="nx">lockit</span><span class="o">/</span><span class="nx">createCouchViews</span><span class="p">.</span><span class="nx">js</span>
</span></code></pre></td></tr></table></div></figure>


<p>If you don&#8217;t use CouchDB you can simply continue here.</p>

<p>Use both modules in your <code>app.js</code> file</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">var</span> <span class="nx">config</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;./config.js&#39;</span><span class="p">);</span>
</span><span class='line'><span class="kd">var</span> <span class="nx">lockit</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;lockit&#39;</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>


<p>Activate the module by calling the main <code>lockit()</code> function</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="c1">// ... express stuff</span>
</span><span class='line'>
</span><span class='line'><span class="c1">// use middleware before router so your own routes have access to</span>
</span><span class='line'><span class="c1">// req.session.email and req.session.username</span>
</span><span class='line'>
</span><span class='line'><span class="c1">// sessions have to be enabled!</span>
</span><span class='line'><span class="nx">lockit</span><span class="p">(</span><span class="nx">app</span><span class="p">,</span> <span class="nx">config</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'><span class="c1">// ... more express stuff</span>
</span></code></pre></td></tr></table></div></figure>


<p>Include <a href="http://getbootstrap.com/">bootstrap</a> css in your views/layout.jade</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">link</span><span class="p">(</span><span class="nx">rel</span><span class="o">=</span><span class="s1">&#39;stylesheet&#39;</span><span class="p">,</span> <span class="nx">href</span><span class="o">=</span><span class="s1">&#39;/css/bootstrap.min.css&#39;</span><span class="p">)</span>
</span></code></pre></td></tr></table></div></figure>


<p>Start your app like always with <code>node app.js</code>, open the browser and navigate to <a href="http://localhost:3000/signup">localhost:3000/signup</a>.
I&#8217;ve also included an <a href="https://github.com/zeMirco/lockit/tree/master/example">example app</a> that you can download and run locally.
It has a special route <code>/profile</code> which demonstrates how to get user information from db and show them
in the browser.</p>

<p>You&#8217;ll notice that nothing happens after you&#8217;ve signed up although
you should see a message that an email has been sent to you.
If you take a look at your database however, you should be able to see your just created user.
So the user is created but the email is simply not sent.</p>

<p>That&#8217;s because the email service is not set up yet.
By default all email communication is stubbed (no emails are sent).
You need to have your own email service in order to send emails when a user signs up or
requests a new password. Under the hood lockit uses <a href="https://github.com/andris9/Nodemailer">nodemailer</a> to send emails.
You can therefore use the same configuration in your <code>config.js</code> file.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="c1">// default settings</span>
</span><span class='line'><span class="nx">exports</span><span class="p">.</span><span class="nx">emailType</span> <span class="o">=</span> <span class="s1">&#39;Stub&#39;</span><span class="p">;</span>
</span><span class='line'><span class="nx">exports</span><span class="p">.</span><span class="nx">emailSettings</span> <span class="o">=</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">service</span><span class="o">:</span> <span class="s1">&#39;none&#39;</span><span class="p">,</span>
</span><span class='line'>  <span class="nx">auth</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">user</span><span class="o">:</span> <span class="s1">&#39;none&#39;</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">pass</span><span class="o">:</span> <span class="s1">&#39;none&#39;</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">};</span>
</span><span class='line'>
</span><span class='line'><span class="c1">// change them to something similar like</span>
</span><span class='line'><span class="c1">// exports.emailType = &#39;SMTP&#39;;</span>
</span><span class='line'><span class="c1">// exports.emailSettings = {</span>
</span><span class='line'><span class="c1">//   service: &#39;Gmail&#39;,</span>
</span><span class='line'><span class="c1">//   auth: {</span>
</span><span class='line'><span class="c1">//     user: &#39;gmail.user@gmail.com&#39;,</span>
</span><span class='line'><span class="c1">//     pass: &#39;userpass&#39;</span>
</span><span class='line'><span class="c1">//   }</span>
</span><span class='line'><span class="c1">// };</span>
</span></code></pre></td></tr></table></div></figure>


<p>Now you are good to go. You can also change all the other stuff like email template,
welcome text, title and subject of the emails, etc. Take a look at the <a href="https://github.com/zeMirco/lockit#configuration">lockit#configuration</a>
part at GitHub to see all possibilities.</p>

<h3>FAQ</h3>

<ol>
<li><p>How is this different to <a href="http://passportjs.org/">passport</a>?</p>

<p>   Passport offers different strategies (local, OpenID, OAuth) for authentication.
   It assumes that you already have users in your db and only handles login, logout and route restriction.
   It does not send any emails on signup or when a user forgot a password.
   You can think of Lockit as a layer before Passport. I haven&#8217;t tried it yet but it should work
   to use Lockit for signup, forgot password, delete account and on top of that Passport with
   the <a href="https://github.com/jaredhanson/passport-local">local strategy</a>.</p></li>
<li><p>Why didn&#8217;t you use <a href="http://www.mozilla.org/en-US/persona/">Persona</a>?</p>

<p>   Well, I&#8217;ve tried Persona and like it a lot for simple web based solutions. However authentication
   solutions should work on all devices and for all platforms. One big problem is that Persona does
   not work with PhoneGap and other environments that break when opening popups. See the related
   <a href="https://github.com/mozilla/persona/issues/2034">issue #2034</a>.</p></li>
<li><p>What about a SaaS solution like <a href="https://www.userapp.io/">userapp</a>?</p>

<p>   User information is the most valuable, critical and sensible data.
   Users trust you to handle them with care.
   Therefore I don&#8217;t like giving them away.</p></li>
</ol>


<h3>Conclusion</h3>

<p>Please give <a href="https://github.com/zeMirco/lockit">lockit</a> a try. Leave comments, feedback and issues
 on GitHub or here in the comments.</p>

<p>I&#8217;m not a security expert although I&#8217;ve read a lot about this topic while developing lockit.
So use it with care and probably do not use it for production yet. I&#8217;m sure there is room for improvements.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[PouchDB vs. Couchbase Lite - a performance review]]></title>
    <link href="http://mircozeiss.com/pouchdb-vs-couchbase-lite-a-performance-review/"/>
    <updated>2013-12-04T13:25:00+01:00</updated>
    <id>http://mircozeiss.com/pouchdb-vs-couchbase-lite-a-performance-review</id>
    <content type="html"><![CDATA[<p>Client side databases with offline support are very important for mobile hybrid apps where performance matters. I&#8217;ve developed several
apps with Cordova/Phonegap in the last months and always needed a database to save information on the client, that has offline
support and allows replicating data back to my cloud database. Two databases came up whenever I was looking for a solution - PouchDB and
Couchbase Lite Phonegap. PouchDB works entirely in the browser whereas Couchbase Lite works with native databases on iOS and Android
through a JavaScript API.</p>

<p>Today I&#8217;d like to draw a comparison between them focusing on performance. How fast do they write data and how fast do they
retrieve data? I chose four actions and did ten repetitions each</p>

<ul>
<li>bulk add documents</li>
<li>get all documents</li>
<li>get document by id</li>
<li>query database via view</li>
</ul>


<p>The code is on <a href="https://github.com/zeMirco/pouchdb-vs-couchbase">GitHub</a> so you can run the tests for yourself. My tests were done on my MacBook Pro running Mavericks
 inside the iOS emulator. Therefore the exact values will be different depending on which hardware you use. The overall results and findings should
 still be the same though.</p>

<h3>Bulk add documents</h3>

<p>The first action is adding random documents to each database. The first run was with 10000 and the second with 25000 documents.</p>

<p>The code snippets look like this:</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="c1">// add array of documents to PouchDB</span>
</span><span class='line'><span class="kd">function</span> <span class="nx">pouch_bulkAdd</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">max</span> <span class="o">=</span> <span class="mi">10000</span><span class="p">;</span>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">data</span> <span class="o">=</span> <span class="nx">generate</span><span class="p">(</span><span class="nx">max</span><span class="p">);</span>
</span><span class='line'>  <span class="nx">console</span><span class="p">.</span><span class="nx">time</span><span class="p">(</span><span class="s1">&#39;PouchDB - bulk add&#39;</span><span class="p">);</span>
</span><span class='line'>  <span class="nx">db</span><span class="p">.</span><span class="nx">bulkDocs</span><span class="p">({</span><span class="nx">docs</span><span class="o">:</span> <span class="nx">data</span><span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">if</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">err</span><span class="p">);</span>
</span><span class='line'>    <span class="nx">console</span><span class="p">.</span><span class="nx">timeEnd</span><span class="p">(</span><span class="s1">&#39;PouchDB - bulk add&#39;</span><span class="p">);</span>
</span><span class='line'>    <span class="c1">// save one user for later query</span>
</span><span class='line'>    <span class="nx">dummyId</span> <span class="o">=</span> <span class="nx">res</span><span class="p">[</span><span class="mi">5000</span><span class="p">].</span><span class="nx">id</span><span class="p">;</span>
</span><span class='line'>  <span class="p">})</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>




<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="c1">// add array of documents to Couchbase Lite</span>
</span><span class='line'><span class="kd">function</span> <span class="nx">couchbase_bulkAdd</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">max</span> <span class="o">=</span> <span class="mi">10000</span><span class="p">;</span>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">data</span> <span class="o">=</span> <span class="nx">generate</span><span class="p">(</span><span class="nx">max</span><span class="p">);</span>
</span><span class='line'>  <span class="nx">console</span><span class="p">.</span><span class="nx">time</span><span class="p">(</span><span class="s1">&#39;Couchbase lite - bulk add&#39;</span><span class="p">);</span>
</span><span class='line'>  <span class="nx">$</span><span class="p">.</span><span class="nx">ajax</span><span class="p">({</span>
</span><span class='line'>    <span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;POST&#39;</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">url</span><span class="o">:</span> <span class="nx">globalUrl</span> <span class="o">+</span> <span class="s1">&#39;performance/_bulk_docs&#39;</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">data</span><span class="o">:</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">({</span><span class="s1">&#39;docs&#39;</span><span class="o">:</span> <span class="nx">data</span><span class="p">}),</span>
</span><span class='line'>    <span class="nx">contentType</span> <span class="o">:</span> <span class="s1">&#39;application/json&#39;</span>
</span><span class='line'>  <span class="p">})</span>
</span><span class='line'>  <span class="p">.</span><span class="nx">done</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">console</span><span class="p">.</span><span class="nx">timeEnd</span><span class="p">(</span><span class="s1">&#39;Couchbase lite - bulk add&#39;</span><span class="p">);</span>
</span><span class='line'>    <span class="nx">dummyId</span> <span class="o">=</span> <span class="nx">res</span><span class="p">[</span><span class="mi">5000</span><span class="p">].</span><span class="nx">id</span><span class="p">;</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>




<table class="table table-condensed full-width">
  <thead>
    <tr>
      <th>#</th>
      <th>PouchDB (10000 docs)</th>
      <th>CB Lite (10000 docs)</th>
      <th> - </th>
      <th>PouchDB (25000 docs)</th>
      <th>CB Lite (25000 docs)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2214 ms</td>
      <td>2459 ms</td>
      <td> - </td>
      <td>5568 ms</td>
      <td>6064 ms</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2391 ms</td>
      <td>2777 ms</td>
      <td> - </td>
      <td>5561 ms</td>
      <td>6583 ms</td>
    </tr>
    <tr>
      <td>3</td>
      <td>1532 ms</td>
      <td>2966 ms</td>
      <td> - </td>
      <td>5494 ms</td>
      <td>6683 ms</td>
    </tr>
    <tr>
      <td>4</td>
      <td>1506 ms</td>
      <td>3071 ms</td>
      <td> - </td>
      <td>5805 ms</td>
      <td>6723 ms</td>
    </tr>
    <tr>
      <td>5</td>
      <td>1539 ms</td>
      <td>3022 ms</td>
      <td> - </td>
      <td>5705 ms</td>
      <td>6828 ms</td>
    </tr>
    <tr>
      <td>6</td>
      <td>1607 ms</td>
      <td>3087 ms</td>
      <td> - </td>
      <td>5746 ms</td>
      <td>6769 ms</td>
    </tr>
    <tr>
      <td>7</td>
      <td>1596 ms</td>
      <td>3141 ms</td>
      <td> - </td>
      <td>5841 ms</td>
      <td>6805 ms</td>
    </tr>
    <tr>
      <td>8</td>
      <td>1694 ms</td>
      <td>3239 ms</td>
      <td> - </td>
      <td>5676 ms</td>
      <td>6887 ms</td>
    </tr>
    <tr>
      <td>9</td>
      <td>1600 ms</td>
      <td>3245 ms</td>
      <td> - </td>
      <td>5820 ms</td>
      <td>6923 ms</td>
    </tr>
    <tr>
      <td>10</td>
      <td>1579 ms</td>
      <td>3278 ms</td>
      <td> - </td>
      <td>5873 ms</td>
      <td>6886 ms</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Ø</td>
      <td style="background-color: lime;">1725.8 ms</td>
      <td>3028.5 ms</td>
      <td> - </td>
      <td style="background-color: lime;">5708.9 ms</td>
      <td>6715.1 ms</td>
    </tr>
  </tfoot>
</table>


<p><img src="https://s3.amazonaws.com/zeMirco/github/pouchdb-vs-couchbase/bulk-add.png" title="bulk add documents" ></p>

<h3>Get all documents</h3>

<p>The second action was getting all documents from each database, again with 10000 documents and then with 25000 documents.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="c1">// get all documents from PouchDB</span>
</span><span class='line'><span class="kd">function</span> <span class="nx">pouch_allDocs</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">console</span><span class="p">.</span><span class="nx">time</span><span class="p">(</span><span class="s1">&#39;PouchDB - all docs&#39;</span><span class="p">);</span>
</span><span class='line'>  <span class="nx">db</span><span class="p">.</span><span class="nx">allDocs</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">if</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="nx">log</span><span class="p">(</span><span class="nx">err</span><span class="p">);</span>
</span><span class='line'>    <span class="nx">console</span><span class="p">.</span><span class="nx">timeEnd</span><span class="p">(</span><span class="s1">&#39;PouchDB - all docs&#39;</span><span class="p">);</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>




<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="c1">// get all documents from Couchbase Lite</span>
</span><span class='line'><span class="kd">function</span> <span class="nx">couchbase_allDocs</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">console</span><span class="p">.</span><span class="nx">time</span><span class="p">(</span><span class="s1">&#39;Couchbase lite - all docs&#39;</span><span class="p">);</span>
</span><span class='line'>  <span class="nx">$</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">globalUrl</span> <span class="o">+</span> <span class="s1">&#39;performance/_all_docs&#39;</span><span class="p">)</span>
</span><span class='line'>  <span class="p">.</span><span class="nx">done</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">console</span><span class="p">.</span><span class="nx">time</span><span class="p">(</span><span class="s1">&#39;Couchbase lite - all docs&#39;</span><span class="p">);</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>




<table class="table table-condensed full-width">
  <thead>
    <tr>
      <th>#</th>
      <th>PouchDB (10000 docs)</th>
      <th>CB Lite (10000 docs)</th>
      <th> - </th>
      <th>PouchDB (25000 docs)</th>
      <th>CB Lite (25000 docs)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>345 ms</td>
      <td>126 ms</td>
      <td> - </td>
      <td>852 ms</td>
      <td>364 ms</td>
    </tr>
    <tr>
      <td>2</td>
      <td>325 ms</td>
      <td>29 ms</td>
      <td> - </td>
      <td>796 ms</td>
      <td>41 ms</td>
    </tr>
    <tr>
      <td>3</td>
      <td>315 ms</td>
      <td>16 ms</td>
      <td> - </td>
      <td>800 ms</td>
      <td>40 ms</td>
    </tr>
    <tr>
      <td>4</td>
      <td>315 ms</td>
      <td>16 ms</td>
      <td> - </td>
      <td>782 ms</td>
      <td>39 ms</td>
    </tr>
    <tr>
      <td>5</td>
      <td>311 ms</td>
      <td>16 ms</td>
      <td> - </td>
      <td>806 ms</td>
      <td>39 ms</td>
    </tr>
    <tr>
      <td>6</td>
      <td>314 ms</td>
      <td>17 ms</td>
      <td> - </td>
      <td>791 ms</td>
      <td>39 ms</td>
    </tr>
    <tr>
      <td>7</td>
      <td>315 ms</td>
      <td>22 ms</td>
      <td> - </td>
      <td>791 ms</td>
      <td>40 ms</td>
    </tr>
    <tr>
      <td>8</td>
      <td>308 ms</td>
      <td>18 ms</td>
      <td> - </td>
      <td>787 ms</td>
      <td>39 ms</td>
    </tr>
    <tr>
      <td>9</td>
      <td>315 ms</td>
      <td>16 ms</td>
      <td> - </td>
      <td>821 ms</td>
      <td>37 ms</td>
    </tr>
    <tr>
      <td>10</td>
      <td>313 ms</td>
      <td>16 ms</td>
      <td> - </td>
      <td>801 ms</td>
      <td>40 ms</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Ø</td>
      <td>317.6 ms</td>
      <td style="background-color: lime;">29.2 ms</td>
      <td> - </td>
      <td>802.7 ms</td>
      <td style="background-color: lime;">71.8 ms</td>
    </tr>
  </tfoot>
</table>


<p><img src="https://s3.amazonaws.com/zeMirco/github/pouchdb-vs-couchbase/get-all-docs.png" title="get all documents" ></p>

<h3>Get document by id</h3>

<p>The third action was getting a single document by id. First one document was picked out of the 10000 and for the second run
out of 25000 documents.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="c1">// get a certain document by id</span>
</span><span class='line'><span class="kd">function</span> <span class="nx">pouch_get</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">console</span><span class="p">.</span><span class="nx">time</span><span class="p">(</span><span class="s1">&#39;PouchDB - get single doc&#39;</span><span class="p">);</span>
</span><span class='line'>  <span class="nx">db</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">dummyId</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">doc</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">if</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">err</span><span class="p">);</span>
</span><span class='line'>    <span class="nx">console</span><span class="p">.</span><span class="nx">timeEnd</span><span class="p">(</span><span class="s1">&#39;PouchDB - get single doc&#39;</span><span class="p">);</span>
</span><span class='line'>    <span class="nx">queryUser</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">;</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>




<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="c1">// get a certain document by id</span>
</span><span class='line'><span class="kd">function</span> <span class="nx">couchbase_get</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">console</span><span class="p">.</span><span class="nx">time</span><span class="p">(</span><span class="s1">&#39;Couchbase lite - get single doc&#39;</span><span class="p">);</span>
</span><span class='line'>  <span class="nx">$</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">globalUrl</span> <span class="o">+</span> <span class="s1">&#39;performance/&#39;</span> <span class="o">+</span> <span class="nx">dummyId</span><span class="p">)</span>
</span><span class='line'>  <span class="p">.</span><span class="nx">done</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">doc</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">console</span><span class="p">.</span><span class="nx">timeEnd</span><span class="p">(</span><span class="s1">&#39;Couchbase lite - get single doc&#39;</span><span class="p">);</span>
</span><span class='line'>    <span class="nx">queryUser</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">;</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>




<table class="table table-condensed full-width">
  <thead>
    <tr>
      <th>#</th>
      <th>PouchDB (10000 docs)</th>
      <th>CB Lite (10000 docs)</th>
      <th> - </th>
      <th>PouchDB (25000 docs)</th>
      <th>CB Lite (25000 docs)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>5 ms</td>
      <td>3 ms</td>
      <td> - </td>
      <td>8 ms</td>
      <td>8 ms</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2 ms</td>
      <td>4 ms</td>
      <td> - </td>
      <td>2 ms</td>
      <td>4 ms</td>
    </tr>
    <tr>
      <td>3</td>
      <td>2 ms</td>
      <td>4 ms</td>
      <td> - </td>
      <td>3 ms</td>
      <td>5 ms</td>
    </tr>
    <tr>
      <td>4</td>
      <td>3 ms</td>
      <td>4 ms</td>
      <td> - </td>
      <td>3 ms</td>
      <td>5 ms</td>
    </tr>
    <tr>
      <td>5</td>
      <td>2 ms</td>
      <td>4 ms</td>
      <td> - </td>
      <td>3 ms</td>
      <td>3 ms</td>
    </tr>
    <tr>
      <td>6</td>
      <td>3 ms</td>
      <td>3 ms</td>
      <td> - </td>
      <td>4 ms</td>
      <td>4 ms</td>
    </tr>
    <tr>
      <td>7</td>
      <td>3 ms</td>
      <td>3 ms</td>
      <td> - </td>
      <td>3 ms</td>
      <td>7 ms</td>
    </tr>
    <tr>
      <td>8</td>
      <td>2 ms</td>
      <td>5 ms</td>
      <td> - </td>
      <td>3 ms</td>
      <td>4 ms</td>
    </tr>
    <tr>
      <td>9</td>
      <td>2 ms</td>
      <td>4 ms</td>
      <td> - </td>
      <td>3 ms</td>
      <td>4 ms</td>
    </tr>
    <tr>
      <td>10</td>
      <td>2 ms</td>
      <td>3 ms</td>
      <td> - </td>
      <td>4 ms</td>
      <td>5 ms</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Ø</td>
      <td style="background-color: lime;">2.6 ms</td>
      <td>3.7 ms</td>
      <td> - </td>
      <td style="background-color: lime;">3.6 ms</td>
      <td>4.9 ms</td>
    </tr>
  </tfoot>
</table>


<p><img src="https://s3.amazonaws.com/zeMirco/github/pouchdb-vs-couchbase/get-doc-by-id.png" title="get document by id" ></p>

<h3>Query db with view document and key</h3>

<p>When you run queries against each database you have to remember that Couchbase Lite needs view documents (like CouchDB)
compared to PouchDB that works with on-the-fly map/reduce functions. So whenever we initialize our app we have to save all
required view documents to Couchbase Lite (or check if they are already present). As you can see the mapping function is the
same for both databases.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="c1">// couchbase lite view</span>
</span><span class='line'><span class="kd">var</span> <span class="nx">view</span> <span class="o">=</span> <span class="p">{</span>
</span><span class='line'>  <span class="s2">&quot;id&quot;</span><span class="o">:</span> <span class="s2">&quot;_design/users&quot;</span><span class="p">,</span>
</span><span class='line'>  <span class="s2">&quot;views&quot;</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>    <span class="s2">&quot;email&quot;</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>      <span class="s2">&quot;map&quot;</span><span class="o">:</span> <span class="s2">&quot;function(doc) { emit(doc.email, null) }&quot;</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">};</span>
</span><span class='line'>
</span><span class='line'><span class="c1">// save view to couchbase lite</span>
</span><span class='line'><span class="nx">$</span><span class="p">.</span><span class="nx">ajax</span><span class="p">({</span>
</span><span class='line'>  <span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;PUT&#39;</span><span class="p">,</span>
</span><span class='line'>  <span class="nx">url</span><span class="o">:</span> <span class="nx">globalUrl</span> <span class="o">+</span> <span class="s1">&#39;performance/_design/users&#39;</span><span class="p">,</span>
</span><span class='line'>  <span class="nx">data</span><span class="o">:</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">view</span><span class="p">),</span>
</span><span class='line'>  <span class="nx">contentType</span> <span class="o">:</span> <span class="s1">&#39;application/json&#39;</span>
</span><span class='line'><span class="p">})</span>
</span><span class='line'><span class="p">.</span><span class="nx">done</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">log</span><span class="p">(</span><span class="s1">&#39;view created&#39;</span><span class="p">);</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>Now you can query each database.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="c1">// query pouchdb</span>
</span><span class='line'><span class="kd">function</span> <span class="nx">pouch_query</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>  <span class="c1">// mapping function</span>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">map</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">doc</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">emit</span><span class="p">(</span><span class="nx">doc</span><span class="p">.</span><span class="nx">email</span><span class="p">,</span> <span class="kc">null</span><span class="p">);</span>
</span><span class='line'>  <span class="p">};</span>
</span><span class='line'>  <span class="nx">console</span><span class="p">.</span><span class="nx">time</span><span class="p">(</span><span class="s1">&#39;PouchDB - query single doc&#39;</span><span class="p">);</span>
</span><span class='line'>  <span class="c1">// query PouchDB</span>
</span><span class='line'>  <span class="nx">db</span><span class="p">.</span><span class="nx">query</span><span class="p">({</span><span class="nx">map</span><span class="o">:</span> <span class="nx">map</span><span class="p">},</span> <span class="p">{</span><span class="nx">key</span><span class="o">:</span> <span class="nx">queryUser</span><span class="p">.</span><span class="nx">email</span><span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">if</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">err</span><span class="p">);</span>
</span><span class='line'>    <span class="nx">console</span><span class="p">.</span><span class="nx">timeEnd</span><span class="p">(</span><span class="s1">&#39;PouchDB - query single doc&#39;</span><span class="p">);</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>




<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="c1">// query the database</span>
</span><span class='line'><span class="kd">function</span> <span class="nx">couchbase_query</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">console</span><span class="p">.</span><span class="nx">time</span><span class="p">(</span><span class="s1">&#39;Couchbase lite - query single doc&#39;</span><span class="p">);</span>
</span><span class='line'>  <span class="nx">$</span><span class="p">.</span><span class="nx">ajax</span><span class="p">({</span>
</span><span class='line'>    <span class="nx">url</span><span class="o">:</span> <span class="nx">globalUrl</span> <span class="o">+</span> <span class="s1">&#39;performance/_design/users/_view/email?key=&quot;&#39;</span> <span class="o">+</span> <span class="nx">queryUser</span><span class="p">.</span><span class="nx">email</span> <span class="o">+</span> <span class="s1">&#39;&quot;&#39;</span>
</span><span class='line'>  <span class="p">})</span>
</span><span class='line'>  <span class="p">.</span><span class="nx">done</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">doc</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">console</span><span class="p">.</span><span class="nx">timeEnd</span><span class="p">(</span><span class="s1">&#39;Couchbase lite - query single doc&#39;</span><span class="p">);</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>




<table class="table table-condensed full-width">
  <thead>
    <tr>
      <th>#</th>
      <th>PouchDB (10000 docs)</th>
      <th>CB Lite (10000 docs)</th>
      <th> - </th>
      <th>PouchDB (25000 docs)</th>
      <th>CB Lite (25000 docs)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>370 ms</td>
      <td>1754 ms</td>
      <td> - </td>
      <td>859 ms</td>
      <td>4401 ms</td>
    </tr>
    <tr>
      <td>2</td>
      <td>338 ms</td>
      <td>4 ms</td>
      <td> - </td>
      <td>846 ms</td>
      <td>5 ms</td>
    </tr>
    <tr>
      <td>3</td>
      <td>324 ms</td>
      <td>5 ms</td>
      <td> - </td>
      <td>842 ms</td>
      <td>4 ms</td>
    </tr>
    <tr>
      <td>4</td>
      <td>338 ms</td>
      <td>3 ms</td>
      <td> - </td>
      <td>873 ms</td>
      <td>7 ms</td>
    </tr>
    <tr>
      <td>5</td>
      <td>346 ms</td>
      <td>3 ms</td>
      <td> - </td>
      <td>866 ms</td>
      <td>3 ms</td>
    </tr>
    <tr>
      <td>6</td>
      <td>340 ms</td>
      <td>3 ms</td>
      <td> - </td>
      <td>862 ms</td>
      <td>4 ms</td>
    </tr>
    <tr>
      <td>7</td>
      <td>337 ms</td>
      <td>3 ms</td>
      <td> - </td>
      <td>838 ms</td>
      <td>4 ms</td>
    </tr>
    <tr>
      <td>8</td>
      <td>330 ms</td>
      <td>6 ms</td>
      <td> - </td>
      <td>861 ms</td>
      <td>4 ms</td>
    </tr>
    <tr>
      <td>9</td>
      <td>332 ms</td>
      <td>4 ms</td>
      <td> - </td>
      <td>859 ms</td>
      <td>3 ms</td>
    </tr>
    <tr>
      <td>10</td>
      <td>337 ms</td>
      <td>3 ms</td>
      <td> - </td>
      <td>844 ms</td>
      <td>7 ms</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Ø</td>
      <td>339.2 ms</td>
      <td style="background-color: lime;">178.8 ms</td>
      <td> - </td>
      <td>855 ms</td>
      <td style="background-color: lime;">444.2 ms</td>
    </tr>
  </tfoot>
</table>


<p><img src="https://s3.amazonaws.com/zeMirco/github/pouchdb-vs-couchbase/query-via-view.png" title="query via view document" ></p>

<h3>Conclusion</h3>

<p>Here is a summary of the results. For the part &#8220;query doc via view&#8221; I&#8217;ll call it a draw. Couchbase Lite is about 5 times
slower than PouchDB but has the huge advantage of caching for subsequent requests (and therefore wins when averaging the request
times).</p>

<table class="table table-condensed full-width">
  <thead>
    <tr>
      <td></td>
      <td style="text-align: center;">PouchDB</td>
      <td style="text-align: center;">Couchbase Lite Phonegap</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>bulk add documents</td>
      <td style="text-align: center;">+</td>
      <td></td>
    </tr>
    <tr>
      <td>get all documents</td>
      <td></td>
      <td style="text-align: center;">+</td>
    </tr>
    <tr>
      <td>get document by id</td>
      <td style="text-align: center;">+</td>
      <td></td>
    </tr>
    <tr>
      <td>query doc via view</td>
      <td style="text-align: center;">o</td>
      <td style="text-align: center;">o</td>
    </tr>
  </tbody>
</table>


<p>PouchDB (and CouchDB) are <a href="http://www.couchbase.com/couchbase-vs-couchdb">different</a> from Couchbase Lite (and Couchbase). Jan Lehnardt and
 Scott Hanselman have a great discussion about that topic in the podcast <a href="http://www.hanselminutes.com/386/understanding-couchdb-and-nosql-with-jan-lehnardt">Understanding CouchDB and NoSQL with Jan Lehnardt</a>.
 The most important difference is caching. Couchbase is a combination between CouchDB and Membase and as it is stated on their homepage
  &#8220;has a built-in, memcached-based caching technology&#8221;. The data tells the same story.</p>

<p>Take a look at the last section &#8220;Query db with view document and key&#8221;. On the first request Couchbase Lite needs much more
time than PouchDB to find the document. However on subsequent requests Couchbase Lite is able to find the same document
within a few milliseconds whereas PouchDB constantly needs the same amount of time. That means you should always try to
guess which documents the user is looking for before the user actually wants to get them. That way a requests only takes a few
milliseconds and your app delivers a great user experience. The caching mechanism is also clearly noticeable when getting all
documents from the db. The first requests takes much longer than the following ones. However compared to PouchDB all requests,
even the first one, are much faster.</p>

<p>PouchDB wins the first section where we add a huge amount of random data to the db. Finding a document by ID is also faster in PouchDB
compared to Couchbase Lite. Interesting here is that Couchbase Lite doesn&#8217;t seem to cache this requests. Subsequent requests aren&#8217;t
significantly faster than the first one and PouchDB still wins after a couple of repeated requests.</p>

<p>In total it comes down to the caching feature of Couchbase Lite. PouchDB handles writing documents to db, where caching has no influence,
 better whereas Couchbase Lite is much faster, especially after the first requests, when it comes to reading documents from db.
 Therefore it is up to you and your requirements, which database you choose for your next project.</p>

<p>There is also a new kid in town - <a href="http://dev.yathit.com/">http://dev.yathit.com/</a>. I haven&#8217;t yet tried
this one and cannot say anything about performance and overall usability. It has one major disadvantage compared to PouchDB and
Couchbase Lite and that is replication / syncing. That feature is not built into the db and you have to implement it yourself.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Flexbox-grid: Tiny yet powerful grid built on CSS flex]]></title>
    <link href="http://mircozeiss.com/tiny-yet-powerful-grid-built-on-css-flex/"/>
    <updated>2013-10-28T21:13:00+01:00</updated>
    <id>http://mircozeiss.com/tiny-yet-powerful-grid-built-on-css-flex</id>
    <content type="html"><![CDATA[<p>Today I&#8217;d like to introduce <a href="https://github.com/zeMirco/flexbox-grid">flexbox-grid</a>.</p>

<p>It is a CSS grid that is not only inspired by <a href="http://getbootstrap.com/css/#grid">Bootstrap</a> but also uses the same class names.
So you might ask yourself right now:
<a href="http://unsemantic.com/">Why</a>
<a href="http://semantic.gs/">the</a>
<a href="http://yuilibrary.com/yui/docs/cssgrids/">f***ing</a>
<a href="http://purecss.io/grids/">hell</a>
<a href="http://foundation.zurb.com/grid.php">another</a>
<a href="http://www.getskeleton.com/#grid">grid</a>?
Well, first of all for learning and playing with the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex">flex property</a>. Secondly, actually using flex. None of the grids above
makes use of flex. That&#8217;s totally understandable because it is not yet <a href="http://caniuse.com/#feat=flexbox">supported</a>
by all major browsers.</p>

<iframe width="100%" height="430" src="http://caniuse.com/flexbox/embed/description"></iframe>


<p>However I&#8217;d like to focus solely on modern browsers and devices. Last but not least, the killer argument that seems to apply
to every new CSS/JS/*** library, it is <a href="http://updates.html5rocks.com/2013/10/Flexbox-layout-isn-t-slow">fast</a> and tiny.
And by tiny I mean really tiny. Gzipped only 660 bytes. Here is the report from
<a href="https://github.com/gruntjs/grunt-contrib-cssmin">cssmin</a>.</p>

<p>Original: 9192 bytes.
Minified: 7476 bytes.
Gzipped:  660 bytes.</p>

<p><a href="http://topcoat.io/">Topcoat</a> has already <a href="https://github.com/topcoat/grid">forked the grid</a> and added it to its portfolio.</p>

<h3>About the project</h3>

<p><a href="https://github.com/zeMirco/flexbox-grid">flexbox-grid</a> is built with <a href="http://learnboost.github.io/stylus/">Stylus</a>.</p>

<p>The default number of columns is 12 and the default gutter width (space between the columns) is 1rem.
You can change that by editing <code>var-columns</code> and <code>var-gutter-width</code> inside <a href="https://github.com/zeMirco/flexbox-grid/blob/master/flexbox-grid.styl">flexbox-grid.styl</a>.
Afterwards run <code>grunt</code> to get the <code>.css</code> and <code>.min.css</code> files.</p>

<h4>Basic grid</h4>

<p>The basic grid has four main <code>col-*</code> classes. One for phone, one for tablets, one for desktop and one for large
desktop. The breakpoints are the same as in <a href="http://getbootstrap.com/css/#grid">Bootstrap</a>.</p>

<ul>
<li><code>col-xs-*</code> - phones, up to 480px</li>
<li><code>col-sm-*</code> - tablets, 768px and up</li>
<li><code>col-md-*</code> - desktops, 992px and up</li>
<li><code>col-lg-*</code> - large desktops, 1200px and up</li>
</ul>


<iframe width="100%" height="300" src="http://jsfiddle.net/m9MFc/4/embedded/result,html,css/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>


<h4>Offset classes</h4>

<p>By using the <code>col-*-offset-x</code> we can shift columns to the right. This class simply adds a left margin that has the width
of x columns. Therefore the columns above and below are all perfectly aligned with the offset column.</p>

<iframe width="100%" height="300" src="http://jsfiddle.net/AXCPk/6/embedded/result,html,css/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>


<h4>Mix grid and offset classes</h4>

<p>Of course you can mix the basic grid class with offset classes. You just have to make sure that in the end everything sums
up to twelve or less than twelve columns. That means you could use the following classes in one <code>row</code>:</p>

<ul>
<li><code>col-xs-2</code></li>
<li><code>col-xs-2 col-xs-offset-4</code></li>
<li><code>col-xs-2 col-xs-offset-2</code></li>
</ul>


<p>or</p>

<ul>
<li><code>col-lg-6</code></li>
<li><code>col-lg-2 col-lg-offset-3</code></li>
<li><code>col-lg-1</code></li>
</ul>


<iframe width="100%" height="200" src="http://jsfiddle.net/Ax5xU/5/embedded/result,html,css/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>


<h4>Auto width columns</h4>

<p>That&#8217;s a pretty cool feature of flex. You can just put as many divs with class <code>col-auto</code> as you want in one <code>row</code> and they
will automatically share the available space among them. You don&#8217;t have to think and calculate stuff like &#8220;hm .. I want four
equally wide divs in my row &#8230; in my setup each row consists of 12 columns &#8230; 12/4 is 3 and I therefore have to use
<code>col-lg-3</code>&#8221;.</p>

<iframe width="100%" height="200" src="http://jsfiddle.net/H7PPV/1/embedded/result,html,css/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>


<h4>Mix fixed width and auto width columns</h4>

<p>Again you can mix fixed width and auto width columns without causing any layout weirdness. In the example below all
<code>col-auto</code> columns have a light blue background to distinguish them from the fixed width rows.</p>

<iframe width="100%" height="200" src="http://jsfiddle.net/fmDgH/2/embedded/result,html,css/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>


<h4>Nesting</h4>

<p>It is also possible to nest different types of columns. Similar to Bootstrap you can start a new <code>row</code> within one <code>col-*</code>.
You just have to remember that inside this new <code>row</code> your columns will again sum up to a maximum number of 12.</p>

<iframe width="100%" height="200" src="http://jsfiddle.net/LafLy/2/embedded/result,html,css/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>


<h4>Responsive features</h4>

<p>The initial relase of <a href="https://github.com/zeMirco/flexbox-grid">flexbox-grid</a> did not have any responsive features. With v1.0.0 I&#8217;ve added the same responsive
classes that Bootstrap has. You don&#8217;t have to learn anything new and switching back and forth between those two libraries
is easy as. Simply use <code>col-xs-*</code>, <code>col-sm-*</code>, <code>col-md-*</code> and <code>col-lg-*</code> to target different devices.</p>

<iframe width="100%" height="300" src="http://jsfiddle.net/cAHeq/2/embedded/result,html,css/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>


<h3>Conclusion</h3>

<p>I&#8217;ve learned a lot about Stylus and the CSS flex property while working on this project. Quite often we simply take things
for granted and rely on stuff that&#8217;s already available and works well. However from time to time we have to leave our
comfort zone and have to think outside the box. That&#8217;s how we continuously improve our skills. Especially for mobile and
low bandwidth we need to focus on performance and simplicity. It&#8217;s a good reason to rewrite everything from scratch while
making use of new technologies like flex. Depending on the project you are working on you can start using flex today and
enjoy all the <a href="http://philipwalton.github.io/solved-by-flexbox/">possibilities</a> it offers.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Dokku in-depth tutorial - Your private PaaS on Amazon EC2]]></title>
    <link href="http://mircozeiss.com/dokku-in-depth-tutorial-your-private-saas-on-amazon-ec2/"/>
    <updated>2013-10-10T22:20:00+02:00</updated>
    <id>http://mircozeiss.com/dokku-in-depth-tutorial-your-private-saas-on-amazon-ec2</id>
    <content type="html"><![CDATA[<p>If you want complete control over your servers and at the same time the simplicity to deploy as easy as
<code>git push server master</code> <a href="https://github.com/progrium/dokku">Dokku</a> will be your next favorite tool.</p>

<p>In this post I will walk you through the process of installing Dokku on a fresh Amazon EC2 instance running Ubuntu Server
13.04.</p>

<h3>Set up your Amazon EC2 instance</h3>

<p>Log in to your AWS console and go to EC2. From your dashboard click on &#8220;Launch Instance&#8221;. Under step one &#8220;Choose AMI&#8221; find
&#8220;Ubuntu Server 13.04&#8221; and click on &#8220;Select&#8221;.</p>

<p><img src="https://s3.amazonaws.com/mircozeiss.com/dokku/01_choose_ami.png" title="Ubuntu Server 13.04 instance" ></p>

<p>In step two &#8220;Choose Instance Type&#8221; select the micro instance. It has enough power for any small prototype and is eligible
for the AWS free usage tier. If you need more RAM, disk space or CPU you can also select one of the other instances. For
this post it doesn&#8217;t matter, as the following steps will be the same.</p>

<p><img src="https://s3.amazonaws.com/mircozeiss.com/dokku/02_choose_instance_type.png" title="Choose Instance Type" ></p>

<p>In step three &#8220;Configure Instance&#8221; I left everything as is.</p>

<p><img src="https://s3.amazonaws.com/mircozeiss.com/dokku/03_configure_instance.png" title="Configure Instance" ></p>

<p>The same goes for step four &#8220;Add storage&#8221;. Usually you don&#8217;t need a lot of storage. For images, videos and other
files I always use S3.</p>

<p><img src="https://s3.amazonaws.com/mircozeiss.com/dokku/04_add_storage.png" title="Add Storage" ></p>

<p>In step five &#8220;Tag Instance&#8221; give your instance a name. That makes it easier later on to find it in the list of all
your instances. I chose &#8220;Node.js via Dokku&#8221;.</p>

<p><img src="https://s3.amazonaws.com/mircozeiss.com/dokku/05_tag_instance.png" title="Tag Instance" ></p>

<p>Leave everything as is in step six &#8220;Configure Security Group&#8221;. The wizard will create a new security group for your
instance. In my case it is called &#8220;launch-wizard-1&#8221;. At the bottom you can see that only port 22 is open for SSH access.
We will change this later on to access our instance through the web with a browser.</p>

<p><img src="https://s3.amazonaws.com/mircozeiss.com/dokku/06_configure_security_group.png" title="Configure Security Group" ></p>

<p>Last but not least check that everything is correct in step seven &#8220;Review&#8221;. Click on &#8220;Launch&#8221; to start your fresh instance.</p>

<p><img src="https://s3.amazonaws.com/mircozeiss.com/dokku/07_review.png" title="Review" ></p>

<p>To connect to this instance via SSH you need to create a key pair (or use an existing one if you have). I named mine
&#8220;dokku&#8221; and downloaded the &#8220;dokku.pem&#8221; file.</p>

<p><img src="https://s3.amazonaws.com/mircozeiss.com/dokku/08_key_pair.png" title="Key Pair" ></p>

<p>Et voilà you&#8217;ve created a new instance, downloaded the necessary key pair and after a short amount of time
you&#8217;ll see the instance within your list of instances with a green status indicator that says &#8220;running&#8221;. That concludes
the first section and in the next one we will connect to the instance and install Dokku.</p>

<p><img src="https://s3.amazonaws.com/mircozeiss.com/dokku/10_instance_screenshot.png" title="Instance Screenshot" ></p>

<h3>Install Dokku</h3>

<p>First of all connect to your server via SSH. I&#8217;ll simply use the terminal but you can use any tool you want. Select
the &#8220;Node.js via Dokku&#8221; instance from the list and on top of the page click on &#8220;Connect&#8221;. A popup window will open
with further instructions.</p>

<p><img src="https://s3.amazonaws.com/mircozeiss.com/dokku/11_connect_to_instance.png" title="Connect To Your Instance" ></p>

<p>At the top &#8220;A standalone SSH client&#8221; should be selected. Open your terminal and change the working directory to the folder
where you put the previously downloaded &#8220;docker.pem&#8221; file. Then run <code>chmod 400 dokku.pem</code> to change the permissions for your
key pair. Afterwards copy the line under &#8220;Example&#8221; and paste it into your terminal. Don&#8217;t worry about the message that the
authenticity cannot be established. Simply answer the prompt with &#8220;yes&#8221; and press enter.</p>

<p><img src="https://s3.amazonaws.com/mircozeiss.com/dokku/12_RSA_fingerprint.png" title="RSA fingerprint" ></p>

<p>Afterwards you should see a welcome message from your Ubuntu server.</p>

<p><img src="https://s3.amazonaws.com/mircozeiss.com/dokku/13_connected_to_server.png" title="Server success message" ></p>

<p>Now that you are connected to your server we can install Dokku. Follow the instructions from the <a href="https://github.com/progrium/dokku#installing">GitHub page</a>.
Run <code>wget -qO- https://raw.github.com/progrium/dokku/master/bootstrap.sh | sudo bash</code>. That will install all the necessary tools needed to run Dokku.
The whole process will take about five minutes and at the end you will see a message that asks you to copy
your public key to the server.</p>

<p><img src="https://s3.amazonaws.com/mircozeiss.com/dokku/14_dokku_installed.png" title="Dokku installed" ></p>

<p>Make sure you replace <code>root@ip-10-228-95-82</code> with the username and address you&#8217;ve used before to connect to your server.
Then you have to run <code>gitreceive upload-key progrium</code> as an admin with <code>sudo</code>. It doesn&#8217;t say it in the success message
but on GitHub under <a href="https://github.com/progrium/dokku#configuring">Configuring</a> it is stated. Finally you can replace
<code>progrium</code> with any username you want. It will be the username that is used by git. I simply chose <code>dokku</code>.</p>

<p><img src="https://s3.amazonaws.com/mircozeiss.com/dokku/15_copy_ssh_key.png" title="Copy SSH Key" ></p>

<p>The last step to make Dokku work is to create a <code>VHOST</code> file in <code>/home/git/</code>. On your server change the directory to <code>/home/git/</code>
and run <code>sudo touch VHOST</code> to create the file and <code>sudo nano VHOST</code> to open the file with the nano editor. Then paste
the public DNS of your instance into this file and close it with CTRL+X. Afterwards run <code>cat VHOST</code> to make sure the
DNS was saved correctly.</p>

<p><img src="https://s3.amazonaws.com/mircozeiss.com/dokku/17_setting_vhost.png" title="Setting VHOST" ></p>

<p>That&#8217;s it! Your server is ready, Dokku is ready and the only thing left is our app.</p>

<h3>Node.js app</h3>

<p>We will simply use the <a href="http://expressjs.com/">Express</a> starter app and run it on our server. In a terminal on your local
computer run <code>express</code> and <code>npm install</code> to create the app. As Dokku is inspired by <a href="https://www.heroku.com/">Heroku</a> every app
needs a Procfile to tell our server which commands it should run to start our express app. Usually we run <code>node app.js</code> to start
our app and therefore we have to write the same into the Procfile. Run <code>touch Procfile</code> to create it,
<code>echo web: node app.js &gt; Procfile</code> to put the right command into the file and <code>cat Procfile</code> to verify that everything
worked as expected.</p>

<p><img src="https://s3.amazonaws.com/mircozeiss.com/dokku/19_procfile.png" title="Procfile" ></p>

<p>It is also recommended to create a <code>.gitignore</code> file and to put the <code>node_modules/</code> directory inside. We don&#8217;t have
to copy this folder to our server as Dokku will run <code>npm install</code> which will install all required modules from our <code>package.json</code>.
Run <code>touch .gitignore</code> and <code>echo node_modules/ &gt; .gitignore</code> to set up this file.</p>

<p><img src="https://s3.amazonaws.com/mircozeiss.com/dokku/16_gitignore.png" title="Gitignore" ></p>

<p>Now you are ready to deploy. Initialize git with <code>git init</code>, add all the files with <code>git add .</code> and write your first
commit message <code>git commit -m "init"</code>. To deploy the code to our server we have to set the remote target for git. Run
<code>git remote add [name] git@[DNS]:[appname]</code> to add our remote server. For <code>[name]</code> I chose <code>aws</code>, for <code>[DNS]</code> I copied
my public DNS from the Amazon EC2 dashboard and as <code>[appname]</code> I selected <code>node-js-example</code>.</p>

<p><img src="https://s3.amazonaws.com/mircozeiss.com/dokku/18_git_add_remote.png" title="Git Add Remote" ></p>

<p>Now simply run <code>git push aws master</code> to deploy the app to our server. You will see a success message that says that our app
is available under some subdomain. Unfortunately that doesn&#8217;t work and we have to access it via the public DNS and its
public port.</p>

<p>To see the port of our app connect to the server via SSH and run <code>sudo docker ps</code>. You should see one running process
and at the very right you&#8217;ll see the public port of our app.</p>

<p><img src="https://s3.amazonaws.com/mircozeiss.com/dokku/20_sudo_docker_ps.png" title="Sudo Docker PS" ></p>

<p>You might remember from the beginning where we talked about the security groups and how we will get back to this topic later
on. Well that moment is now. In order to access the instance from the web you&#8217;ll have to open the port the app is running on.
In the AWS console click on &#8220;Security Groups&#8221; on the left side and select the one we used for our instance. In my case it
was &#8220;launch-wizard-1&#8221;. At the bottom click on &#8220;Inbound&#8221; and enter your port in &#8220;Port range&#8221;. For me it was port 49153. Click
on &#8220;Add Rule&#8221; and &#8220;Apply Rule Changes&#8221; to save the settings.</p>

<p><img src="https://s3.amazonaws.com/mircozeiss.com/dokku/21_edit_security_group.png" title="Edit Security Group" ></p>

<p>Now copy the public DNS of your server and afterwards the port of your app to the browser&#8217;s address bar and see the Express app
running. Yeah!</p>

<p><img src="https://s3.amazonaws.com/mircozeiss.com/dokku/22_express_app_running_on_aws_ec2_instance.png" title="Express app running on AWS EC2 instance" ></p>

<h3>Conclusion</h3>

<p>We now have a server running our app in an isolated Docker image. Through SSH we have complete control over the app
and we can install any additional packages we want. Using Docker we can easily create more apps on the same server without
interfering with running processes. At the same time we are able to deploy new code as easy as <code>git push aws master</code>
and see the changes live within a short amount of time. Dokku and Docker are under heavy development but it&#8217;s definetely worth
to check them out. They really make live easier. Big thumbs up for the creators and the community helping with the
development.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[GitHub like signup form with AngularJS and Bootstrap v3]]></title>
    <link href="http://mircozeiss.com/github-like-signup-form-with-angularjs-and-bootstrap-v3/"/>
    <updated>2013-08-21T22:37:00+02:00</updated>
    <id>http://mircozeiss.com/github-like-signup-form-with-angularjs-and-bootstrap-v3</id>
    <content type="html"><![CDATA[<p>Building a modern and clean signup form still requires more coding than one might think. <a href="https://github.com/">GitHub</a>
has a simple signup form that I really like. Just three input fields (username, email and password) and you are ready
to go.</p>

<p>In this post we will build a fully featured copy of this signup form. AngularJS manages our frontend and a small Express.js
app takes care of our backend. As an extra gimmick I added password verification to make sure that our users don&#8217;t
 have typos in their passwords. In the end we have some validation in the frontend and also in our backend. Take a look
 at the <a href="http://mysterious-escarpment-9591.herokuapp.com/signup">final app</a>. If everything was correct you should see a json object with your username, email and the hashed password
 in addition to some extra information. I also uploaded the whole code to GitHub <a href="https://github.com/zeMirco/ng-signup-form">ng-signup-form</a>.</p>

<h3>The layout</h3>

<p>We use the brand new <a href="http://getbootstrap.com/">Bootstrap v3</a> to build our page. Inside a panel component we have a form with
four input fields. The first one is for username, the second one for email and the last two ones are for password and
 password verification.</p>

<p><img src="https://s3.amazonaws.com/mircozeiss.com/signup-form-layout.png" title="Signup form built on top of Bootstrap v3" ></p>

<h3>Backend with Express.js</h3>

<p>Our backend consists of only three routes: <code>GET /signup</code>, <code>POST /signup</code> and <code>POST /signup/check/username</code>. Our main route <code>/</code> redirects
directly to <code>/signup</code> so when you open the page the signup form is immediately shown.</p>

<p>The code for the first route <code>GET /signup</code> looks like the following.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;/signup&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">res</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="s1">&#39;signup&#39;</span><span class="p">);</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>It simply takes our <code>signup.jade</code> template and renders it. Our second route <code>POST /signup</code> is the target for the signup form. Let&#8217;s go through the code step by step.
First of all we get the values of the input fields from the request object.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">var</span> <span class="nx">username</span> <span class="o">=</span> <span class="nx">req</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">username</span><span class="p">;</span>
</span><span class='line'><span class="kd">var</span> <span class="nx">email</span> <span class="o">=</span> <span class="nx">req</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">email</span><span class="p">;</span>
</span><span class='line'><span class="kd">var</span> <span class="nx">password</span> <span class="o">=</span> <span class="nx">req</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">password</span><span class="p">;</span>
</span><span class='line'><span class="kd">var</span> <span class="nx">verification</span> <span class="o">=</span> <span class="nx">req</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">verification</span><span class="p">;</span>
</span></code></pre></td></tr></table></div></figure>


<p>Afterwards we perform some input validation, check for duplicate username, create a salt and hashed password
and at the end send a response back to the user. Whenever we encounter invalid data we rerender the
<code>signup.jade</code> template with an additional error message to tell the user what went wrong. Let&#8217;s start with some input validation.</p>

<h4>1. Input validation on the backend</h4>

<p>Although our submit button is disabled as long as we don&#8217;t have valid values in our input fields, some clever
people will be able to send invalid data to our backend. That&#8217;s why we have to double check the incoming data
on the server. We have to make sure that none of the fields are empty, the username doesn&#8217;t contain any
non-url-safe characters, email value is a valid email address and finally that the provided password matches
the verification.</p>

<p>All in all the code looks like this.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">var</span> <span class="nx">error</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
</span><span class='line'><span class="c1">// regexp from https://github.com/angular/angular.js/blob/master/src/ng/directive/input.js#L4</span>
</span><span class='line'><span class="kd">var</span> <span class="nx">EMAIL_REGEXP</span> <span class="o">=</span> <span class="sr">/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,6}$/</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'><span class="c1">// check for valid inputs</span>
</span><span class='line'><span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">username</span> <span class="o">||</span> <span class="o">!</span><span class="nx">email</span> <span class="o">||</span> <span class="o">!</span><span class="nx">password</span> <span class="o">||</span> <span class="o">!</span><span class="nx">verification</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">error</span> <span class="o">=</span> <span class="s1">&#39;All fields are required&#39;</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">username</span> <span class="o">!==</span> <span class="nb">encodeURIComponent</span><span class="p">(</span><span class="nx">username</span><span class="p">))</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">error</span> <span class="o">=</span> <span class="s1">&#39;Username may not contain any non-url-safe characters&#39;</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">email</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="nx">EMAIL_REGEXP</span><span class="p">))</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">error</span> <span class="o">=</span> <span class="s1">&#39;Email is invalid&#39;</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">password</span> <span class="o">!==</span> <span class="nx">verification</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">error</span> <span class="o">=</span> <span class="s1">&#39;Passwords don\&#39;t match&#39;</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="k">if</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">response</span><span class="p">.</span><span class="nx">status</span><span class="p">(</span><span class="mi">403</span><span class="p">);</span>
</span><span class='line'>  <span class="nx">response</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="s1">&#39;signup&#39;</span><span class="p">,</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">error</span><span class="o">:</span> <span class="nx">error</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'>  <span class="k">return</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<h4>2. Check for duplicate username</h4>

<p>In a real world app you would query your database to check for duplicate usernames. In this example
I&#8217;m using an in-memory array with json data as dummy database. We simply loop through the array to see
if an entry with the requested username already exists.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="c1">// dummy db</span>
</span><span class='line'><span class="kd">var</span> <span class="nx">dummyDb</span> <span class="o">=</span> <span class="p">[</span>
</span><span class='line'>  <span class="p">{</span><span class="nx">username</span><span class="o">:</span> <span class="s1">&#39;john&#39;</span><span class="p">,</span> <span class="nx">email</span><span class="o">:</span> <span class="s1">&#39;john@email.com&#39;</span><span class="p">},</span>
</span><span class='line'>  <span class="p">{</span><span class="nx">username</span><span class="o">:</span> <span class="s1">&#39;jack&#39;</span><span class="p">,</span> <span class="nx">email</span><span class="o">:</span> <span class="s1">&#39;jack@email.com&#39;</span><span class="p">},</span>
</span><span class='line'>  <span class="p">{</span><span class="nx">username</span><span class="o">:</span> <span class="s1">&#39;jim&#39;</span><span class="p">,</span> <span class="nx">email</span><span class="o">:</span> <span class="s1">&#39;jim@email.com&#39;</span><span class="p">},</span>
</span><span class='line'><span class="p">];</span>
</span><span class='line'>
</span><span class='line'><span class="c1">// check if username is already taken</span>
</span><span class='line'><span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">dummyDb</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="nx">dummyDb</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">username</span> <span class="o">===</span> <span class="nx">username</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">response</span><span class="p">.</span><span class="nx">status</span><span class="p">(</span><span class="mi">403</span><span class="p">);</span>
</span><span class='line'>    <span class="nx">response</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="s1">&#39;signup&#39;</span><span class="p">,</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">error</span><span class="o">:</span> <span class="s1">&#39;Username is already taken&#39;</span>
</span><span class='line'>    <span class="p">});</span>
</span><span class='line'>    <span class="k">return</span><span class="p">;</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>Pro tip: Never do the same for duplicate email addresses. Read more about this topic in Troy Hunt&#8217;s excellent
post <a href="http://www.troyhunt.com/2012/05/everything-you-ever-wanted-to-know.html">Everything you ever wanted to know about building a secure password reset feature</a>.</p>

<h4>3. Create salt and hash password</h4>

<p>Just for completeness and demonstration purpose I included a small function to create a random salt and hash the provided
password. It might help beginners and reminds everyone never to save passwords in plain text to your db.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="c1">// create salt and hash password</span>
</span><span class='line'><span class="nx">pass</span><span class="p">.</span><span class="nx">hash</span><span class="p">(</span><span class="nx">password</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">salt</span><span class="p">,</span> <span class="nx">hash</span><span class="p">){</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">err</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'>  <span class="c1">// yeah we have a new user</span>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">user</span> <span class="o">=</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">username</span><span class="o">:</span> <span class="nx">username</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">email</span><span class="o">:</span> <span class="nx">email</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">salt</span><span class="o">:</span> <span class="nx">salt</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">hash</span><span class="o">:</span> <span class="nx">hash</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">createdAt</span><span class="o">:</span> <span class="nb">Date</span><span class="p">.</span><span class="nx">now</span><span class="p">()</span>
</span><span class='line'>  <span class="p">};</span>
</span><span class='line'>
</span><span class='line'>  <span class="c1">// for fully featured example check duplicate email, send verification link and save user to db</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">response</span><span class="p">.</span><span class="nx">json</span><span class="p">(</span><span class="mi">200</span><span class="p">,</span> <span class="nx">user</span><span class="p">)</span>
</span><span class='line'>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>I used <a href="https://github.com/visionmedia/node-pwd">pwd</a> to generate the salt and hash the password. You need to include the <a href="https://github.com/visionmedia/node-pwd/pull/3/files">pull request</a>
from jlubawy to make this work for node v0.10 and above. An alternative is <a href="https://github.com/ncb000gt/node.bcrypt.js/">bcrypt</a>.</p>

<p>That&#8217;s it. We&#8217;re are almost done with our backend. I will explain the third route <code>POST /signup/check/username</code> in the section
<strong>Custom validators</strong>.</p>

<h3>Form validation with AngularJS</h3>

<p>A good starting point for form validation with AngularJS is the section in the guide <a href="http://docs.angularjs.org/guide/forms">about forms</a>.
First of all you might want to tell the browser not to validate your form since we&#8217;d like to use AngularJS for that. Simply add <code>novalidate</code>
as an attribute to your form.</p>

<p>In our example we use two of the built in validators namely <code>required</code> and <code>email</code>. <code>required</code> makes sure you really enter some content
into the input fields and <code>email</code> uses a regular expression to verify a correct format of the email address. To show error message whenever one
of those validators returns an error we use Bootstrap&#8217;s <code>.help-block</code> class in conjunction with the <code>ngShow</code> directive.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">span</span><span class="p">.</span><span class="nx">help</span><span class="o">-</span><span class="nx">block</span><span class="p">(</span><span class="nx">ng</span><span class="o">-</span><span class="nx">show</span><span class="o">=</span><span class="s2">&quot;form.username.$dirty &amp;&amp; form.username.$error.required&quot;</span><span class="p">)</span> <span class="nx">Please</span> <span class="nx">choose</span> <span class="nx">a</span> <span class="nx">username</span>
</span><span class='line'><span class="nx">span</span><span class="p">.</span><span class="nx">help</span><span class="o">-</span><span class="nx">block</span><span class="p">(</span><span class="nx">ng</span><span class="o">-</span><span class="nx">show</span><span class="o">=</span><span class="s2">&quot;form.email.$dirty &amp;&amp; form.email.$error.email&quot;</span><span class="p">)</span> <span class="nx">Email</span> <span class="nx">is</span> <span class="nx">invalid</span>
</span></code></pre></td></tr></table></div></figure>


<p>You might wonder what <code>$dirty</code> is doing in our code. Every form and every form element in the AngularJS world has two states: <code>$pristine</code> and
<code>$dirty</code>. Your form gets the <code>$pristine</code> state on initial page load before you start entering text into the input fields. So before touching your form it is <code>$pristine</code>. As soon as you start
entering values the forms loses this state and gets the <code>$dirty</code> state because you started working with it. AngularJS also provides CSS classes
to allow for different styling of these states <code>.ng-pristine</code> and <code>.ng-dirty</code>. Read more about that topic in the AngularJS docs about <a href="http://docs.angularjs.org/api/ng.directive:form.FormController">FormController</a>.
If we used the same code as above but without <code>form.username.$dirty</code> and <code>form.email.$dirty</code> the span blocks would be visible on page load.</p>

<h4>Custom validators</h4>

<p>Our first custom validator sends a <code>POST</code> request to the server to check if the username is already taken. We will use a similar
structure as GitHub does. They send a request to <code>/signup_check/username</code> and if the username is already taken they respond with
a status of 403 and the message <code>Username already taken</code>. The same goes for usernames that contain invalid characters.</p>

<p><img src="https://s3.amazonaws.com/mircozeiss.com/github-dev-tools-headers.png" title="Chrome dev tools showing request and response headers" ></p>

<p>Here is the code of our Express app.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">post</span><span class="p">(</span><span class="s1">&#39;/signup/check/username&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">username</span> <span class="o">=</span> <span class="nx">req</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">username</span><span class="p">;</span>
</span><span class='line'>  <span class="c1">// check if username contains non-url-safe characters</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="nx">username</span> <span class="o">!==</span> <span class="nb">encodeURIComponent</span><span class="p">(</span><span class="nx">username</span><span class="p">))</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">res</span><span class="p">.</span><span class="nx">json</span><span class="p">(</span><span class="mi">403</span><span class="p">,</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">invalidChars</span><span class="o">:</span> <span class="kc">true</span>
</span><span class='line'>    <span class="p">});</span>
</span><span class='line'>    <span class="k">return</span><span class="p">;</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'>  <span class="c1">// check if username is already taken - query your db here</span>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">usernameTaken</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
</span><span class='line'>  <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">dummyDb</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">if</span> <span class="p">(</span><span class="nx">dummyDb</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">username</span> <span class="o">===</span> <span class="nx">username</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">usernameTaken</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
</span><span class='line'>      <span class="k">break</span><span class="p">;</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="nx">usernameTaken</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">res</span><span class="p">.</span><span class="nx">json</span><span class="p">(</span><span class="mi">403</span><span class="p">,</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">isTaken</span><span class="o">:</span> <span class="kc">true</span>
</span><span class='line'>    <span class="p">});</span>
</span><span class='line'>    <span class="k">return</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'>  <span class="c1">// looks like everything is fine</span>
</span><span class='line'>  <span class="nx">res</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="mi">200</span><span class="p">);</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>We first check for non-url-safe characters and afterwards if the username is already taken. If one of those is the case
we send status 403 and some json data back to the client to tell it what went wrong. If everything is fine we simply send
a status of 200 without any data.</p>

<p>On the client side we build a custom directive called <code>unique-username</code>.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
<span class='line-number'>34</span>
<span class='line-number'>35</span>
<span class='line-number'>36</span>
<span class='line-number'>37</span>
<span class='line-number'>38</span>
<span class='line-number'>39</span>
<span class='line-number'>40</span>
<span class='line-number'>41</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">directive</span><span class="p">(</span><span class="s1">&#39;uniqueUsername&#39;</span><span class="p">,</span> <span class="p">[</span><span class="s1">&#39;$http&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">$http</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">return</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">require</span><span class="o">:</span> <span class="s1">&#39;ngModel&#39;</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">link</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">scope</span><span class="p">,</span> <span class="nx">elem</span><span class="p">,</span> <span class="nx">attrs</span><span class="p">,</span> <span class="nx">ctrl</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">scope</span><span class="p">.</span><span class="nx">busy</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
</span><span class='line'>      <span class="nx">scope</span><span class="p">.</span><span class="nx">$watch</span><span class="p">(</span><span class="nx">attrs</span><span class="p">.</span><span class="nx">ngModel</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>
</span><span class='line'>        <span class="c1">// hide old error messages</span>
</span><span class='line'>        <span class="nx">ctrl</span><span class="p">.</span><span class="nx">$setValidity</span><span class="p">(</span><span class="s1">&#39;isTaken&#39;</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
</span><span class='line'>        <span class="nx">ctrl</span><span class="p">.</span><span class="nx">$setValidity</span><span class="p">(</span><span class="s1">&#39;invalidChars&#39;</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'>        <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>          <span class="c1">// don&#39;t send undefined to the server during dirty check</span>
</span><span class='line'>          <span class="c1">// empty username is caught by required directive</span>
</span><span class='line'>          <span class="k">return</span><span class="p">;</span>
</span><span class='line'>        <span class="p">}</span>
</span><span class='line'>
</span><span class='line'>        <span class="c1">// show spinner</span>
</span><span class='line'>        <span class="nx">scope</span><span class="p">.</span><span class="nx">busy</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'>        <span class="c1">// send request to server</span>
</span><span class='line'>        <span class="nx">$http</span><span class="p">.</span><span class="nx">post</span><span class="p">(</span><span class="s1">&#39;/signup/check/username&#39;</span><span class="p">,</span> <span class="p">{</span><span class="nx">username</span><span class="o">:</span> <span class="nx">value</span><span class="p">})</span>
</span><span class='line'>          <span class="p">.</span><span class="nx">success</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>            <span class="c1">// everything is fine -&gt; do nothing</span>
</span><span class='line'>            <span class="nx">scope</span><span class="p">.</span><span class="nx">busy</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
</span><span class='line'>          <span class="p">})</span>
</span><span class='line'>          <span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>
</span><span class='line'>            <span class="c1">// display new error message</span>
</span><span class='line'>            <span class="k">if</span> <span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">isTaken</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>              <span class="nx">ctrl</span><span class="p">.</span><span class="nx">$setValidity</span><span class="p">(</span><span class="s1">&#39;isTaken&#39;</span><span class="p">,</span> <span class="kc">false</span><span class="p">);</span>
</span><span class='line'>            <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">invalidChars</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>              <span class="nx">ctrl</span><span class="p">.</span><span class="nx">$setValidity</span><span class="p">(</span><span class="s1">&#39;invalidChars&#39;</span><span class="p">,</span> <span class="kc">false</span><span class="p">);</span>
</span><span class='line'>            <span class="p">}</span>
</span><span class='line'>
</span><span class='line'>            <span class="nx">scope</span><span class="p">.</span><span class="nx">busy</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
</span><span class='line'>          <span class="p">});</span>
</span><span class='line'>      <span class="p">})</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">}]);</span>
</span></code></pre></td></tr></table></div></figure>


<p>We can use this directive in the same way we did before with <code>required</code> and <code>email</code> validators.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">span</span><span class="p">.</span><span class="nx">help</span><span class="o">-</span><span class="nx">block</span><span class="p">(</span><span class="nx">ng</span><span class="o">-</span><span class="nx">show</span><span class="o">=</span><span class="s2">&quot;form.username.$dirty &amp;&amp; form.username.$error.isTaken&quot;</span><span class="p">)</span> <span class="nx">Username</span> <span class="nx">already</span> <span class="nx">taken</span>
</span><span class='line'><span class="nx">span</span><span class="p">.</span><span class="nx">help</span><span class="o">-</span><span class="nx">block</span><span class="p">(</span><span class="nx">ng</span><span class="o">-</span><span class="nx">show</span><span class="o">=</span><span class="s2">&quot;form.username.$dirty &amp;&amp; form.username.$error.invalidChars&quot;</span><span class="p">)</span> <span class="nx">Username</span> <span class="nx">may</span> <span class="nx">not</span> <span class="nx">contain</span> <span class="nx">any</span> <span class="nx">non</span><span class="o">-</span><span class="nx">url</span><span class="o">-</span><span class="nx">safe</span> <span class="nx">characters</span>
</span></code></pre></td></tr></table></div></figure>


<p>The <code>uniqueUsername</code> directive also shows a spinner while talking to the server. Through <code>ng-show="busy"</code> we can hide and show the spinner.
The icon is taken from the Glyphicons that come with Bootstrap and some CSS makes it spin.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
</pre></td><td class='code'><pre><code class='css'><span class='line'><span class="k">@-webkit-keyframes</span> <span class="nt">rotating</span> <span class="p">{</span>
</span><span class='line'>  <span class="nt">from</span> <span class="p">{</span>
</span><span class='line'>    <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="n">transform</span><span class="o">:</span> <span class="n">rotate</span><span class="p">(</span><span class="m">0</span><span class="n">deg</span><span class="p">);</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'>  <span class="nt">to</span> <span class="p">{</span>
</span><span class='line'>    <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="n">transform</span><span class="o">:</span> <span class="n">rotate</span><span class="p">(</span><span class="m">360</span><span class="n">deg</span><span class="p">);</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="nc">.rotating</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">float</span><span class="o">:</span> <span class="k">right</span><span class="p">;</span>
</span><span class='line'>  <span class="k">position</span><span class="o">:</span> <span class="k">relative</span><span class="p">;</span>
</span><span class='line'>  <span class="k">top</span><span class="o">:</span> <span class="m">-24px</span><span class="p">;</span>
</span><span class='line'>  <span class="k">right</span><span class="o">:</span> <span class="m">10px</span><span class="p">;</span>
</span><span class='line'>  <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="n">animation</span><span class="o">:</span> <span class="n">rotating</span> <span class="m">1s</span> <span class="n">linear</span> <span class="n">infinite</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>Our second custom form validation method checks whether the password and the password verification input fields have exactly the
same values. Again we use a custom directive for that.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">directive</span><span class="p">(</span><span class="s1">&#39;match&#39;</span><span class="p">,</span> <span class="p">[</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">return</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">require</span><span class="o">:</span> <span class="s1">&#39;ngModel&#39;</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">link</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">scope</span><span class="p">,</span> <span class="nx">elem</span><span class="p">,</span> <span class="nx">attrs</span><span class="p">,</span> <span class="nx">ctrl</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>
</span><span class='line'>      <span class="nx">scope</span><span class="p">.</span><span class="nx">$watch</span><span class="p">(</span><span class="s1">&#39;[&#39;</span> <span class="o">+</span> <span class="nx">attrs</span><span class="p">.</span><span class="nx">ngModel</span> <span class="o">+</span> <span class="s1">&#39;, &#39;</span> <span class="o">+</span> <span class="nx">attrs</span><span class="p">.</span><span class="nx">match</span> <span class="o">+</span> <span class="s1">&#39;]&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">value</span><span class="p">){</span>
</span><span class='line'>        <span class="nx">ctrl</span><span class="p">.</span><span class="nx">$setValidity</span><span class="p">(</span><span class="s1">&#39;match&#39;</span><span class="p">,</span> <span class="nx">value</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">===</span> <span class="nx">value</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span> <span class="p">);</span>
</span><span class='line'>      <span class="p">},</span> <span class="kc">true</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">}]);</span>
</span></code></pre></td></tr></table></div></figure>


<p>To use this directive apply it to the password input field as well as the verification input field.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">input</span><span class="p">.</span><span class="nx">form</span><span class="o">-</span><span class="nx">control</span><span class="p">(</span><span class="nx">type</span><span class="o">=</span><span class="s2">&quot;password&quot;</span><span class="p">,</span> <span class="nx">name</span><span class="o">=</span><span class="s2">&quot;password&quot;</span><span class="p">,</span> <span class="nx">id</span><span class="o">=</span><span class="s2">&quot;password&quot;</span><span class="p">,</span> <span class="nx">ng</span><span class="o">-</span><span class="nx">model</span><span class="o">=</span><span class="s2">&quot;password&quot;</span><span class="p">,</span> <span class="nx">required</span><span class="p">,</span> <span class="nx">match</span><span class="o">=</span><span class="s2">&quot;verification&quot;</span><span class="p">)</span>
</span><span class='line'><span class="nx">input</span><span class="p">.</span><span class="nx">form</span><span class="o">-</span><span class="nx">control</span><span class="p">(</span><span class="nx">type</span><span class="o">=</span><span class="s2">&quot;password&quot;</span><span class="p">,</span> <span class="nx">name</span><span class="o">=</span><span class="s2">&quot;verification&quot;</span><span class="p">,</span> <span class="nx">id</span><span class="o">=</span><span class="s2">&quot;verification&quot;</span><span class="p">,</span> <span class="nx">ng</span><span class="o">-</span><span class="nx">model</span><span class="o">=</span><span class="s2">&quot;verification&quot;</span><span class="p">,</span> <span class="nx">required</span><span class="p">,</span> <span class="nx">match</span><span class="o">=</span><span class="s2">&quot;password&quot;</span><span class="p">)</span>
</span></code></pre></td></tr></table></div></figure>


<p>The error message works as expected but only show it when the verification input fields contains a value.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">span</span><span class="p">.</span><span class="nx">help</span><span class="o">-</span><span class="nx">block</span><span class="p">(</span><span class="nx">ng</span><span class="o">-</span><span class="nx">show</span><span class="o">=</span><span class="s2">&quot;form.verification.$dirty &amp;&amp; form.verification.$error.match &amp;&amp; !form.verification.$error.required&quot;</span><span class="p">)</span> <span class="nx">Passwords</span> <span class="nx">don</span><span class="err">&#39;</span><span class="nx">t</span> <span class="nx">match</span>
</span></code></pre></td></tr></table></div></figure>


<p>Last but not least we keep the submit button disabled as long as our form contains validation errors.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">input</span><span class="p">.</span><span class="nx">btn</span><span class="p">.</span><span class="nx">btn</span><span class="o">-</span><span class="nx">primary</span><span class="p">(</span><span class="nx">type</span><span class="o">=</span><span class="s2">&quot;submit&quot;</span><span class="p">,</span> <span class="nx">value</span><span class="o">=</span><span class="s2">&quot;Sign up&quot;</span><span class="p">,</span> <span class="nx">ng</span><span class="o">-</span><span class="nx">disabled</span><span class="o">=</span><span class="s2">&quot;form.$invalid&quot;</span><span class="p">)</span>
</span></code></pre></td></tr></table></div></figure>


<h3>Conclusion</h3>

<p>We&#8217;ve built a signup form very similar to the one GitHub uses with an Express.js backend and AngularJS
on the frontend. In addition to the form validators already provided by AngularJS we&#8217;ve implemented two
custom form validators for unique usernames and password verification. Take a look at the final <a href="http://mysterious-escarpment-9591.herokuapp.com/signup">app</a>. Try usernames like
<strong>john</strong>, <strong>jack</strong> and <strong>jim</strong>.</p>

<p>One thing I couldn&#8217;t achieve is sending invalid usernames and emails back from the server to the client.
So that the input fields already contain the false information and the user just has to correct them. That
doesn&#8217;t work because AngularJS doesn&#8217;t allow an invalid email inside an input field of type <code>email</code>. To
better understand the problem take a look at a quick <a href="http://plnkr.co/edit/XzcCA7?p=preview">example</a>. If you&#8217;ve got an idea how to solve this problem
please feel free to comment below or provide an answer to my question at <a href="http://stackoverflow.com/questions/18217916/how-to-init-invalid-email-and-show-in-inputtype-email">stackoverflow</a>. Thank you!</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Sync multiple AngularJS apps without server via PouchDB]]></title>
    <link href="http://mircozeiss.com/sync-multiple-angularjs-apps-without-server-via-pouchdb/"/>
    <updated>2013-07-10T20:34:00+02:00</updated>
    <id>http://mircozeiss.com/sync-multiple-angularjs-apps-without-server-via-pouchdb</id>
    <content type="html"><![CDATA[<p>Nowadays several solutions exist to keep web apps in sync and/or store data offline with JavaScript:</p>

<ul>
<li><a href="http://socket.io/">Socket.io</a></li>
<li><a href="http://www.breezejs.com/">Breeze.js</a></li>
<li><a href="https://towtruck.mozillalabs.com/">TowTruck</a></li>
<li><a href="https://www.firebase.com/">Firebase</a></li>
<li><a href="http://pusher.com/">Pusher</a></li>
<li><a href="https://parse.com/products">Parse</a></li>
<li>and my latest favorite <a href="http://hood.ie/">Hood.ie</a></li>
</ul>


<p>I could go on with that list but you get the idea. Some of the mentioned technologies are more powerful
and have more features out of the box than others. They usually need a server that runs your app and
takes care of all the business logic. In this post I will demonstrate how to build a web app that
syncs data automatically, runs on all modern platforms, stores data persistently and <strong>doesn&#8217;t need a server</strong>.
The app is powered by <a href="http://angularjs.org/">AngularJS</a> and <a href="http://pouchdb.com/">PouchDB</a>.</p>

<p>The video shows the final app in action. On the left side we have Chrome and Firefox showing our <code>index.html</code> from file and
on the right side you can see Futon, the admin panel for CouchDB.</p>

<iframe width="640" height="480" src="http://www.youtube.com/embed/QSC1fnfUlU0" frameborder="0" allowfullscreen></iframe>


<br>


<br>


<h3>Install CouchDB</h3>

<p>First of all you have to install CouchDB. You could use some third party instance provider like <a href="https://cloudant.com/">Cloudant</a>
 or <a href="http://www.iriscouch.com/">Iris Couch</a>. However our final example won&#8217;t work with them because we need to have CORS enabled on our CouchDB.
 CORS was introduced with v1.3. Cloudant instances are running on v1.0.2 whereas Iris Couch actually provides
  v1.3. Sadly you cannot enable CORS by hand. That&#8217;s why we will work with our own instance.</p>

<p>Go to <a href="http://couchdb.apache.org/">couchdb.apache.org</a> and click on the big fat download button. Download
the package for your operating system, select a mirror, wait and then open CouchDB. On my MacBook I get
a little CouchDB icon on my Menu Bar. Click on it and select <strong>Open admin console</strong>. Or just open your browser and navigate to
<a href="http://127.0.0.1:5984/_utils/">127.0.0.1:5984/_utils</a>. You are now inside Futon, which is the admin tool for CouchDB.</p>

<p>First of all we have to <a href="http://docs.couchdb.org/en/latest/cors.html">enable CORS</a>. Go to section <em>httpd</em> and
set <strong>enable_cors</strong> to true. Navigate to the bottom of the page and click on <strong>Add a new section</strong>. Enter the following into
the form that pops up</p>

<ul>
<li>section: cors</li>
<li>option: origins</li>
<li>value: *</li>
</ul>


<p>Now let&#8217;s create our database. Click on <strong>Create database &#8230;</strong> and enter <code>ng-db</code>. The name is important and we have
to use the exact name later on for the client code. That&#8217;s it! Our CouchDB instance is running, CORS is enabled
and we have a database to work with. Next install PouchDB.</p>

<h3>Download PouchDB</h3>

<p>To add PouchDB to your app you simply have to <a href="http://download.pouchdb.com/pouchdb-nightly.min.js">download</a> the JS file. As always I recommend working with the
non-minified version during development and switch to the min version for deployment. Include the .js file inside
your index.html.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;pouchdb.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>Done. We can now start using PouchDB in our app.</p>

<h3>Create AngularJS app</h3>

<p>Activate AngularJS as shown in the <a href="http://angularjs.org/">docs</a>.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">var</span> <span class="nx">myApp</span> <span class="o">=</span> <span class="nx">angular</span><span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1">&#39;myApp&#39;</span><span class="p">,</span> <span class="p">[]);</span>
</span></code></pre></td></tr></table></div></figure>


<h4>PouchDB service</h4>

<p>The first service we create simply makes the PouchDB instance available inside the AngularJS world.
It also turns on continuous replication so changes are automatically synced between database and client
no matter where they occur.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">myApp</span><span class="p">.</span><span class="nx">factory</span><span class="p">(</span><span class="s1">&#39;myPouch&#39;</span><span class="p">,</span> <span class="p">[</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">mydb</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Pouch</span><span class="p">(</span><span class="s1">&#39;ng-pouch&#39;</span><span class="p">);</span>
</span><span class='line'>  <span class="nx">Pouch</span><span class="p">.</span><span class="nx">replicate</span><span class="p">(</span><span class="s1">&#39;ng-pouch&#39;</span><span class="p">,</span> <span class="s1">&#39;http://127.0.0.1:5984/ng-db&#39;</span><span class="p">,</span> <span class="p">{</span><span class="nx">continuous</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</span>
</span><span class='line'>  <span class="nx">Pouch</span><span class="p">.</span><span class="nx">replicate</span><span class="p">(</span><span class="s1">&#39;http://127.0.0.1:5984/ng-db&#39;</span><span class="p">,</span> <span class="s1">&#39;ng-pouch&#39;</span><span class="p">,</span> <span class="p">{</span><span class="nx">continuous</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</span>
</span><span class='line'>  <span class="k">return</span> <span class="nx">mydb</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'><span class="p">}]);</span>
</span></code></pre></td></tr></table></div></figure>


<h4>PouchDB promises wrapper</h4>

<p>Our second service is a simple wrapper around PouchDB&#8217;s native API to save and remove documents. The
service provides two helper functions <code>return()</code> and <code>remove(id)</code> that both return promises. That keeps
the async code nice and tidy.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
<span class='line-number'>34</span>
<span class='line-number'>35</span>
<span class='line-number'>36</span>
<span class='line-number'>37</span>
<span class='line-number'>38</span>
<span class='line-number'>39</span>
<span class='line-number'>40</span>
<span class='line-number'>41</span>
<span class='line-number'>42</span>
<span class='line-number'>43</span>
<span class='line-number'>44</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">myApp</span><span class="p">.</span><span class="nx">factory</span><span class="p">(</span><span class="s1">&#39;pouchWrapper&#39;</span><span class="p">,</span> <span class="p">[</span><span class="s1">&#39;$q&#39;</span><span class="p">,</span> <span class="s1">&#39;$rootScope&#39;</span><span class="p">,</span> <span class="s1">&#39;myPouch&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">$q</span><span class="p">,</span> <span class="nx">$rootScope</span><span class="p">,</span> <span class="nx">myPouch</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>
</span><span class='line'>  <span class="k">return</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">add</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">text</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="kd">var</span> <span class="nx">deferred</span> <span class="o">=</span> <span class="nx">$q</span><span class="p">.</span><span class="nx">defer</span><span class="p">();</span>
</span><span class='line'>      <span class="kd">var</span> <span class="nx">doc</span> <span class="o">=</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;todo&#39;</span><span class="p">,</span>
</span><span class='line'>        <span class="nx">text</span><span class="o">:</span> <span class="nx">text</span>
</span><span class='line'>      <span class="p">};</span>
</span><span class='line'>      <span class="nx">myPouch</span><span class="p">.</span><span class="nx">post</span><span class="p">(</span><span class="nx">doc</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">$rootScope</span><span class="p">.</span><span class="nx">$apply</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>          <span class="k">if</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>            <span class="nx">deferred</span><span class="p">.</span><span class="nx">reject</span><span class="p">(</span><span class="nx">err</span><span class="p">)</span>
</span><span class='line'>          <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'>            <span class="nx">deferred</span><span class="p">.</span><span class="nx">resolve</span><span class="p">(</span><span class="nx">res</span><span class="p">)</span>
</span><span class='line'>          <span class="p">}</span>
</span><span class='line'>        <span class="p">});</span>
</span><span class='line'>      <span class="p">});</span>
</span><span class='line'>      <span class="k">return</span> <span class="nx">deferred</span><span class="p">.</span><span class="nx">promise</span><span class="p">;</span>
</span><span class='line'>    <span class="p">},</span>
</span><span class='line'>    <span class="nx">remove</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="kd">var</span> <span class="nx">deferred</span> <span class="o">=</span> <span class="nx">$q</span><span class="p">.</span><span class="nx">defer</span><span class="p">();</span>
</span><span class='line'>      <span class="nx">myPouch</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">id</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">doc</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">$rootScope</span><span class="p">.</span><span class="nx">$apply</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>          <span class="k">if</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>            <span class="nx">deferred</span><span class="p">.</span><span class="nx">reject</span><span class="p">(</span><span class="nx">err</span><span class="p">);</span>
</span><span class='line'>          <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'>            <span class="nx">myPouch</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="nx">doc</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>              <span class="nx">$rootScope</span><span class="p">.</span><span class="nx">$apply</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>                <span class="k">if</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>                  <span class="nx">deferred</span><span class="p">.</span><span class="nx">reject</span><span class="p">(</span><span class="nx">err</span><span class="p">)</span>
</span><span class='line'>                <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'>                  <span class="nx">deferred</span><span class="p">.</span><span class="nx">resolve</span><span class="p">(</span><span class="nx">res</span><span class="p">)</span>
</span><span class='line'>                <span class="p">}</span>
</span><span class='line'>              <span class="p">});</span>
</span><span class='line'>            <span class="p">});</span>
</span><span class='line'>          <span class="p">}</span>
</span><span class='line'>        <span class="p">});</span>
</span><span class='line'>      <span class="p">});</span>
</span><span class='line'>      <span class="k">return</span> <span class="nx">deferred</span><span class="p">.</span><span class="nx">promise</span><span class="p">;</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="p">}]);</span>
</span></code></pre></td></tr></table></div></figure>


<h4>PouchDB event listener</h4>

<p>Our last service is a listener that emits events whenever PouchDB fires the <code>onChange</code> event. It either
emits <code>newTodo</code> when a new document is added to the database or <code>delTodo</code> when a document is deleted. The change
object coming from PouchDB looks like the following</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="p">{</span>
</span><span class='line'>  <span class="s2">&quot;id&quot;</span><span class="o">:</span> <span class="s2">&quot;6F48205D-E97B-4621-ACAD-4CD3DFAC074E&quot;</span><span class="p">,</span>
</span><span class='line'>  <span class="s2">&quot;seq&quot;</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span>
</span><span class='line'>  <span class="s2">&quot;changes&quot;</span><span class="o">:</span> <span class="p">[{</span><span class="s2">&quot;rev&quot;</span><span class="o">:</span><span class="s2">&quot;2-96ea3cf93a75c6510c08c95e42686aa1&quot;</span><span class="p">}],</span>
</span><span class='line'>  <span class="s2">&quot;deleted&quot;</span><span class="o">:</span> <span class="kc">true</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>From the key <code>deleted</code> we get a Boolean value that tells us if the change was a deletion or an addition
to our database. If the value is <code>true</code> we know that an object was deleted from our database and we therefore
emit a <code>delTodo</code> event with the document id. If the value is <code>false</code> we unfortunately don&#8217;t get the new
object directly from the <code>onChange</code> handler. We only get the document id and have to manually get it
via GET request. At the end we fire a <code>newTodo</code> event with the new document as data.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">myApp</span><span class="p">.</span><span class="nx">factory</span><span class="p">(</span><span class="s1">&#39;listener&#39;</span><span class="p">,</span> <span class="p">[</span><span class="s1">&#39;$rootScope&#39;</span><span class="p">,</span> <span class="s1">&#39;myPouch&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">$rootScope</span><span class="p">,</span> <span class="nx">myPouch</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">myPouch</span><span class="p">.</span><span class="nx">changes</span><span class="p">({</span>
</span><span class='line'>    <span class="nx">continuous</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">onChange</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">change</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">change</span><span class="p">.</span><span class="nx">deleted</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">$rootScope</span><span class="p">.</span><span class="nx">$apply</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>          <span class="nx">myPouch</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">change</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">doc</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>            <span class="nx">$rootScope</span><span class="p">.</span><span class="nx">$apply</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>              <span class="k">if</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">err</span><span class="p">);</span>
</span><span class='line'>              <span class="nx">$rootScope</span><span class="p">.</span><span class="nx">$broadcast</span><span class="p">(</span><span class="s1">&#39;newTodo&#39;</span><span class="p">,</span> <span class="nx">doc</span><span class="p">);</span>
</span><span class='line'>            <span class="p">})</span>
</span><span class='line'>          <span class="p">});</span>
</span><span class='line'>        <span class="p">})</span>
</span><span class='line'>      <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">$rootScope</span><span class="p">.</span><span class="nx">$apply</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>          <span class="nx">$rootScope</span><span class="p">.</span><span class="nx">$broadcast</span><span class="p">(</span><span class="s1">&#39;delTodo&#39;</span><span class="p">,</span> <span class="nx">change</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
</span><span class='line'>        <span class="p">});</span>
</span><span class='line'>      <span class="p">}</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'>  <span class="p">})</span>
</span><span class='line'><span class="p">}]);</span>
</span></code></pre></td></tr></table></div></figure>


<h4>Main controller</h4>

<p>Our controller combines the three services and creates a link to our view. First of all we create
an empty array that will hold our todo objects. The <code>submit()</code> function
is executed whenever the <strong>Add</strong> button is clicked. A click on the small cross calls the <code>remove(id)</code>
function.</p>

<p>At the end of our controller we have the listener for our two custom events <code>newTodo</code> and <code>delTodo</code>.
It adds or removes items from the <code>todos</code> array.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">myApp</span><span class="p">.</span><span class="nx">controller</span><span class="p">(</span><span class="s1">&#39;TodoCtrl&#39;</span><span class="p">,</span> <span class="p">[</span><span class="s1">&#39;$scope&#39;</span><span class="p">,</span> <span class="s1">&#39;listener&#39;</span><span class="p">,</span> <span class="s1">&#39;pouchWrapper&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">$scope</span><span class="p">,</span> <span class="nx">listener</span><span class="p">,</span> <span class="nx">pouchWrapper</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">$scope</span><span class="p">.</span><span class="nx">submit</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">pouchWrapper</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">$scope</span><span class="p">.</span><span class="nx">text</span><span class="p">).</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">$scope</span><span class="p">.</span><span class="nx">text</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span><span class="p">;</span>
</span><span class='line'>    <span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">reason</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">reason</span><span class="p">);</span>
</span><span class='line'>    <span class="p">})</span>
</span><span class='line'>  <span class="p">};</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">$scope</span><span class="p">.</span><span class="nx">remove</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">pouchWrapper</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="nx">id</span><span class="p">).</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'><span class="c1">//      console.log(res);</span>
</span><span class='line'>    <span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">reason</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">reason</span><span class="p">);</span>
</span><span class='line'>    <span class="p">})</span>
</span><span class='line'>  <span class="p">};</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">$scope</span><span class="p">.</span><span class="nx">todos</span> <span class="o">=</span> <span class="p">[];</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">$scope</span><span class="p">.</span><span class="nx">$on</span><span class="p">(</span><span class="s1">&#39;newTodo&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="nx">todo</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">$scope</span><span class="p">.</span><span class="nx">todos</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">todo</span><span class="p">);</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">$scope</span><span class="p">.</span><span class="nx">$on</span><span class="p">(</span><span class="s1">&#39;delTodo&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span><span class="o">&lt;</span><span class="nx">$scope</span><span class="p">.</span><span class="nx">todos</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="k">if</span> <span class="p">(</span><span class="nx">$scope</span><span class="p">.</span><span class="nx">todos</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">_id</span> <span class="o">===</span> <span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">$scope</span><span class="p">.</span><span class="nx">todos</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="nx">i</span><span class="p">,</span><span class="mi">1</span><span class="p">);</span>
</span><span class='line'>      <span class="p">}</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'>
</span><span class='line'><span class="p">}]);</span>
</span></code></pre></td></tr></table></div></figure>


<p>One thing I haven&#8217;t figured out yet is an error message similar to:</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>GET http://127.0.0.1:5984/ng-db/_local%2F4e458454e3c7031672110dc4a02c72f4 404 (Object Not Found)
</span></code></pre></td></tr></table></div></figure>


<p>The rest works absolutely fine and although I get this error message I can&#8217;t see any problems during sync.</p>

<h3>Conclusion</h3>

<p>We used AngularJS and PouchDB to build a small app that syncs serverless and stores data persistently.
 Changes are distributed automatically. They can be made inside the database, on any client or on any third
 party device that pushes changes to the connected CouchDB. AngularJS events update our models in the controller that pushes
 changes to our views via two-way data binding. It is possible to add todos to the app when offline and
 as soon you are back online all data is synced to the connected devices. For more information about
 the topic visit <a href="http://nobackend.org/">nobackend.org</a>.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Grunt deployment process with Jade]]></title>
    <link href="http://mircozeiss.com/grunt-deployment-process-with-jade/"/>
    <updated>2013-06-27T19:20:00+02:00</updated>
    <id>http://mircozeiss.com/grunt-deployment-process-with-jade</id>
    <content type="html"><![CDATA[<p>When building web projects you want to concatenate and minify CSS and JavaScript files
before deployment. Instead of having multiple single files you only
have one file with one single request. It also means you have to change the path to the script inside
your <code>.html</code> or <code>.jade</code> file. During development your code often looks like this.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;js/script1.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</span><span class='line'><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;js/script2.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</span><span class='line'><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;js/script3.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</span><span class='line'><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;js/script4.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>For deployment you might want to change this to a single request fetching a minified file.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;js/script.min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>In this post I will demonstrate three solutions for this problem.</p>

<ol>
<li><code>grunt-usemin</code> with <code>.html</code> files</li>
<li><code>grunt-preprocess</code> with a tmp/ , dev/ and prod/ folder</li>
<li><code>grunt-preprocess</code> with only dev/ and prod/ folder</li>
</ol>


<h3>Meet grunt-usemin</h3>

<p>If you are using plain HTML files <a href="https://github.com/yeoman/grunt-usemin">grunt-usemin</a> is your best friend. In your <code>index.html</code> file
you only have to add two lines of code.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="c">&lt;!-- build:js js/app.js --&gt;</span>
</span><span class='line'><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;js/script1.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</span><span class='line'><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;js/script2.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</span><span class='line'><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;js/script3.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</span><span class='line'><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;js/script4.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</span><span class='line'><span class="c">&lt;!-- endbuild --&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>Add a task for <code>usemin</code> to your <code>Gruntfile.js</code>.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">useminPrepare</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">html</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;deploy/views/example.html&#39;</span><span class="p">]</span>
</span><span class='line'><span class="p">},</span>
</span><span class='line'><span class="nx">usemin</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">html</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;deploy/views/example.html&#39;</span><span class="p">]</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>After running <code>grunt usemin</code> your <code>index.html</code> contains the link to the minified file.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;js/app.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>Unfortunately this doesn&#8217;t work for <code>.jade</code> files as <code>grunt-usemin</code> spits out HTML code. Therefore
let&#8217;s look at another solution.</p>

<h3>grunt-preprocess as an alternative</h3>

<p><a href="https://github.com/onehealth/grunt-preprocess">grunt-preprocess</a> doesn&#8217;t alter your code. It only shows or hides certain blocks depending
on various settings. You can use it in HTML, JavaScript, CSS, C, Java, etc.</p>

<h4>Code in tmp/ and deploy to dev/ and prod/</h4>

<p>One way to set up your app structure would be coding in a tmp/ folder and deploying to a development folder for testing and
to a production folder for final deployments.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>/tmp
</span><span class='line'>/dev
</span><span class='line'>/prod
</span></code></pre></td></tr></table></div></figure>


<p>With this structure you can use <code>grunt-preprocess</code> as follows.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="c">&lt;!-- @if production=false --&gt;</span>
</span><span class='line'>script(src=&quot;/javascripts/script1.js&quot;)
</span><span class='line'>script(src=&quot;/javascripts/script2.js&quot;)
</span><span class='line'>script(src=&quot;/javascripts/script3.js&quot;)
</span><span class='line'><span class="c">&lt;!-- @endif --&gt;</span>
</span><span class='line'>
</span><span class='line'><span class="c">&lt;!-- @if production=true --&gt;</span>
</span><span class='line'>script(src=&quot;/javascripts/script.min.js&quot;)
</span><span class='line'><span class="c">&lt;!-- @endif --&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>You can&#8217;t work with this file directly since it loads your single script files and also the minified file. Include
the tasks for building dev and prod versions into your <code>Gruntfile.js</code>.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">preprocess</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>  <span class="c1">// production version with min script</span>
</span><span class='line'>  <span class="nx">prod</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">src</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;deploy/views/layout-wrong.jade&#39;</span><span class="p">],</span>
</span><span class='line'>    <span class="nx">options</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">inline</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
</span><span class='line'>      <span class="nx">context</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">production</span><span class="o">:</span> <span class="kc">true</span>  <span class="c1">// important</span>
</span><span class='line'>      <span class="p">}</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'>  <span class="p">},</span>
</span><span class='line'>  <span class="c1">// development version</span>
</span><span class='line'>  <span class="nx">dev</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">src</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;deploy/views/layout-wrong.jade&#39;</span><span class="p">],</span>
</span><span class='line'>    <span class="nx">options</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">inline</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
</span><span class='line'>      <span class="nx">context</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">production</span><span class="o">:</span> <span class="kc">false</span>  <span class="c1">// important</span>
</span><span class='line'>      <span class="p">}</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>The important part is the <code>context</code> where you can set the <code>production</code> variable to <code>true</code> or <code>false</code>.
When running <code>grunt preprocess:dev</code> you&#8217;ll get</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">script</span><span class="p">(</span><span class="nx">src</span><span class="o">=</span><span class="s2">&quot;/javascripts/script1.js&quot;</span><span class="p">)</span>
</span><span class='line'><span class="nx">script</span><span class="p">(</span><span class="nx">src</span><span class="o">=</span><span class="s2">&quot;/javascripts/script2.js&quot;</span><span class="p">)</span>
</span><span class='line'><span class="nx">script</span><span class="p">(</span><span class="nx">src</span><span class="o">=</span><span class="s2">&quot;/javascripts/script3.js&quot;</span><span class="p">)</span>
</span></code></pre></td></tr></table></div></figure>


<p>compared to running <code>grunt preprocess:prod</code></p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">script</span><span class="p">(</span><span class="nx">src</span><span class="o">=</span><span class="s2">&quot;/javascripts/script.min.js&quot;</span><span class="p">)</span>
</span></code></pre></td></tr></table></div></figure>


<p>This setup adds extra overhead to your project folder and requires recompiling on every change. To neglect recompiling
you could add a <strong>watch</strong> task to your <code>Gruntfile</code> so the files are recreated every time you make changes. Still it is not an ideal
solution.</p>

<h4>Code in dev/ and deploy to /prod</h4>

<p>Here is a neat little trick that allows working with your development files and deploying
files that contain the links to minified assets. So you don&#8217;t have to work in a tmp folder and
build files either for your development or your deployment folder.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'>  <span class="c">&lt;!--</span> <span class="err">@</span><span class="nx">exclude</span> <span class="o">--&gt;</span>
</span><span class='line'>  <span class="nx">script</span><span class="p">(</span><span class="nx">src</span><span class="o">=</span><span class="s2">&quot;/javascripts/script1.js&quot;</span><span class="p">)</span>
</span><span class='line'>  <span class="nx">script</span><span class="p">(</span><span class="nx">src</span><span class="o">=</span><span class="s2">&quot;/javascripts/script2.js&quot;</span><span class="p">)</span>
</span><span class='line'>  <span class="nx">script</span><span class="p">(</span><span class="nx">src</span><span class="o">=</span><span class="s2">&quot;/javascripts/script3.js&quot;</span><span class="p">)</span>
</span><span class='line'>  <span class="c">&lt;!--</span> <span class="err">@</span><span class="nx">endexclude</span> <span class="o">--&gt;</span>
</span><span class='line'>
</span><span class='line'><span class="c">&lt;!--</span> <span class="err">@</span><span class="nx">exclude</span> <span class="o">--&gt;</span>
</span><span class='line'><span class="c1">//- &lt;!-- @endexclude --&gt;</span>
</span><span class='line'>  <span class="nx">script</span><span class="p">(</span><span class="nx">src</span><span class="o">=</span><span class="s2">&quot;/javascripts/script.min.js&quot;</span><span class="p">)</span>
</span></code></pre></td></tr></table></div></figure>


<p>The preprocess task in your Gruntfile looks like this</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">preprocess</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">inline</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">src</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;deploy/views/layout.jade&#39;</span><span class="p">],</span>
</span><span class='line'>    <span class="nx">options</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">inline</span><span class="o">:</span> <span class="kc">true</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>How does this work? Well, first of all if you start your Express app and navigate to the index page
you will only see</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;/javascripts/script.min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>It is not documented but Jade won&#8217;t complain when you use plain HTML comments. That allows us to use this
nifty trick. The line <code>script(src="/javascripts/script.min.js")</code> is commented out because of the <code>//-</code> one line
above. Therefore you can work with this file during development and <code>script.min.js</code> won&#8217;t be called.
Now comes the magic: if you build your deployment files everything between <code>&lt;!-- @exclude --&gt;</code> and
<code>&lt;!-- @endexclude --&gt;</code> is removed from the file. That means your single script files don&#8217;t exist anymore
and also the comment <code>//-</code> above the minified script will be removed. That means the line <code>script(src="/javascripts/script.min.js")</code>
is now active and calls your minified file.</p>

<p>To make this work keep an eye on the indentation of your <code>layout.jade</code> file. The following won&#8217;t work.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="c">&lt;!-- @exclude --&gt;</span>
</span><span class='line'>script(src=&quot;/javascripts/script1.js&quot;)
</span><span class='line'>script(src=&quot;/javascripts/script2.js&quot;)
</span><span class='line'>script(src=&quot;/javascripts/script3.js&quot;)
</span><span class='line'><span class="c">&lt;!-- @endexclude --&gt;</span>
</span><span class='line'>
</span><span class='line'><span class="c">&lt;!-- @exclude --&gt;</span>
</span><span class='line'>//- <span class="c">&lt;!-- @endexclude --&gt;</span>
</span><span class='line'>  script(src=&quot;/javascripts/script.min.js&quot;)
</span></code></pre></td></tr></table></div></figure>


<p>It produces this output in Jade.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='jade'><span class='line'><span class="nt">script</span>(<span class="na">src=</span><span class="s">&quot;//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js&quot;</span>)
</span><span class='line'>  <span class="nt">script</span>(<span class="na">src=</span><span class="s">&quot;/javascripts/script.min.js&quot;</span>)
</span></code></pre></td></tr></table></div></figure>


<p>Compiled to HTML it looks like this and won&#8217;t execute any code</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;...&quot;</span><span class="nt">&gt;</span><span class="nx">script</span><span class="p">(</span><span class="nx">src</span><span class="o">=</span><span class="s2">&quot;/javascripts/script.min.js&quot;</span><span class="p">)</span><span class="nt">&lt;/script&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<h3>Conclusion</h3>

<p>Replacing links to your assets for deployment is easy. When dealing with <code>html</code> files
use <a href="https://github.com/yeoman/grunt-usemin">grunt-usemin</a>. Otherwise give <a href="https://github.com/onehealth/grunt-preprocess">grunt-preprocess</a> a try. You can find an example Express
app with all the relevant grunt tasks at <a href="https://github.com/zeMirco/grunt-jade-preprocess">github</a>. To get the app ready for deployment run the following
commands.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>grunt deploy
</span><span class='line'><span class="nb">cd </span>deployment
</span><span class='line'>node app.js
</span></code></pre></td></tr></table></div></figure>


<p>Now open your browser, navigate to <a href="http://localhost:3000">localhost:3000</a> and take a look at
the source code. You should see only one JavaScript file <code>script.min.js</code>.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Building offline applications with AngularJS and PouchDB]]></title>
    <link href="http://mircozeiss.com/building-offline-applications-with-angularjs-and-pouchdb/"/>
    <updated>2013-06-17T19:20:00+02:00</updated>
    <id>http://mircozeiss.com/building-offline-applications-with-angularjs-and-pouchdb</id>
    <content type="html"><![CDATA[<p>You may have read my other post about <a href="http://mircozeiss.com/async-couchdb-queries-with-nano-and-promises/">Async CouchDB queries with nano and promises</a>. In that post I built a small app to track how many goals a player
scored per match. Every action was stored as a single document in CouchDB. JavaScript promises were
used to access the data which allowed functions be easily reused.</p>

<p>In this article I will build the same application without any backend. I use <a href="http://pouchdb.com/">PouchDB</a> as my database
and <a href="http://angularjs.org/">AngularJS</a> as the frontend framework.</p>

<h3>PouchDB</h3>

<p>I&#8217;d like to talk a little more about PouchDB since you can find a lot of intro articles for AngularJS
but not as many for PouchDB.</p>

<blockquote><p>PouchDB is a JavaScript library that allows you to store and query data for web applications that need to work offline, and sync with an online database when you are online.</p></blockquote>

<p>PouchDB provides the same API as CouchDB but works in the browser. If you already know CouchDB you
also know how to work with PouchDB. The library is under active development and currently available as an alpha version.
Although it is an alpha version it is very stable and so far I didn&#8217;t have any problems with the code.</p>

<p>The <a href="http://pouchdb.com/api.html">documentation</a> is a good starting point. Some handy features that were added recently and are not yet in the
documentation are</p>

<ul>
<li>built in map reduce functions</li>
<li>and query functions.</li>
</ul>


<h4>Built in map reduce functions</h4>

<p>You might know the built in map reduce functions from CouchDB. They are <code>_count</code>, <code>_sum</code> and <code>_stats</code>. All are written in Erlang
and allow fast access to your data. PouchDB also has those built in functions. Therefore you don&#8217;t have to write your own and pass them as
a parameter into the query function. A simple query looks like the following.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">var</span> <span class="nx">map</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">doc</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="nx">doc</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="s1">&#39;goal&#39;</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">emit</span><span class="p">(</span><span class="nx">doc</span><span class="p">.</span><span class="nx">playerId</span><span class="p">,</span> <span class="kc">null</span><span class="p">)</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">};</span>
</span><span class='line'>
</span><span class='line'><span class="nx">pouchdb</span><span class="p">.</span><span class="nx">query</span><span class="p">({</span><span class="nx">map</span><span class="o">:</span> <span class="nx">map</span><span class="p">,</span> <span class="nx">reduce</span><span class="o">:</span> <span class="s1">&#39;_count&#39;</span><span class="p">},</span> <span class="p">{</span><span class="nx">key</span><span class="o">:</span> <span class="s1">&#39;1&#39;</span><span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">err</span><span class="p">);</span>
</span><span class='line'>  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">res</span><span class="p">);</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>The code above loops through all documents in our db. Whenever the mapping function finds one that has the type <code>goal</code> it emits it sorted by
<code>playerId</code>. The query function afterwards simply counts all documents with the playerID <code>'1'</code> and returns the sum.</p>

<p>Here is the code for the all the built in functions so you know what they do.</p>

<p><code>_count</code> <a href="https://github.com/daleharvey/pouchdb/blob/master/src/plugins/pouchdb.mapreduce.js#L37">(source)</a> counts all documents.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">function</span><span class="p">(</span><span class="nx">keys</span><span class="p">,</span> <span class="nx">values</span><span class="p">,</span> <span class="nx">rereduce</span><span class="p">){</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="nx">rereduce</span><span class="p">){</span>
</span><span class='line'>    <span class="k">return</span> <span class="nx">sum</span><span class="p">(</span><span class="nx">values</span><span class="p">);</span>
</span><span class='line'>  <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">return</span> <span class="nx">values</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p><code>_sum</code> <a href="https://github.com/daleharvey/pouchdb/blob/master/src/plugins/pouchdb.mapreduce.js#L33">(source)</a> returns the sum of all document values.
It would return the same value as <code>_count</code> when every document is emitted with values equals <code>1</code>.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">function</span><span class="p">(</span><span class="nx">keys</span><span class="p">,</span> <span class="nx">values</span><span class="p">){</span>
</span><span class='line'>  <span class="k">return</span> <span class="nx">sum</span><span class="p">(</span><span class="nx">values</span><span class="p">);</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p><code>_stats</code> <a href="https://github.com/daleharvey/pouchdb/blob/master/src/plugins/pouchdb.mapreduce.js#L45">(source)</a> provides some basic statistical
analysis for our data.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">function</span><span class="p">(</span><span class="nx">keys</span><span class="p">,</span> <span class="nx">values</span><span class="p">,</span> <span class="nx">rereduce</span><span class="p">){</span>
</span><span class='line'>  <span class="k">return</span> <span class="p">{</span>
</span><span class='line'>    <span class="s1">&#39;sum&#39;</span><span class="o">:</span> <span class="nx">sum</span><span class="p">(</span><span class="nx">values</span><span class="p">),</span>
</span><span class='line'>    <span class="s1">&#39;min&#39;</span><span class="o">:</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">min</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="nx">values</span><span class="p">),</span>
</span><span class='line'>    <span class="s1">&#39;max&#39;</span><span class="o">:</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="nx">values</span><span class="p">),</span>
</span><span class='line'>    <span class="s1">&#39;count&#39;</span><span class="o">:</span> <span class="nx">values</span><span class="p">.</span><span class="nx">length</span><span class="p">,</span>
</span><span class='line'>    <span class="s1">&#39;sumsqr&#39;</span><span class="o">:</span> <span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
</span><span class='line'>      <span class="kd">var</span> <span class="nx">_sumsqr</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
</span><span class='line'>      <span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">idx</span> <span class="k">in</span> <span class="nx">values</span><span class="p">){</span>
</span><span class='line'>        <span class="nx">_sumsqr</span> <span class="o">+=</span> <span class="nx">values</span><span class="p">[</span><span class="nx">idx</span><span class="p">]</span> <span class="o">*</span> <span class="nx">values</span><span class="p">[</span><span class="nx">idx</span><span class="p">];</span>
</span><span class='line'>      <span class="p">}</span>
</span><span class='line'>      <span class="k">return</span> <span class="nx">_sumsqr</span><span class="p">;</span>
</span><span class='line'>    <span class="p">})()</span>
</span><span class='line'>  <span class="p">};</span>
</span><span class='line'>  <span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<h4>Query functions</h4>

<p>Query functions are needed to <a href="http://pouchdb.com/api.html#fetch_a_document">fetch a document</a> when you don&#8217;t know the document&#8217;s ID. I couldn&#8217;t find anything about query
functions with individual keys in the documentation. So I looked at the tests and found the <a href="https://github.com/daleharvey/pouchdb/blob/decb29d057065f01a6121e129b24cd02240ef1b2/tests/test.views.js#L109-L124">test</a>
for opts.key.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">db</span><span class="p">.</span><span class="nx">query</span><span class="p">(</span><span class="nx">queryFun</span><span class="p">,</span> <span class="p">{</span><span class="nx">reduce</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="nx">key</span><span class="o">:</span> <span class="s1">&#39;key2&#39;</span><span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">_</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">equal</span><span class="p">(</span><span class="nx">res</span><span class="p">.</span><span class="nx">rows</span><span class="p">.</span><span class="nx">length</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="s1">&#39;Doc with key&#39;</span><span class="p">);</span>
</span><span class='line'>  <span class="nx">db</span><span class="p">.</span><span class="nx">query</span><span class="p">(</span><span class="nx">queryFun</span><span class="p">,</span> <span class="p">{</span><span class="nx">reduce</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="nx">key</span><span class="o">:</span> <span class="s1">&#39;key3&#39;</span><span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">_</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">equal</span><span class="p">(</span><span class="nx">res</span><span class="p">.</span><span class="nx">rows</span><span class="p">.</span><span class="nx">length</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="s1">&#39;Multiple docs with key&#39;</span><span class="p">);</span>
</span><span class='line'>    <span class="nx">start</span><span class="p">();</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>It shows that we can simply use the <code>key</code> property to look for specific results in our db. The same goes for <code>startkey</code> and <code>endkey</code>
 properties. Their documentation is in section <a href="http://pouchdb.com/api.html#fetch_documents">fetch documents</a> describing the <code>allDocs()</code> method.</p>

<h3>Marry PouchDB and AngularJS</h3>

<p>Since both frameworks are implemented independently, they don&#8217;t know how to work with each other. We
have to bring PouchDB into the AngularJS world in order to have access from the controller. The best
way to do this is using a <code>service</code>.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">services</span><span class="p">.</span><span class="nx">factory</span><span class="p">(</span><span class="s1">&#39;pouchdb&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">Pouch</span><span class="p">.</span><span class="nx">enableAllDbs</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
</span><span class='line'>  <span class="k">return</span> <span class="k">new</span> <span class="nx">Pouch</span><span class="p">(</span><span class="s1">&#39;myPouch&#39;</span><span class="p">);</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>Inject this service whenever you want to use PouchDB from your controller.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">myApp</span><span class="p">.</span><span class="nx">controller</span><span class="p">(</span><span class="s1">&#39;AppCtrl&#39;</span><span class="p">,</span> <span class="p">[</span><span class="s1">&#39;$scope&#39;</span><span class="p">,</span> <span class="s1">&#39;pouchdb&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">$scope</span><span class="p">,</span> <span class="nx">pouchdb</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="c1">// more code here</span>
</span><span class='line'><span class="p">}]);</span>
</span></code></pre></td></tr></table></div></figure>


<h3>Wrapping PouchDB into promises</h3>

<p>The PouchDB API will probably support promises at some point <a href="https://github.com/daleharvey/pouchdb/issues/608">in the future</a>. At the moment it does not.
If you&#8217;ve read my post about <a href="http://mircozeiss.com/async-couchdb-queries-with-nano-and-promises/">async CouchDB queries with nano and promises</a>, you know
promises come in really handy. As AngularJS offers promises through the <code>$q</code> module we can build some wrapper functions to interact with our data.</p>

<p>The wrapper is an AngularJS <strong>factory</strong> and consists of two functions. The first one <code>add(playerId)</code> adds a goal document to the db.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">add</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">playerId</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">deferred</span> <span class="o">=</span> <span class="nx">$q</span><span class="p">.</span><span class="nx">defer</span><span class="p">();</span>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">doc</span> <span class="o">=</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;goal&#39;</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">playerId</span><span class="o">:</span> <span class="nx">playerId</span>
</span><span class='line'>  <span class="p">};</span>
</span><span class='line'>  <span class="nx">pouchdb</span><span class="p">.</span><span class="nx">post</span><span class="p">(</span><span class="nx">doc</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">$rootScope</span><span class="p">.</span><span class="nx">$apply</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>      <span class="k">if</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">deferred</span><span class="p">.</span><span class="nx">reject</span><span class="p">(</span><span class="nx">err</span><span class="p">)</span>
</span><span class='line'>      <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">deferred</span><span class="p">.</span><span class="nx">resolve</span><span class="p">(</span><span class="nx">res</span><span class="p">)</span>
</span><span class='line'>      <span class="p">}</span>
</span><span class='line'>    <span class="p">});</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'>  <span class="k">return</span> <span class="nx">deferred</span><span class="p">.</span><span class="nx">promise</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>We need the <code>$rootScope.$apply()</code> function because AngularJS doesn&#8217;t know what&#8217;s happening inside the <code>pouchdb.post()</code> callback.
It loses the scope and would neither <code>reject</code> nor <code>resolve</code> the promise. Read more about this topic at <a href="http://jimhoskins.com/2012/12/17/angularjs-and-apply.html">AngularJS and scope.$apply</a>
by Jim Hoskins.</p>

<p>The second function <code>getScore(playerId)</code> counts all documents per player and returns the total amount. If no documents are found
for a certain <code>playerId</code> it returns 0.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">getScore</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">playerId</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">deferred</span> <span class="o">=</span> <span class="nx">$q</span><span class="p">.</span><span class="nx">defer</span><span class="p">();</span>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">map</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">doc</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">if</span> <span class="p">(</span><span class="nx">doc</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="s1">&#39;goal&#39;</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">emit</span><span class="p">(</span><span class="nx">doc</span><span class="p">.</span><span class="nx">playerId</span><span class="p">,</span> <span class="kc">null</span><span class="p">)</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'>  <span class="p">};</span>
</span><span class='line'>  <span class="nx">pouchdb</span><span class="p">.</span><span class="nx">query</span><span class="p">({</span><span class="nx">map</span><span class="o">:</span> <span class="nx">map</span><span class="p">,</span> <span class="nx">reduce</span><span class="o">:</span> <span class="s1">&#39;_count&#39;</span><span class="p">},</span> <span class="p">{</span><span class="nx">key</span><span class="o">:</span> <span class="nx">playerId</span><span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">$rootScope</span><span class="p">.</span><span class="nx">$apply</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>      <span class="k">if</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">deferred</span><span class="p">.</span><span class="nx">reject</span><span class="p">(</span><span class="nx">err</span><span class="p">);</span>
</span><span class='line'>      <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'>        <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">res</span><span class="p">.</span><span class="nx">rows</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>          <span class="nx">deferred</span><span class="p">.</span><span class="nx">resolve</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span>
</span><span class='line'>        <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'>          <span class="nx">deferred</span><span class="p">.</span><span class="nx">resolve</span><span class="p">(</span><span class="nx">res</span><span class="p">.</span><span class="nx">rows</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">value</span><span class="p">);</span>
</span><span class='line'>        <span class="p">}</span>
</span><span class='line'>      <span class="p">}</span>
</span><span class='line'>    <span class="p">});</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'>  <span class="k">return</span> <span class="nx">deferred</span><span class="p">.</span><span class="nx">promise</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>We can now inject this helper service into our controller and start using it. First of all get the score for each player
on page load.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">$q</span><span class="p">.</span><span class="nx">all</span><span class="p">([</span>
</span><span class='line'>  <span class="nx">pp</span><span class="p">.</span><span class="nx">getScore</span><span class="p">(</span><span class="s1">&#39;1&#39;</span><span class="p">),</span>
</span><span class='line'>  <span class="nx">pp</span><span class="p">.</span><span class="nx">getScore</span><span class="p">(</span><span class="s1">&#39;2&#39;</span><span class="p">),</span>
</span><span class='line'>  <span class="nx">pp</span><span class="p">.</span><span class="nx">getScore</span><span class="p">(</span><span class="s1">&#39;3&#39;</span><span class="p">)</span>
</span><span class='line'><span class="p">]).</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">$scope</span><span class="p">.</span><span class="nx">score</span><span class="p">[</span><span class="s1">&#39;1&#39;</span><span class="p">]</span> <span class="o">=</span> <span class="nx">res</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
</span><span class='line'>    <span class="nx">$scope</span><span class="p">.</span><span class="nx">score</span><span class="p">[</span><span class="s1">&#39;2&#39;</span><span class="p">]</span> <span class="o">=</span> <span class="nx">res</span><span class="p">[</span><span class="mi">1</span><span class="p">];</span>
</span><span class='line'>    <span class="nx">$scope</span><span class="p">.</span><span class="nx">score</span><span class="p">[</span><span class="s1">&#39;3&#39;</span><span class="p">]</span> <span class="o">=</span> <span class="nx">res</span><span class="p">[</span><span class="mi">2</span><span class="p">]</span>
</span><span class='line'>  <span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>A click on a button invokes the <code>incScore()</code> function that calls our <code>add()</code> from the helper service. It creates a new
document, saves it to db and calculates the new score.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">$scope</span><span class="p">.</span><span class="nx">incScore</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">pp</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">id</span><span class="p">)</span>
</span><span class='line'>    <span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="k">return</span> <span class="nx">pp</span><span class="p">.</span><span class="nx">getScore</span><span class="p">(</span><span class="nx">id</span><span class="p">);</span>
</span><span class='line'>    <span class="p">})</span>
</span><span class='line'>    <span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">score</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">$scope</span><span class="p">.</span><span class="nx">score</span><span class="p">[</span><span class="nx">id</span><span class="p">]</span> <span class="o">=</span> <span class="nx">score</span><span class="p">;</span>
</span><span class='line'>    <span class="p">})</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>A working example with all code can be found at <a href="http://plnkr.co/edit/BoxJTY?p=preview">plnkr#BoxJTY</a>. Play with the scores of each player and afterwards
close your browser. Then open your browser again and navigate to the example page. Et voilà, the individual scores stay the same. The
values were stored in the browser&#8217;s db, completely offline. Be careful when you empty the cache. All
values will be lost. You will also notice that when you visit the example with a different browser the
individual scores are not the same. That&#8217;s because each browser (even each browser version) uses its own
private database that is not shared with other browsers or browser versions. If you want to transfer the score
to other browsers or mobile devices you have to implement a backend solution.</p>

<h3>Testing</h3>

<p>Not long ago I tweeted the following</p>

<blockquote class="twitter-tweet"><p>when writing your next uber <a href="https://twitter.com/search/%23angularjs">#angularjs</a> blog post provide appropriate tests</p>&mdash; Mirco Zeiss (@zeMirco) <a href="https://twitter.com/zeMirco/status/344182488098291713">June 10, 2013</a></blockquote>


<script async src="http://mircozeiss.com//platform.twitter.com/widgets.js" charset="utf-8"></script>


<p>The AngularJS folks are quite passionate about testing and so am I. It can be annoying sometimes and of course
takes more time but it is well worth it and will one day save your a**. In addition it will improve
the quality of your code and therefore the quality of your blog post.</p>

<p>So let&#8217;s write some tests for our new services. Before we start we have to think about which
things can actually be tested.</p>

<ol>
<li><code>Pouch.enableAllDbs</code> should be set to <code>true</code></li>
<li>The returned object should be an instance of Pouch</li>
<li>The name of our db should be <strong>myPouch</strong></li>
<li>The service should be able to save an object to db</li>
<li>The service should be able to retrieve an object from db</li>
</ol>


<p>When all the above tests pass we can be pretty sure that we&#8217;ve done a good job.</p>

<h4>1. Check if enableAllDbs is set to true</h4>

<p>Setting <code>enableAllDbs</code> to <code>true</code> isn&#8217;t necessary for this small example app. However if you&#8217;d like
to obtain a list of all databases one day this feature must have been set to <code>true</code> in advance.</p>

<p>The test looks like this.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;should set &quot;enableAllDbs&quot; to true&#39;</span><span class="p">,</span> <span class="nx">inject</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">pouchdb</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">expect</span><span class="p">(</span><span class="nx">Pouch</span><span class="p">.</span><span class="nx">enableAllDbs</span><span class="p">).</span><span class="nx">toBeTruthy</span><span class="p">();</span>
</span><span class='line'><span class="p">}));</span>
</span></code></pre></td></tr></table></div></figure>


<p>That was easy. Just three lines of code. Cool, testing is fun!</p>

<h4>2. Verify the constructor of the object returned from the service</h4>

<p>This is also a very simple test.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;should return a Pouch instance&#39;</span><span class="p">,</span> <span class="nx">inject</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">pouchdb</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">expect</span><span class="p">(</span><span class="nx">pouchdb</span> <span class="k">instanceof</span> <span class="nx">Pouch</span><span class="p">).</span><span class="nx">toBeTruthy</span><span class="p">();</span>
</span><span class='line'><span class="p">}));</span>
</span></code></pre></td></tr></table></div></figure>


<p>Really that&#8217;s it? Yep quite nice, right?</p>

<h4>3. Verify the name of our db</h4>

<p>I&#8217;m sorry but I have to disappoint you. Testing is not always as easy as in the first two examples. The following is an asynchronous test and that&#8217;s not as
simple with AngularJS and Jasmine.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;should create a db with name &quot;myPouch&quot;&#39;</span><span class="p">,</span> <span class="nx">inject</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">pouchdb</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">result</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">pouchdb</span><span class="p">.</span><span class="nx">info</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">result</span> <span class="o">=</span> <span class="nx">res</span><span class="p">;</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">waitsFor</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">return</span> <span class="nx">result</span><span class="p">;</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">runs</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">expect</span><span class="p">(</span><span class="nx">result</span><span class="p">.</span><span class="nx">db_name</span><span class="p">).</span><span class="nx">toEqual</span><span class="p">(</span><span class="s1">&#39;_pouch_myPouch&#39;</span><span class="p">);</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'>
</span><span class='line'><span class="p">}));</span>
</span></code></pre></td></tr></table></div></figure>


<p>First we have to call the <code>info()</code> method which gives us some information
about our db in the callback. Within that callback we save the info to our global variable <code>result</code>. The
<code>waitsFor()</code> and <code>runs()</code> functions are needed by Jasmine to wait for the result from our info callback and
then continue with the test.</p>

<h4>4. Test if service can save objects to db</h4>

<p>For this test we simply use our new service, save an object to the database and check for the correct callback.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;should allow saving new objects via a promise&#39;</span><span class="p">,</span> <span class="nx">inject</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">pp</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">result</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">pp</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="s1">&#39;1&#39;</span><span class="p">).</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">result</span> <span class="o">=</span> <span class="nx">res</span><span class="p">;</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">waitsFor</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">return</span> <span class="nx">result</span><span class="p">;</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">runs</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">expect</span><span class="p">(</span><span class="nx">result</span><span class="p">.</span><span class="nx">ok</span><span class="p">).</span><span class="nx">toBeTruthy</span><span class="p">();</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'>
</span><span class='line'><span class="p">}));</span>
</span></code></pre></td></tr></table></div></figure>


<h4>5. Test if service can retrieve objects from db</h4>

<p>For our last test we try to retrieve the before saved object and check whether we got the right score.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;should allow retrieving new objects via a promise&#39;</span><span class="p">,</span> <span class="nx">inject</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">pp</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">result</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">pp</span><span class="p">.</span><span class="nx">getScore</span><span class="p">(</span><span class="s1">&#39;1&#39;</span><span class="p">).</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">result</span> <span class="o">=</span> <span class="nx">res</span><span class="p">;</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">waitsFor</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">return</span> <span class="nx">result</span><span class="p">;</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">runs</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">expect</span><span class="p">(</span><span class="nx">result</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'>
</span><span class='line'><span class="p">}));</span>
</span></code></pre></td></tr></table></div></figure>


<p>That&#8217;s it! We can now safely assume that our service is working correctly and does what we expect.</p>

<h3>Conclusion</h3>

<p>AngularJS and PouchDB are awesome frameworks. I hope their engineers
and the community will support both for a long time to come. Combined they are a match made in heaven. AngularJS gives you all the
tools to keep your frontend code nice and tidy while PouchDB takes care of your data. Use both to write
offline applications that run in the browser on every modern device. See the final app at <a href="http://plnkr.co/edit/BoxJTY?p=preview">plnkr#BoxJTY</a>.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Using CSRF protection with Express and Angular]]></title>
    <link href="http://mircozeiss.com/using-csrf-with-express-and-angular/"/>
    <updated>2013-05-19T19:20:00+02:00</updated>
    <id>http://mircozeiss.com/using-csrf-with-express-and-angular</id>
    <content type="html"><![CDATA[<p>In this post I&#8217;ll demonstrate how to use CSRF protection for Express and Angular apps. Both frameworks have CSRF protection
built in but don&#8217;t understand each other without manual adjustments.</p>

<p>Express is built on top of the <a href="http://www.senchalabs.org/connect/">connect</a> framework which has a native <a href="http://www.senchalabs.org/connect/csrf.html">csrf</a> middleware. It generates a random string token
that is unique for each user. The token is saved in the user&#8217;s session on the server. On every request which mutates state,
usually <code>PUT</code>, <code>POST</code> and <code>DELETE</code> requests, the middleware validates whether the CSRF token sent from the client is the
same as the token stored in the user&#8217;s session on the server. If it isn&#8217;t the client gets the answer <code>403 Forbidden</code>. The following is taken from the docs and describes where the middleware is looking for the token.</p>

<blockquote><p>The default value function checks req.body generated by the bodyParser() middleware, req.query generated by query(), and the &#8220;X-CSRF-Token&#8221; header field.</p></blockquote>

<p>Angular also has CSRF features built into its $http service.</p>

<blockquote><p>When performing XHR requests, the $http service reads a token from a cookie called XSRF-TOKEN and sets it as the HTTP header X-XSRF-TOKEN</p></blockquote>

<p>Both frameworks offer CSRF protection. To make them work together we have to make some adjustments. Follow the steps below to make CSRF work for your next app</p>

<ol>
<li>Add CSRF middleware to your Express app</li>
<li>Tell the middleware to use the right token</li>
<li>Use custom middleware to set a cookie for Angular</li>
<li>Use Angular $http library for XHR requests</li>
</ol>


<h3>1. Adding CSRF middleware to an Express app</h3>

<p>In the first step we have to add the CSRF middleware to our app. As it requires sessions we also have to
add some extra session middleware. You don&#8217;t have to install anything because they come with Express.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">express</span><span class="p">.</span><span class="nx">cookieParser</span><span class="p">(</span><span class="s1">&#39;your secret here&#39;</span><span class="p">));</span>
</span><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">express</span><span class="p">.</span><span class="nx">cookieSession</span><span class="p">());</span>
</span><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">express</span><span class="p">.</span><span class="nx">csrf</span><span class="p">());</span>
</span></code></pre></td></tr></table></div></figure>


<h3>2. Telling CSRF middleware to use the right token</h3>

<p>As mentioned earlier the default CSRF middleware looks in <code>req.body</code>, <code>req.query</code> and the <code>X-CSRF-Token</code> header for the token.
Angular uses none of the methods but instead its own header <code>X-XSRF-TOKEN</code>. Therefor we have to tell Express where to look
for the token delivered by Angular. Create a new function that returns this token from the <code>request</code> object.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">var</span> <span class="nx">csrfValue</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">req</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">token</span> <span class="o">=</span> <span class="p">(</span><span class="nx">req</span><span class="p">.</span><span class="nx">body</span> <span class="o">&amp;&amp;</span> <span class="nx">req</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">_csrf</span><span class="p">)</span>
</span><span class='line'>    <span class="o">||</span> <span class="p">(</span><span class="nx">req</span><span class="p">.</span><span class="nx">query</span> <span class="o">&amp;&amp;</span> <span class="nx">req</span><span class="p">.</span><span class="nx">query</span><span class="p">.</span><span class="nx">_csrf</span><span class="p">)</span>
</span><span class='line'>    <span class="o">||</span> <span class="p">(</span><span class="nx">req</span><span class="p">.</span><span class="nx">headers</span><span class="p">[</span><span class="s1">&#39;x-csrf-token&#39;</span><span class="p">])</span>
</span><span class='line'>    <span class="o">||</span> <span class="p">(</span><span class="nx">req</span><span class="p">.</span><span class="nx">headers</span><span class="p">[</span><span class="s1">&#39;x-xsrf-token&#39;</span><span class="p">]);</span>
</span><span class='line'>  <span class="k">return</span> <span class="nx">token</span><span class="p">;</span>
</span><span class='line'><span class="p">};</span>
</span></code></pre></td></tr></table></div></figure>


<p>The function above is the default function taken from connect. I just added the last line <code>req.headers['x-xsrf-token']</code>.
It still accepts the other methods but also finds the incoming token from Angular. Now pass this function to the CSRF middleware from step 1.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">express</span><span class="p">.</span><span class="nx">csrf</span><span class="p">({</span><span class="nx">value</span><span class="o">:</span> <span class="nx">csrfValue</span><span class="p">}));</span>
</span></code></pre></td></tr></table></div></figure>


<p>Cool, Express can now find the token sent by Angular. One thing that is missing is sending the token from our Express server
to our Angular client.</p>

<h3>3. Using custom middleware to set a cookie for Angular</h3>

<p>Angular&#8217;s $http library reads the token from the <code>XSRF-TOKEN</code> cookie. We therefore have to set this cookie and send it to
the client. Setting a cookie in Express is done via the <code>res.cookie('name', 'value')</code> function. The name is obviously <code>XSRF-TOKEN</code>.
The value is read from the user&#8217;s session. The key <code>req.session._csrf</code> is automatically generated by the csrf middleware.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">,</span> <span class="nx">next</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">res</span><span class="p">.</span><span class="nx">cookie</span><span class="p">(</span><span class="s1">&#39;XSRF-TOKEN&#39;</span><span class="p">,</span> <span class="nx">req</span><span class="p">.</span><span class="nx">session</span><span class="p">.</span><span class="nx">_csrf</span><span class="p">);</span>
</span><span class='line'>  <span class="nx">next</span><span class="p">();</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<h3>4. Using Angular $http library for XHR requests</h3>

<p>We now have everything in place to use Angular&#8217;s $http library without further adjustments. A simple
controller could look like the following</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">var</span> <span class="nx">myApp</span> <span class="o">=</span> <span class="nx">angular</span><span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1">&#39;myApp&#39;</span><span class="p">,[]);</span>
</span><span class='line'>
</span><span class='line'><span class="nx">myApp</span><span class="p">.</span><span class="nx">controller</span><span class="p">(</span><span class="s1">&#39;csrfCtrl&#39;</span><span class="p">,</span> <span class="p">[</span><span class="s1">&#39;$scope&#39;</span><span class="p">,</span> <span class="s1">&#39;$http&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">$scope</span><span class="p">,</span> <span class="nx">$http</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">$scope</span><span class="p">.</span><span class="nx">submit</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>
</span><span class='line'>    <span class="nx">$http</span><span class="p">.</span><span class="nx">post</span><span class="p">(</span><span class="s1">&#39;/&#39;</span><span class="p">,</span> <span class="p">{</span><span class="nx">value</span><span class="o">:</span> <span class="nx">$scope</span><span class="p">.</span><span class="nx">value</span><span class="p">})</span>
</span><span class='line'>      <span class="p">.</span><span class="nx">success</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">$scope</span><span class="p">.</span><span class="nx">answer</span> <span class="o">=</span> <span class="nx">data</span>
</span><span class='line'>      <span class="p">})</span>
</span><span class='line'>      <span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;err&#39;</span><span class="p">)</span>
</span><span class='line'>      <span class="p">})</span>
</span><span class='line'>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="p">}]);</span>
</span></code></pre></td></tr></table></div></figure>


<p>No adjustments are need on the client and your code should work as is.</p>

<p><img src="https://s3.amazonaws.com/mircozeiss.com/csrf-express-angular.png" title="CSRF example for Express and Angular" ></p>

<h3>Conclusion</h3>

<p>As you&#8217;ve seen adding CSRF protection to an app built with Express and Angular is really simple. There shouldn&#8217;t be
any reason not to use this technique for your next app. It adds another layer of security. The underlying principles can also
be applied to apps built with a different stack. Reading their documentations is always a good start.</p>

<p>You can find the code at GitHub <a href="https://github.com/zeMirco/csrf-express-angular">zeMirco/csrf-express-angular</a> and a running example at Heroku <a href="http://arcane-headland-6078.herokuapp.com/">http://arcane-headland-6078.herokuapp.com/</a>.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Not using email as the primary key with Mozilla Persona]]></title>
    <link href="http://mircozeiss.com/not-using-email-as-the-primary-key-with-mozilla-persona/"/>
    <updated>2013-05-13T20:53:00+02:00</updated>
    <id>http://mircozeiss.com/not-using-email-as-the-primary-key-with-mozilla-persona</id>
    <content type="html"><![CDATA[<p>Based on the feedback for my last post <a href="http://mircozeiss.com/mozilla-persona-example-app-with-express-and-couchdb/">Mozilla Persona example app with Express and CouchDB</a>
I made some small but quite important changes in the architecture of my app.</p>

<p><a href="http://fmarier.org/">Francois Marier</a> suggested that we shouldn&#8217;t use our users&#8217; email addresses as the primary key
in our db. That&#8217;s also what Mozilla&#8217;s <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Persona/The_implementor_s_guide/Enabling_users_to_change_their_email_address?redirectlocale=en-US&amp;redirectslug=Persona%2FThe_implementor_s_guide%2FEnabling_users_to_change_their_email_address">implementer&#8217;s guide</a> is telling. So
I took the code from my last post and refactored everything. Each user is now identified by a unique key and not anymore by his email address.
You can find the current version of the example app at GitHub <a href="https://github.com/zeMirco/mozilla-persona-express-couchdb">mozilla-persona-express-couchdb</a>.</p>

<h3>Using views to find users</h3>

<p>In the first version of my app I used the email as the primary key. Getting a user from db was as simple as a <code>GET</code> request
with the appropriate email address. Now that I don&#8217;t have the email as the primary key anymore and every user is stored under
a random string, we have to use a simple <strong>CouchDB view</strong>.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="s2">&quot;views&quot;</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>  <span class="s2">&quot;byEmail&quot;</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>    <span class="s2">&quot;map&quot;</span><span class="o">:</span> <span class="s2">&quot;function(doc){</span>
</span><span class='line'><span class="s2">      if (doc.type === &#39;user&#39;) {</span>
</span><span class='line'><span class="s2">        emit(doc.email, doc)</span>
</span><span class='line'><span class="s2">      }</span>
</span><span class='line'><span class="s2">    }&quot;</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>Every user document looks like the following</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="p">{</span>
</span><span class='line'>   <span class="s2">&quot;_id&quot;</span><span class="o">:</span> <span class="s2">&quot;3115b40189b7dfa4d007ff7fc8536af4&quot;</span><span class="p">,</span>
</span><span class='line'>   <span class="s2">&quot;_rev&quot;</span><span class="o">:</span> <span class="s2">&quot;2-359ee1c1e888690c9c6468b55fa48fa7&quot;</span><span class="p">,</span>
</span><span class='line'>   <span class="s2">&quot;type&quot;</span><span class="o">:</span> <span class="s2">&quot;user&quot;</span><span class="p">,</span>
</span><span class='line'>   <span class="s2">&quot;email&quot;</span><span class="o">:</span> <span class="s2">&quot;mirco.zeiss@gmail.com&quot;</span><span class="p">,</span>
</span><span class='line'>   <span class="s2">&quot;username&quot;</span><span class="o">:</span> <span class="s2">&quot;zeMirco&quot;</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>Combined with the <strong>view</strong> from above gives us the following table, which we can query with the <code>email</code> as <code>key</code>.</p>

<table class="table table-striped table-hover table-condensed table-bordered">
  <thead>
    <tr>
      <th>Key</th>
      <th>Value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>“test@mockmyid.com”</td>
      <td>{&#8230;}</td>
    </tr>
    <tr>
      <td>“mirco.zeiss@gmail.com”</td>
      <td>{&#8230;}</td>
    </tr>
  </tbody>
</table>


<h3>Querying the view</h3>

<p>In the first version of the app I used a simple <code>GET</code> request to retrieve the user object.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">db</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">email</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">doc</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="p">...</span>
</span><span class='line'><span class="p">})</span>
</span></code></pre></td></tr></table></div></figure>


<p>I changed those lines as we have to query the view now.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">db</span><span class="p">.</span><span class="nx">view</span><span class="p">(</span><span class="s1">&#39;users&#39;</span><span class="p">,</span> <span class="s1">&#39;byEmail&#39;</span><span class="p">,</span> <span class="p">{</span><span class="nx">key</span><span class="o">:</span> <span class="nx">email</span><span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">body</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="p">...</span>
</span><span class='line'><span class="p">})</span>
</span></code></pre></td></tr></table></div></figure>


<p>Unfortunately that means we can&#8217;t use the <a href="http://eclipsesource.com/blogs/2013/03/01/use-your-head-checking-couchdb-document-existence/"><code>HEAD</code> request</a> to check for document existence.
This is now done by checking the amout of <code>rows</code> we get back as an answer.</p>

<h3>Let the user change his email address</h3>

<p>With the new architecture in place users are able to change their email addresses as described in Mozilla&#8217;s <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Persona/The_implementor_s_guide/Enabling_users_to_change_their_email_address?redirectlocale=en-US&amp;redirectslug=Persona%2FThe_implementor_s_guide%2FEnabling_users_to_change_their_email_address">Implementer&#8217;s Guide</a>.
I haven&#8217;t yet implemented this feature but will do so in the near future and write about my experiences. So stay tuned!</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Mozilla Persona example app with Express and CouchDB]]></title>
    <link href="http://mircozeiss.com/mozilla-persona-example-app-with-express-and-couchdb/"/>
    <updated>2013-05-03T20:25:00+02:00</updated>
    <id>http://mircozeiss.com/mozilla-persona-example-app-with-express-and-couchdb</id>
    <content type="html"><![CDATA[<p><a href="https://developer.mozilla.org/en-US/docs/Persona">Mozilla Persona</a> gained a lot of attention recently.
The developers have released <a href="http://identity.mozilla.com/post/47541633049/persona-beta-2">Beta 2</a> at the
beginning of last month and aim to bring Persona to <a href="https://blog.mozilla.org/beyond-the-code/2013/04/09/persona-beta2/">half of the worldwide Internet population</a> in the near future.</p>

<p>Although Mozilla has a <a href="https://developer.mozilla.org/en-US/docs/Persona/Quick_Setup">quick setup guide</a> to demonstrate the basic implementation
it is not as trivial to create a fully featured web app with <a href="http://www.adambarth.com/papers/2008/barth-jackson-mitchell-b.pdf">CSRF protection</a>,
<a href="https://developer.mozilla.org/en-US/docs/Security/CSP">Content Security Policy</a> and database in the backend. That&#8217;s why I wrote
this simple example application to learn more about the system and help others to get started.</p>

<p>The app is built on the following open source stack</p>

<ul>
<li><a href="http://couchdb.apache.org/">CouchDB</a> hosted at <a href="https://cloudant.com/">Cloudant</a></li>
<li><a href="https://github.com/dscape/nano">nano</a></li>
<li><a href="http://expressjs.com/">Express</a></li>
<li><a href="https://github.com/mikeal/request">Request</a></li>
<li><a href="http://jquery.com/">jQuery</a></li>
<li><a href="http://twitter.github.io/bootstrap/">Bootstrap</a></li>
</ul>


<p>To see the demo visit <a href="http://mysterious-coast-9759.herokuapp.com/">mysterious-coast-9759.herokuapp.com</a>. The code is available at
GitHub <a href="https://github.com/zeMirco/mozilla-persona-express-couchdb/">mozilla-persona-express-couchdb</a>.</p>

<p><img src="https://s3.amazonaws.com/mircozeiss.com/mozilla-persona-example.png" title="Mozilla Persona example app with Express and CouchDB" ></p>

<h3>Related projects</h3>

<p>Several other examples already exist. Take a look at</p>

<ul>
<li><a href="https://github.com/mozilla/123done">123done</a></li>
<li><a href="https://github.com/lloyd/node.js-persona-example">node.js-persona-example</a></li>
<li><a href="https://github.com/lloyd/myfavoritebeer.org">myfavoritebeer.org</a></li>
<li><a href="https://github.com/mozilla/browserid-cookbook/tree/master/node-express">browserid-cookbook</a></li>
</ul>


<p>They were the foundation and inspiration for my own project. Without them I couldn&#8217;t have done it. Therefore, thanks to the authors!
Especially to <a href="http://lloyd.io/">Lloyd Hilaiel</a>, <a href="http://fmarier.org/">Francois Marier</a> and <a href="https://shanetomlinson.com/">Shane Tomlinson</a>.</p>

<p>However, all of the examples were missing some features I&#8217;d like to see. These are</p>

<ul>
<li>proper DB implementation</li>
<li>CSRF protection</li>
<li>Content Security Policy (CSP)</li>
<li>cookie for <code>loggedInUser</code> variable</li>
<li>use of request module (imho makes code easier to read)</li>
<li>simplicity</li>
</ul>


<p>So I tried to take the best parts from the above examples and throw them together in my own app.</p>

<h3>Getting started</h3>

<p>I won&#8217;t cover the basic implementation. Read more about those steps in <a href="https://developer.mozilla.org/en-US/docs/Persona/Quick_Setup">quick setup</a>.
I&#8217;d like to focus more on the advanced stuff.</p>

<p>Let&#8217;s start by implementing our database. We want to save our users identified by their email address and an additional property, which is the username.
As we are using CouchDB a sample document looks like the following.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="p">{</span>
</span><span class='line'>   <span class="s2">&quot;_id&quot;</span><span class="o">:</span> <span class="s2">&quot;mirco.zeiss@gmail.com&quot;</span><span class="p">,</span>
</span><span class='line'>   <span class="s2">&quot;_rev&quot;</span><span class="o">:</span> <span class="s2">&quot;31-a51c569f771348de72f06a0886b51ab0&quot;</span><span class="p">,</span>
</span><span class='line'>   <span class="s2">&quot;username&quot;</span><span class="o">:</span> <span class="s2">&quot;zeMirco&quot;</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>Every time a user logs in with Persona <code>navigator.id.request()</code> is called and a <code>POST</code> request to <code>/auth/login</code> is made.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">onlogin</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">assertion</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">token</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#token&#39;</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>
</span><span class='line'>  <span class="nx">$</span><span class="p">.</span><span class="nx">post</span><span class="p">(</span><span class="s1">&#39;/auth/login&#39;</span><span class="p">,</span> <span class="p">{</span><span class="nx">assertion</span><span class="o">:</span> <span class="nx">assertion</span><span class="p">,</span> <span class="nx">_csrf</span><span class="o">:</span> <span class="nx">token</span><span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">reload</span><span class="p">();</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>We&#8217;ll get to the <code>token</code> and <code>_csrf</code> stuff later in this post. On the server the assertion is verified by posting it and the <code>audience</code> to Mozilla.
As soon as we get a valid answer back we have to do the following:</p>

<ol>
<li>Check if the email is stored in our db</li>
<li>If not create a new user with an empty <code>username</code> property and save him to the db</li>
<li>If the email is already present in our db do nothing (we have a returning user)</li>
</ol>


<p>Unfortunately Persona doesn&#8217;t tell us whether the user is a new or existing one. That&#8217;s why we have to check for existence on every login. CouchDB provides a handy feature to check for document existence. Instead of making a full <code>GET</code> request with the email as <code>key</code>
we can simply use a lightweight <code>HEAD</code> request. Read more about this trick at <a href="http://eclipsesource.com/blogs/2013/03/01/use-your-head-checking-couchdb-document-existence/">Use your head checking CouchDB document existence</a>.
If we get back an error with status code <code>404</code> we have a new user. Therefore save him to db.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">db</span><span class="p">.</span><span class="nx">head</span><span class="p">(</span><span class="nx">email</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">body</span><span class="p">,</span> <span class="nx">header</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">err</span><span class="p">);</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="nx">err</span> <span class="o">&amp;&amp;</span> <span class="nx">err</span><span class="p">.</span><span class="nx">status_code</span> <span class="o">===</span> <span class="mi">404</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="c1">// email is not in db</span>
</span><span class='line'>    <span class="kd">var</span> <span class="nx">doc</span> <span class="o">=</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">username</span><span class="o">:</span> <span class="s1">&#39;&#39;</span>
</span><span class='line'>    <span class="p">};</span>
</span><span class='line'>    <span class="nx">db</span><span class="p">.</span><span class="nx">insert</span><span class="p">(</span><span class="nx">doc</span><span class="p">,</span> <span class="nx">email</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">body</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="k">if</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">err</span><span class="p">);</span>
</span><span class='line'>      <span class="nx">resp</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="mi">200</span><span class="p">);</span>
</span><span class='line'>    <span class="p">})</span>
</span><span class='line'>  <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'>    <span class="c1">// email is already stored in db</span>
</span><span class='line'>    <span class="nx">resp</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="mi">200</span><span class="p">);</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>Sweet, we can now save our users to db and differentiate between new and existing ones. Problem is we somehow have to remember who is logged in and who isn&#8217;t.
We don&#8217;t want ours users to make the login call on every request. Therefore we have to use <strong>sessions</strong>.</p>

<h3>Cookie session</h3>

<p>Express offers cookie based session support via the <a href="http://www.senchalabs.org/connect/">connect</a> <a href="http://www.senchalabs.org/connect/cookieSession.html">cookieSession</a> middleware.
You could also use Mozilla&#8217;s own implementation <a href="https://github.com/mozilla/node-client-sessions">node-client-sessions</a> or some key value stores like Redis.
Read more about the pros and cons of cookies vs stores at <a href="https://hacks.mozilla.org/2012/12/using-secure-client-side-sessions-to-build-simple-and-scalable-node-js-applications-a-node-js-holiday-season-part-3/">Using secure client-side sessions to build simple and scalable Node.JS applications</a>.</p>

<p>To enable cookie sessions in Express add the following middleware to your config.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="c1">// built in middleware</span>
</span><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">express</span><span class="p">.</span><span class="nx">cookieParser</span><span class="p">(</span><span class="s1">&#39;your secret here&#39;</span><span class="p">));</span>
</span><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">express</span><span class="p">.</span><span class="nx">cookieSession</span><span class="p">());</span>
</span></code></pre></td></tr></table></div></figure>


<p>You can now create sessions on login <code>req.session.email = email</code> and destroy them on logout <code>req.session = null</code>. Our users can also
visit the <code>/profile</code> route which is protected and not accessible for users without any valid session.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="c1">// middleware to restrict access to internal routes like /profile</span>
</span><span class='line'><span class="kd">function</span> <span class="nx">restrict</span><span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">,</span> <span class="nx">next</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="nx">req</span><span class="p">.</span><span class="nx">session</span><span class="p">.</span><span class="nx">email</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">next</span><span class="p">();</span>
</span><span class='line'>  <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">res</span><span class="p">.</span><span class="nx">redirect</span><span class="p">(</span><span class="s1">&#39;/&#39;</span><span class="p">);</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="c1">// use the middleware in your routes</span>
</span><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;/profile&#39;</span><span class="p">,</span> <span class="nx">restrict</span><span class="p">,</span> <span class="nx">profile</span><span class="p">.</span><span class="nx">get</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>


<h3>Content Security Policy</h3>

<p><a href="https://developer.mozilla.org/en-US/docs/Security/CSP">Content Security Policy</a> (simply said) tells the browser to use JavaScript (and images, style sheets, frames, etc.)
only from your own domain while forbidding inline script and script from third party URLs. It adds another layer of security against XSS attacks.</p>

<p><a href="https://github.com/evilpacket/helmet">Helmet</a> is a great middleware to set CSP headers in Express. It also offers several other layers of security.
In my app I&#8217;ll write the headers by hand as it only requires a few lines of code.</p>

<p>Check for browser support and implementation at <a href="http://caniuse.com/#feat=contentsecuritypolicy">caniuse#contentsecuritypolicy</a>.
Firefox and IE10 need the <code>X-Content-Security-Policy</code> header while Safari and Chrome need <code>X-WebKit-CSP</code>.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">var</span> <span class="nx">policy</span> <span class="o">=</span>  <span class="s2">&quot;default-src &#39;self&#39;;&quot;</span> <span class="o">+</span>
</span><span class='line'>              <span class="s2">&quot;frame-src &#39;self&#39; https://login.persona.org;&quot;</span> <span class="o">+</span>
</span><span class='line'>              <span class="s2">&quot;script-src &#39;self&#39; &#39;unsafe-inline&#39; https://login.persona.org;&quot;</span> <span class="o">+</span>
</span><span class='line'>              <span class="s2">&quot;style-src &#39;self&#39; &#39;unsafe-inline&#39;&quot;</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">,</span> <span class="nx">next</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="c1">// Firefox and Internet Explorer</span>
</span><span class='line'>  <span class="nx">res</span><span class="p">.</span><span class="nx">header</span><span class="p">(</span><span class="s2">&quot;X-Content-Security-Policy&quot;</span><span class="p">,</span> <span class="nx">policy</span><span class="p">);</span>
</span><span class='line'>  <span class="c1">// Safari and Chrome</span>
</span><span class='line'>  <span class="nx">res</span><span class="p">.</span><span class="nx">header</span><span class="p">(</span><span class="s2">&quot;X-WebKit-CSP&quot;</span><span class="p">,</span> <span class="nx">policy</span><span class="p">);</span>
</span><span class='line'>  <span class="c1">// continue with next middleware</span>
</span><span class='line'>  <span class="nx">next</span><span class="p">();</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>In theory adding <code>'unsafe-inline'</code> shouldn&#8217;t be necessary but I got errors in Chrome caused by jQuery. Maybe they are related to <a href="http://bugs.jquery.com/ticket/13507">jQuery bug #13507</a>.
You can verify the headers in the browser&#8217;s development tools.</p>

<p><img src="https://s3.amazonaws.com/mircozeiss.com/persona-csp.png" title="Content Security Policy Headers" ></p>

<h3>CSRF protection</h3>

<p>A great explanation for Cross-Site Request Forgery is the paper <a href="http://www.adambarth.com/papers/2008/barth-jackson-mitchell-b.pdf">Robust Defenses for Cross-Site Request Forgery</a>.
Express provides a built in middleware <a href="http://www.senchalabs.org/connect/csrf.html">csrf</a> which makes the use of CSRF very easy.</p>

<p>Our own custom middleware makes the <code>token</code> variable available to all our views and we can use it whenever we have to change the state on the server.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">,</span> <span class="nx">next</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">res</span><span class="p">.</span><span class="nx">locals</span><span class="p">.</span><span class="nx">token</span> <span class="o">=</span> <span class="nx">req</span><span class="p">.</span><span class="nx">session</span><span class="p">.</span><span class="nx">_csrf</span><span class="p">;</span>
</span><span class='line'>  <span class="nx">next</span><span class="p">();</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>That&#8217;s usually done by adding a hidden input field to the forms.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='jade'><span class='line'><span class="nt">form</span><span class="nf">#login</span><span class="nc">.navbar-form.pull-right</span>
</span><span class='line'>  <span class="nt">input</span><span class="nf">#token</span>(<span class="na">type=</span><span class="s">&quot;hidden&quot;</span><span class="err">,</span> <span class="na">name=</span><span class="s">&quot;_csrf&quot;</span><span class="err">,</span> <span class="na">value=</span><span class="nv">token</span>)
</span><span class='line'>  <span class="nt">button</span><span class="nc">.btn</span>(<span class="na">type=</span><span class="s">&quot;submit&quot;</span>) Login
</span></code></pre></td></tr></table></div></figure>


<p>The token is sent to the server and <code>app.use(express.csrf());</code> checks if it is equal to <code>req.session._csrf</code>. If it isn&#8217;t Express throws a <code>403</code> error.
We not only have to include the token in forms but also when we make ajax requests.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">var</span> <span class="nx">token</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#token&#39;</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>
</span><span class='line'><span class="nx">$</span><span class="p">.</span><span class="nx">post</span><span class="p">(</span><span class="s1">&#39;/auth/login&#39;</span><span class="p">,</span> <span class="p">{</span><span class="nx">assertion</span><span class="o">:</span> <span class="nx">assertion</span><span class="p">,</span> <span class="nx">_csrf</span><span class="o">:</span> <span class="nx">token</span><span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">reload</span><span class="p">();</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>That explains the additional <code>_csrf</code> key.</p>

<h3>Sending <em>loggedInUser</em> from server to client JavaScript</h3>

<p>The <a href="https://developer.mozilla.org/en-US/docs/DOM/navigator.id.watch"><code>navigator.id.watch</code></a> function requires the <code>loggedInUser</code> parameter,
which tells Persona what you believe about the user&#8217;s state.</p>

<p><a href="https://github.com/mozilla/123done/blob/master/static/js/123done.js#L42-L44">123done</a> makes a GET request to <code>/api/auth_status</code> in order to get <code>loggedInUser</code></p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">$</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;/api/auth_status&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">loggedInEmail</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">data</span><span class="p">).</span><span class="nx">logged_in_email</span><span class="p">;</span>
</span><span class='line'>  <span class="p">...</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>and the server responds with the current session.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;/api/auth_status&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">res</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">({</span>
</span><span class='line'>    <span class="nx">logged_in_email</span><span class="o">:</span> <span class="nx">req</span><span class="p">.</span><span class="nx">session</span><span class="p">.</span><span class="nx">user</span> <span class="o">||</span> <span class="kc">null</span><span class="p">,</span>
</span><span class='line'>  <span class="p">}));</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p><a href="https://github.com/lloyd/node.js-persona-example/blob/master/views/index.ejs#L15">node.js-persona-example</a> uses inline JavaScript
and puts the variable via <a href="https://github.com/visionmedia/ejs">ejs</a> directly into the view.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>navigator.id.watch({
</span><span class='line'>  loggedInUser: <span class="err">&lt;</span>%- JSON.stringify(email) %&gt;,
</span><span class='line'>  ...
</span><span class='line'>})
</span></code></pre></td></tr></table></div></figure>


<p>The server renders the view with the local variable <code>email</code> with holds the current session.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;/&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">res</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="s1">&#39;index.ejs&#39;</span><span class="p">,</span> <span class="p">{</span> <span class="nx">email</span><span class="o">:</span> <span class="nx">req</span><span class="p">.</span><span class="nx">session</span><span class="p">.</span><span class="nx">email</span> <span class="o">||</span> <span class="kc">null</span> <span class="p">});</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p><a href="https://github.com/lloyd/myfavoritebeer.org/blob/master/static/js/main.js#L135-L138">myfavoritebeer.org</a> also makes a GET request. This time to <code>/api/whoami</code>.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">$</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;/api/whoami&#39;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="nx">res</span> <span class="o">===</span> <span class="kc">null</span><span class="p">)</span> <span class="nx">loggedOut</span><span class="p">();</span>
</span><span class='line'>  <span class="k">else</span> <span class="nx">loggedIn</span><span class="p">(</span><span class="nx">res</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
</span><span class='line'><span class="p">},</span> <span class="s1">&#39;json&#39;</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>


<p>The server responds with the email from the current session and the corresponding image from <a href="https://www.libravatar.org/">Libravatar</a>.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;/api/whoami&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="nx">req</span><span class="p">.</span><span class="nx">session</span> <span class="o">&amp;&amp;</span> <span class="k">typeof</span> <span class="nx">req</span><span class="p">.</span><span class="nx">session</span><span class="p">.</span><span class="nx">email</span> <span class="o">===</span> <span class="s1">&#39;string&#39;</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">respondWithUserInfo</span><span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">);</span>
</span><span class='line'>  <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">return</span> <span class="nx">res</span><span class="p">.</span><span class="nx">json</span><span class="p">(</span><span class="kc">null</span><span class="p">);</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">});</span>
</span><span class='line'>
</span><span class='line'><span class="kd">function</span> <span class="nx">respondWithUserInfo</span><span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">libravatar</span><span class="p">.</span><span class="nx">url</span><span class="p">({</span><span class="nx">email</span><span class="o">:</span> <span class="nx">req</span><span class="p">.</span><span class="nx">session</span><span class="p">.</span><span class="nx">email</span><span class="p">,</span> <span class="nx">size</span><span class="o">:</span> <span class="mi">32</span><span class="p">,</span> <span class="nx">http</span><span class="o">:</span> <span class="kc">false</span><span class="p">},</span>
</span><span class='line'>    <span class="kd">function</span> <span class="p">(</span><span class="nx">error</span><span class="p">,</span> <span class="nx">avatar</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="k">if</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>        <span class="k">return</span> <span class="nx">res</span><span class="p">.</span><span class="nx">json</span><span class="p">({</span><span class="s1">&#39;email&#39;</span><span class="o">:</span> <span class="nx">req</span><span class="p">.</span><span class="nx">session</span><span class="p">.</span><span class="nx">email</span><span class="p">,</span> <span class="s1">&#39;avatar&#39;</span><span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">});</span>
</span><span class='line'>      <span class="p">}</span>
</span><span class='line'>      <span class="k">return</span> <span class="nx">res</span><span class="p">.</span><span class="nx">json</span><span class="p">({</span><span class="s1">&#39;email&#39;</span><span class="o">:</span> <span class="nx">req</span><span class="p">.</span><span class="nx">session</span><span class="p">.</span><span class="nx">email</span><span class="p">,</span> <span class="s1">&#39;avatar&#39;</span><span class="o">:</span> <span class="nx">avatar</span><span class="p">});</span>
</span><span class='line'>    <span class="p">});</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>Last but not least <a href="https://github.com/mozilla/browserid-cookbook/blob/master/node-express/views/layout.jade#L17-L22">browserid-cookbook</a>
uses inline script (this time with Jade instead ejs) to pass the current user to the frontend.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='jade'><span class='line'><span class="nt">if</span> user
</span><span class='line'>  <span class="nt">script</span>
</span><span class='line'>    <span class="nt">var</span> loggedInUser = &#39;<span class="si">#{</span><span class="n">user</span><span class="si">}</span>&#39;;
</span><span class='line'><span class="nt">else</span>
</span><span class='line'>  <span class="nt">script</span>
</span><span class='line'>    <span class="nt">var</span> loggedInUser = null;
</span></code></pre></td></tr></table></div></figure>


<p>The server sets the local variable <code>loggedInUser</code> from the current session.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">exports</span><span class="p">.</span><span class="nx">index</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">resp</span><span class="p">){</span>
</span><span class='line'>  <span class="nx">resp</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="s1">&#39;index&#39;</span><span class="p">,</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">title</span><span class="o">:</span> <span class="s1">&#39;Express&#39;</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">user</span><span class="o">:</span> <span class="nx">req</span><span class="p">.</span><span class="nx">session</span><span class="p">.</span><span class="nx">email</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">csrf</span><span class="o">:</span> <span class="nx">req</span><span class="p">.</span><span class="nx">session</span><span class="p">.</span><span class="nx">_csrf</span>
</span><span class='line'>  <span class="p">})</span>
</span><span class='line'><span class="p">};</span>
</span></code></pre></td></tr></table></div></figure>


<p>In summary two examples use inline script and two use extra GET requests. What&#8217;s the better implementation?</p>

<p>In my opinion both aren&#8217;t perfect. Inline script is probably the easiest but worst solution, as it won&#8217;t work with a strict Content Security Policy.
An extra GET request costs time and you have to implement an additional route on your server. That&#8217;s why I chose a third solution. I use cookies to send
the current user from our backend to the frontend. Mozilla also recommends this way.</p>

<blockquote><p>&#8230; you might examine the browser&#8217;s cookies to determine who is signed in.</p></blockquote>

<p>We can set the cookie via a custom middleware. If the user isn&#8217;t logged in and doesn&#8217;t have a valid session no cookie is needed.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">,</span> <span class="nx">next</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="nx">req</span><span class="p">.</span><span class="nx">session</span><span class="p">.</span><span class="nx">email</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">res</span><span class="p">.</span><span class="nx">cookie</span><span class="p">(</span><span class="s1">&#39;email&#39;</span><span class="p">,</span> <span class="nx">req</span><span class="p">.</span><span class="nx">session</span><span class="p">.</span><span class="nx">email</span><span class="p">);</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'>  <span class="nx">next</span><span class="p">();</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>On the client we can read the cookie via the awesome <a href="https://github.com/carhartl/jquery-cookie">jquery-cookie</a> plugin.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">var</span> <span class="nx">email</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">cookie</span><span class="p">(</span><span class="s1">&#39;email&#39;</span><span class="p">)</span> <span class="o">||</span> <span class="kc">null</span><span class="p">;</span>
</span></code></pre></td></tr></table></div></figure>


<p>Cookies have the advantage that they save the extra request to the server and don&#8217;t require inline script.</p>

<h3>Conclusion</h3>

<p>A few more steps than just the quick setup are needed to build a full featured web app based on Mozilla Persona. However it isn&#8217;t rocket science and I&#8217;ve learned a lot while developing this app.
Persona is a great technology and admins will have less to worry about, as no passwords are stored in the db.</p>

<p>I&#8217;m sure my example is far from being perfect so if you see any mistakes or find room for improvements please open an <a href="https://github.com/zeMirco/mozilla-persona-express-couchdb/issues">issue</a> at GitHub.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Async CouchDB queries with nano and promises]]></title>
    <link href="http://mircozeiss.com/async-couchdb-queries-with-nano-and-promises/"/>
    <updated>2013-04-21T00:00:00+02:00</updated>
    <id>http://mircozeiss.com/async-couchdb-queries-with-nano-and-promises</id>
    <content type="html"><![CDATA[<p>This post is about CouchDB and its <code>MapReduce</code> functionality. I&#8217;ll use simple <code>reduce</code>
functions to gather some statistics about soccer players. <a href="https://github.com/dscape/nano">Nano</a>
is used the query the database from
Node.js. To keep our code nice and tidy we&#8217;ll make use of <a href="https://github.com/promises-aplus/promises-spec">Promises</a>
through the <a href="https://github.com/kriskowal/q">q</a> module.</p>

<h3>1. CouchDB architecture</h3>

<p>Assuming we want to record every goal in a match and create some statistics to see who
 scored the most goals. Each goal is a single document in our CouchDB database</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="p">{</span>
</span><span class='line'>   <span class="s2">&quot;_id&quot;</span><span class="o">:</span> <span class="s2">&quot;ee2459df977d62d196872dd0ae63ea13&quot;</span><span class="p">,</span>
</span><span class='line'>   <span class="s2">&quot;_rev&quot;</span><span class="o">:</span> <span class="s2">&quot;1-e00b4c6130d022e7336cdafacd18f93a&quot;</span><span class="p">,</span>
</span><span class='line'>   <span class="s2">&quot;playerId&quot;</span><span class="o">:</span> <span class="s2">&quot;4&quot;</span><span class="p">,</span>
</span><span class='line'>   <span class="s2">&quot;type&quot;</span><span class="o">:</span> <span class="s2">&quot;goal&quot;</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>The <code>type</code> key simply helps to differentiate between other documents (could be players with
name, age, price, etc.) and our <code>goal</code> documents.</p>

<p>With a simple <code>map</code> function we get every goal by player</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">function</span><span class="p">(</span><span class="nx">doc</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="nx">doc</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="s1">&#39;goal&#39;</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">emit</span><span class="p">(</span><span class="nx">doc</span><span class="p">.</span><span class="nx">playerId</span><span class="p">,</span> <span class="mi">1</span><span class="p">)</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>The result of the <code>map</code> function looks similar to the following table</p>

<table class="table table-striped table-hover table-condensed table-bordered">
  <thead>
    <tr>
      <th>Key</th>
      <th>Value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>“4”</td>
      <td>1</td>
    </tr>
    <tr>
      <td>“4”</td>
      <td>1</td>
    </tr>
    <tr>
      <td>“3”</td>
      <td>1</td>
    </tr>
    <tr>
      <td>“2”</td>
      <td>1</td>
    </tr>
    <tr>
      <td>“1”</td>
      <td>1</td>
    </tr>
    <tr>
      <td>“1”</td>
      <td>1</td>
    </tr>
    <tr>
      <td>“1”</td>
      <td>1</td>
    </tr>
    <tr>
      <td>“1”</td>
      <td>1</td>
    </tr>
    <tr>
      <td>“1”</td>
      <td>1</td>
    </tr>
  </tbody>
</table>


<p>The <strong>key</strong> represents the <code>playerId</code> and the <strong>value</strong> is <code>1</code> for every key. We need this
<strong>value</strong>
later on to calculate the total amout of goals scored by each player.</p>

<p>To get this total amout of goals we simply have to sum up all <strong>values</strong> per player. Therefore our <code>reduce</code>
function looks like this</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">_sum</span>
</span></code></pre></td></tr></table></div></figure>


<p><code>_sum</code> is a built in <code>reduce</code> function provided by CouchDB. More native functions can be found in the
<a href="http://wiki.apache.org/couchdb/Built-In_Reduce_Functions">CouchDB Wiki</a>. The result of the above function looks like this</p>

<table class="table table-striped table-hover table-condensed table-bordered">
  <thead>
    <tr>
      <th>Key</th>
      <th>Value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>“4”</td>
      <td>2</td>
    </tr>
    <tr>
      <td>“3”</td>
      <td>1</td>
    </tr>
    <tr>
      <td>“2”</td>
      <td>1</td>
    </tr>
    <tr>
      <td>“1”</td>
      <td>5</td>
    </tr>
  </tbody>
</table>


<p>That&#8217;s exactly what we wanted. We can now query our view and pass the playerId as <strong>key</strong> to get the final value.</p>

<h3>2. Using the database with nano</h3>

<p>Several modules exist on <a href="https://npmjs.org/search?q=couchdb">npm</a> to interact with CouchDB. The most popular ones are
probably</p>

<ul>
<li><a href="https://github.com/dscape/nano">nano</a> and</li>
<li><a href="https://github.com/cloudhead/cradle">cradle</a></li>
</ul>


<p>In this post I&#8217;ll use nano. I haven&#8217;t used cradle yet but I&#8217;m sure it offers similar functionality.</p>

<p>To save new documents to our db we use the <code>insert</code> function</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">var</span> <span class="nx">id</span> <span class="o">=</span> <span class="s2">&quot;1&quot;</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'><span class="kd">var</span> <span class="nx">doc</span> <span class="o">=</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">playerId</span><span class="o">:</span> <span class="nx">id</span>
</span><span class='line'><span class="p">};</span>
</span><span class='line'>
</span><span class='line'><span class="nx">nano</span><span class="p">.</span><span class="nx">insert</span><span class="p">(</span><span class="nx">doc</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">body</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">err</span><span class="p">);</span>
</span><span class='line'>  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;done&#39;</span><span class="p">);</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>The total amout of goals scored by each player is provided by the above created <code>MapReduce</code> function. We
can query this view using nano&#8217;s <code>view</code> function</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">nano</span><span class="p">.</span><span class="nx">view</span><span class="p">(</span><span class="s1">&#39;goals&#39;</span><span class="p">,</span> <span class="s1">&#39;byPlayer_sum&#39;</span><span class="p">,</span> <span class="p">{</span><span class="nx">key</span><span class="o">:</span> <span class="nx">playerId</span><span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">body</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">err</span><span class="p">);</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">body</span><span class="p">.</span><span class="nx">rows</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="c1">// no goals for this player</span>
</span><span class='line'>    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span>
</span><span class='line'>  <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">body</span><span class="p">.</span><span class="nx">rows</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">value</span><span class="p">);</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>This gives us the sum for each player that we pass to CouchDB as a parameter <code>{key: playerId}</code>.</p>

<p>So, now we can store new documents and retrieve the sum via nano from our db. The problem is loading
multiple sums for different players at the same time and then display the results to our users. The easiest solution
is using a series of callback functions</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">nano</span><span class="p">.</span><span class="nx">view</span><span class="p">(</span><span class="s1">&#39;goals&#39;</span><span class="p">,</span> <span class="s1">&#39;byPlayer_sum&#39;</span><span class="p">,</span> <span class="p">{</span><span class="nx">key</span><span class="o">:</span> <span class="mi">1</span><span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">bodyOne</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">nano</span><span class="p">.</span><span class="nx">view</span><span class="p">(</span><span class="s1">&#39;goals&#39;</span><span class="p">,</span> <span class="s1">&#39;byPlayer_sum&#39;</span><span class="p">,</span> <span class="p">{</span><span class="nx">key</span><span class="o">:</span> <span class="mi">2</span><span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">bodyTwo</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>     <span class="nx">nano</span><span class="p">.</span><span class="nx">view</span><span class="p">(</span><span class="s1">&#39;goals&#39;</span><span class="p">,</span> <span class="s1">&#39;byPlayer_sum&#39;</span><span class="p">,</span> <span class="p">{</span><span class="nx">key</span><span class="o">:</span> <span class="mi">3</span><span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">bodyThree</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>       <span class="nx">nano</span><span class="p">.</span><span class="nx">view</span><span class="p">(</span><span class="s1">&#39;goals&#39;</span><span class="p">,</span> <span class="s1">&#39;byPlayer_sum&#39;</span><span class="p">,</span> <span class="p">{</span><span class="nx">key</span><span class="o">:</span> <span class="mi">4</span><span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">bodyFour</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>         <span class="p">...</span>
</span><span class='line'>       <span class="p">});</span>
</span><span class='line'>     <span class="p">});</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>That approach leads to the famous spaghetti code/callback hell/pyramide/christmas tree/you name it. Another
huge drawback is that all the request are made one after the other. CouchDB is great in handling a lot of
concurrent requests (see <a href="http://guide.couchdb.org/draft/why.html">Why CouchDB?</a>) so let&#8217;s not waste this feature.</p>

<p>A second approach is making parallel requests and after each requests check if the others are already done.
If they are done, continue with the code. The idea works like this</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">var</span> <span class="nx">done</span> <span class="o">=</span> <span class="p">[];</span>
</span><span class='line'><span class="nx">nano</span><span class="p">.</span><span class="nx">view</span><span class="p">(</span><span class="s1">&#39;goals&#39;</span><span class="p">,</span> <span class="s1">&#39;byPlayer_sum&#39;</span><span class="p">,</span> <span class="p">{</span><span class="nx">key</span><span class="o">:</span> <span class="mi">1</span><span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">body</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">done</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">body</span><span class="p">);</span>
</span><span class='line'>  <span class="k">if</span><span class="p">(</span><span class="nx">done</span><span class="p">.</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">3</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">continue</span><span class="p">();</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">});</span>
</span><span class='line'>
</span><span class='line'><span class="nx">nano</span><span class="p">.</span><span class="nx">view</span><span class="p">(</span><span class="s1">&#39;goals&#39;</span><span class="p">,</span> <span class="s1">&#39;byPlayer_sum&#39;</span><span class="p">,</span> <span class="p">{</span><span class="nx">key</span><span class="o">:</span> <span class="mi">2</span><span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">body</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">done</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">body</span><span class="p">);</span>
</span><span class='line'>  <span class="k">if</span><span class="p">(</span><span class="nx">done</span><span class="p">.</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">3</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">continue</span><span class="p">();</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">});</span>
</span><span class='line'>
</span><span class='line'><span class="nx">nano</span><span class="p">.</span><span class="nx">view</span><span class="p">(</span><span class="s1">&#39;goals&#39;</span><span class="p">,</span> <span class="s1">&#39;byPlayer_sum&#39;</span><span class="p">,</span> <span class="p">{</span><span class="nx">key</span><span class="o">:</span> <span class="mi">3</span><span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">body</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">done</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">body</span><span class="p">);</span>
</span><span class='line'>  <span class="k">if</span><span class="p">(</span><span class="nx">done</span><span class="p">.</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">3</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">continue</span><span class="p">();</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">});</span>
</span><span class='line'>
</span><span class='line'><span class="kd">var</span> <span class="k">continue</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>  <span class="c1">// do something with the data in done</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>That isn&#8217;t pretty either because we have to check for <code>done</code> in each request. Therefore let&#8217;s use promises.</p>

<h3>3. Wrapping query functions in promises</h3>

<p>The defacto module for using promises is <a href="https://github.com/kriskowal/q">q</a> by Kris Kowal. The documentation
is great and it is super easy to integrate as we will see now. Let&#8217;s write a promise for saving new documents
to db</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">var</span> <span class="nx">save</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">doc</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">deferred</span> <span class="o">=</span> <span class="nx">Q</span><span class="p">.</span><span class="nx">defer</span><span class="p">();</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">nano</span><span class="p">.</span><span class="nx">insert</span><span class="p">(</span><span class="nx">doc</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">body</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">if</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">deferred</span><span class="p">.</span><span class="nx">reject</span><span class="p">(</span><span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="nx">err</span><span class="p">));</span>
</span><span class='line'>    <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">deferred</span><span class="p">.</span><span class="nx">resolve</span><span class="p">(</span><span class="nx">body</span><span class="p">);</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'>  <span class="p">})</span>
</span><span class='line'>
</span><span class='line'>  <span class="k">return</span> <span class="nx">deferred</span><span class="p">.</span><span class="nx">promise</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>Another promise would be retrieving the sum of goals for each player</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">var</span> <span class="nx">getScore</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">playerId</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">deferred</span> <span class="o">=</span> <span class="nx">Q</span><span class="p">.</span><span class="nx">defer</span><span class="p">();</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">nano</span><span class="p">.</span><span class="nx">view</span><span class="p">(</span><span class="s1">&#39;goals&#39;</span><span class="p">,</span> <span class="s1">&#39;byPlayer_sum&#39;</span><span class="p">,</span> <span class="p">{</span><span class="nx">key</span><span class="o">:</span> <span class="nx">playerId</span><span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">body</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">if</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">deferred</span><span class="p">.</span><span class="nx">reject</span><span class="p">(</span><span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="nx">err</span><span class="p">));</span>
</span><span class='line'>    <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'>      <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">body</span><span class="p">.</span><span class="nx">rows</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">deferred</span><span class="p">.</span><span class="nx">resolve</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span>
</span><span class='line'>      <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">deferred</span><span class="p">.</span><span class="nx">resolve</span><span class="p">(</span><span class="nx">body</span><span class="p">.</span><span class="nx">rows</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">value</span><span class="p">);</span>
</span><span class='line'>      <span class="p">}</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'>
</span><span class='line'>  <span class="k">return</span> <span class="nx">deferred</span><span class="p">.</span><span class="nx">promise</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'><span class="p">};</span>
</span></code></pre></td></tr></table></div></figure>


<p>We can make use of these two functions as follows</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">var</span> <span class="nx">doc</span> <span class="o">=</span> <span class="p">{</span>
</span><span class='line'>   <span class="s2">&quot;playerId&quot;</span><span class="o">:</span> <span class="s2">&quot;4&quot;</span><span class="p">,</span>
</span><span class='line'>   <span class="s2">&quot;type&quot;</span><span class="o">:</span> <span class="s2">&quot;goal&quot;</span>
</span><span class='line'><span class="p">};</span>
</span><span class='line'>
</span><span class='line'><span class="nx">save</span><span class="p">(</span><span class="nx">doc</span><span class="p">)</span>
</span><span class='line'>  <span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">body</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">return</span> <span class="nx">getScore</span><span class="p">(</span><span class="mi">4</span><span class="p">)</span>
</span><span class='line'>  <span class="p">}).</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">score</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">score</span><span class="p">);</span>
</span><span class='line'>  <span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>The above code almost reads like plain English. Save the new document to our db, then get the new score
for player with <code>id=4</code> and then log the score. Awesome!</p>

<p>We ended the second section with the problem of making multiple asyncronuous HTTP requests at the
 same time and deal with the values they each return. We already implemented the <code>getScore</code> function
  as a promise and used it in series with <code>then</code>. Using the same function more than once in parallel is
  almost as easy.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;/match&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">Q</span><span class="p">.</span><span class="nx">all</span><span class="p">([</span>
</span><span class='line'>    <span class="nx">getScore</span><span class="p">(</span><span class="s2">&quot;1&quot;</span><span class="p">),</span>
</span><span class='line'>    <span class="nx">getScore</span><span class="p">(</span><span class="s2">&quot;2&quot;</span><span class="p">),</span>
</span><span class='line'>    <span class="nx">getScore</span><span class="p">(</span><span class="s2">&quot;3&quot;</span><span class="p">),</span>
</span><span class='line'>    <span class="nx">getScore</span><span class="p">(</span><span class="s2">&quot;4&quot;</span><span class="p">)</span>
</span><span class='line'>  <span class="p">]).</span><span class="nx">spread</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">pOne</span><span class="p">,</span> <span class="nx">pTwo</span><span class="p">,</span> <span class="nx">pThree</span><span class="p">,</span> <span class="nx">pFour</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">res</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="s1">&#39;match&#39;</span><span class="p">,</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">title</span><span class="o">:</span> <span class="s1">&#39;The match&#39;</span><span class="p">,</span>
</span><span class='line'>        <span class="nx">john</span><span class="o">:</span> <span class="nx">pOne</span><span class="p">,</span>
</span><span class='line'>        <span class="nx">jack</span><span class="o">:</span> <span class="nx">pTwo</span><span class="p">,</span>
</span><span class='line'>        <span class="nx">chris</span><span class="o">:</span> <span class="nx">pThree</span><span class="p">,</span>
</span><span class='line'>        <span class="nx">nick</span><span class="o">:</span> <span class="nx">pFour</span>
</span><span class='line'>      <span class="p">})</span>
</span><span class='line'>    <span class="p">})</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p><code>Q.all</code> turns an array of promises into a single promise. <code>Spread</code> does what it&#8217;s named after
 and spreads the values over the arguments of our fulfillment handling function. That means
  <code>pOne</code> corresponds to the returned value of <code>getScore("1")</code>, <code>pTwo</code> to <code>getScore("2")</code> and so
  on. This makes it very easy to perform multiple asynchronuous HTTP request and continue as
soon as they are all done.</p>

<p>Here is a screenshot of a sample app I built to demonstrate all the principles I&#8217;ve talked about.</p>

<p><img src="https://s3.amazonaws.com/mircozeiss.com/couchdb-promises-nano.png" title="Express app for analyzing soccer players" ></p>

<h3>Conclusion</h3>

<p>CouchDB with Node.js, nano and q is a powerful combination. Huge web applications
 can be written while keeping a testable and maintainable structure. To learn more about promises
 I recommend watching the excellent talk by Alex McPherson <a href="http://www.youtube.com/watch?v=juRtEEsHI9E">I .promise() to show you .when() to use Deferreds</a>.
 In this post I didn&#8217;t talk about <a href="https://github.com/kriskowal/q#handling-errors">error handling</a> when using promises. That would have been too much,
 but make sure you always handle errors, as they might crash your whole application.</p>

<p>So start using promises today and
 follow the <a href="http://blog.izs.me/post/48281998870/unix-philosophy-and-node-js">unix philosophy</a>:</p>

<blockquote><p>Write programs that do one thing and do it well.</p></blockquote>

<p>As always you can find the whole code with a working Express sample application at GitHub <a href="https://github.com/zeMirco/zemirco.github.io/tree/source/code-examples/couchdb-promises">couchdb-promises</a>.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[How to pass JavaScript variables from a server to Angular.js]]></title>
    <link href="http://mircozeiss.com/how-to-pass-javascript-variables-from-a-server-to-angular/"/>
    <updated>2013-04-13T00:00:00+02:00</updated>
    <id>http://mircozeiss.com/how-to-pass-javascript-variables-from-a-server-to-angular</id>
    <content type="html"><![CDATA[<p>I came across the problem of sending JavaScript variables from my backend,
in this case an <a href="http://expressjs.com/">Express.js</a> server,
to my frontend, means an <a href="http://angularjs.org/">Angular.js</a> controller. I&#8217;m using <a href="http://jade-lang.com/">Jade</a> as my template engine but the
presented solutions should work with others, too.</p>

<p>Basically you&#8217;ve got three options for doing this:</p>

<ol>
<li>Put the variable into the view file inside a <code>script</code> tag</li>
<li>Make an HTTP request from Angular and serve the data as JSON from the
backend</li>
<li>Be smart and use <code>ng-init</code></li>
</ol>


<p>At the end of the article you find a link to a GitHub repo containing working
examples for all the presented solutions. To play with the code fork and
modify it according to your needs or start from scratch and add code while
reading on. So, let&#8217;s start.</p>

<p>First create an empty directory, use <code>express</code> command to create all necessary files and run
<code>npm install</code> to download additional modules. At the end start your server with <code>node app.js</code>.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>mkdir express-to-ngcontroller
</span><span class='line'><span class="nb">cd </span>express-to-ngcontroller
</span><span class='line'>express
</span><span class='line'>npm install
</span><span class='line'>node app.js
</span></code></pre></td></tr></table></div></figure>


<p>Afterwards you should see the message</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>Express server listening on port 3000
</span></code></pre></td></tr></table></div></figure>


<p>So far we&#8217;ve just set up our backend. Now it&#8217;s time to add some Angular code to your <code>layout.jade</code>.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>doctype 5
</span><span class='line'>html<span class="o">(</span>ng-app<span class="o">)</span>
</span><span class='line'>  head
</span><span class='line'>    <span class="nv">title</span><span class="o">=</span> title
</span><span class='line'>    link<span class="o">(</span><span class="nv">rel</span><span class="o">=</span><span class="s1">&#39;stylesheet&#39;</span>, <span class="nv">href</span><span class="o">=</span><span class="s1">&#39;/stylesheets/style.css&#39;</span><span class="o">)</span>
</span><span class='line'>    script<span class="o">(</span><span class="nv">src</span><span class="o">=</span><span class="s2">&quot;https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js&quot;</span><span class="o">)</span>
</span><span class='line'>    script<span class="o">(</span><span class="nv">src</span><span class="o">=</span><span class="s2">&quot;/javascripts/controller.js&quot;</span><span class="o">)</span>
</span><span class='line'>  body
</span><span class='line'>    a<span class="o">(</span><span class="nv">href</span><span class="o">=</span><span class="s2">&quot;/solution-one&quot;</span><span class="o">)</span> solution one
</span><span class='line'>    span -
</span><span class='line'>    a<span class="o">(</span><span class="nv">href</span><span class="o">=</span><span class="s2">&quot;/solution-two&quot;</span><span class="o">)</span> solution two
</span><span class='line'>    span -
</span><span class='line'>    a<span class="o">(</span><span class="nv">href</span><span class="o">=</span><span class="s2">&quot;/solution-three&quot;</span><span class="o">)</span> solution three
</span><span class='line'>    block content
</span></code></pre></td></tr></table></div></figure>


<p>Let&#8217;s have a look at the above code. Activate Angular for the whole page by
adding <code>ng-app</code> as an attribute to the <code>html</code> tag. Load <code>angular.min.js</code> from
 Google CDN and <code>controller.js</code> from file. Inside the body I created a basic
 menu to navigate from one
solution to the other.</p>

<p>Last but not least create some dummy data at the server. In production this
data is loaded from a database, but in this example I want to keep everything
 nice and simple. Copy the following code to your <code>app.js</code>.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">var</span> <span class="nx">users</span> <span class="o">=</span> <span class="p">{</span>
</span><span class='line'>  <span class="mi">1</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;john&#39;</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">email</span><span class="o">:</span> <span class="s1">&#39;john@email.com&#39;</span>
</span><span class='line'>  <span class="p">},</span>
</span><span class='line'>  <span class="mi">2</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;peter&#39;</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">email</span><span class="o">:</span> <span class="s1">&#39;peter@email.com&#39;</span>
</span><span class='line'>  <span class="p">},</span>
</span><span class='line'>  <span class="mi">3</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;max&#39;</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">email</span><span class="o">:</span> <span class="s1">&#39;max@email.com&#39;</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">};</span>
</span></code></pre></td></tr></table></div></figure>


<p>Now everything should be set up and we can start tinkering with the different
 solutions.</p>

<h3>1. Put variable inside view file</h3>

<p>Inside your <code>app.js</code> file create an additional route for <code>GET /solution-one</code></p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;/solution-one&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">res</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="s1">&#39;solutionOne&#39;</span><span class="p">,</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">title</span><span class="o">:</span> <span class="s1">&#39;Express and Angular marriage&#39;</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">users</span><span class="o">:</span> <span class="nx">users</span>
</span><span class='line'>  <span class="p">})</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>We pass our <code>users</code> object to the view as a local variable named
<code>users</code>. Running this code would throw an error as we haven&#8217;t created the view
<code>solutionOne.jade</code> yet. Create this file inside the <code>views/</code> directory and
put the following code inside</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kr">extends</span> <span class="nx">layout</span>
</span><span class='line'>
</span><span class='line'><span class="nx">block</span> <span class="nx">content</span>
</span><span class='line'>  <span class="nx">div</span><span class="p">(</span><span class="nx">ng</span><span class="o">-</span><span class="nx">controller</span><span class="o">=</span><span class="s2">&quot;UserCtrl&quot;</span><span class="p">)</span>
</span><span class='line'>    <span class="nx">h1</span><span class="o">=</span> <span class="nx">title</span>
</span><span class='line'>    <span class="nx">p</span> <span class="nx">Welcome</span> <span class="nx">to</span> <span class="err">#</span><span class="p">{</span><span class="nx">title</span><span class="p">}</span>
</span><span class='line'>    <span class="nx">ul</span>
</span><span class='line'>      <span class="nx">li</span><span class="p">(</span><span class="nx">ng</span><span class="o">-</span><span class="nx">repeat</span><span class="o">=</span><span class="s2">&quot;user in users&quot;</span><span class="p">)</span> <span class="p">{{</span> <span class="nx">user</span><span class="p">.</span><span class="nx">name</span> <span class="p">}}</span> <span class="o">-</span> <span class="p">{{</span><span class="nx">user</span><span class="p">.</span><span class="nx">email</span><span class="p">}}</span>
</span><span class='line'>  <span class="nx">script</span>
</span><span class='line'>    <span class="kd">var</span> <span class="nx">users</span> <span class="o">=</span> <span class="o">!</span><span class="p">{</span><span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">users</span><span class="p">)}</span>
</span></code></pre></td></tr></table></div></figure>


<p>With <code>ng-controller="UserCtrl"</code> we tell Angular which controller we&#8217;d like
 to use for all the DOM children of this element. At the bottom of the file
 we&#8217;ve put some extra JavaScript with a global variable called <code>users</code> that
 loads the contents from the local variable <code>users</code> passed to the view.
 Notice that we have to use <code>!{}</code> instead of <code>#{}</code>, which is usually used in
 Jade for interpolation. However <code>#{}</code> escapes HTML code and would create
 something like this</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">var</span> <span class="nx">users</span> <span class="o">=</span> <span class="p">{</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="mi">1</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="o">:</span><span class="p">{</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="nx">name</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="o">:&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="nx">john</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;,</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="nx">email</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="o">:&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="nx">john</span><span class="err">@</span><span class="nx">email</span><span class="p">.</span><span class="nx">com</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;},</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="mi">2</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="o">:</span><span class="p">{</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="nx">name</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="o">:&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="nx">peter</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;,</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="nx">email</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="o">:&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="nx">peter</span><span class="err">@</span><span class="nx">email</span><span class="p">.</span><span class="nx">com</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;},</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="mi">3</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="o">:</span><span class="p">{</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="nx">name</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="o">:&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="nx">max</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;,</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="nx">email</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="o">:&amp;</span><span class="nx">quot</span><span class="p">;</span><span class="nx">max</span><span class="err">@</span><span class="nx">email</span><span class="p">.</span><span class="nx">com</span><span class="o">&amp;</span><span class="nx">quot</span><span class="p">;}}</span>
</span></code></pre></td></tr></table></div></figure>


<p>That&#8217;s not what we want. We want a nicely formatted String representation of
our JSON object. That&#8217;s why we need <code>!{}</code>.</p>

<p>Then we need to load the content of this variable into our Angular scope.
This is necessary for the <code>ng-repeat</code> directive as it doesn&#8217;t work with
variables, which are outside of the Angular scope. Open <code>controller.js</code> and
 put the following code inside.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">function</span> <span class="nx">UserCtrl</span><span class="p">(</span><span class="nx">$scope</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">$scope</span><span class="p">.</span><span class="nx">users</span> <span class="o">=</span> <span class="nx">users</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>Start the server with <code>node app.js</code> and navigate to <code>/solution-one</code>. You
should see a list with our three users where each list item contains the
<code>name</code> and <code>email</code>. Nice, solution one works but let&#8217;s have a look at the
pros and cons.</p>

<h4>Pro</h4>

<p>Solution one is probably the easiest to understand and fastest to implement.
Every step is comprehensible and nothing fancy is going on.</p>

<h4>Contra</h4>

<p>Using global variables in JavaScript is a No-Go. However in this case it is
not that bad as the content of the global variable <code>users</code> is loaded into
scope at page load. Manipulating <code>users</code> afterwards doesn&#8217;t have any effects
on the scope and our frontend.</p>

<p>Still it is not the best solution. Let&#8217;s look at another one.</p>

<h3>2. HTTP request from Angular to a JSON API</h3>

<p>Inside <code>app.js</code> create another route for <code>GET /solution-two</code></p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;/solution-two&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">res</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="s1">&#39;solutionTwo&#39;</span><span class="p">,</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">title</span><span class="o">:</span> <span class="s1">&#39;Express and Angular marriage&#39;</span>
</span><span class='line'>  <span class="p">})</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>and create the view <code>solutionTwo.jade</code> inside the <code>views/</code> folder with the
following content</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kr">extends</span> <span class="nx">layout</span>
</span><span class='line'>
</span><span class='line'><span class="nx">block</span> <span class="nx">content</span>
</span><span class='line'>  <span class="nx">div</span><span class="p">(</span><span class="nx">ng</span><span class="o">-</span><span class="nx">controller</span><span class="o">=</span><span class="s2">&quot;UserTwoCtrl&quot;</span><span class="p">)</span>
</span><span class='line'>    <span class="nx">h1</span><span class="o">=</span> <span class="nx">title</span>
</span><span class='line'>    <span class="nx">p</span> <span class="nx">Welcome</span> <span class="nx">to</span> <span class="err">#</span><span class="p">{</span><span class="nx">title</span><span class="p">}</span>
</span><span class='line'>    <span class="nx">ul</span>
</span><span class='line'>      <span class="nx">li</span><span class="p">(</span><span class="nx">ng</span><span class="o">-</span><span class="nx">repeat</span><span class="o">=</span><span class="s2">&quot;user in users&quot;</span><span class="p">)</span> <span class="p">{{</span><span class="nx">user</span><span class="p">.</span><span class="nx">name</span><span class="p">}}</span> <span class="o">-</span> <span class="p">{{</span><span class="nx">user</span><span class="p">.</span><span class="nx">email</span><span class="p">}}</span>
</span></code></pre></td></tr></table></div></figure>


<p>You might have noticed that we haven&#8217;t passed any data as local variables
from our Express backend to the view. When you start the server and navigate
with your browser to <code>/solution-one</code> you won&#8217;t see any users listed. We did
add another controller <code>UserTwoCtrl</code> to our view and we will add some
functionality now.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">function</span> <span class="nx">UserTwoCtrl</span><span class="p">(</span><span class="nx">$scope</span><span class="p">,</span> <span class="nx">$http</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">$http</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;/solution-two/data&#39;</span><span class="p">).</span><span class="nx">success</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">$scope</span><span class="p">.</span><span class="nx">users</span> <span class="o">=</span> <span class="nx">data</span>
</span><span class='line'>  <span class="p">})</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>As soon as the controller is initiated by Angular it automatically makes a
 GET request to <code>/solution-two/data</code> and assigns the fetched data to <code>$scope.users</code>.
 Now refresh the page and see what happened. You should see an
 error saying</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">Failed</span> <span class="nx">to</span> <span class="nx">load</span> <span class="nx">resource</span><span class="o">:</span> <span class="nx">the</span> <span class="nx">server</span> <span class="nx">responded</span> <span class="kd">with</span> <span class="nx">a</span> <span class="nx">status</span> <span class="nx">of</span> <span class="mi">404</span> <span class="p">(</span><span class="nx">Not</span> <span class="nx">Found</span><span class="p">)</span>
</span></code></pre></td></tr></table></div></figure>


<p>Your terminal running the server should log</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">GET</span> <span class="o">/</span><span class="nx">solution</span><span class="o">-</span><span class="nx">two</span><span class="o">/</span><span class="nx">data</span> <span class="mi">404</span>
</span></code></pre></td></tr></table></div></figure>


<p>It simply means that we haven&#8217;t implemented the route <code>GET
/solution-two/data</code> yet. So let&#8217;s do this by adding the following code to the
 <code>app.js</code> file</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;/solution-two/data&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">res</span><span class="p">.</span><span class="nx">json</span><span class="p">(</span><span class="nx">users</span><span class="p">);</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>Restart the server and with your browser go to <code>/solution-two/data</code>. You
should see our <code>users</code> object as JSON. Now go to <code>/solution-two</code> and, voila,
everything works as expected. Three list items are created each showing name
and email. The screenshot shows the extra request as the last action.</p>

<p><img src="https://s3.amazonaws.com/mircozeiss.com/angular-extra-http-request.png" title="Angular HTTP request fetching JSON data" ></p>

<h4>Pro</h4>

<p>Making HTTP request in order to get JSON data is common these days.
Every major web service offers some kind of API to allow third party access.
In theses cases, where you don&#8217;t have the necessary data on your own server,
it is the best solution to make an HTTP request from your frontend. You
could, of course, make the request from the server, get the data and send it
to the client as shown in solution one. This, however,
adds unnecessary overhead to our server and by calling the API from the
client we can save valuable resources.</p>

<h4>Contra</h4>

<p>The second solution needs the most additional code and also an extra route
from which the data is served as JSON. This can get a bit messy because you
basically have to serve every route twice. Once for the view and once for the
data. Therefore it is still not the perfect solution, which leads us to our last
method.</p>

<h3>3. Be smart and use ng-init</h3>

<p>The third and probably best solution makes use of the <a href="http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngInit">ngInit</a> directive.</p>

<blockquote><p>The ngInit directive specifies initialization tasks to be executed before
the template enters execution mode during bootstrap.</p></blockquote>

<p>What does that mean?</p>

<p>Short answer: The expression (variable + content) given to ngInit is loaded
into scope and made available under this name.</p>

<p>Let&#8217;s have a look at the example from the Angular docs</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="cp">&lt;!doctype html&gt;</span>
</span><span class='line'><span class="nt">&lt;html</span> <span class="na">ng-app</span><span class="nt">&gt;</span>
</span><span class='line'>  <span class="nt">&lt;head&gt;</span>
</span><span class='line'>    <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://code.angularjs.org/angular-1.0.2.min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</span><span class='line'>  <span class="nt">&lt;/head&gt;</span>
</span><span class='line'>  <span class="nt">&lt;body&gt;</span>
</span><span class='line'>    <span class="nt">&lt;div</span> <span class="na">ng-init=</span><span class="s">&quot;greeting=&#39;Hello&#39;; person=&#39;World&#39;&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>      {{greeting}} {{person}}!
</span><span class='line'>    <span class="nt">&lt;/div&gt;</span>
</span><span class='line'>  <span class="nt">&lt;/body&gt;</span>
</span><span class='line'><span class="nt">&lt;/html&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>The variable <code>$scope.greeting</code> holds the String <code>'Hello'</code> and <code>$scope.person='World'</code>. Both are available inside the scope although not explicitly
 specified inside a controller.</p>

<p>We could rewrite and simplify the example like this</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">function</span> <span class="nx">MyCtrl</span><span class="p">(</span><span class="nx">$scope</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">$scope</span><span class="p">.</span><span class="nx">greeting</span> <span class="o">=</span> <span class="s1">&#39;Hello&#39;</span><span class="p">;</span>
</span><span class='line'>  <span class="nx">$scope</span><span class="p">.</span><span class="nx">person</span> <span class="o">=</span> <span class="s1">&#39;World&#39;</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>and</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="cp">&lt;!doctype html&gt;</span>
</span><span class='line'><span class="nt">&lt;html</span> <span class="na">ng-app</span><span class="nt">&gt;</span>
</span><span class='line'>  <span class="nt">&lt;head&gt;</span>
</span><span class='line'>    <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://code.angularjs.org/angular-1.0.2.min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</span><span class='line'>    <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;/javascripts/controller.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</span><span class='line'>  <span class="nt">&lt;/head&gt;</span>
</span><span class='line'>  <span class="nt">&lt;body&gt;</span>
</span><span class='line'>    <span class="nt">&lt;div</span> <span class="na">ng-controller=</span><span class="s">&quot;MyCtrl&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>      {{greeting}} {{person}}!
</span><span class='line'>    <span class="nt">&lt;/div&gt;</span>
</span><span class='line'>  <span class="nt">&lt;/body&gt;</span>
</span><span class='line'><span class="nt">&lt;/html&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>So let&#8217;s combine this approach and our initial problem. First,
add a new route <code>GET /solution-three</code> to <code>app.js</code> and create the
corresponding view <code>solutionThree.jade</code>:</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">app</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;/solution-three&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">res</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="s1">&#39;solutionThree&#39;</span><span class="p">,</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">title</span><span class="o">:</span> <span class="s1">&#39;Express and Angular marriage&#39;</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">users</span><span class="o">:</span> <span class="nx">users</span>
</span><span class='line'>  <span class="p">})</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>




<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kr">extends</span> <span class="nx">layout</span>
</span><span class='line'>
</span><span class='line'><span class="nx">block</span> <span class="nx">content</span>
</span><span class='line'>  <span class="nx">div</span><span class="p">(</span><span class="nx">ng</span><span class="o">-</span><span class="nx">controller</span><span class="o">=</span><span class="s2">&quot;UserThreeCtrl&quot;</span><span class="p">,</span> <span class="nx">ng</span><span class="o">-</span><span class="nx">init</span><span class="o">=</span><span class="s2">&quot;users= #{JSON.stringify(users)}&quot;</span><span class="p">)</span>
</span><span class='line'>    <span class="nx">h1</span><span class="o">=</span> <span class="nx">title</span>
</span><span class='line'>    <span class="nx">p</span> <span class="nx">Welcome</span> <span class="nx">to</span> <span class="err">#</span><span class="p">{</span><span class="nx">title</span><span class="p">}</span>
</span><span class='line'>    <span class="nx">ul</span>
</span><span class='line'>      <span class="nx">li</span><span class="p">(</span><span class="nx">ng</span><span class="o">-</span><span class="nx">repeat</span><span class="o">=</span><span class="s2">&quot;user in users&quot;</span><span class="p">)</span> <span class="p">{{</span><span class="nx">user</span><span class="p">.</span><span class="nx">name</span><span class="p">}}</span> <span class="o">-</span> <span class="p">{{</span><span class="nx">user</span><span class="p">.</span><span class="nx">email</span><span class="p">}}</span>
</span></code></pre></td></tr></table></div></figure>


<p>As you can see we pass our <code>users</code> variable to the Jade template as a local
variable. Inside the template we convert the JSON object to its String
representation and assign it to the Angular variable <code>users</code>. Later on we
have access to this variable and use a regular <code>ngRepeat</code> directive to create
 the list of users. Start the server, navigate to <code>/solution-three</code> and
 you should the expected list of users.</p>

<h4>Pro</h4>

<p>It is the cleanest solution. We don&#8217;t have to use global variables and we
don&#8217;t have to make an extra HTTP request. It is also the solution that needs
the least amount of code.</p>

<h4>Contra</h4>

<p>The concept behind <code>ngInit</code> might be a bit confusing at the beginning. For
further insights and to understand how Angular actually renders a page I
recommend reading <a href="http://docs.angularjs.org/guide/bootstrap">Bootstrap</a> (not
 related to <a href="http://twitter.github.io/bootstrap/">Twitter&#8217;s Bootstrap</a>) and
 <a href="http://docs.angularjs.org/guide/compiler">HTML Compiler</a>.</p>

<h3>Conclusion</h3>

<p>You&#8217;ve learned that several solutions exist for passing data from your backend to an Angular
controller. While solution one being the worst it depends on your architecture and your requirements
whether solution two or three fits better. I personally tend to use the last solution as I have to make
one less request to the server.</p>

<p>As promised at the beginning you can find the working example at GitHub under
 <a href="https://github.com/zeMirco/zemirco.github.io/tree/source/code-examples/server-vars-ngcontroller">server-vars-ngcontroller</a>.</p>

<p><strong>Pro Tip</strong>: Don&#8217;t mix Jade&#8217;s <code>for user in users</code> and <code>ng-repeat="user in users"</code>
 from Angular. I did that once at the beginning and was totally frustrated
 because nothing worked as expected. You can image my feelings when I found
 that mistake. Well, it was late that night!</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Blog Init]]></title>
    <link href="http://mircozeiss.com/blog-init/"/>
    <updated>2013-04-12T00:00:00+02:00</updated>
    <id>http://mircozeiss.com/blog-init</id>
    <content type="html"><![CDATA[<p>I&#8217;ve been playing with the idea for some time and today I finally start my own blog.</p>

<p>You&#8217;ll read about JavaScript, web technologies and solutions I came across developing web applications.</p>

<p> The blog is powered by <a href="http://octopress.org/">Octopress</a> and
 hosted on <a href="http://pages.github.com/">GitHub pages</a>. You can find the repo at
 <a href="https://github.com/zeMirco/zemirco.github.io">zemirco.github.io</a>. I got the domain
 <a href="http://www.mircozeiss.com">mircozeiss.com</a> from <a href="http://www.hetzner.de/en/">Hetzner</a> and, being
 a developer and not a designer, I&#8217;m very thankful for <a href="http://lucaslew.com/">Lucas Lew</a> who
 created the <a href="https://github.com/lucaslew/whitespace">whitespace</a> theme.</p>

<p>If you&#8217;ve got some ideas for improvements send me an email to
<a href="mailto:mirco.zeiss@gmail.com">mirco.zeiss@gmail.com</a> or write something below.</p>
]]></content>
  </entry>
  
</feed>