Adding Meteor.js example app. Description included for index.

architecture-examples/meteor/README.md

+Meteor TodoMVC
+---------------
+
+A todo app built using [Meteor](http://meteor.com), inspired by [TodoMVC](https://github.com/addyosmani/todomvc).
+
+Setup
+=======
+
+* Install Meteor ```$ curl install.meteor.com | /bin/sh```
+* $ cd meteor
+* $ meteor
+
+The app should now be running on http://localhost:3000/
+
+To deploy to meteor.com simply do this:
+
+```$ meteor deploy myapp.meteor.com```
+
+Credits
+=======
+
+- Stylesheet from [TodoMVC](https://github.com/addyosmani/todomvc)
+- Meteor from [Meteor](http://meteor.com)
+- This app by [siuying](https://github.com/siuying)
+
+License
+=======
+
+Public Domain

architecture-examples/meteor/todo.coffee

+Tasks = new Meteor.Collection("tasks")
+
+if Meteor.is_client
+  # Export Tasks model to client
+  window.Tasks = Tasks
+
+  Template.todo.tasks = ->
+    Tasks.find {}, {sort: {completed: 1, updated: -1, created: -1}}
+
+  Template.todo.remainingTodos = ->
+    Tasks.find({completed: false}).count()
+
+  Template.todo.hasCompleted = ->
+    Tasks.find({completed: true}).count() > 0
+
+  Template.todo.events =
+    'keyup #new-todo' : (evt) ->
+      if evt.type == "keyup" && evt.which == 13
+        textbox = $("#new-todo")
+
+        Tasks.insert {text: textbox.val(), created: new Date(), updated: new Date(), completed: false}
+        textbox.val("")
+        textbox.focus()
+      return false
+
+    'click #clear-completed': ->
+      Tasks.remove {completed: true} 
+      return false
+
+    'click #mark-all-checked': (evt) ->
+      Tasks.update {}, {$set: {completed: true}}, {multi: true}
+      $(evt.target).removeAttr("checked")
+  
+  Template.item.events =
+    'click #done': (evt) ->
+      task = Tasks.findOne this._id
+      task.completed = $(evt.target).attr("checked") == "checked"
+      Tasks.update {_id: this._id}, task
+
+    'dblclick .text': (evt) ->
+      task = Tasks.findOne this._id
+      task.editing = true
+      selector = "#i-#{this._id} input.edit"
+      Tasks.update {_id: this._id}, task, (err) ->
+        $(selector).focus().select() unless err
+
+    'blur input.edit': (evt) ->
+      task = Tasks.findOne this._id
+      task.editing = false
+      Tasks.update {_id: this._id}, task 
+
+    'keyup input.edit': (evt) ->
+      if evt.type == "keyup" && evt.which == 13
+        task = Tasks.findOne this._id
+        task.editing = false
+        task.updated = new Date()
+        task.text = $(evt.target).val()
+        Tasks.update {_id: this._id}, task, (err) =>
+          alert("Sorry, an error prevent the changes to be saved") if err
+
+      return false
+
+if Meteor.is_server
+  Meteor.startup ->
+    console.log "server startup"    

architecture-examples/meteor/todo.css

+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.4em;
+  background: #eeeeee;
+  color: #333333;
+}
+
+#views {
+  width: 520px;
+  margin: 0 auto 40px auto;
+  background: white;
+
+  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
+  -o-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
+  box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
+
+  -moz-border-radius: 0 0 5px 5px;
+  -o-border-radius: 0 0 5px 5px;
+  -webkit-border-radius: 0 0 5px 5px;
+  border-radius: 0 0 5px 5px;
+}
+
+#tasks {
+  padding: 20px;
+}
+
+#tasks h1 {
+  font-size: 36px;
+  font-weight: bold;
+  text-align: center;
+  padding: 0 0 10px 0;
+}
+
+#tasks input[type="text"] {
+  width: 466px;
+  font-size: 24px;
+  font-family: inherit;
+  line-height: 1.4em;
+  border: 0;
+  outline: none;
+  padding: 6px;
+  border: 1px solid #999999;
+
+  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+  -o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+}
+
+#tasks input::-webkit-input-placeholder {
+  font-style: italic;
+}
+
+#tasks .items {
+  margin: 10px 0;
+  list-style: none;
+}
+
+#tasks .item {
+  padding: 15px 20px 15px 0;
+  position: relative;
+  font-size: 24px;
+  border-bottom: 1px solid #cccccc;
+}
+
+#tasks .item.done span {
+  color: #777777;
+  text-decoration: line-through;
+}
+
+#tasks .item .destroy {
+  position: absolute;
+  right: 10px;
+  top: 16px;
+  display: none;
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  background: url(../images/destroy.png) no-repeat center center;
+}
+
+#tasks .item:hover .destroy {
+  display: block;
+}
+
+#tasks .item .edit { display: none; }
+#tasks .item.editing .edit { display: block; }
+#tasks .item.editing .view { display: none; }
+
+#tasks footer {
+  display: block;
+  margin: 20px -20px -20px -20px;
+  overflow: hidden;
+
+  color: #555555;
+  background: #f4fce8;
+  border-top: 1px solid #ededed;
+  padding: 0 20px;
+  line-height: 36px;
+
+  -moz-border-radius: 0 0 5px 5px;
+  -o-border-radius: 0 0 5px 5px;
+  -webkit-border-radius: 0 0 5px 5px;
+  border-radius: 0 0 5px 5px;
+}
+
+#tasks .clear {
+  display: block;
+  float: right;
+  line-height: 20px;
+  text-decoration: none;
+
+  background: rgba(0, 0, 0, 0.1);
+  color: #555555;
+  font-size: 11px;
+  margin-top: 8px;
+  margin-bottom:8px;
+  padding: 0 10px 1px;
+
+  -moz-border-radius: 12px;
+  -webkit-border-radius: 12px;
+  -o-border-radius: 12px;
+  border-radius: 12px;
+
+  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
+  -o-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
+  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
+
+  cursor: pointer;
+}
+
+/* focus is actually pointless here as it's not
+   possible to tab to the anchor for some reason */
+#tasks .clear:hover, #tasks .clear:focus {
+  background: rgba(0, 0, 0, 0.15);
+  -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
+  -o-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
+  box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
+}
+
+#tasks .clear:active {
+  position: relative;
+  top: 1px;
+}
+
+#tasks .count span {
+  font-weight: bold;
+}
+
+#credits {
+  width: 520px;
+  margin: 30px auto;
+  color: #999;
+  text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
+  text-align: center;
+}
+
+#credits a {
+  color: #888;
+}
+
+#todo-list li {
+  list-style-type: none;
+}
+
+#todo-list {
+  margin: 0;
+  padding: 0;
+}

architecture-examples/meteor/todo.html

+<head>
+  <meta charset="utf-8">
+  <title>Meteor - TodoMVC</title>
+</head>
+
+<body>
+  <div id="views">
+    <div id="tasks">
+      {{> todo}}
+    </div>
+  </div>
+    <div id="credits">
+      <p>Double-click to edit a todo</p>
+      <p>Created by <a href="https://github.com/siuying">siuying</a>.</p>
+      <p>Modifications by <a href="https://github.com/addyosmani">addyosmani</a>.</p>
+      <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
+  </div>
+</body>
+
+<template name="todo">
+  <header>
+    <h1>Todos</h1>
+    <input id="new-todo" name="newTodo" type="text" placeholder="What needs to be done?">
+  </header>
+
+  <section id="main">
+    <input id="mark-all-checked" type="checkbox" name="allChecked">
+    <label for="mark-all-checked">Mark all as complete</label>
+
+    <ul id="todo-list">
+      {{#each tasks}}
+        {{> item}}
+      {{/each}}
+    </ul>
+  </section>
+
+  <footer>
+    {{#if hasCompleted}}
+    <a id="clear-completed" class="clear">Clear completed</a>
+    {{/if}}
+
+    <div id="todo-count"><b>{{ remainingTodos }}</b> left</div>
+  </footer>
+</template>
+
+
+<template name="item">
+  <li id="i-{{ _id }}">
+    {{#unless editing}}
+    <div class="item {{#if completed}}done{{/if}}">
+      <input class="toggle" type="checkbox" id="done" {{#if completed}}checked="checked"{{/if}}>
+      <span class="text">{{ text }}</span>
+      <a class="destroy"></a>
+    </div>
+    {{/unless}}
+
+    {{#if editing}}
+      <input class="edit" type="text" name="text" value="{{ text }}">
+    {{/if}}
+  </li>
+</template>

index.html

@@ -34,11 +34,14 @@
 				<div class="span4">
 					<h2>Introduction</h2>
 					<p>TodoMVC Labs showcases sample Todo applications for frameworks that have just been released or are still awaiting consideration for inclusion in TodoMVC.</p>
-					<p>While our team are working on improving these applications for a future release of TodoMVC, developers wishing to try out brand new frameworks or see what's coming next for this project can preview this today.</p>
+					<p>While our team are working on improving these applications for a future release of TodoMVC (e.g ensuring they meet our functional requirements), developers wishing to try out brand new frameworks or see what's coming next for this project can preview this today.</p>
 				</div>
 				<div class="span5" id="demos">
 					<h2>Demos</h2>
 					<ul class="nav nav-pills">
+						<li>
+							<a href="http://todomvcapp.meteor.com/" data-source="http://meteor.com/" data-content="Meteor is an ultra-simple environment for building modern websites.A Meteor application is a mix of JavaScript that runs inside a client web browser, JavaScript that runs on the Meteor server inside a Node.js container, and all the supporting HTML fragments, CSS rules, and static assets. Meteor automates the packaging and transmission of these different components. And, it is quite flexible about how you choose to structure those components in your file tree.">Meteor</a>
+						</li>
 						<li>
 							<a href="architecture-examples/agilityjs/index.html" data-source="http://agilityjs.com" data-content="Agility.js is an MVC library for Javascript that lets you write maintainable and reusable browser code without the infrastructural overhead found in other MVC libraries. The goal is to enable developers to write web apps at least as quickly as with jQuery, while simplifying long-term maintainability through MVC objects.">AgilityJS</a>
 						</li>