CouchApps are web applications built using CouchDB, JavaScript, and HTML5. CouchDB is a document-oriented database that stores JSON documents, has a RESTful HTTP API, and is queried using MapReduce views. This talk will answer your fundamental questions about CouchDB and will cover the basics of building CouchApps using jQuery and various jQuery plugins.
6. Problem:
Multiple Platforms
How to create apps for multiple platforms?
Native app for
each supported
platform
Web app
optimized for
targeted platforms
7. Problem:
Multiple Platforms
How 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
8. Problem:
Multiple Platforms
How 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
11. Problem:
Offline Apps
How to create offline apps?
HTML5:
Offline Web[1]
Applications
1. http://diveintohtml5.org/offline.html
2. http://diveintohtml5.org/storage.html
12. Problem:
Offline Apps
How 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
13. Problem:
Offline Apps
How 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
14. Problem:
Offline Apps
How 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
15. Problem:
Offline Apps
How 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
16. Problem:
Offline Apps
How 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
17. Problem:
Offline Apps
How 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
23. Problem:
Synchronization
How 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
24. Problem:
Synchronization
How 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
28. CouchApp
• web app built using JavaScript, CSS and HTML5
• can be packaged up as a “native” app
29. 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
30. 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
+ =
32. 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/
33. 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/
34. 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
35. 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
39. About CouchDB
• a database that stores JSON "documents"
• accessed through HTTP
40. About CouchDB
• a database that stores JSON "documents"
• accessed through HTTP
• queried using views produced by Map/Reduce functions
41. About CouchDB
• a database that stores JSON "documents"
• accessed through HTTP
• queried using views produced by Map/Reduce functions
• can also serve static les
42. 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-effect free" web application server
49. Grocery Sync
Demo app that keeps
your shopping list in
sync between devices.
Links:
• CouchApp code
• iOS code
• Android code
• Presentation about
Couchbase Mobile
53. 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>
54. 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
64. Save a New Document
$.couch.db("mydb").saveDoc({}, {
success: function(data) {
console.log(data);
}
});
65. Save a New Document
$.couch.db("mydb").saveDoc({}, {
success: function(data) {
console.log(data);
}
});
POST http://localhost:5984/mydb 201 Created
66. 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-967a00dff5e02add41819138abb3284d"
}
70. 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-967a00dff5e02add41819138abb3284d"
}
139. 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
140. 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
141. 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
&#x201C;Add to home screen&#x201D; option\n
&#x201C;Add to home screen&#x201D; option\n
&#x201C;Add to home screen&#x201D; option\n
&#x201C;Add to home screen&#x201D; option\n
&#x201C;Add to home screen&#x201D; option\n
\n
&#x201C;Offline Web Applications&#x201D; refers to &#x201C;appcache&#x201D; or &#x201C;application cache&#x201D; which is implemented via a cache manifest file.\n&#x201C;Local Storage&#x201D; refers to the &#x201C;Web Storage API&#x201D; which stores key/value pairs.\n
&#x201C;Offline Web Applications&#x201D; refers to &#x201C;appcache&#x201D; or &#x201C;application cache&#x201D; which is implemented via a cache manifest file.\n&#x201C;Local Storage&#x201D; refers to the &#x201C;Web Storage API&#x201D; which stores key/value pairs.\n
&#x201C;Offline Web Applications&#x201D; refers to &#x201C;appcache&#x201D; or &#x201C;application cache&#x201D; which is implemented via a cache manifest file.\n&#x201C;Local Storage&#x201D; refers to the &#x201C;Web Storage API&#x201D; which stores key/value pairs.\n
&#x201C;Offline Web Applications&#x201D; refers to &#x201C;appcache&#x201D; or &#x201C;application cache&#x201D; which is implemented via a cache manifest file.\n&#x201C;Local Storage&#x201D; refers to the &#x201C;Web Storage API&#x201D; which stores key/value pairs.\n
&#x201C;Offline Web Applications&#x201D; refers to &#x201C;appcache&#x201D; or &#x201C;application cache&#x201D; which is implemented via a cache manifest file.\n&#x201C;Local Storage&#x201D; refers to the &#x201C;Web Storage API&#x201D; which stores key/value pairs.\n
&#x201C;Offline Web Applications&#x201D; refers to &#x201C;appcache&#x201D; or &#x201C;application cache&#x201D; which is implemented via a cache manifest file.\n&#x201C;Local Storage&#x201D; refers to the &#x201C;Web Storage API&#x201D; which stores key/value pairs.\n
&#x201C;Offline Web Applications&#x201D; refers to &#x201C;appcache&#x201D; or &#x201C;application cache&#x201D; which is implemented via a cache manifest file.\n&#x201C;Local Storage&#x201D; refers to the &#x201C;Web Storage API&#x201D; which stores key/value pairs.\n
&#x201C;Offline Web Applications&#x201D; refers to &#x201C;appcache&#x201D; or &#x201C;application cache&#x201D; which is implemented via a cache manifest file.\n&#x201C;Local Storage&#x201D; refers to the &#x201C;Web Storage API&#x201D; which stores key/value pairs.\n
&#x201C;Offline Web Applications&#x201D; refers to &#x201C;appcache&#x201D; or &#x201C;application cache&#x201D; which is implemented via a cache manifest file.\n&#x201C;Local Storage&#x201D; refers to the &#x201C;Web Storage API&#x201D; which stores key/value pairs.\n
&#x201C;Offline Web Applications&#x201D; refers to &#x201C;appcache&#x201D; or &#x201C;application cache&#x201D; which is implemented via a cache manifest file.\n&#x201C;Local Storage&#x201D; refers to the &#x201C;Web Storage API&#x201D; which stores key/value pairs.\n
&#x201C;Offline Web Applications&#x201D; refers to &#x201C;appcache&#x201D; or &#x201C;application cache&#x201D; which is implemented via a cache manifest file.\n&#x201C;Local Storage&#x201D; refers to the &#x201C;Web Storage API&#x201D; which stores key/value pairs.\n
&#x201C;Offline Web Applications&#x201D; refers to &#x201C;appcache&#x201D; or &#x201C;application cache&#x201D; which is implemented via a cache manifest file.\n&#x201C;Local Storage&#x201D; refers to the &#x201C;Web Storage API&#x201D; which stores key/value pairs.\n
\n
Building your own sync feature is difficult.\niCloud is for iOS 5 only.\nCouchbase Mobile works on both iOS and Android devices.\n
Building your own sync feature is difficult.\niCloud is for iOS 5 only.\nCouchbase Mobile works on both iOS and Android devices.\n
Building your own sync feature is difficult.\niCloud is for iOS 5 only.\nCouchbase Mobile works on both iOS and Android devices.\n
Building your own sync feature is difficult.\niCloud is for iOS 5 only.\nCouchbase Mobile works on both iOS and Android devices.\n
Building your own sync feature is difficult.\niCloud is for iOS 5 only.\nCouchbase Mobile works on both iOS and Android devices.\n
Building your own sync feature is difficult.\niCloud is for iOS 5 only.\nCouchbase Mobile works on both iOS and Android devices.\n
Building your own sync feature is difficult.\niCloud is for iOS 5 only.\nCouchbase Mobile works on both iOS and Android devices.\n
\n
Technically, a CouchApp can synchronize with anything else using CouchDB/Couchbase.\n
Technically, a CouchApp can synchronize with anything else using CouchDB/Couchbase.\n
Technically, a CouchApp can synchronize with anything else using CouchDB/Couchbase.\n
Technically, a CouchApp can synchronize with anything else using CouchDB/Couchbase.\n
Technically, a CouchApp can synchronize with anything else using CouchDB/Couchbase.\n
Not the focus of this talk.\n
\n
\n
\n
\n
\n
Static files could include HTML files, images, videos, etc.\nDiscuss &#x201C;side-effect free&#x201D; in the context of CouchDB show and list functions.\n
Static files could include HTML files, images, videos, etc.\nDiscuss &#x201C;side-effect free&#x201D; in the context of CouchDB show and list functions.\n
Static files could include HTML files, images, videos, etc.\nDiscuss &#x201C;side-effect free&#x201D; in the context of CouchDB show and list functions.\n
Static files could include HTML files, images, videos, etc.\nDiscuss &#x201C;side-effect free&#x201D; in the context of CouchDB show and list functions.\n
Static files could include HTML files, images, videos, etc.\nDiscuss &#x201C;side-effect free&#x201D; in the context of CouchDB show and list functions.\n
Static files could include HTML files, images, videos, etc.\nDiscuss &#x201C;side-effect free&#x201D; in the context of CouchDB show and list functions.\n
Geospatial indexing is implemented via GeoCouch.\nCouchbase is also the name of the company behind the product of the same name.\nCouchbase contributes back to CouchDB.\n
Geospatial indexing is implemented via GeoCouch.\nCouchbase is also the name of the company behind the product of the same name.\nCouchbase contributes back to CouchDB.\n
Geospatial indexing is implemented via GeoCouch.\nCouchbase is also the name of the company behind the product of the same name.\nCouchbase contributes back to CouchDB.\n
Geospatial indexing is implemented via GeoCouch.\nCouchbase is also the name of the company behind the product of the same name.\nCouchbase contributes back to CouchDB.\n
CouchDB implements multi-master replication.\nCouchApps are an example of &#x201C;ground computing&#x201D; where data moves from the &#x201C;cloud&#x201D; to the end user&#x2019;s device.\n
\n
I believe the iOS and Android versions are actually native.\n
CouchDB is a great fit for decentralized social apps.\n
This app takes advantage of the geospatial indexing available in GeoCouch.\n
\n
This will need to be served by CouchDB.\njQuery and the CouchDB jQuery plugin ship with CouchDB.\n
\n
Console logging can easily be replaced with DOM manipulation code.\n
Console logging can easily be replaced with DOM manipulation code.\n
Console logging can easily be replaced with DOM manipulation code.\n
\n
\n
\n
This is saving an empty document.\n
This is saving an empty document.\n
This is saving an empty document.\n
\n
\n
\n
\n
\n
\n
A new revision is created when a document is deleted.\n
A new revision is created when a document is deleted.\n
A new revision is created when a document is deleted.\n
This uses long polling, keeping a connection open between client and server.\n
This uses long polling, keeping a connection open between client and server.\n
This uses long polling, keeping a connection open between client and server.\n
\n
\n
\n
\n
\n
This CouchApp tool is written in Python.\nOther CouchApp tooling options are available.\n
This CouchApp tool is written in Python.\nOther CouchApp tooling options are available.\n
\n
\n
\n
\n
\n
\n
\n
Includes account, profile and items widgets out-of-the-box.\n
\n
A database can have multiple CouchApps and/or design documents.\nDesign documents are named &#x201C;_design/<name>&#x201D;.\n
\n
\n
\n
Widgets are wired up to specified DOM elements.\n
File system tree is packaged up as a set of Evently widgets.\nEvently widgets can be deeply nested.\n
File system tree is packaged up as a set of Evently widgets.\nEvently widgets can be deeply nested.\n
\n
\n
Variables can be &#x201C;unescaped&#x201D; by using three braces instead of two.\n&#x201C;Missed&#x201D; (e.g. undefined or null) variables will output nothing.\n
\n
\n
\n
\n
\n
Mustache templates seem to require one, and only one, root element.\n
Mustache templates seem to require one, and only one, root element.\n
\n
\n
\n
\n
Creating a &#x201C;View Profile&#x201D; hyperlink which can be clicked, triggering a &#x201C;viewProfile&#x201D; widget which contains a link &#x201C;back&#x201D; to the first widget.\n
\n
\n
\n
\n
\n
\n
\n
\n
Not necessarily compatible with the Python version.\n