jQuery Conference Boston 2011 CouchApps

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

The Problem Set

Problem:Multiple PlatformsHow to create apps for multiple platforms?

Problem:Multiple PlatformsHow to create apps for multiple platforms? Native app for each supported platform

Problem:Multiple PlatformsHow to create apps for multiple platforms? Native app for each supported platform Web app optimized for targeted platforms

Problem:Multiple PlatformsHow to create apps for 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 AppsHow to create oﬄine apps?

Problem:Offline AppsHow to create offline apps? HTML5: Offline Web[1]Applications 1. http://diveintohtml5.org/offline.html 2. http://diveintohtml5.org/storage.html

Problem:Offline AppsHow to create offline apps? HTML5: Offline Web[1] HTML5:Applications Local Storage[2] 1. http://diveintohtml5.org/offline.html 2. http://diveintohtml5.org/storage.html

Problem:Offline AppsHow to create offline apps? HTML5: IndexedDB HTML5: Offline Web[1] HTML5:Applications Local Storage[2] 1. http://diveintohtml5.org/offline.html 2. http://diveintohtml5.org/storage.html

Problem:Offline AppsHow to create offline apps? HTML5: IndexedDB HTML5: Offline Web[1] HTML5:Applications Local Storage[2] HTML5 : Web SQ Databa L se 1. http://diveintohtml5.org/offline.html 2. http://diveintohtml5.org/storage.html

Problem:Offline AppsHow to create offline apps? HTML5: IndexedDB HTML5: Offline Web[1] HTML5:Applications Local Storage[2] HTML5 : Web SQ Databa L se Embedded Database: SQLite 1. http://diveintohtml5.org/offline.html 2. http://diveintohtml5.org/storage.html

Problem:Offline AppsHow to create offline apps? HTML5: IndexedDB HTML5: Offline Web[1] HTML5:Applications Local Storage[2] HTML5 : Web SQ Databa L se Embedded Embedded Database: Database: SQLite CouchDB/ Couchbase 1. http://diveintohtml5.org/offline.html 2. http://diveintohtml5.org/storage.html

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

Problem:SynchronizationHow to synchronize data between devices, servers and users? Build your own sync feature

Problem:SynchronizationHow to synchronize data between devices, servers and users? Build your own sync feature iCloud

Problem:SynchronizationHow to synchronize data between devices, servers and users? Build your own sync feature iCloud Domain-speci c synchronization (e.g. SyncML)

Problem:SynchronizationHow to synchronize data between devices, servers and users? Build your own sync feature iCloud Domain-speci c CouchDB/ synchronization (e.g. SyncML) Couchbase Mobile synchronization

One Possible Solution

CouchApp

CouchApp• web app built using JavaScript, CSS and HTML5

CouchApp• web app built using JavaScript, CSS and HTML5• can be packaged up as a “native” app

CouchApp• web app built using JavaScript, CSS and HTML5• can be packaged up as a “native” app• stores data in its own CouchDB/Couchbase database

CouchApp• web app built using JavaScript, CSS and HTML5• can be packaged up as a “native” app• 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 interfacesystem across all popularmobile device platforms,built on the rock-solid jQueryand jQuery UI foundation. Itslightweight code is built withprogressive enhancement,and has a exible, easilythemeable design.”From:http://jquerymobile.com/

PhoneGap“PhoneGap is an HTML5 appplatform that allows you toauthor native applicationswith web technologies and getaccess to APIs and app stores.PhoneGap leverages webtechnologies developersalready know best... HTML andJavaScript.”From:http://www.phonegap.com/

Building iPhone Apps withHTML, CSS, and JavaScript“Its a fact: if you know HTML, CSS,and JavaScript, you already havethe tools you need to developyour own iPhone apps. With thisbook, youll learn how to use theseopen source web technologies todesign and build apps for theiPhone and iPod Touch on theplatform of your choice-withoutusing Objective-C or Cocoa.”From:http://shop.oreilly.com/product/9780596805791.do

Building Android Apps withHTML, CSS, and JavaScript“If you know HTML, CSS, andJavaScript, you already havethe tools you need to developAndroid applications. Thishands-on book shows you howto use these open source webstandards to design and buildapps that can be adapted forany Android device – withouthaving to use Java.”From:http://shop.oreilly.com/product/0636920010067.do

CouchDB and Couchbase

About CouchDB

About CouchDB• a database that stores JSON "documents"

About CouchDB• a database that stores JSON "documents"• accessed through HTTP

About CouchDB• a database that stores JSON "documents"• accessed through HTTP• queried using views produced by Map/Reduce functions

About CouchDB• a database that stores JSON "documents"• accessed through HTTP• queried using views produced by Map/Reduce functions• can also serve static les

About CouchDB• a database that stores JSON "documents"• accessed through HTTP• queried using views produced by Map/Reduce functions• can also serve static les• can act as a "side-eﬀect free" web application server

About Couchbase

About Couchbase• superset of CouchDB

About Couchbase• superset of CouchDB• includes geospatial indexing

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

DeviceSynchronization

CouchApp Examples

Grocery SyncDemo app that keepsyour shopping list insync between devices.Links: • CouchApp code • iOS code • Android code • Presentation about Couchbase Mobile

MonoclesDiaspora federated socialweb node implementedas a CouchApp.Links: • Demo • Code • ReadWriteHack Interview with Max Ogden: Part 1, Part 2

CatMapper“Geospatially referencing cats”Links: • Demo • Code

The CouchDB jQuery Plugin

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 thatyour HTML and AJAX data (JSON) mustbe retrieved from the same origin. 1. http://www.w3.org/Security/wiki/Same_Origin_Policy

All Databases

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

All Databases$.couch.allDbs({ success: function(data) { console.log(data); }});GET http://localhost:5984/_all_dbs 200 OK

All Databases$.couch.allDbs({ success: function(data) { console.log(data); }});GET http://localhost:5984/_all_dbs 200 OK[ "_replicator", "_users"]

Create a Database

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

Create a Database$.couch.db("mydb").create({ success: function(data) { console.log(data); }});PUT http://localhost:5984/mydb 201 Created

Create a Database$.couch.db("mydb").create({ success: function(data) { console.log(data); }});PUT http://localhost:5984/mydb 201 Created{"ok":true}

Save a New Document

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

Save a New Document$.couch.db("mydb").saveDoc({}, { success: function(data) { console.log(data); }});POST http://localhost:5984/mydb 201 Created

Save a New Document$.couch.db("mydb").saveDoc({}, { success: function(data) { console.log(data); }});POST http://localhost:5984/mydb 201 Created{ "ok":true, "id":"e15d848571c8a0352e94738ba6018790", "rev":"1-967a00dﬀ5e02add41819138abb3284d"}

Open a Document

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

Open a Document$.couch.db("mydb").openDoc("e15d8485…", { success: function(data) { console.log(data); }});GET http://localhost:5984/mydb/e15d8485… 200 OK

Open a Document$.couch.db("mydb").openDoc("e15d8485…", { success: function(data) { console.log(data); }});GET http://localhost:5984/mydb/e15d8485… 200 OK{ _id="e15d848571c8a0352e94738ba6018790", _rev="1-967a00dﬀ5e02add41819138abb3284d"}

Save an Updated Document

Save an Updated Documentvar doc = { _id: "0a72c9c36bd169818dc97ed18b000aa4", _rev: "1-967a00dﬀ5e02add41819138abb3284d", title: "CouchApps"};$.couch.db("mydb").saveDoc(doc, { success: function(data) { console.log(data); }});

Save an Updated Documentvar doc = { _id: "0a72c9c36bd169818dc97ed18b000aa4", _rev: "1-967a00dﬀ5e02add41819138abb3284d", title: "CouchApps"};$.couch.db("mydb").saveDoc(doc, { success: function(data) { console.log(data); }});PUT http://localhost:5984/mydb/0a72c9c3… 201 Created

Save an Updated Documentvar doc = { _id: "0a72c9c36bd169818dc97ed18b000aa4", _rev: "1-967a00dﬀ5e02add41819138abb3284d", title: "CouchApps"};$.couch.db("mydb").saveDoc(doc, { success: function(data) { console.log(data); }});PUT http://localhost:5984/mydb/0a72c9c3… 201 Created{ "ok":true, "id":"0a72c9c36bd169818dc97ed18b000aa4", "rev":"2-516027e3179a22a22e06874c374e8ef0"}

Remove Document

Remove Documentvar doc = { _id: "0a72c9c36bd169818dc97ed18b000aa4", _rev: "2-516027e3179a22a22e06874c374e8ef0"};$.couch.db("mydb").removeDoc(doc, { success: function(data) { console.log(data); }});

Remove Documentvar doc = { _id: "0a72c9c36bd169818dc97ed18b000aa4", _rev: "2-516027e3179a22a22e06874c374e8ef0"};$.couch.db("mydb").removeDoc(doc, { success: function(data) { console.log(data); }});DELETE http://localhost:5984/mydb/0a72…?rev=2-51… 200 OK

Remove Documentvar doc = { _id: "0a72c9c36bd169818dc97ed18b000aa4", _rev: "2-516027e3179a22a22e06874c374e8ef0"};$.couch.db("mydb").removeDoc(doc, { success: function(data) { console.log(data); }});DELETE http://localhost:5984/mydb/0a72…?rev=2-51… 200 OK{ "id": "0a72c9c36bd169818dc97ed18b000aa4" "ok":true, "rev":"3-e9a5aa1c486eee23c84fa028bc904991"}

Changes

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

Changes$.couch.db("mydb").changes().onChange(function(data) { console.log(data);});GET http://localhost:5984/mydb/_changes?heartbeat=10000&feed=longpoll&since=34 200 OK

Changes$.couch.db("mydb").changes().onChange(function(data) { 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}

DocumentationCouchDB jQuery Plugin Referencehttp://bradley-holt.com/2011/07/couchdb-jquery-plugin-reference/jQuery CouchDB jsDoc Referencehttp://daleharvey.github.com/jquery.couch.js-docs/symbols/index.html

CouchApp Tooling

Compiling and Pushinga CouchApp

Install the CouchApp Tool

Install the CouchApp Tool$ sudo easy_install pip

Install the CouchApp Tool$ sudo easy_install pip$ sudo pip install couchapp

Generate a CouchApp

Generate a CouchApp$ couchapp generate tutorial

Generate a CouchApp$ couchapp generate tutorial2011-09-27 11:54:12 [INFO] /tutorial generated.

Generate a CouchApp$ couchapp generate tutorial2011-09-27 11:54:12 [INFO] /tutorial generated.$ cd tutorial

Generated Files

Generated Files$ tree -FL 1

Generated Files$ tree -FL 1. README.md _attachments/ _id couchapp.json evently/ language lists/ shows/ updates/ vendor/

Push the CouchApp

Push the CouchApp$ couchapp push tutorial

Push the CouchApp$ couchapp push tutorial2011-09-27 11:55:02 [INFO] Visit your CouchApp here:http://127.0.0.1:5984/tutorial/_design/tutorial/index.html

The Generated CouchApp

A CouchApp is entirely self-containedwithin a design document.

About Design DocumentsA CouchDB design document storesapplication-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

CouchApp Building Blocks

Evently

Evently is a jQuery plugin forwriting event-based applications.

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

CouchApp + Evently

CouchApp + Evently$ tree -F evently

CouchApp + Evently$ tree -F eventlyevently items/ _changes/ data.js mustache.html query.json proﬁle/ proﬁleReady/ mustache.html selectors/ form/

}MustacheLogic-Less Templates

Evently knows how to wire Mustachetemplates and data together.

VariablesTemplate:<p>Hello, {{name}}.</p>Hash:{ "name": "Bradley"}Output:<p>Hello, Bradley.</p>

False or Empty SectionsTemplate:<p>Shown.</p>{{#show}}<p>Not shown.</p>{{/show}}Hash:{ "show": false}Output:<p>Shown.</p>

Inverted SectionsTemplate:{{^user}} <p>Not logged in</p>{{/user}}Hash:{ "user": false}Output: <p>Not logged in</p>

Non-Empty ListsTemplate:{{#users}} <p>{{name}}</p>{{/users}}Hash:{ "users": [ { "name": "Bradley" }, { "name": "Jason" }, ]}Output: <p>Bradley</p> <p>Jason</p>

CouchApp + Evently +Mustache

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

CouchApp + Evently +Mustache$ tree -F evently/postsevently/posts _init.js data.js mustache.html post/ _init.js data.js mustache.html query.json query.json

The “Posts” Mustache File

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

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

Pathbinder is a jQuery plugin fortriggering events based on the pathcomponents 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 nitioncan be stored in a path.txt le withina CouchApp.

CouchApp + Evently +Pathbinder

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

CouchApp + Evently +Pathbinder$ tree -F evently/postsevently/posts _init.js data.js mustache.html path.txt post/ _init.js data.js mustache.html path.txt

Path Files

Path Files$ cat evently/posts/path.txt

Path Files$ cat evently/posts/path.txt/posts

Path Files$ cat evently/posts/path.txt/posts$ cat evently/posts/post/path.txt

Path Files$ cat evently/posts/path.txt/posts$ cat evently/posts/post/path.txt/posts/:id

Resources

Alternative CouchApp Toolsnode.couchapp.js • Command-line tool written for Node.js • https://github.com/mikeal/node.couchapp.jsKanso Framework • Also built using Node.js • http://kansojs.orgsoca • Command-line tool written in Ruby • https://github.com/quirkey/socaReupholster • A simple way to get started developing CouchApps • http://reupholster.iriscouch.com/reupholster/_design/app/index.html

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

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

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

Questions?

http://bradley-holt.com	1712
http://speakerrate.com	114
http://research.metodiev.com	66
http://feeds.feedburner.com	14
http://jqueryvn.blogspot.com	4
http://localhost	1
http://bradley-holt.com.	1

jQuery Conference Boston 2011 CouchApps

by Bradley Holt

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 1,912

Statistics

jQuery Conference Boston 2011 CouchApps Presentation Transcript