Merge branch 'master' of https://github.com/addyosmani/todomvc

LICENSE.md

+Copyright (c) Addy Osmani & Sindre Sorhus
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
\ No newline at end of file

architecture-examples/backbone/js/routers/router.js

@@ -15,8 +15,9 @@ var app = app || {};
 			// Set the current filter to be used
 			window.app.TodoFilter = param.trim() || '';
 
-			// Trigger a collection reset/addAll
-			window.app.Todos.trigger('reset');
+			// Trigger a collection filter event, causing hiding/unhiding
+			// of Todo view items
+			window.app.Todos.trigger('filter');
 		}
 	});
 

architecture-examples/backbone/js/views/app.js

@@ -29,14 +29,15 @@ $(function( $ ) {
 		initialize: function() {
 			this.input = this.$('#new-todo');
 			this.allCheckbox = this.$('#toggle-all')[0];
+			this.$footer = this.$('#footer');
+			this.$main = this.$('#main');
 
 			window.app.Todos.on( 'add', this.addAll, this );
 			window.app.Todos.on( 'reset', this.addAll, this );
-			window.app.Todos.on( 'change:completed', this.addAll, this );
-			window.app.Todos.on( 'all', this.render, this );
+			window.app.Todos.on('change:completed', this.filterOne, this);
+			window.app.Todos.on("filter", this.filterAll, this);
 
-			this.$footer = this.$('#footer');
-			this.$main = this.$('#main');
+			window.app.Todos.on( 'all', this.render, this );
 
 			app.Todos.fetch();
 		},
@@ -78,18 +79,15 @@ $(function( $ ) {
 		// Add all items in the **Todos** collection at once.
 		addAll: function() {
 			this.$('#todo-list').html('');
+			app.Todos.each(this.addOne, this);
+		},
 
-			switch( app.TodoFilter ) {
-				case 'active':
-					_.each( app.Todos.remaining(), this.addOne );
-					break;
-				case 'completed':
-					_.each( app.Todos.completed(), this.addOne );
-					break;
-				default:
-					app.Todos.each( this.addOne, this );
-					break;
-			}
+		filterOne : function (todo) {
+			todo.trigger("visible");
+		},
+
+		filterAll : function () {
+			app.Todos.each(this.filterOne, this);
 		},
 
 		// Generate the attributes for a new Todo item.

architecture-examples/backbone/js/views/todos.js

@@ -30,6 +30,7 @@ $(function() {
 		initialize: function() {
 			this.model.on( 'change', this.render, this );
 			this.model.on( 'destroy', this.remove, this );
+			this.model.on( 'visible', this.toggleVisible, this );
 		},
 
 		// Re-render the titles of the todo item.
@@ -37,10 +38,23 @@ $(function() {
 			this.$el.html( this.template( this.model.toJSON() ) );
 			this.$el.toggleClass( 'completed', this.model.get('completed') );
 
+			this.toggleVisible();
 			this.input = this.$('.edit');
 			return this;
 		},
 
+		toggleVisible : function () {
+			this.$el.toggleClass( 'hidden',  this.isHidden());
+		},
+
+		isHidden : function () {
+			var isCompleted = this.model.get('completed');
+			return ( // hidden cases only
+				(!isCompleted && app.TodoFilter === 'completed')
+				|| (isCompleted && app.TodoFilter === 'active')
+			);
+		},
+
 		// Toggle the `"completed"` state of the model.
 		togglecompleted: function() {
 			this.model.toggle();

assets/base.css

@@ -404,3 +404,7 @@ label[for='toggle-all'] {
 		background: none;
 	}
 }
+
+.hidden{
+	display:none;
+}
\ No newline at end of file

dependency-examples/backbone_require/js/routers/router.js

@@ -14,8 +14,9 @@ define([
 			// Set the current filter to be used
 			Common.TodoFilter = param.trim() || '';
 
-			// Trigger a collection reset/addAll
-			Todos.trigger('reset');
+			// Trigger a collection filter event, causing hiding/unhiding
+			// of the Todo view items
+			Todos.trigger('filter');
 		}
 	});
 

dependency-examples/backbone_require/js/views/app.js

@@ -33,10 +33,12 @@ define([
 			this.$footer = this.$('#footer');
 			this.$main = this.$('#main');
 
-			Todos.on( 'add', this.addAll, this );
+			Todos.on( 'add', this.addOne, this );
 			Todos.on( 'reset', this.addAll, this );
-			Todos.on( 'change:completed', this.addAll, this );
+			Todos.on( 'change:completed', this.filterOne, this );
+			Todos.on( "filter", this.filterAll, this);
 			Todos.on( 'all', this.render, this );
+
 			Todos.fetch();
 		},
 
@@ -77,20 +79,17 @@ define([
 		// Add all items in the **Todos** collection at once.
 		addAll: function() {
 			this.$('#todo-list').html('');
+			Todos.each(this.addOne, this);
+		},
 
-			switch( Common.TodoFilter ) {
-				case 'active':
-					_.each( Todos.remaining(), this.addOne );
-					break;
-				case 'completed':
-					_.each( Todos.completed(), this.addOne );
-					break;
-				default:
-					Todos.each( this.addOne, this );
-					break;
-			}
+		filterOne : function (todo) {
+			todo.trigger("visible");
 		},
 
+		filterAll : function () {
+			app.Todos.each(this.filterOne, this);
+		},
+		
 		// Generate the attributes for a new Todo item.
 		newAttributes: function() {
 			return {

dependency-examples/backbone_require/js/views/todos.js

@@ -27,6 +27,7 @@ define([
 		initialize: function() {
 			this.model.on( 'change', this.render, this );
 			this.model.on( 'destroy', this.remove, this );
+			this.model.on( 'visible', this.toggleVisible, this );
 		},
 
 		// Re-render the titles of the todo item.
@@ -34,10 +35,23 @@ define([
 			this.$el.html( this.template( this.model.toJSON() ) );
 			this.$el.toggleClass( 'completed', this.model.get('completed') );
 
+			this.toggleVisible();
 			this.input = this.$('.edit');
 			return this;
 		},
 
+		toggleVisible : function () {
+			this.$el.toggleClass( 'hidden',  this.isHidden());
+		},
+
+		isHidden : function () {
+			var isCompleted = this.model.get('completed');
+			return ( // hidden cases only
+				(!isCompleted && Common.TodoFilter === 'completed')
+				|| (isCompleted && Common.TodoFilter === 'active')
+			);
+		},
+
 		// Toggle the `"completed"` state of the model.
 		togglecompleted: function() {
 			this.model.toggle();

index.html

@@ -166,6 +166,9 @@
 					<li>
 						<a href="http://todomvc.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="http://todomvc.derbyjs.com" data-source="http://derbyjs.com" data-content="MVC framework making it easy to write realtime, collaborative applications that run in both Node.js and browsers.">Derby</a>
+					</li>
 					<li>
 						<a href="labs/architecture-examples/montage/" data-source="https://github.com/Motorola-Mobility/montage" data-content="Montage simplifies the development of rich HTML5 applications by providing modular components, real-time two-way data binding, CommonJS dependency management, and many more conveniences.">Montage</a>
 					</li>

labs/architecture-examples/derbyjs/.gitignore

+node_modules
+lib
+gen
+*.swp
+*.un~

labs/architecture-examples/derbyjs/Makefile

+compile:
+	./node_modules/coffee-script/bin/coffee -bw -o ./lib -c ./src
+
+run:
+	npm install
+	./node_modules/coffee-script/bin/coffee -b -o ./lib -c ./src
+	node server.js

labs/architecture-examples/derbyjs/README.md

+# Derby.js TodoMVC app
+
+## Getting started
+
+[NodeJS](http://nodejs.org) (>= 0.8.0) is required to run this app.
+
+## Run the app
+`make run`
+
+This will install the dependencies locally, compile the coffeescript and run
+the demo server for you.
+
+## Play with the code
+In one window, run `make` which will continue to compile the coffeescript as
+you save changes. In a separate window run `node server.js` and open up the
+shown URL.
+
+
+## TODO
+ * PROBLEM: Add ie.js - I've added the include to the template, but it
+   obviously gets stripped out due to the comments, plus Nate mentioned that
+   there's work needing to be done for ie < 10.
+ * QUESTION: Check with derby folk whether there's a better way to do the filtering while still using a route, and other improvements.

labs/architecture-examples/derbyjs/package.json

+{
+  "name": "todomvc-derbyjs",
+  "description": "",
+  "version": "0.0.0",
+  "main": "./server.js",
+  "dependencies": {
+    "derby": "0.3.13",
+    "express": "3.0.0beta4",
+    "gzippo": ">=0.1.4"
+  },
+  "private": true,
+  "devDependencies": {
+    "coffee-script": ">=1.3.1"
+  }
+}

labs/architecture-examples/derbyjs/public/base.css

+../../../../assets/base.css
\ No newline at end of file

labs/architecture-examples/derbyjs/public/bg.png

+../../../../assets/bg.png
\ No newline at end of file

labs/architecture-examples/derbyjs/public/ie.js

+../../../../assets/ie.js
\ No newline at end of file

labs/architecture-examples/derbyjs/server.js

+require('derby').run(__dirname + '/lib/server', 3003);

labs/architecture-examples/derbyjs/src/server/index.coffee

+http = require 'http'
+path = require 'path'
+express = require 'express'
+gzippo = require 'gzippo'
+derby = require 'derby'
+todos = require '../todos'
+serverError = require './serverError'
+
+## SERVER CONFIGURATION ##
+
+expressApp = express()
+server = http.createServer expressApp
+module.exports = server
+
+store = derby.createStore
+	listen: server
+require('./queries')(store)
+
+ONE_YEAR = 1000 * 60 * 60 * 24 * 365
+root = path.dirname path.dirname __dirname
+publicPath = path.join root, 'public'
+
+expressApp
+	.use(express.favicon())
+	# Gzip static files and serve from memory
+	.use(gzippo.staticGzip publicPath, maxAge: ONE_YEAR)
+	# Gzip dynamically rendered content
+	.use(express.compress())
+
+	# Adds req.getModel method
+	.use(store.modelMiddleware())
+	# Creates an express middleware from the app's routes
+	.use(todos.router())
+	.use(expressApp.router)
+	.use(serverError root)
+
+
+## SERVER ONLY ROUTES ##
+
+expressApp.all '*', (req) ->
+	throw "404: #{req.url}"

labs/architecture-examples/derbyjs/src/server/queries.coffee

+module.exports = (store) ->
+	store.query.expose 'todos', 'forGroup', (group) ->
+		@where('group').equals(group)

labs/architecture-examples/derbyjs/src/server/serverError.coffee

+derby = require 'derby'
+{isProduction} = derby.util
+
+module.exports = (root) ->
+	staticPages = derby.createStatic root
+
+	return (err, req, res, next) ->
+		return next() unless err?
+
+		console.log(if err.stack then err.stack else err)
+
+		## Customize error handling here ##
+		message = err.message || err.toString()
+		status = parseInt message
+		if status is 404
+			staticPages.render '404', res, {url: req.url}, 404
+		else
+			res.send if 400 <= status < 600 then status else 500

labs/architecture-examples/derbyjs/src/todos/index.coffee

+derby = require 'derby'
+{get, view, ready} = derby.createApp module
+
+derby.use(require '../../ui')
+
+view.fn 'noItems',
+	get: (list) -> !list.length unless list is undefined
+	set: ->
+
+view.fn 'oneItem',
+	get: (list) -> list.length == 1 unless list is undefined
+
+# Redirect the visitor to a random todo list
+get '/', (page) ->
+	page.redirect '/' + parseInt(Math.random() * 1e9).toString(36)
+
+# Sets up the model, the reactive function for stats and renders the todo list
+get '/:groupName', (page, model, {groupName}) ->
+	model.query('todos').forGroup(groupName).subscribe ->
+		model.set '_groupName', groupName
+
+		model.ref '_list.all', model.filter('todos')
+			.where('group').equals(groupName)
+
+		model.ref '_list.completed', model.filter('todos')
+			.where('group').equals(groupName)
+			.where('completed').equals(true)
+
+		model.ref '_list.active', model.filter('todos')
+			.where('group').equals(groupName)
+			.where('completed').notEquals(true)
+
+		model.set '_filter', 'all'
+		model.ref '_list.shown', '_list', '_filter'
+
+		page.render()
+
+# Transitional route for enabling a filter
+get from: '/:groupName', to: '/:groupName/:filterName',
+	forward: (model, {filterName}) ->
+		model.set '_filter', filterName
+	back: (model, params) ->
+		model.set '_filter', 'all'
+
+get from: '/:groupName/:filterName', to: '/:groupName/:filterName',
+	forward: (model, {filterName}) ->
+		model.set '_filter', filterName
+
+ready (model) ->
+	todos = model.at 'todos'
+	newTodo = model.at '_newTodo'
+
+	exports.add = ->
+		# Don't add a blank todo
+		text = newTodo.get().trim()
+		newTodo.set ''
+		return unless text
+		todos.add text: text, group: model.get('_groupName')
+
+	exports.del = (e, el) ->
+		# Derby extends model.at to support creation from DOM nodes
+		todos.del model.at(el).get('id')
+
+	exports.clearCompleted = ->
+		for {id} in model.get('_list.completed')
+			todos.del id
+
+	exports.clickToggleAll = ->
+		value = !!model.get('_list.active.length')
+		for {id} in model.get('_list.all')
+			todos.set id + '.completed', value
+
+	exports.submitEdit = (e, el) ->
+		el.firstChild.blur()
+
+	exports.startEdit = (e, el) ->
+		item = model.at(el)
+		item.set '_editing', true
+
+	exports.endEdit = (e, el) ->
+		item = model.at(el)
+		item.set '_editing', false
+		if item.get('text').trim() == ''
+			todos.del item.get('id')

labs/architecture-examples/derbyjs/styles/404.styl

+@import "./base";

labs/architecture-examples/derbyjs/styles/todos/index.styl

+#todo-list li input.text {
+	word-break: break-word;
+	margin: 15px 15px 15px 60px;
+	line-height: 1.2;
+	-webkit-transition: color 0.4s;
+	-moz-transition: color 0.4s;
+	-ms-transition: color 0.4s;
+	-o-transition: color 0.4s;
+	transition: color 0.4s;
+	font-size: 24px;
+	color: inherit;
+	background-color: transparent;
+	display: block;
+	border: none;
+	width: 506px;
+	padding: 13px 17px 12px 17px;
+	margin: 0 0 0 43px;
+	-webkit-font-smoothing: antialiased;
+	-moz-font-smoothing: antialiased;
+	-ms-font-smoothing: antialiased;
+	-o-font-smoothing: antialiased;
+	font-smoothing: antialiased;
+}
+#todo-list li input.text:focus {
+	border: 1px solid #999;
+	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	-ms-box-sizing: border-box;
+	-o-box-sizing: border-box;
+	box-sizing: border-box;
+	-webkit-font-smoothing: antialiased;
+	-moz-font-smoothing: antialiased;
+	-ms-font-smoothing: antialiased;
+	-o-font-smoothing: antialiased;
+	font-smoothing: antialiased;
+	outline: none;
+}
+
+#todo-list li.completed input.text {
+	color: #a9a9a9;
+	text-decoration: line-through;
+}
+
+section.empty-list, footer.empty-list {
+	display: none;
+}
+
+section.empty-list #toggle-all {
+	display: none;
+}
+button#clear-completed.non-completed {
+	display: none;
+}
+
+#todo-list li.editing input.toggle,
+#todo-list li.editing button.destroy {
+	display: none;
+}

labs/architecture-examples/derbyjs/styles/ui.styl

+.connection {
+  position: absolute;
+  text-align: center;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 0;
+  z-index: 99;
+}
+.connection > .alert {
+  background: #fff1a8;
+  border: 1px solid #999;
+  border-top: 0;
+  border-radius: 0 0 3px 3px;
+  display: inline-block;
+  line-height: 21px;
+  padding: 0 12px;
+}

labs/architecture-examples/derbyjs/ui/connectionAlert/index.html

+<connectionAlert:>
+  <div class="connection">
+    <!--
+      connected and canConnect are built-in properties of model. If a variable
+      is not defined in the current context, it will be looked up in the model
+      data and the model properties
+    -->
+    {#unless connected}
+      <p class="alert">
+        {#if canConnect}
+          <!-- Leading space is removed, and trailing space is maintained -->
+          Offline
+          <!-- a :self path alias is automatically created per component -->
+          {#unless :self.hideReconnect}
+            &ndash; <a x-bind="click:connect">Reconnect</a>
+          {/}
+        {else}
+          Unable to reconnect &ndash; <a x-bind="click:reload">Reload</a>
+        {/}
+      </p>
+    {/}
+  </div>

labs/architecture-examples/derbyjs/ui/connectionAlert/index.js

+exports.connect = function() {
+  model = this.model
+  // Hide the reconnect link for a second after clicking it
+  model.set('hideReconnect', true)
+  setTimeout(function() {
+    model.set('hideReconnect', false)
+  }, 1000)
+  model.socket.socket.connect()
+}
+
+exports.reload = function() {
+  window.location.reload()
+}

labs/architecture-examples/derbyjs/ui/index.js

+var config = {
+  filename: __filename
+, styles: '../styles/ui'
+, scripts: {
+    connectionAlert: require('./connectionAlert')
+  }
+};
+
+module.exports = ui
+ui.decorate = 'derby'
+
+function ui(derby, options) {
+  derby.createLibrary(config, options)
+}

labs/architecture-examples/derbyjs/views/404.html

+<!--
+	This is a static template file, so it doesn't have an associated app.
+	It is rendered by the server via a staticPages renderer.
+
+	Since static pages don't include the Derby client library, they can't have
+	bound variables that automatically update. However, they do support initial
+	template tag rendering from a context object and/or model.
+-->
+
+<Title:>
+	Not found
+
+<Body:>
+	<h1>404</h1>
+	<p>Sorry, we can't find anything at <b>{{url}}</b>.
+	<p>Try heading back to the <a href="/">home page</a>.

labs/architecture-examples/derbyjs/views/todos/index.html

+<Head:>
+	<link href=/base.css rel=stylesheet>
+
+<Title:>
+  DerbyJS • TodoMVC
+
+<Header:>
+	<ui:connectionAlert>
+
+<Body:>
+	<section id="todoapp">
+		<app:todoHeader>
+
+		<section id="main" class="{#unless _list.shown}empty-list{/}">
+			<input id="toggle-all" type="checkbox" checked="{noItems(_list.active)}" x-bind=click:clickToggleAll>
+			<label for="toggle-all">Mark all as complete</label>
+			<ul id=todo-list>{#each _list.shown}<app:todo>{/}</ul>
+		</section>
+
+		<app:todoFooter>
+	</section>
+	<app:info>
+
+<todoHeader:>
+	<header id="header">
+		<h1>todos</h1>
+		<form x-bind=submit:add><input id="new-todo" placeholder="What needs to be done?" autofocus value={_newTodo}></form>
+	</header>
+
+<todo:>
+	<li data-id={{id}} class="{#if .completed}completed{else}active{/}{#if ._editing} editing{/}">
+		<div>
+			<input class="toggle" type="checkbox" checked={.completed}>
+			<form x-bind=submit:submitEdit>
+				<input class="text" x-bind="focus:startEdit, blur:endEdit" value="{.text}">
+			</form>
+			<button class="destroy" x-bind=click:del></button>
+		</div>
+  </li>
+
+<todoFooter:>
+	<footer id="footer" class="{#unless _list.all}empty-list{/}">
+	<span id="todo-count"><strong>{_list.active.length}</strong> item{#unless oneItem(_list.active)}s{/} left</span>
+		<ul id="filters">
+			<li class="all">
+				<a href="/{{_groupName}}" class="{#if equal(_filter, 'all')}selected{/}">All</a>
+			</li>
+			<li class="active">
+				<a href="/{{_groupName}}/active" class="{#if equal(_filter, 'active')}selected{/}">Active</a>
+			</li>
+			<li class="completed">
+				<a href="/{{_groupName}}/completed" class="{#if equal(_filter, 'completed')}selected{/}">Completed</a>
+			</li>
+		</ul>
+		<button x-bind=click:clearCompleted id="clear-completed" class="{#unless _list.completed}non-completed{/}">
+			Clear completed (<span>{_list.completed.length}</span>)
+		</button>
+	</footer>
+
+<info:>
+	<footer id="info">
+		<h3>Open this <a href="/{{_groupName}}">ToDo list</a> in another browser, or share it with a friend to collaborate!</h3>
+		<p>Click on a todo to edit</p>
+		<p>Template by <a href="http://github.com/sindresorhus">Sindre Sorhus</a></p>
+		<p>Created by <a href="http://micknelson.wordpress.com">Michael Nelson</a> and <a href="https://github.com/lackac">László Bácsi</a></p>
+		<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
+	</footer>

readme.md

+# TodoMVC
+
+#### Helping you select an MV\* framework
+
+
+## Introduction
+
+Developers these days are spoiled with choice when it comes to selecting an MV\* framework for structuring and organizing JavaScript web apps.
+
+Backbone, Ember, AngularJS, Spine... the list of new and stable solutions goes on and on, but just how do you decide on which to use in a sea of so many options?
+
+To help solve this problem, we created TodoMVC - a project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV\* frameworks of today.
+
+
+#### Todo apps are included for:
+
+- [Backbone.js](http://documentcloud.github.com/backbone)
+- [Ember.js](http://emberjs.com)
+- [AngularJS](http://angularjs.org)
+- [Spine](http://spinejs.com)
+- [KnockoutJS](http://knockoutjs.com) (MVVM)
+- [Dojo](http://dojotoolkit.org)
+- [YUI](http://yuilibrary.com)
+- [Batman.js](http://batmanjs.org)
+- [Closure](http://code.google.com/closure/library/)
+- [Agility.js](http://agilityjs.com)
+- [Knockback.js](http://kmalakoff.github.com/knockback)
+- [Google Web Toolkit](https://developers.google.com/web-toolkit/)
+
+
+###### Non MV*
+
+- [jQuery](http://jquery.com)
+- Vanilla JS
+
+###### RequireJS
+
+- [Backbone.js](http://documentcloud.github.com/backbone) + [RequireJS](http://requirejs.org) (using AMD)
+- [Ember.js](http://emberjs.com) + [RequireJS](http://requirejs.org) (using AMD)
+
+
+#### Labs
+
+We also have a number of in-progress applications in Labs:
+
+- [CanJS](http://canjs.us)
+- [Maria.js](https://github.com/petermichaux/maria)
+- [cujo.js](http://cujojs.github.com)
+- [Meteor](http://meteor.com)
+- [Derby](http://derbyjs.com)
+- [SocketStream](http://www.socketstream.org) + [jQuery](http://jquery.com)
+- [Ext.js](http://www.sencha.com/products/extjs)
+- [Sammy.js](http://sammyjs.org)
+- [JavaScriptMVC](http://javascriptmvc.com)
+- [Stapes.js](http://hay.github.com/stapes)
+- [Epitome](http://dimitarchristoff.github.com/Epitome)
+- [TroopJS](https://github.com/troopjs)
+- [soma.js](http://somajs.github.com/somajs)
+- [DUEL](https://bitbucket.org/mckamey/duel/wiki/Home)
+- [Fidel](https://github.com/jgallen23/fidel)
+- [Olives](https://github.com/flams/olives)
+- [PlastronJS](https://github.com/rhysbrettbowen/PlastronJS)
+- [Dijon](https://github.com/creynders/dijon-framework)
+- [rAppid.js](http://www.rappidjs.com)
+- [o_O](http://weepy.github.com/o_O)
+- [Fun](https://github.com/marcuswestin/fun)
+- [KnockoutJS](http://knockoutjs.com) + [RequireJS](http://requirejs.org) (using AMD)
+- [AngularJS](http://angularjs.org) + [RequireJS](http://requirejs.org) (using AMD)
+- [AngularJS](http://angularjs.org) (optimized)
+- [Backbone.xmpp](https://github.com/ggozad/Backbone.xmpp)
+
+
+## Live demos
+
+Live demos are available on our [website](http://todomvc.com)
+
+
+## Screenshot
+
+![screenshot](https://raw.github.com/addyosmani/todomvc/master/screenshot.png)
+
+
+## Team
+
+TodoMVC would not be possible without a strong team of [contributors](https://github.com/addyosmani/todomvc/contributors) helping push the project forward each day. In addition, we have a core project team composed of:
+
+#### [Addy Osmani](http://github.com/addyosmani) - Founder/Lead
+
+<img align="left" width="40" height="40" src="http://www.gravatar.com/avatar/96270e4c3e5e9806cf7245475c00b275.png?s=40">
+Addy is a Developer Platform Engineer at Google who originally created TodoMVC. He oversees the project direction, drives expansion and helps lead core development with Sindre Sorhus (by far our most active contributor!).
+
+#### [Sindre Sorhus](https://github.com/sindresorhus) - Lead Developer
+
+<img align="left" width="40" height="40" src="http://www.gravatar.com/avatar/d36a92237c75c5337c17b60d90686bf9.png?s=40">
+Sindre is a Web Developer who drives core development, quality control and application design for the project. His contributions have helped us ensure consistency and best practices are enforced wherever possible.
+
+#### [Gianni Chiappetta](https://github.com/gf3) - Logo designer
+
+
+## Disclaimer
+
+TodoMVC has been called many things including the 'Speed-dating' and 'Rosetta Stone' of MV* frameworks. Whilst we hope that this project is able to offer assistance in deciding what frameworks are worth spending more time looking at, remember that the Todo application offers a limited view of what a framework may be capable of.
+
+It is meant to be used as a gateway to reviewing how a basic application using a framework may be structured and we heavily recommend investing time researching a solution in more depth before opting to use it.
+
+
+## Project Status
+
+TodoMVC 1.0 was just released and includes re-writes of almost all applications, ensuring they follow a consistent set of specifications and are using the latest versions of all libraries and frameworks in use. We've also addressed framework author concerns about routing by adding this to many of the more mainstream applications in the project.
+
+
+## Getting Involved
+
+Whilst we enjoy implementing and improving existing Todo apps, we're always interested in speaking to framework authors (and users) wishing to share Todo app implementations in their framework/solution of choice.
+
+### New Applications
+
+If you have an implementation you would like to show us or a patch you would like to send upstream, please feel free to send through a pull request after:
+
+* Reading our [contribution guidelines](https://github.com/addyosmani/todomvc/wiki)
+* Going through our [application specification](https://github.com/addyosmani/todomvc/wiki/App-Specification)
+* Looking at our most recent [reference application](https://github.com/addyosmani/todomvc/tree/master/architecture-examples/spine)
+
+One of us will be happy to review your submission and discuss any changes that may be required before they can be included. Applications will typically land first in Labs, reaching the 'stable' mark once we have verified they meet all of the application specifications referenced above.
+
+
+### Unit Tests
+
+At present, due to the large number of applications in the TodoMVC suite we haven't been mandating that unit tests be written in order for an application to be accepted.
+
+We do however plan on addressing this in a future release as we feel it would both help further ensure consistency and provide developers with a reference for writing tests for each framework.
+
+If you are a library author or contributor wishing to start work on writing tests for an implementation, we'll happily consider including them in the future. This may change based on how we specify unit tests must be structured and so on post 1.0.
+
+
+### A Final Note
+
+Note that due to the current number of MVC/MVVM/MV* frameworks in circulation, it's not always possible to include each one in TodoMVC, but we'll definitely discuss the merits of any framework prior to making a decision :)
+
+For applications that we feel don't quite match the goals of the project, but which we feel still offer value, we're happy to include references to them in our official [wiki](https://github.com/addyosmani/todomvc/wiki/Other-implementations).
+
+
+## License
+
+Licensed under the [MIT](https://github.com/addyosmani/todomvc/tree/master/LICENSE.md) license.