jQuery Conference Boston 2011 CouchApps

CouchApps with
CouchDB & jQuery
Cross-Platform, Oﬄine-Enabled,
Synchronizable Apps

Problem:
Multiple Platforms
How to create apps for multiple platforms?

Problem:
Multiple Platforms

Native app for
each supported
platform

Problem:
Multiple Platforms

Native app for
each supported
platform
Web app
optimized for
targeted platforms

Problem:
Multiple Platforms

Native app for Web app
each supported packaged up as a
platform
Web app “native” app for
optimized for each platform
targeted platforms

Problem:
Oﬄine Apps
How to create oﬄine apps?

Problem:
Offline Apps

HTML5:
Offline Web[1]
Applications

1. http://diveintohtml5.org/offline.html
2. http://diveintohtml5.org/storage.html

Problem:
Oﬄine Apps

HTML5:
Oﬄine Web[1] HTML5:
Applications Local
Storage[2]


Problem:
Oﬄine Apps

HTML5:
IndexedDB
HTML5:
Applications Local
Storage[2]


Problem:
Oﬄine Apps

HTML5:
IndexedDB
HTML5:
Applications Local
Storage[2]
HTML5
:
Web SQ
Databa L
se


Problem:
Oﬄine Apps

HTML5:
IndexedDB
HTML5:
Applications Local
Storage[2]
HTML5
:
Web SQ
Databa L
se
Embedded
Database:
SQLite


Problem:
Oﬄine Apps

HTML5:
IndexedDB
HTML5:
Applications Local
Storage[2]
HTML5
:
Web SQ
Databa L
se
Embedded Embedded
Database: Database:
SQLite CouchDB/
Couchbase

Problem:
Synchronization
How to synchronize data between devices, servers and users?

Problem:
Synchronization

Build your own
sync feature

Problem:
Synchronization

Build your own
sync feature iCloud

Problem:
Synchronization

Build your own
sync feature iCloud

Domain-speci c
synchronization
(e.g. SyncML)

Problem:
Synchronization

Build your own
sync feature iCloud

Domain-speci c CouchDB/
synchronization
(e.g. SyncML)
Couchbase Mobile
synchronization

CouchApp
• web app built using JavaScript, CSS and HTML5

CouchApp
• can be packaged up as a “native” app

CouchApp
• stores data in its own CouchDB/Couchbase database

CouchApp
• stores data in its own CouchDB/Couchbase database
• can synchronize with other CouchApps

+ =

Creating “Native” Mobile Web Apps

jQuery Mobile: Touch-
Optimized Web Framework
“A uni ed user interface
system across all popular
mobile device platforms,
built on the rock-solid jQuery
and jQuery UI foundation. Its
lightweight code is built with
progressive enhancement,
and has a exible, easily
themeable design.”

From:
http://jquerymobile.com/

PhoneGap
“PhoneGap is an HTML5 app
platform that allows you to
author native applications
with web technologies and get
access to APIs and app stores.
PhoneGap leverages web
technologies developers
already know best... HTML and
JavaScript.”

From:
http://www.phonegap.com/

Building iPhone Apps with
HTML, CSS, and JavaScript
“It's a fact: if you know HTML, CSS,
and JavaScript, you already have
the tools you need to develop
your own iPhone apps. With this
book, you'll learn how to use these
open source web technologies to
design and build apps for the
iPhone and iPod Touch on the
platform of your choice-without
using Objective-C or Cocoa.”

From:
http://shop.oreilly.com/
product/9780596805791.do

Building Android Apps with
HTML, CSS, and JavaScript
“If you know HTML, CSS, and
JavaScript, you already have
the tools you need to develop
Android applications. This
hands-on book shows you how
to use these open source web
standards to design and build
apps that can be adapted for
any Android device – without
having to use Java.”

From:
http://shop.oreilly.com/
product/0636920010067.do

About CouchDB
• a database that stores JSON "documents"

About CouchDB
• accessed through HTTP

About CouchDB
• queried using views produced by Map/Reduce functions

About CouchDB
• can also serve static les

About CouchDB
• can also serve static les
• can act as a "side-eﬀect free" web application server

About Couchbase
• superset of CouchDB

About Couchbase
• includes geospatial indexing

About Couchbase
• includes geospatial indexing
• available as Couchbase Mobile for iOS and Android

Grocery Sync
Demo app that keeps
your shopping list in
sync between devices.

Links:
• CouchApp code
• iOS code
• Android code
• Presentation about
Couchbase Mobile

Monocles
Diaspora federated social
web node implemented
as a CouchApp.

Links:
• Demo
• Code
• ReadWriteHack
Interview with
Max Ogden:
Part 1, Part 2

CatMapper
“Geospatially referencing cats”

Links:
• Demo
• Code

HTML Skeleton
<!DOCTYPE html>
<html>
<head>
<title>jQuery and CouchDB</title>
<script src="/_utils/script/jquery.js?1.4.2"></script>
<script src="/_utils/script/jquery.couch.js?0.11.0"></script>
</head>
<body>
</body>
</html>

The same-origin policy[1] dictates that
your HTML and AJAX data (JSON) must
be retrieved from the same origin.

1. http://www.w3.org/Security/wiki/Same_Origin_Policy

All Databases
$.couch.allDbs({
success: function(data) {
console.log(data);
}
});

All Databases
$.couch.allDbs({
console.log(data);
}
});

GET http://localhost:5984/_all_dbs 200 OK

All Databases
$.couch.allDbs({
console.log(data);
}
});

GET http://localhost:5984/_all_dbs 200 OK

[
"_replicator",
"_users"
]

Create a Database
$.couch.db("mydb").create({
console.log(data);
}
});

Create a Database
console.log(data);
}
});

PUT http://localhost:5984/mydb 201 Created

Create a Database
console.log(data);
}
});

PUT http://localhost:5984/mydb 201 Created

{"ok":true}

Save a New Document
$.couch.db("mydb").saveDoc({}, {
console.log(data);
}
});

Save a New Document
console.log(data);
}
});

POST http://localhost:5984/mydb 201 Created

Save a New Document
console.log(data);
}
});

POST http://localhost:5984/mydb 201 Created

{
"ok":true,
"id":"e15d848571c8a0352e94738ba6018790",
"rev":"1-967a00dﬀ5e02add41819138abb3284d"
}

Open a Document
$.couch.db("mydb").openDoc("e15d8485…", {
console.log(data);
}
});

Open a Document
console.log(data);
}
});

GET http://localhost:5984/mydb/e15d8485… 200 OK

Open a Document
console.log(data);
}
});

GET http://localhost:5984/mydb/e15d8485… 200 OK

{
_id="e15d848571c8a0352e94738ba6018790",
_rev="1-967a00dﬀ5e02add41819138abb3284d"
}

Save an Updated Document
var doc = {
_id: "0a72c9c36bd169818dc97ed18b000aa4",
_rev: "1-967a00dﬀ5e02add41819138abb3284d",
title: "CouchApps"
};

$.couch.db("mydb").saveDoc(doc, {
console.log(data);
}
});

var doc = {
_id: "0a72c9c36bd169818dc97ed18b000aa4",
_rev: "1-967a00dﬀ5e02add41819138abb3284d",
title: "CouchApps"
};

console.log(data);
}
});

PUT http://localhost:5984/mydb/0a72c9c3… 201 Created

var doc = {
_id: "0a72c9c36bd169818dc97ed18b000aa4",
_rev: "1-967a00dﬀ5e02add41819138abb3284d",
title: "CouchApps"
};

console.log(data);
}
});

PUT http://localhost:5984/mydb/0a72c9c3… 201 Created

{
"ok":true,
"id":"0a72c9c36bd169818dc97ed18b000aa4",
"rev":"2-516027e3179a22a22e06874c374e8ef0"
}

Remove Document
var doc = {
_id: "0a72c9c36bd169818dc97ed18b000aa4",
_rev: "2-516027e3179a22a22e06874c374e8ef0"
};

$.couch.db("mydb").removeDoc(doc, {
console.log(data);
}
});

Remove Document
var doc = {
_id: "0a72c9c36bd169818dc97ed18b000aa4",
_rev: "2-516027e3179a22a22e06874c374e8ef0"
};

console.log(data);
}
});

DELETE http://localhost:5984/mydb/0a72…?rev=2-51… 200 OK

Remove Document
var doc = {
_id: "0a72c9c36bd169818dc97ed18b000aa4",
_rev: "2-516027e3179a22a22e06874c374e8ef0"
};

console.log(data);
}
});

DELETE http://localhost:5984/mydb/0a72…?rev=2-51… 200 OK

{
"id": "0a72c9c36bd169818dc97ed18b000aa4"
"ok":true,
"rev":"3-e9a5aa1c486eee23c84fa028bc904991"
}

Changes
$.couch.db("mydb").changes().onChange(function(data) {
console.log(data);
});

Changes
console.log(data);
});

GET http://localhost:5984/mydb/_changes
?heartbeat=10000&feed=longpoll&since=34 200 OK

Changes
console.log(data);
});

GET http://localhost:5984/mydb/_changes
?heartbeat=10000&feed=longpoll&since=34 200 OK

{ "results":[
{ "seq":35,
"id":"d12ee5ea1df6baa2b06451f44a01b7b5",
"changes":[
{ "rev":"1-967a00dﬀ5e02add41819138abb3284d" }
]
}
],
"last_seq":35
}

Documentation
CouchDB jQuery Plugin Reference
http://bradley-holt.com/2011/07/couchdb-jquery-plugin-reference/

jQuery CouchDB jsDoc Reference
http://daleharvey.github.com/jquery.couch.js-docs/symbols/index.html

Compiling and Pushing
a CouchApp

Install the CouchApp Tool
$ sudo easy_install pip

Install the CouchApp Tool
$ sudo easy_install pip

$ sudo pip install couchapp

Generate a CouchApp
$ couchapp generate tutorial

Generate a CouchApp

2011-09-27 11:54:12 [INFO] /tutorial generated.

Generate a CouchApp

2011-09-27 11:54:12 [INFO] /tutorial generated.

$ cd tutorial

Generated Files
$ tree -FL 1

.
README.md
_attachments/
_id
couchapp.json
evently/
language
lists/
shows/
updates/
vendor/

Push the CouchApp
$ couchapp push tutorial

Push the CouchApp
$ couchapp push tutorial

2011-09-27 11:55:02 [INFO] Visit your CouchApp here:
http://127.0.0.1:5984/tutorial/_design/tutorial/index.html

A CouchApp is entirely self-contained
within a design document.

About Design Documents
A CouchDB design document stores
application-speci c code such as:
• View de nitions
• Map functions
• Reduce functions
• Show functions
• List functions
• Document update handlers
• Document update validation functions
• Rewrite de nitions
• Arbitrary elds
• Attachments

Evently is a jQuery plugin for
writing event-based applications.

Widgets
$("#user").evently({
_init: {
async: function(callback) {
$.couch.session({
callback(data);
}
});
},
mustache: "<span>{{#name}}Logged in as {{name}}{{/name}}
{{^name}}Not logged in{{/name}}</span>",
data: function(data) {
return data.userCtx;
}
}
});

CouchApp + Evently
$ tree -F evently

CouchApp + Evently
$ tree -F evently

evently
items/
   _changes/
   data.js
   mustache.html
   query.json
proﬁle/
proﬁleReady/
mustache.html
selectors/
form/

}
Mustache
Logic-Less Templates

Evently knows how to wire Mustache
templates and data together.

Variables
Template:
<p>Hello, {{name}}.</p>

Hash:
{
"name": "Bradley"
}

Output:
<p>Hello, Bradley.</p>

False or Empty Sections
Template:
<p>Shown.</p>
{{#show}}
<p>Not shown.</p>
{{/show}}

Hash:
{
"show": false
}

Output:
<p>Shown.</p>

Inverted Sections
Template:
{{^user}}
<p>Not logged in</p>
{{/user}}

Hash:
{
"user": false
}

Output:
<p>Not logged in</p>

Non-Empty Lists
Template:
{{#users}}
<p>{{name}}</p>
{{/users}}

Hash:
{ "users": [
{ "name": "Bradley" },
{ "name": "Jason" },
]
}

Output:
<p>Bradley</p>
<p>Jason</p>

CouchApp + Evently +
Mustache
$ tree -F evently/posts

Mustache

evently/posts
_init.js
data.js
mustache.html
post/
   _init.js
   data.js
   mustache.html
   query.json
query.json

The “Posts” Mustache File
$ cat evently/posts/mustache.html

The “Posts” Mustache File
$ cat evently/posts/mustache.html

<ul>
{{#posts}}
<li>
<a href="/posts/{{id}}">{{title}}</a>
</li>
{{/posts}}
</ul>

The “Post” Mustache File
$ cat evently/posts/post/mustache.html

The “Post” Mustache File
$ cat evently/posts/post/mustache.html

{{#post}}
<article>
<h1>{{title}}</h1>
{{content}}
<p><a href="/posts/{{id}}">{{updated}}</a></p>
</article>
{{/post}}

Pathbinder is a jQuery plugin for
triggering events based on the path
components of a URL hash.

Pathbinder + Evently
<div id="pro le"></div>
<script type="text/javascript">
$("#pro le").evently({
_init: {
path: "/",
mustache: '<p><a href="#/pro le/Bradley">View Pro le</a></p>'
},
viewPro le: {
path: "/pro le/:id",
mustache: '<p>Viewing {{id}}'s pro le; <a href="#/">Back</a></p>',
data: function(e, params) {
return params;
}
}
});
</script>

An Evently widget’s path de nition
can be stored in a path.txt le within
a CouchApp.

Pathbinder

Pathbinder

evently/posts
_init.js
data.js
mustache.html
path.txt
post/
   _init.js
   data.js
   mustache.html
   path.txt

Path Files
$ cat evently/posts/path.txt

Path Files

/posts

Path Files

/posts

$ cat evently/posts/post/path.txt

Path Files

/posts

$ cat evently/posts/post/path.txt

/posts/:id

Alternative CouchApp Tools
node.couchapp.js
• Command-line tool written for Node.js
• https://github.com/mikeal/node.couchapp.js
Kanso Framework
• Also built using Node.js
• http://kansojs.org
soca
• Command-line tool written in Ruby
• https://github.com/quirkey/soca

Reupholster
• A simple way to get started developing CouchApps
• http://reupholster.iriscouch.com/reupholster/_design/app/index.html

Hosting
Iris Couch
• Free (for now)
• Couchbase server
• GeoCouch geospatial indexing
• http://www.iriscouch.com
Cloudant
• Various pricing levels
• Full-text searching
• Ad-hoc queries
• Elastic scaling, clustering and sharding using BigCouch
• https://cloudant.com

Documentation and Books
CouchApp Wiki Writing and Querying MapReduce
http://couchapp.org/ Views in CouchDB
by Bradley Holt (O’Reilly)
CouchDB Wiki 978-1-449-30312-9
http://wiki.apache.org/couchdb/
Scaling CouchDB
CouchDB: The De nitive Guide by Bradley Holt (O’Reilly)
by J. Chris Anderson, Jan 063-6-920-01840-7
Lehnardt and Noah Slater
(O’Reilly) Beginning CouchDB
978-0-596-15589-6 by Joe Lennon (Apress)
978-1-430-27237-3

http://oreilly.com/catalog/9781449303129/ http://oreilly.com/catalog/9781449303433/

jQuery Conference Boston 2011 CouchApps

More Related Content

What's hot

Similar to jQuery Conference Boston 2011 CouchApps

More from Bradley Holt

Recently uploaded

jQuery Conference Boston 2011 CouchApps

Editor's Notes