CouchConf NYC CouchApps
Upcoming SlideShare
Loading in...5
×
 

CouchConf NYC CouchApps

on

  • 5,228 views

In this talk we'll see how to build CouchApps using CouchDB, Javascript, and HTML5. We'll look at related tools such as the couchapp command ine tool, the Evently jQuery plugin, the CouchDB API jQuery ...

In this talk we'll see how to build CouchApps using CouchDB, Javascript, and HTML5. We'll look at related tools such as the couchapp command ine tool, the Evently jQuery plugin, the CouchDB API jQuery plugin, the CouchApp Loader, Pathbinder, and the Mustache templating framework.

Statistics

Views

Total Views
5,228
Views on SlideShare
3,761
Embed Views
1,467

Actions

Likes
5
Downloads
88
Comments
0

5 Embeds 1,467

http://bradley-holt.com 1368
http://lanyrd.com 81
http://feeds.feedburner.com 16
http://bradley-holt.com. 1
http://webcache.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • “Add to home screen” option\n
  • “Add to home screen” option\n
  • “Add to home screen” option\n
  • “Add to home screen” option\n
  • “Add to home screen” option\n
  • \n
  • “Offline Web Applications” refers to “appcache” or “application cache” which is implemented via a cache manifest file.\n“Local Storage” refers to the “Web Storage API” which stores key/value pairs.\n
  • “Offline Web Applications” refers to “appcache” or “application cache” which is implemented via a cache manifest file.\n“Local Storage” refers to the “Web Storage API” which stores key/value pairs.\n
  • “Offline Web Applications” refers to “appcache” or “application cache” which is implemented via a cache manifest file.\n“Local Storage” refers to the “Web Storage API” which stores key/value pairs.\n
  • “Offline Web Applications” refers to “appcache” or “application cache” which is implemented via a cache manifest file.\n“Local Storage” refers to the “Web Storage API” which stores key/value pairs.\n
  • “Offline Web Applications” refers to “appcache” or “application cache” which is implemented via a cache manifest file.\n“Local Storage” refers to the “Web Storage API” which stores key/value pairs.\n
  • “Offline Web Applications” refers to “appcache” or “application cache” which is implemented via a cache manifest file.\n“Local Storage” refers to the “Web Storage API” which stores key/value pairs.\n
  • “Offline Web Applications” refers to “appcache” or “application cache” which is implemented via a cache manifest file.\n“Local Storage” refers to the “Web Storage API” which stores key/value pairs.\n
  • “Offline Web Applications” refers to “appcache” or “application cache” which is implemented via a cache manifest file.\n“Local Storage” refers to the “Web Storage API” which stores key/value pairs.\n
  • “Offline Web Applications” refers to “appcache” or “application cache” which is implemented via a cache manifest file.\n“Local Storage” refers to the “Web Storage API” which stores key/value pairs.\n
  • “Offline Web Applications” refers to “appcache” or “application cache” which is implemented via a cache manifest file.\n“Local Storage” refers to the “Web Storage API” which stores key/value pairs.\n
  • “Offline Web Applications” refers to “appcache” or “application cache” which is implemented via a cache manifest file.\n“Local Storage” refers to the “Web Storage API” which stores key/value pairs.\n
  • “Offline Web Applications” refers to “appcache” or “application cache” which is implemented via a cache manifest file.\n“Local Storage” refers to the “Web Storage API” 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 “side-effect free” in the context of CouchDB show and list functions.\n
  • Static files could include HTML files, images, videos, etc.\nDiscuss “side-effect free” in the context of CouchDB show and list functions.\n
  • Static files could include HTML files, images, videos, etc.\nDiscuss “side-effect free” in the context of CouchDB show and list functions.\n
  • Static files could include HTML files, images, videos, etc.\nDiscuss “side-effect free” in the context of CouchDB show and list functions.\n
  • Static files could include HTML files, images, videos, etc.\nDiscuss “side-effect free” in the context of CouchDB show and list functions.\n
  • Static files could include HTML files, images, videos, etc.\nDiscuss “side-effect free” 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 “ground computing” where data moves from the “cloud” to the end user’s device.\n
  • A CouchApp can be used as a working prototypes. If you want to replace it later with a native app, you don’t need to change your entire tool chain.\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
  • Update this file to be a README for your CouchApp\n
  • _attachments/index.html will be the starting point for your CouchApp\n_attachments/style/main.css should be self-explanatory\n
  • _attachments/index.html will be the starting point for your CouchApp\n_attachments/style/main.css should be self-explanatory\n
  • Third-party “vendor” code that ships with CouchApp as a convenience, as well as some useful Evently widgets\n
  • Third-party “vendor” code that ships with CouchApp as a convenience, as well as some useful Evently widgets\n
  • Function definitions for CouchDB MapReduce views\n
  • Function definitions for CouchDB MapReduce views\n
  • \n
  • \n
  • \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 “_design/”.\n
  • \n
  • \n
  • \n
  • You can be productive with Evently once you learn it, but it may be a bit much for regular AJAX developers.\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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Creating a “View Profile” hyperlink which can be clicked, triggering a “viewProfile” widget which contains a link “back” to the first widget.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Not necessarily compatible with the Python version.\n
  • \n
  • \n
  • \n
  • \n
  • \n

CouchConf NYC CouchApps CouchConf NYC CouchApps Presentation Transcript

  • CouchApps withCouchDB, JavaScript and HTML5 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 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: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: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://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: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?
  • 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
  • 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-effect 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-967a00dff5e02add41819138abb3284d"}
  • 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-967a00dff5e02add41819138abb3284d"}
  • Save an Updated Document
  • Save an Updated Documentvar doc = { _id: "0a72c9c36bd169818dc97ed18b000aa4", _rev: "1-967a00dff5e02add41819138abb3284d", title: "CouchApps"};$.couch.db("mydb").saveDoc(doc, { success: function(data) { console.log(data); }});
  • 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
  • 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"}
  • 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-967a00dff5e02add41819138abb3284d" } ] } ], "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 files
  • Vendor Code
  • Vendor Code$ tree -FL 2 vendor
  • Vendor Code$ tree -FL 2 vendorvendor couchapp/ _attachments/ evently/ lib/ metadata.json4 directories, 1 file
  • Map/Reduce Views
  • Map/Reduce Views$ tree -F views
  • Map/Reduce Views$ tree -F viewsviews recent-items/ map.js1 directory, 1 file
  • 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.", … }
  • 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.", … }
  • 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 profile/ profileReady/ 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?
  • Thank You @BradleyHolt http://bradley-holt.com bradley.holt@foundline.comCopyright © 2011 Bradley Holt. All rights reserved.