CouchConf NYC CouchApps

CouchApps withCouchDB, JavaScript and HTML5 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.info/offline.html 2. http://diveintohtml5.info/storage.html

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

Problem:Offline AppsHow to create offline apps? HTML5: IndexedDB HTML5: Offline Web[1] HTML5:Applications Local Storage[2] 1. http://diveintohtml5.info/offline.html 2. http://diveintohtml5.info/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.info/offline.html 2. http://diveintohtml5.info/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.info/offline.html 2. http://diveintohtml5.info/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.info/offline.html 2. http://diveintohtml5.info/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/

README.mdGenerated by CouchAppCouchApps are web applications which can be served directlyfrom CouchDB. This gives them the nice property of replicatingjust like any other data stored in CouchDB. They are also simpleto write as they can use the built-in jQuery libraries and pluginsthat ship with CouchDB.More info about CouchApps here.Deploying this appAssuming you just cloned this app from git, and you havechanged into the app directory in your terminal, you want to push

Attachments

Attachments$ tree -F _attachments

Attachments$ tree -F _attachments_attachments index.html style/ main.css1 directory, 2 ﬁles

Vendor Code

Vendor Code$ tree -FL 2 vendor

Vendor Code$ tree -FL 2 vendorvendor couchapp/ _attachments/ evently/ lib/ metadata.json4 directories, 1 ﬁle

Map/Reduce Views

Map/Reduce Views$ tree -F views

Map/Reduce Views$ tree -F viewsviews recent-items/ map.js1 directory, 1 ﬁle

Map Functionfor Recent Items

Map Functionfor Recent Items$ cat views/recent-items/map.js

Map Functionfor Recent Items$ cat views/recent-items/map.jsfunction(doc) { if (doc.created_at) { emit(doc.created_at, doc); }};

Mapped Documents

Mapped Documents key id value { …"2011-10-04T19:29:10.170Z" "…d498b9f9b3000dd5" "message": "Message 1.", … } { …"2011-10-04T19:30:38.718Z" "…0d498b9f9b3000fb4" "message": "Message 2.", … } { …"2011-10-04T19:31:21.488Z" "…0d498b9f9b30010ed" "message": "Message 3.", … }

CouchApp Metadata

CouchApp Metadata$ cat couchapp.json

CouchApp Metadata$ cat couchapp.json{ "name": "Name of your CouchApp", "description": "CouchApp"}

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

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

At this point, you’ve seen all of thetools needed to build a CouchApp.However…

CouchApp Building Blocks

Evently

Evently is a jQuery plugin forwriting event-based applications.

Custom Events<p id="user"></p><script type="text/javascript">$("#user").evently({ login: function(e, user) { $(this).text(user); }})$("#user").trigger("login", "Bradley");</script>

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/

Alternatives to Evently:

Alternatives to Evently:Backbone.js[1] 1. http://couchapp.org/page/backbone 2. https://github.com/quirkey/soca 3. http://knockoutjs.com/

Alternatives to Evently:Backbone.js[1]Sammy.js and soca[2] 1. http://couchapp.org/page/backbone 2. https://github.com/quirkey/soca 3. http://knockoutjs.com/

Alternatives to Evently:Backbone.js[1]Sammy.js and soca[2]Knockout.js[3] 1. http://couchapp.org/page/backbone 2. https://github.com/quirkey/soca 3. http://knockoutjs.com/

}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>

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

“Missed” VariablesTemplate:<p>Hello, {{name}}.</p>Hash:{ "role": "admin"}Output:<p>Hello, .</p>

False ValuesTemplate:<p>This is not in a section.</p>{{#show}}<p>The "show" variable exists and is not false.</p>{{/show}}Hash:{ "show": false}Output:<p>This is not in a section.</p>

Empty ListsTemplate:<p>This is not in a section.</p>{{#show}}<p>The "show" variable exists and is not false.</p>{{/show}}Hash:{ "role": "admin"}Output:<p>This is not in a section.</p>

Inverted SectionsTemplate:{{^user}} <p>The "user" variable does not exist, is false, or is empty.</p>{{/user}}Hash:{ "user": false}Output: <p>The "user" variable does not exist, is false, or is empty.</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}}

Alternatives to Mustache:

Alternatives to Mustache:jsRender [1] 1. https://github.com/BorisMoore/jsrender 2. https://github.com/BorisMoore/jsviews 3. http://www.handlebarsjs.com/

Alternatives to Mustache:jsRender [1]jsViews[2] 1. https://github.com/BorisMoore/jsrender 2. https://github.com/BorisMoore/jsviews 3. http://www.handlebarsjs.com/

Alternatives to Mustache:jsRender [1]jsViews[2]Handlebars.js[3] 1. https://github.com/BorisMoore/jsrender 2. https://github.com/BorisMoore/jsviews 3. http://www.handlebarsjs.com/

Pathbinder

Pathbinder is a jQuery plugin fortriggering events based on the pathcomponents of a URL hash.

Pathbinder<div id="pro le"></div><script type="text/javascript">$("#pro le").html(<p><a href="#/pro le/Bradley">ViewBradleys Pro le</a></p>);$("#pro le").bind("pro le", function(e, params) { $(this).html("<p>Viewing " + params.id + "s pro le</p>");});$("#pro le").pathbinder("pro le", "/pro le/:id");</script>

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

Alternatives to Pathbinder:

Alternatives to Pathbinder:HTML5 History [1] 1. https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history 2. https://github.com/balupton/history.js

Alternatives to Pathbinder:HTML5 History [1]History.js[2] 1. https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history 2. https://github.com/balupton/history.js

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	1282
http://lanyrd.com	71
http://feeds.feedburner.com	16
http://bradley-holt.com.	1
http://webcache.googleusercontent.com	1

CouchConf NYC CouchApps

by Bradley Holt on Oct 24, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 1,371

Statistics

CouchConf NYC CouchApps — Presentation Transcript