CouchApps withCouchDB & jQuery  Cross-Platform, Offline-Enabled,       Synchronizable Apps
The Problem Set
Problem:Multiple PlatformsHow to create apps for multiple platforms?
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        ...
Problem:Multiple PlatformsHow to create apps for multiple platforms?   Native app for                                Web a...
Problem:Multiple PlatformsHow to create apps for multiple platforms?   Native app for                                Web a...
Problem:Offline AppsHow to create offline apps?
Problem:Offline AppsHow to create offline apps?
Problem:Offline AppsHow to create offline apps?    HTML5: Offline Web[1]Applications                            1. http://divein...
Problem:Offline AppsHow to create offline apps?    HTML5: Offline Web[1]         HTML5:Applications          Local              ...
Problem:Offline AppsHow to create offline apps?                                  HTML5:                                 Indexe...
Problem:Offline AppsHow to create offline apps?                                  HTML5:                                 Indexe...
Problem:Offline AppsHow to create offline apps?                                  HTML5:                                 Indexe...
Problem:Offline AppsHow to create offline apps?                                              HTML5:                           ...
Problem:Offline AppsHow to create offline apps?                                              HTML5:                           ...
Problem:SynchronizationHow to synchronize data between devices, servers and users?
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       ...
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       ...
Problem:SynchronizationHow to synchronize data between devices, servers and users?   Build your own    sync feature       ...
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 Couc...
CouchApp•   web app built using JavaScript, CSS and HTML5•   can be packaged up as a “native” app•   stores data in its ow...
Creating “Native” Mobile Web Apps
jQuery Mobile: Touch-Optimized Web Framework“A uni ed user interfacesystem across all popularmobile device platforms,built...
PhoneGap“PhoneGap is an HTML5 appplatform that allows you toauthor native applicationswith web technologies and getaccess ...
Building iPhone Apps withHTML, CSS, and JavaScript“Its a fact: if you know HTML, CSS,and JavaScript, you already havethe t...
Building Android Apps withHTML, CSS, and JavaScript“If you know HTML, CSS, andJavaScript, you already havethe tools you ne...
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 ...
About CouchDB•   a database that stores JSON "documents"•   accessed through HTTP•   queried using views produced by Map/R...
About CouchDB•   a database that stores JSON "documents"•   accessed through HTTP•   queried using views produced by Map/R...
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 co...
MonoclesDiaspora federated socialweb node implementedas a CouchApp.Links:  • Demo  • Code  • ReadWriteHack    Interview wi...
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"...
The same-origin policy[1] dictates thatyour HTML and AJAX data (JSON) mustbe retrieved from the same origin.              ...
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 ...
All Databases$.couch.allDbs({   success: function(data) {     console.log(data);   }});GET http://localhost:5984/_all_dbs ...
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...
Create a Database$.couch.db("mydb").create({   success: function(data) {     console.log(data);   }});PUT http://localhost...
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://l...
Save a New Document$.couch.db("mydb").saveDoc({}, {   success: function(data) {     console.log(data);   }});POST http://l...
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...
Open a Document$.couch.db("mydb").openDoc("e15d8485…", {   success: function(data) {     console.log(data);   }});GET http...
Save an Updated Document
Save an Updated Documentvar doc = {   _id: "0a72c9c36bd169818dc97ed18b000aa4",   _rev: "1-967a00dff5e02add41819138abb3284d"...
Save an Updated Documentvar doc = {   _id: "0a72c9c36bd169818dc97ed18b000aa4",   _rev: "1-967a00dff5e02add41819138abb3284d"...
Save an Updated Documentvar doc = {   _id: "0a72c9c36bd169818dc97ed18b000aa4",   _rev: "1-967a00dff5e02add41819138abb3284d"...
Remove Document
Remove Documentvar doc = {   _id: "0a72c9c36bd169818dc97ed18b000aa4",   _rev: "2-516027e3179a22a22e06874c374e8ef0"};$.couc...
Remove Documentvar doc = {   _id: "0a72c9c36bd169818dc97ed18b000aa4",   _rev: "2-516027e3179a22a22e06874c374e8ef0"};$.couc...
Remove Documentvar doc = {   _id: "0a72c9c36bd169818dc97ed18b000aa4",   _rev: "2-516027e3179a22a22e06874c374e8ef0"};$.couc...
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/_chang...
Changes$.couch.db("mydb").changes().onChange(function(data) {   console.log(data);});GET http://localhost:5984/mydb/_chang...
DocumentationCouchDB jQuery Plugin Referencehttp://bradley-holt.com/2011/07/couchdb-jquery-plugin-reference/jQuery CouchDB...
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    ...
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/tutoria...
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 functi...
CouchApp Building Blocks
Evently
Evently is a jQuery plugin forwriting event-based applications.
Widgets$("#user").evently({   _init: {     async: function(callback) {        $.couch.session({           success: functio...
CouchApp + Evently
CouchApp + Evently$ tree -F evently
CouchApp + Evently$ tree -F eventlyevently       items/           _changes/                data.js                mustache...
}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": "Jaso...
CouchApp + Evently +Mustache
CouchApp + Evently +Mustache$ tree -F evently/posts
CouchApp + Evently +Mustache$ tree -F evently/postsevently/posts       _init.js       data.js       mustache.html       po...
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>...
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...
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: "/"...
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 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.couc...
HostingIris Couch   • Free (for now)   • Couchbase server   • GeoCouch geospatial indexing   • http://www.iriscouch.comClo...
Documentation and BooksCouchApp Wiki                     Writing and Querying MapReducehttp://couchapp.org/              V...
http://oreilly.com/catalog/9781449303129/   http://oreilly.com/catalog/9781449303433/
Questions?
Thank You                                  @BradleyHolt                             http://bradley-holt.com               ...
jQuery Conference Boston 2011 CouchApps
jQuery Conference Boston 2011 CouchApps
Upcoming SlideShare
Loading in...5
×

jQuery Conference Boston 2011 CouchApps

5,717

Published on

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.

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,717
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
99
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • &amp;#x201C;Add to home screen&amp;#x201D; option\n
  • &amp;#x201C;Add to home screen&amp;#x201D; option\n
  • &amp;#x201C;Add to home screen&amp;#x201D; option\n
  • &amp;#x201C;Add to home screen&amp;#x201D; option\n
  • &amp;#x201C;Add to home screen&amp;#x201D; option\n
  • \n
  • &amp;#x201C;Offline Web Applications&amp;#x201D; refers to &amp;#x201C;appcache&amp;#x201D; or &amp;#x201C;application cache&amp;#x201D; which is implemented via a cache manifest file.\n&amp;#x201C;Local Storage&amp;#x201D; refers to the &amp;#x201C;Web Storage API&amp;#x201D; which stores key/value pairs.\n
  • &amp;#x201C;Offline Web Applications&amp;#x201D; refers to &amp;#x201C;appcache&amp;#x201D; or &amp;#x201C;application cache&amp;#x201D; which is implemented via a cache manifest file.\n&amp;#x201C;Local Storage&amp;#x201D; refers to the &amp;#x201C;Web Storage API&amp;#x201D; which stores key/value pairs.\n
  • &amp;#x201C;Offline Web Applications&amp;#x201D; refers to &amp;#x201C;appcache&amp;#x201D; or &amp;#x201C;application cache&amp;#x201D; which is implemented via a cache manifest file.\n&amp;#x201C;Local Storage&amp;#x201D; refers to the &amp;#x201C;Web Storage API&amp;#x201D; which stores key/value pairs.\n
  • &amp;#x201C;Offline Web Applications&amp;#x201D; refers to &amp;#x201C;appcache&amp;#x201D; or &amp;#x201C;application cache&amp;#x201D; which is implemented via a cache manifest file.\n&amp;#x201C;Local Storage&amp;#x201D; refers to the &amp;#x201C;Web Storage API&amp;#x201D; which stores key/value pairs.\n
  • &amp;#x201C;Offline Web Applications&amp;#x201D; refers to &amp;#x201C;appcache&amp;#x201D; or &amp;#x201C;application cache&amp;#x201D; which is implemented via a cache manifest file.\n&amp;#x201C;Local Storage&amp;#x201D; refers to the &amp;#x201C;Web Storage API&amp;#x201D; which stores key/value pairs.\n
  • &amp;#x201C;Offline Web Applications&amp;#x201D; refers to &amp;#x201C;appcache&amp;#x201D; or &amp;#x201C;application cache&amp;#x201D; which is implemented via a cache manifest file.\n&amp;#x201C;Local Storage&amp;#x201D; refers to the &amp;#x201C;Web Storage API&amp;#x201D; which stores key/value pairs.\n
  • &amp;#x201C;Offline Web Applications&amp;#x201D; refers to &amp;#x201C;appcache&amp;#x201D; or &amp;#x201C;application cache&amp;#x201D; which is implemented via a cache manifest file.\n&amp;#x201C;Local Storage&amp;#x201D; refers to the &amp;#x201C;Web Storage API&amp;#x201D; which stores key/value pairs.\n
  • &amp;#x201C;Offline Web Applications&amp;#x201D; refers to &amp;#x201C;appcache&amp;#x201D; or &amp;#x201C;application cache&amp;#x201D; which is implemented via a cache manifest file.\n&amp;#x201C;Local Storage&amp;#x201D; refers to the &amp;#x201C;Web Storage API&amp;#x201D; which stores key/value pairs.\n
  • &amp;#x201C;Offline Web Applications&amp;#x201D; refers to &amp;#x201C;appcache&amp;#x201D; or &amp;#x201C;application cache&amp;#x201D; which is implemented via a cache manifest file.\n&amp;#x201C;Local Storage&amp;#x201D; refers to the &amp;#x201C;Web Storage API&amp;#x201D; which stores key/value pairs.\n
  • &amp;#x201C;Offline Web Applications&amp;#x201D; refers to &amp;#x201C;appcache&amp;#x201D; or &amp;#x201C;application cache&amp;#x201D; which is implemented via a cache manifest file.\n&amp;#x201C;Local Storage&amp;#x201D; refers to the &amp;#x201C;Web Storage API&amp;#x201D; which stores key/value pairs.\n
  • &amp;#x201C;Offline Web Applications&amp;#x201D; refers to &amp;#x201C;appcache&amp;#x201D; or &amp;#x201C;application cache&amp;#x201D; which is implemented via a cache manifest file.\n&amp;#x201C;Local Storage&amp;#x201D; refers to the &amp;#x201C;Web Storage API&amp;#x201D; which stores key/value pairs.\n
  • &amp;#x201C;Offline Web Applications&amp;#x201D; refers to &amp;#x201C;appcache&amp;#x201D; or &amp;#x201C;application cache&amp;#x201D; which is implemented via a cache manifest file.\n&amp;#x201C;Local Storage&amp;#x201D; refers to the &amp;#x201C;Web Storage API&amp;#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 &amp;#x201C;side-effect free&amp;#x201D; in the context of CouchDB show and list functions.\n
  • Static files could include HTML files, images, videos, etc.\nDiscuss &amp;#x201C;side-effect free&amp;#x201D; in the context of CouchDB show and list functions.\n
  • Static files could include HTML files, images, videos, etc.\nDiscuss &amp;#x201C;side-effect free&amp;#x201D; in the context of CouchDB show and list functions.\n
  • Static files could include HTML files, images, videos, etc.\nDiscuss &amp;#x201C;side-effect free&amp;#x201D; in the context of CouchDB show and list functions.\n
  • Static files could include HTML files, images, videos, etc.\nDiscuss &amp;#x201C;side-effect free&amp;#x201D; in the context of CouchDB show and list functions.\n
  • Static files could include HTML files, images, videos, etc.\nDiscuss &amp;#x201C;side-effect free&amp;#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 &amp;#x201C;ground computing&amp;#x201D; where data moves from the &amp;#x201C;cloud&amp;#x201D; to the end user&amp;#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 &amp;#x201C;_design/&lt;name&gt;&amp;#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 &amp;#x201C;unescaped&amp;#x201D; by using three braces instead of two.\n&amp;#x201C;Missed&amp;#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 &amp;#x201C;View Profile&amp;#x201D; hyperlink which can be clicked, triggering a &amp;#x201C;viewProfile&amp;#x201D; widget which contains a link &amp;#x201C;back&amp;#x201D; to the first widget.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Not necessarily compatible with the Python version.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • jQuery Conference Boston 2011 CouchApps

    1. 1. CouchApps withCouchDB & jQuery Cross-Platform, Offline-Enabled, Synchronizable Apps
    2. 2. The Problem Set
    3. 3. Problem:Multiple PlatformsHow to create apps for multiple platforms?
    4. 4. Problem:Multiple PlatformsHow to create apps for multiple platforms?
    5. 5. Problem:Multiple PlatformsHow to create apps for multiple platforms? Native app for each supported platform
    6. 6. Problem:Multiple PlatformsHow to create apps for multiple platforms? Native app for each supported platform Web app optimized for targeted platforms
    7. 7. 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
    8. 8. 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
    9. 9. Problem:Offline AppsHow to create offline apps?
    10. 10. Problem:Offline AppsHow to create offline apps?
    11. 11. Problem:Offline AppsHow to create offline apps? HTML5: Offline Web[1]Applications 1. http://diveintohtml5.org/offline.html 2. http://diveintohtml5.org/storage.html
    12. 12. 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
    13. 13. 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
    14. 14. 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
    15. 15. 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
    16. 16. 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
    17. 17. 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
    18. 18. Problem:SynchronizationHow to synchronize data between devices, servers and users?
    19. 19. Problem:SynchronizationHow to synchronize data between devices, servers and users?
    20. 20. Problem:SynchronizationHow to synchronize data between devices, servers and users? Build your own sync feature
    21. 21. Problem:SynchronizationHow to synchronize data between devices, servers and users? Build your own sync feature iCloud
    22. 22. Problem:SynchronizationHow to synchronize data between devices, servers and users? Build your own sync feature iCloud Domain-speci c synchronization (e.g. SyncML)
    23. 23. 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
    24. 24. 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
    25. 25. One Possible Solution
    26. 26. CouchApp
    27. 27. CouchApp• web app built using JavaScript, CSS and HTML5
    28. 28. CouchApp• web app built using JavaScript, CSS and HTML5• can be packaged up as a “native” app
    29. 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. 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 + =
    31. 31. Creating “Native” Mobile Web Apps
    32. 32. 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/
    33. 33. 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/
    34. 34. 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
    35. 35. 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
    36. 36. CouchDB and Couchbase
    37. 37. About CouchDB
    38. 38. About CouchDB• a database that stores JSON "documents"
    39. 39. About CouchDB• a database that stores JSON "documents"• accessed through HTTP
    40. 40. About CouchDB• a database that stores JSON "documents"• accessed through HTTP• queried using views produced by Map/Reduce functions
    41. 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. 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
    43. 43. About Couchbase
    44. 44. About Couchbase• superset of CouchDB
    45. 45. About Couchbase• superset of CouchDB• includes geospatial indexing
    46. 46. About Couchbase• superset of CouchDB• includes geospatial indexing• available as Couchbase Mobile for iOS and Android
    47. 47. DeviceSynchronization
    48. 48. CouchApp Examples
    49. 49. Grocery SyncDemo app that keepsyour shopping list insync between devices.Links: • CouchApp code • iOS code • Android code • Presentation about Couchbase Mobile
    50. 50. MonoclesDiaspora federated socialweb node implementedas a CouchApp.Links: • Demo • Code • ReadWriteHack Interview with Max Ogden: Part 1, Part 2
    51. 51. CatMapper“Geospatially referencing cats”Links: • Demo • Code
    52. 52. The CouchDB jQuery Plugin
    53. 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. 54. 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
    55. 55. All Databases
    56. 56. All Databases$.couch.allDbs({ success: function(data) { console.log(data); }});
    57. 57. All Databases$.couch.allDbs({ success: function(data) { console.log(data); }});GET http://localhost:5984/_all_dbs 200 OK
    58. 58. All Databases$.couch.allDbs({ success: function(data) { console.log(data); }});GET http://localhost:5984/_all_dbs 200 OK[ "_replicator", "_users"]
    59. 59. Create a Database
    60. 60. Create a Database$.couch.db("mydb").create({ success: function(data) { console.log(data); }});
    61. 61. Create a Database$.couch.db("mydb").create({ success: function(data) { console.log(data); }});PUT http://localhost:5984/mydb 201 Created
    62. 62. Create a Database$.couch.db("mydb").create({ success: function(data) { console.log(data); }});PUT http://localhost:5984/mydb 201 Created{"ok":true}
    63. 63. Save a New Document
    64. 64. Save a New Document$.couch.db("mydb").saveDoc({}, { success: function(data) { console.log(data); }});
    65. 65. Save a New Document$.couch.db("mydb").saveDoc({}, { success: function(data) { console.log(data); }});POST http://localhost:5984/mydb 201 Created
    66. 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"}
    67. 67. Open a Document
    68. 68. Open a Document$.couch.db("mydb").openDoc("e15d8485…", { success: function(data) { console.log(data); }});
    69. 69. Open a Document$.couch.db("mydb").openDoc("e15d8485…", { success: function(data) { console.log(data); }});GET http://localhost:5984/mydb/e15d8485… 200 OK
    70. 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"}
    71. 71. Save an Updated Document
    72. 72. Save an Updated Documentvar doc = { _id: "0a72c9c36bd169818dc97ed18b000aa4", _rev: "1-967a00dff5e02add41819138abb3284d", title: "CouchApps"};$.couch.db("mydb").saveDoc(doc, { success: function(data) { console.log(data); }});
    73. 73. Save an Updated Documentvar doc = { _id: "0a72c9c36bd169818dc97ed18b000aa4", _rev: "1-967a00dff5e02add41819138abb3284d", title: "CouchApps"};$.couch.db("mydb").saveDoc(doc, { success: function(data) { console.log(data); }});PUT http://localhost:5984/mydb/0a72c9c3… 201 Created
    74. 74. Save an Updated Documentvar doc = { _id: "0a72c9c36bd169818dc97ed18b000aa4", _rev: "1-967a00dff5e02add41819138abb3284d", 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"}
    75. 75. Remove Document
    76. 76. Remove Documentvar doc = { _id: "0a72c9c36bd169818dc97ed18b000aa4", _rev: "2-516027e3179a22a22e06874c374e8ef0"};$.couch.db("mydb").removeDoc(doc, { success: function(data) { console.log(data); }});
    77. 77. 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
    78. 78. 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"}
    79. 79. Changes
    80. 80. Changes$.couch.db("mydb").changes().onChange(function(data) { console.log(data);});
    81. 81. 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
    82. 82. 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-967a00dff5e02add41819138abb3284d" } ] } ], "last_seq":35}
    83. 83. 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
    84. 84. CouchApp Tooling
    85. 85. Compiling and Pushinga CouchApp
    86. 86. Install the CouchApp Tool
    87. 87. Install the CouchApp Tool$ sudo easy_install pip
    88. 88. Install the CouchApp Tool$ sudo easy_install pip$ sudo pip install couchapp
    89. 89. Generate a CouchApp
    90. 90. Generate a CouchApp$ couchapp generate tutorial
    91. 91. Generate a CouchApp$ couchapp generate tutorial2011-09-27 11:54:12 [INFO] /tutorial generated.
    92. 92. Generate a CouchApp$ couchapp generate tutorial2011-09-27 11:54:12 [INFO] /tutorial generated.$ cd tutorial
    93. 93. Generated Files
    94. 94. Generated Files$ tree -FL 1
    95. 95. Generated Files$ tree -FL 1. README.md _attachments/ _id couchapp.json evently/ language lists/ shows/ updates/ vendor/
    96. 96. Push the CouchApp
    97. 97. Push the CouchApp$ couchapp push tutorial
    98. 98. 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
    99. 99. The Generated CouchApp
    100. 100. A CouchApp is entirely self-containedwithin a design document.
    101. 101. 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
    102. 102. CouchApp Building Blocks
    103. 103. Evently
    104. 104. Evently is a jQuery plugin forwriting event-based applications.
    105. 105. 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; } }});
    106. 106. CouchApp + Evently
    107. 107. CouchApp + Evently$ tree -F evently
    108. 108. CouchApp + Evently$ tree -F eventlyevently items/    _changes/    data.js    mustache.html    query.json profile/ profileReady/ mustache.html selectors/ form/
    109. 109. }MustacheLogic-Less Templates
    110. 110. Evently knows how to wire Mustachetemplates and data together.
    111. 111. VariablesTemplate:<p>Hello, {{name}}.</p>Hash:{ "name": "Bradley"}Output:<p>Hello, Bradley.</p>
    112. 112. False or Empty SectionsTemplate:<p>Shown.</p>{{#show}}<p>Not shown.</p>{{/show}}Hash:{ "show": false}Output:<p>Shown.</p>
    113. 113. Inverted SectionsTemplate:{{^user}} <p>Not logged in</p>{{/user}}Hash:{ "user": false}Output: <p>Not logged in</p>
    114. 114. Non-Empty ListsTemplate:{{#users}} <p>{{name}}</p>{{/users}}Hash:{ "users": [ { "name": "Bradley" }, { "name": "Jason" }, ]}Output: <p>Bradley</p> <p>Jason</p>
    115. 115. CouchApp + Evently +Mustache
    116. 116. CouchApp + Evently +Mustache$ tree -F evently/posts
    117. 117. 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
    118. 118. The “Posts” Mustache File
    119. 119. The “Posts” Mustache File$ cat evently/posts/mustache.html
    120. 120. The “Posts” Mustache File$ cat evently/posts/mustache.html<ul>{{#posts}} <li> <a href="/posts/{{id}}">{{title}}</a> </li>{{/posts}}</ul>
    121. 121. The “Post” Mustache File
    122. 122. The “Post” Mustache File$ cat evently/posts/post/mustache.html
    123. 123. 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}}
    124. 124. Pathbinder
    125. 125. Pathbinder is a jQuery plugin fortriggering events based on the pathcomponents of a URL hash.
    126. 126. 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>
    127. 127. An Evently widget’s path de nitioncan be stored in a path.txt le withina CouchApp.
    128. 128. CouchApp + Evently +Pathbinder
    129. 129. CouchApp + Evently +Pathbinder$ tree -F evently/posts
    130. 130. 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
    131. 131. Path Files
    132. 132. Path Files$ cat evently/posts/path.txt
    133. 133. Path Files$ cat evently/posts/path.txt/posts
    134. 134. Path Files$ cat evently/posts/path.txt/posts$ cat evently/posts/post/path.txt
    135. 135. Path Files$ cat evently/posts/path.txt/posts$ cat evently/posts/post/path.txt/posts/:id
    136. 136. Resources
    137. 137. 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
    138. 138. 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
    139. 139. 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
    140. 140. http://oreilly.com/catalog/9781449303129/ http://oreilly.com/catalog/9781449303433/
    141. 141. Questions?
    142. 142. Thank You @BradleyHolt http://bradley-holt.com bradley.holt@foundline.comCopyright © 2011 Bradley Holt. All rights reserved.
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×