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

<channel>
	<title>QuirkeyBlog &#187; CouchDB</title>
	<atom:link href="http://www.quirkey.com/blog/category/couchdb/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.quirkey.com/blog</link>
	<description>A Developer with too little time.</description>
	<lastBuildDate>Mon, 01 Aug 2011 16:07:38 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Sammy.js, CouchDB, and the new web architecture</title>
		<link>http://www.quirkey.com/blog/2009/09/15/sammy-js-couchdb-and-the-new-web-architecture/</link>
		<comments>http://www.quirkey.com/blog/2009/09/15/sammy-js-couchdb-and-the-new-web-architecture/#comments</comments>
		<pubDate>Tue, 15 Sep 2009 13:44:38 +0000</pubDate>
		<dc:creator>AQ</dc:creator>
				<category><![CDATA[CouchDB]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Sammy]]></category>

		<guid isPermaLink="false">http://www.quirkey.com/blog/?p=359</guid>
		<description><![CDATA[UPDATE: My slides and a protected instance (will open up for play soon) or swinger, available here I&#8217;ll be honest. When I created Sammy.js, It was more of an academic exercise then a means to an end. I had ideas for how it could be useful, and had some immediate uses for it, but the [...]]]></description>
			<content:encoded><![CDATA[	<p><em><span class="caps">UPDATE</span>: My slides and a protected instance (will open up for play soon) or swinger, available <a href="http://c.ixxr.net/swinger/_design/swinger/index.html#/preso/jqcon_09/display/1" title="">here</a> </em></p>

	<p>I&#8217;ll be honest. When I created <a href="http://code.quirkey.com/sammy" title="">Sammy.js,</a> It was more of an academic exercise then a means to an end. I had ideas for how it could be useful, and had some immediate uses for it, but the initial thought was &#8216;recreating Sinatra&#8217;s <span class="caps">API</span> in JavaScript&#8217;. Little did I know &#8211; with a little introduction and the work of some clever individuals, its real value would be revealed.</p>

	<p><span id="more-359"></span></p>

	<p>We&#8217;re at the dawn of a new age on the web, or maybe or horizon, or a precipice; the metaphor doesn&#8217;t matter, the point is, things are changing. Specifically, as browsers become more and more powerful, as developers we&#8217;re given new opportunities to rethink how we architect web applications. Whether or not some of the predictions of &#8216;the death of the traditional desktop&#8217; are correct &#8211; whether or not the near future desktop is just the browser &#8211; we now have the power, without proprietary technologies (flash, etc) to create truly desktop like experiences on the web. Thats nothing mind-blowing, we&#8217;ve seen it coming for a little while now.</p>

	<p>Ok, then: let me <em>blow your mind.</em></p>

	<p>Because of the great power that modern browsers provide us as Javascript developers a new paradigm of web development is arising. Lets take a look at the current/traditional model:</p>

	<p><img src="http://img.skitch.com/20090915-6xfj7cp1kx6w884tqw29yk2k4.jpg" alt="Old Way" /></p>

	<p>Here we have a traditional stack. The &#8216;power&#8217; of the application lies on the server: our development platform of choice (Rails, <span class="caps">PHP</span>, etc) sits on top of our database of choice (probably relational, probably <span class="caps">SQL</span>). This server platform renders finished <span class="caps">HTML</span> and maybe decorates those pages with the use of our JS library and our application specific code (Your $(hit)). In this model we&#8217;re using probably at least 3 different programming languages and almost fully on the speed and reliability of our servers for getting data to the user. There&#8217;s probably also at least 3 steps in either direction between data and the user:</p>

	<ul>
		<li>User clicks a link on a page or follows a <span class="caps">URL</span></li>
		<li>The request is sent to the server</li>
		<li>App receives request passes it on to Model/ORM layer</li>
		<li><span class="caps">ORM</span> requests the data from the Database</li>
		<li>Database returns the data to the <span class="caps">ORM</span></li>
		<li><span class="caps">ORM</span> returns the data in a parse-able form to the App</li>
		<li>App converts it into user-readable format and displays it to user</li>
	</ul>

	<p>Obviously, Rails and most other languages frameworks abstract a lot of this away, so we don&#8217;t really have to think in all these steps. They&#8217;re there, though.</p>

	<p><img src="http://img.skitch.com/20090915-c8trr5mh7ukbhg6eukptwsuq3r.jpg" alt="The New Way" /></p>

	<p>Welcome to the new world. <span class="caps">HTTP </span>Databases and <span class="caps">JSON </span>Storage. The simple act of making the database and the browser more powerful on either end has destroyed the need for the middle tier. In the new architecture, Our database (JSON/HTTP based: <a href="http://couchdb.org" title="">CouchDB</a>, <a href="http://getcloudkit.com" title="">Cloudkit</a>) serves data as <span class="caps">JSON</span> directly to the browser. On the browser side we create a much smaller/tighter &#8216;controller&#8217; layer with JavaScript. This handles the directing of the user to the right place, the displaying of the data to the user, and the conversion of user interaction into state + data. This middle piece is jQuery + Sammy.js.</p>

	<p>In my presentation at jQuery Conf this past weekend (<a href="http://c.ixxr.net/swinger/_design/swinger/index.html#/preso/jqcon_09/display/1" title="">slides available here</a>) I demonstrated this concept in a rather meta-tastic way. The presentation tool I used was called <a href="http://github.com/quirkey/swinger" title="">Swinger</a> and it was written using CouchDB, <a href="http://github.com/couchapp/couchapp" title="">CouchApp,</a> and Sammy.js. The application logic was contained in a single JS file that used a Sammy application to do all the routing, getting data in and out of CouchDB and displaying it in a particularly pretty way. The coolest part about this whole thing is that even beyond taking out the middle layer, this implementation removes the traditional static file serving model, too. With the power of CouchApp and _attachments, the javascript and <span class="caps">HTML</span> files needed to serve the application are served directly out of the database. Its like CouchDB and Sammy.js were made for each other. Think about the new steps for this architecture:</p>

	<ul>
		<li>User clicks a link on the page or follows a <span class="caps">URL</span></li>
		<li>Data is requested via <span class="caps">AJAX</span> from the server</li>
		<li>The server proxies to the database or processes the request directly</li>
		<li>The data is returned to Sammy.js as <span class="caps">JSON</span></li>
		<li>Sammy.js uses the data it needs and displays it to the user</li>
	</ul>

	<p>There are a number really amazing and exciting things to note here. First, notice how the application is written in JavaScript <span class="caps">AND</span> the data is JavaScript. The <span class="caps">JSON</span> store might actually be written in another language (CouchDB is Erlang, Cloudkit is Ruby) but we don&#8217;t really ever have to touch those. Personally, I really like JavaScript. Sure, I miss some of Ruby&#8217;s syntax and niceties, but I&#8217;ll give that up pretty quickly for something that still shares some of the similar good features (closures, loose typing) and has a ubiquitous deployment environment (the browser). Second, the end result is probably similar if not better to the end user, as we eliminate the need to reload the page at every request, resulting in a better perceived speed.</p>

	<p>One of the provisions I gave for my talk is that &#8220;I&#8217;m less concerned with speed than awesomeness&#8221;. That rings pretty true here. I don&#8217;t have an architecture like this running in production and getting hit like twitter. I can&#8217;t really speak yet to how well it &#8216;scales&#8217; or how it preforms under load. <span class="caps">I CAN</span> tell you about how awesome it is and how easy and fun it was to develop swinger with Sammy. That&#8217;s really all <em>I</em> need to know right now.</p>
 ]]></content:encoded>
			<wfw:commentRss>http://www.quirkey.com/blog/2009/09/15/sammy-js-couchdb-and-the-new-web-architecture/feed/</wfw:commentRss>
		<slash:comments>41</slash:comments>
		</item>
	</channel>
</rss>

