jQuery Conference Boston 2011 CouchApps
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

jQuery Conference Boston 2011 CouchApps

on

  • 5,459 views

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

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.

Statistics

Views

Total Views
5,459
Views on SlideShare
3,483
Embed Views
1,976

Actions

Likes
5
Downloads
89
Comments
0

7 Embeds 1,976

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

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
  • \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 “_design/”.\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 “unescaped” by using three braces instead of two.\n“Missed” (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 “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
  • Not necessarily compatible with the Python version.\n
  • \n
  • \n
  • \n
  • \n
  • \n

jQuery Conference Boston 2011 CouchApps Presentation Transcript

  • 1. CouchApps withCouchDB & jQuery Cross-Platform, Offline-Enabled, Synchronizable Apps
  • 2. The Problem Set
  • 3. Problem:Multiple PlatformsHow to create apps for multiple platforms?
  • 4. Problem:Multiple PlatformsHow to create apps for multiple platforms?
  • 5. Problem:Multiple PlatformsHow to create apps for multiple platforms? Native app for each supported platform
  • 6. Problem:Multiple PlatformsHow to create apps for multiple platforms? Native app for each supported platform Web app optimized for targeted platforms
  • 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. 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. Problem:Offline AppsHow to create offline apps?
  • 10. Problem:Offline AppsHow to create offline apps?
  • 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. 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. 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. 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. 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. 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. 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. Problem:SynchronizationHow to synchronize data between devices, servers and users?
  • 19. Problem:SynchronizationHow to synchronize data between devices, servers and users?
  • 20. Problem:SynchronizationHow to synchronize data between devices, servers and users? Build your own sync feature
  • 21. Problem:SynchronizationHow to synchronize data between devices, servers and users? Build your own sync feature iCloud
  • 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. 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. 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. One Possible Solution
  • 26. CouchApp
  • 27. CouchApp• web app built using JavaScript, CSS and HTML5
  • 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 + =
  • 31. Creating “Native” Mobile Web Apps
  • 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. 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. 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. 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. CouchDB and Couchbase
  • 37. About CouchDB
  • 38. About CouchDB• a database that stores JSON "documents"
  • 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
  • 43. About Couchbase
  • 44. About Couchbase• superset of CouchDB
  • 45. About Couchbase• superset of CouchDB• includes geospatial indexing
  • 46. About Couchbase• superset of CouchDB• includes geospatial indexing• available as Couchbase Mobile for iOS and Android
  • 47. DeviceSynchronization
  • 48. CouchApp Examples
  • 49. Grocery SyncDemo app that keepsyour shopping list insync between devices.Links: • CouchApp code • iOS code • Android code • Presentation about Couchbase Mobile
  • 50. MonoclesDiaspora federated socialweb node implementedas a CouchApp.Links: • Demo • Code • ReadWriteHack Interview with Max Ogden: Part 1, Part 2
  • 51. CatMapper“Geospatially referencing cats”Links: • Demo • Code
  • 52. The CouchDB jQuery Plugin
  • 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 thatyour HTML and AJAX data (JSON) mustbe retrieved from the same origin. 1. http://www.w3.org/Security/wiki/Same_Origin_Policy
  • 55. All Databases
  • 56. All Databases$.couch.allDbs({ success: function(data) { console.log(data); }});
  • 57. All Databases$.couch.allDbs({ success: function(data) { console.log(data); }});GET http://localhost:5984/_all_dbs 200 OK
  • 58. All Databases$.couch.allDbs({ success: function(data) { console.log(data); }});GET http://localhost:5984/_all_dbs 200 OK[ "_replicator", "_users"]
  • 59. Create a Database
  • 60. Create a Database$.couch.db("mydb").create({ success: function(data) { console.log(data); }});
  • 61. Create a Database$.couch.db("mydb").create({ success: function(data) { console.log(data); }});PUT http://localhost:5984/mydb 201 Created
  • 62. Create a Database$.couch.db("mydb").create({ success: function(data) { console.log(data); }});PUT http://localhost:5984/mydb 201 Created{"ok":true}
  • 63. Save a New Document
  • 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"}
  • 67. Open a Document
  • 68. Open a Document$.couch.db("mydb").openDoc("e15d8485…", { success: function(data) { console.log(data); }});
  • 69. Open a Document$.couch.db("mydb").openDoc("e15d8485…", { success: function(data) { console.log(data); }});GET http://localhost:5984/mydb/e15d8485… 200 OK
  • 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. Save an Updated Document
  • 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. 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. 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. Remove Document
  • 76. Remove Documentvar doc = { _id: "0a72c9c36bd169818dc97ed18b000aa4", _rev: "2-516027e3179a22a22e06874c374e8ef0"};$.couch.db("mydb").removeDoc(doc, { success: function(data) { console.log(data); }});
  • 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. 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. Changes
  • 80. Changes$.couch.db("mydb").changes().onChange(function(data) { console.log(data);});
  • 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. 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. 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. CouchApp Tooling
  • 85. Compiling and Pushinga CouchApp
  • 86. Install the CouchApp Tool
  • 87. Install the CouchApp Tool$ sudo easy_install pip
  • 88. Install the CouchApp Tool$ sudo easy_install pip$ sudo pip install couchapp
  • 89. Generate a CouchApp
  • 90. Generate a CouchApp$ couchapp generate tutorial
  • 91. Generate a CouchApp$ couchapp generate tutorial2011-09-27 11:54:12 [INFO] /tutorial generated.
  • 92. Generate a CouchApp$ couchapp generate tutorial2011-09-27 11:54:12 [INFO] /tutorial generated.$ cd tutorial
  • 93. Generated Files
  • 94. Generated Files$ tree -FL 1
  • 95. Generated Files$ tree -FL 1. README.md _attachments/ _id couchapp.json evently/ language lists/ shows/ updates/ vendor/
  • 96. Push the CouchApp
  • 97. Push the CouchApp$ couchapp push tutorial
  • 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. The Generated CouchApp
  • 100. A CouchApp is entirely self-containedwithin a design document.
  • 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. CouchApp Building Blocks
  • 103. Evently
  • 104. Evently is a jQuery plugin forwriting event-based applications.
  • 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. CouchApp + Evently
  • 107. CouchApp + Evently$ tree -F evently
  • 108. CouchApp + Evently$ tree -F eventlyevently items/    _changes/    data.js    mustache.html    query.json profile/ profileReady/ mustache.html selectors/ form/
  • 109. }MustacheLogic-Less Templates
  • 110. Evently knows how to wire Mustachetemplates and data together.
  • 111. VariablesTemplate:<p>Hello, {{name}}.</p>Hash:{ "name": "Bradley"}Output:<p>Hello, Bradley.</p>
  • 112. False or Empty SectionsTemplate:<p>Shown.</p>{{#show}}<p>Not shown.</p>{{/show}}Hash:{ "show": false}Output:<p>Shown.</p>
  • 113. Inverted SectionsTemplate:{{^user}} <p>Not logged in</p>{{/user}}Hash:{ "user": false}Output: <p>Not logged in</p>
  • 114. Non-Empty ListsTemplate:{{#users}} <p>{{name}}</p>{{/users}}Hash:{ "users": [ { "name": "Bradley" }, { "name": "Jason" }, ]}Output: <p>Bradley</p> <p>Jason</p>
  • 115. CouchApp + Evently +Mustache
  • 116. CouchApp + Evently +Mustache$ tree -F evently/posts
  • 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. The “Posts” Mustache File
  • 119. The “Posts” Mustache File$ cat evently/posts/mustache.html
  • 120. The “Posts” Mustache File$ cat evently/posts/mustache.html<ul>{{#posts}} <li> <a href="/posts/{{id}}">{{title}}</a> </li>{{/posts}}</ul>
  • 121. The “Post” Mustache File
  • 122. The “Post” Mustache File$ cat evently/posts/post/mustache.html
  • 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. Pathbinder
  • 125. Pathbinder is a jQuery plugin fortriggering events based on the pathcomponents of a URL hash.
  • 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. An Evently widget’s path de nitioncan be stored in a path.txt le withina CouchApp.
  • 128. CouchApp + Evently +Pathbinder
  • 129. CouchApp + Evently +Pathbinder$ tree -F evently/posts
  • 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. Path Files
  • 132. Path Files$ cat evently/posts/path.txt
  • 133. Path Files$ cat evently/posts/path.txt/posts
  • 134. Path Files$ cat evently/posts/path.txt/posts$ cat evently/posts/post/path.txt
  • 135. Path Files$ cat evently/posts/path.txt/posts$ cat evently/posts/post/path.txt/posts/:id
  • 136. Resources
  • 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. 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. 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. http://oreilly.com/catalog/9781449303129/ http://oreilly.com/catalog/9781449303433/
  • 141. Questions?
  • 142. Thank You @BradleyHolt http://bradley-holt.com bradley.holt@foundline.comCopyright © 2011 Bradley Holt. All rights reserved.