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        ...
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    ...
README.mdGenerated by CouchAppCouchApps are web applications which can be served directlyfrom CouchDB. This gives them the...
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.j...
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, ...
Mapped Documents
Mapped Documents           key                          id                       value                                    ...
Mapped Documents           key                          id                       value                                    ...
Mapped Documents           key                          id                       value                                    ...
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/tutoria...
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...
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)...
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...
Alternatives to Evently:
Alternatives to Evently:Backbone.js[1]                           1. http://couchapp.org/page/backbone                     ...
Alternatives to Evently:Backbone.js[1]Sammy.js and soca[2]                           1. http://couchapp.org/page/backbone ...
Alternatives to Evently:Backbone.js[1]Sammy.js and soca[2]Knockout.js[3]                           1. http://couchapp.org/...
}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>....
“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}}...
Empty ListsTemplate:<p>This is not in a section.</p>{{#show}}<p>The "show" variable exists and is not false.</p>{{/show}}H...
Inverted SectionsTemplate:{{^user}} <p>The "user" variable does not exist, is false, or is empty.</p>{{/user}}Hash:{  "use...
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...
Alternatives to Mustache:
Alternatives to Mustache:jsRender [1]                            1. https://github.com/BorisMoore/jsrender                ...
Alternatives to Mustache:jsRender [1]jsViews[2]                            1. https://github.com/BorisMoore/jsrender      ...
Alternatives to Mustache:jsRender [1]jsViews[2]Handlebars.js[3]                            1. https://github.com/BorisMoor...
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">ViewBradle...
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
Alternatives to Pathbinder:
Alternatives to Pathbinder:HTML5 History [1]                    1. https://developer.mozilla.org/en/DOM/Manipulating_the_b...
Alternatives to Pathbinder:HTML5 History [1]History.js[2]                    1. https://developer.mozilla.org/en/DOM/Manip...
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               ...
CouchConf NYC CouchApps
CouchConf NYC CouchApps
Upcoming SlideShare
Loading in...5
×

CouchConf NYC CouchApps

5,407

Published on

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.

Published in: Technology, Design
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,407
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
94
Comments
0
Likes
6
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
  • A CouchApp can be used as a working prototypes. If you want to replace it later with a native app, you don&amp;#x2019;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 &amp;#x201C;vendor&amp;#x201D; code that ships with CouchApp as a convenience, as well as some useful Evently widgets\n
  • Third-party &amp;#x201C;vendor&amp;#x201D; 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 &amp;#x201C;_design/&lt;name&gt;&amp;#x201D;.\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 &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
  • \n
  • \n
  • \n
  • \n
  • Not necessarily compatible with the Python version.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • CouchConf NYC CouchApps

    1. 1. CouchApps withCouchDB, JavaScript and HTML5 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.info/offline.html 2. http://diveintohtml5.info/storage.html
    12. 12. 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
    13. 13. 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
    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.info/offline.html 2. http://diveintohtml5.info/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.info/offline.html 2. http://diveintohtml5.info/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.info/offline.html 2. http://diveintohtml5.info/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.info/offline.html 2. http://diveintohtml5.info/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. 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
    97. 97. Attachments
    98. 98. Attachments$ tree -F _attachments
    99. 99. Attachments$ tree -F _attachments_attachments index.html style/ main.css1 directory, 2 files
    100. 100. Vendor Code
    101. 101. Vendor Code$ tree -FL 2 vendor
    102. 102. Vendor Code$ tree -FL 2 vendorvendor couchapp/ _attachments/ evently/ lib/ metadata.json4 directories, 1 file
    103. 103. Map/Reduce Views
    104. 104. Map/Reduce Views$ tree -F views
    105. 105. Map/Reduce Views$ tree -F viewsviews recent-items/ map.js1 directory, 1 file
    106. 106. Map Functionfor Recent Items
    107. 107. Map Functionfor Recent Items$ cat views/recent-items/map.js
    108. 108. Map Functionfor Recent Items$ cat views/recent-items/map.jsfunction(doc) { if (doc.created_at) { emit(doc.created_at, doc); }};
    109. 109. Mapped Documents
    110. 110. 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.", … }
    111. 111. 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.", … }
    112. 112. 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.", … }
    113. 113. CouchApp Metadata
    114. 114. CouchApp Metadata$ cat couchapp.json
    115. 115. CouchApp Metadata$ cat couchapp.json{ "name": "Name of your CouchApp", "description": "CouchApp"}
    116. 116. Push the CouchApp
    117. 117. Push the CouchApp$ couchapp push tutorial
    118. 118. 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
    119. 119. Generated CouchApp
    120. 120. A CouchApp is entirely self-containedwithin a design document.
    121. 121. 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
    122. 122. At this point, you’ve seen all of thetools needed to build a CouchApp.However…
    123. 123. CouchApp Building Blocks
    124. 124. Evently
    125. 125. Evently is a jQuery plugin forwriting event-based applications.
    126. 126. Custom Events<p id="user"></p><script type="text/javascript">$("#user").evently({ login: function(e, user) { $(this).text(user); }})$("#user").trigger("login", "Bradley");</script>
    127. 127. 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; } }});
    128. 128. CouchApp + Evently
    129. 129. CouchApp + Evently$ tree -F evently
    130. 130. CouchApp + Evently$ tree -F eventlyevently items/    _changes/    data.js    mustache.html    query.json profile/ profileReady/ mustache.html selectors/ form/
    131. 131. Alternatives to Evently:
    132. 132. Alternatives to Evently:Backbone.js[1] 1. http://couchapp.org/page/backbone 2. https://github.com/quirkey/soca 3. http://knockoutjs.com/
    133. 133. 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/
    134. 134. 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/
    135. 135. }MustacheLogic-Less Templates
    136. 136. Evently knows how to wire Mustachetemplates and data together.
    137. 137. VariablesTemplate:<p>Hello, {{name}}.</p>Hash:{ "name": "Bradley"}Output:<p>Hello, Bradley.</p>
    138. 138. Unescaped VariablesTemplate:<p>Hello, {{{name}}}.</p>Hash:{ "name": "<em>Bradley</em>"}Output:<p>Hello, <em>Bradley</em>.</p>
    139. 139. “Missed” VariablesTemplate:<p>Hello, {{name}}.</p>Hash:{ "role": "admin"}Output:<p>Hello, .</p>
    140. 140. 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>
    141. 141. 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>
    142. 142. 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>
    143. 143. Non-Empty ListsTemplate:{{#users}} <p>{{name}}</p>{{/users}}Hash:{ "users": [ { "name": "Bradley" }, { "name": "Jason" }, ]}Output: <p>Bradley</p> <p>Jason</p>
    144. 144. CouchApp + Evently +Mustache
    145. 145. CouchApp + Evently +Mustache$ tree -F evently/posts
    146. 146. 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
    147. 147. The “Posts” Mustache File
    148. 148. The “Posts” Mustache File$ cat evently/posts/mustache.html
    149. 149. The “Posts” Mustache File$ cat evently/posts/mustache.html<ul>{{#posts}} <li> <a href="/posts/{{id}}">{{title}}</a> </li>{{/posts}}</ul>
    150. 150. The “Post” Mustache File
    151. 151. The “Post” Mustache File$ cat evently/posts/post/mustache.html
    152. 152. 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}}
    153. 153. Alternatives to Mustache:
    154. 154. Alternatives to Mustache:jsRender [1] 1. https://github.com/BorisMoore/jsrender 2. https://github.com/BorisMoore/jsviews 3. http://www.handlebarsjs.com/
    155. 155. Alternatives to Mustache:jsRender [1]jsViews[2] 1. https://github.com/BorisMoore/jsrender 2. https://github.com/BorisMoore/jsviews 3. http://www.handlebarsjs.com/
    156. 156. 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/
    157. 157. Pathbinder
    158. 158. Pathbinder is a jQuery plugin fortriggering events based on the pathcomponents of a URL hash.
    159. 159. 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>
    160. 160. 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>
    161. 161. An Evently widget’s path de nitioncan be stored in a path.txt le withina CouchApp.
    162. 162. CouchApp + Evently +Pathbinder
    163. 163. CouchApp + Evently +Pathbinder$ tree -F evently/posts
    164. 164. 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
    165. 165. Path Files
    166. 166. Path Files$ cat evently/posts/path.txt
    167. 167. Path Files$ cat evently/posts/path.txt/posts
    168. 168. Path Files$ cat evently/posts/path.txt/posts$ cat evently/posts/post/path.txt
    169. 169. Path Files$ cat evently/posts/path.txt/posts$ cat evently/posts/post/path.txt/posts/:id
    170. 170. Alternatives to Pathbinder:
    171. 171. Alternatives to Pathbinder:HTML5 History [1] 1. https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history 2. https://github.com/balupton/history.js
    172. 172. 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
    173. 173. Resources
    174. 174. 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
    175. 175. 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
    176. 176. 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
    177. 177. http://oreilly.com/catalog/9781449303129/ http://oreilly.com/catalog/9781449303433/
    178. 178. Questions?
    179. 179. Thank You @BradleyHolt http://bradley-holt.com bradley.holt@foundline.comCopyright © 2011 Bradley Holt. All rights reserved.
    1. Gostou de algum slide específico?

      Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

    ×