Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Octocat-spinner-32-eaf2f5

Cannot retrieve contributors at this time

executable file 152 lines (152 sloc) 12.036 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TodoMVC</title>
<meta name="description" content="A common learning application for popular JavaScript MV* frameworks">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="site/css/bootstrap.min.css" rel="stylesheet">
<link href="site/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="site/css/main.css" rel="stylesheet">
</head>
<body>
<div class="container">
<header class="hero-unit row">
<div class="span4 screenshot">
<img src="site/screenshot.png" width="528" height="330">
</div>
<div class="span5 header-title">
<h1>TodoMVC</h1>
<p>
A common learning application for popular JavaScript MV* frameworks
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://addyosmani.github.com/todomvc" data-via="addyosmani">Tweet</a>
</p>
<nav>
<a class="btn btn-primary btn-large" href="https://github.com/addyosmani/todomvc/zipball/v0.3">Download</a>
<a class="btn btn-large" href="http://github.com/addyosmani/todomvc">Follow on GitHub</a>
</nav>
<p style="font-size: 16px;">Check out our new subproject <a href="http://todomvc.com/labs">TodoMVC Labs</a></p>
</div>
</header>
<div class="row">
<div class="span4">
<h2>Introduction</h2>
<p>Developers these days are spoiled with choice when it comes to selecting an <strong>MV* framework</strong> for structuring and organizing JavaScript web apps. Backbone, Spine, Ember (SproutCore 2.0), JavaScriptMVC... the list of new and stable solutions goes on and on, but just how do you <strong>decide</strong> on which to use in a sea of so many options?</p>
<p>To help solve this problem, we created <a href="http://github.com/addyosmani/todomvc">TodoMVC</a> - a project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today.</p>
<p>Solutions look and feel the same, have a common simple feature-set and make it <strong>easy</strong> for you to compare the syntax and structure of different frameworks so you can select the one you feel the most comfortable with.</p>
</div>
<div class="span5" id="demos">
<h2>Demos</h2>
<ul class="nav nav-pills">
<li>
<a href="architecture-examples/backbone/index.html" data-source="http://documentcloud.github.com/backbone/" data-content="Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.">Backbone.js</a>
</li>
<li>
<a href="dependency-examples/backbone_require/index.html" data-source="http://requirejs.org/" data-content="RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.">Backbone.js + RequireJS</a>
</li>
<li>
<a href="architecture-examples/emberjs/index.html" data-source="http://emberjs.com/" data-content="Ember is a JavaScript framework for creating ambitious web applications that eliminates boilerplate and provides a standard application architecture.">Ember.js</a>
</li>
<li>
<a href="architecture-examples/javascriptmvc/todo/todo/index.html" data-source="http://javascriptmvc.com/" data-content="JavaScriptMVC is an open-source framework containing the best ideas in jQuery development. It guides you to successfully completed projects by promoting best practices, maintainability, and convention over configuration.">JavaScriptMVC</a>
</li>
<li>
<a href="architecture-examples/spine/index.html" data-source="http://spinejs.com/" data-content="Spine is a lightweight framework for building JavaScript web applications. Spine gives you an MVC structure and then gets out of your way, allowing you to concentrate on the fun stuff, building awesome web applications.">Spine.js</a>
</li>
<li>
<a href="architecture-examples/knockoutjs/index.html" data-source="http://knockoutjs.com/" data-content="Simplify dynamic JavaScript UIs by applying the Model-View-View Model (MVVM) pattern">Knockout (MVVM)</a>
</li>
<li>
<a href="architecture-examples/sammyjs/index.html" data-source="http://sammyjs.org/" data-content="Sammy.js is a tiny JavaScript framework developed to ease the pain and provide a basic structure for developing JavaScript applications.">Sammy.js</a>
</li>
</ul>
<ul class="nav nav-pills">
<li>
<a href="architecture-examples/dojo/index.html" data-source="http://dojotoolkit.org/" data-content="Dojo saves you time and scales with your development process, using web standards as its platform. It’s the toolkit experienced developers turn to for building high quality desktop and mobile web applications.">Dojo</a>
</li>
<li>
<a href="architecture-examples/closure/index.html" data-source="http://code.google.com/closure/library/" data-content="The Closure Library is a broad, well-tested, modular, and cross-browser JavaScript library. You can pull just what you need from a large set of reusable UI widgets and controls, and from lower-level utilities for DOM manipulation, server communication, animation, data structures, unit testing, rich-text editing, and more.">Closure</a>
</li>
<li>
<a href="architecture-examples/yuilibrary/index.html" data-source="http://yuilibrary.com/" data-content="YUI's lightweight core and modular architecture make it scalable, fast, and robust. Built by frontend engineers at Yahoo!, YUI powers the most popular websites in the world.">YUILibrary</a>
</li>
<li>
<a href="architecture-examples/knockback/index.html" data-source="http://kmalakoff.github.com/knockback/" data-content="Knockback.js provides Knockout.js magic for Backbone.js Models and Collections.">Knockback.js</a>
</li>
<li>
<a href="architecture-examples/angularjs/index.html" data-source="http://angularjs.org/" data-content="What HTML would have been
had it been designed for web apps">AngularJS</a>
</li>
<li>
<a href="architecture-examples/angularjs_persistencejs/index.html" data-source="http://persistencejs.org/" data-content="persistence.js is an asynchronous Javascript object-database mapper. It has database-independent abstractions and can therefore easily be ported to new databases.">Angular + PersistenceJS</a>
</li>
<li>
<a href="architecture-examples/extjs/index.html" data-source="http://www.sencha.com/products/extjs" data-content="Ext JS 4 is the next major advancement in our JavaScript framework. Featuring expanded functionality, plugin-free charting, and a new MVC architecture it's the best Ext JS yet. Create incredible web apps for every browser.">Ext.js</a>
</li>
</ul>
<ul class="nav nav-pills">
<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.">Agility.js</a>
</li>
<li>
<a href="architecture-examples/jquery/index.html" data-source="http://jquery.com/" data-content="jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.">jQuery</a>
</li>
<li>
<a href="reference-examples/vanillajs/index.html" data-source="https://developer.mozilla.org/en/JavaScript" data-content="You know JavaScript right? :P">Vanilla JS</a>
</li>
</ul>
</div>
<div class="span3">
<h2>New in version 0.3</h2>
<ul class="vertical-space">
<li>Dojo (MV*) app</li>
<li>Closure (MV*) app</li>
<li>Fixes and rewrites to existing apps including Ember.js, Spine.js and Backbone.js</li>
<li>Updated jQuery-only app for those wishing to compare MV* vs. a version structured without it</i>
<li>A new boilerplate for Todo apps</li>
<li><a href="https://github.com/addyosmani/backbone-boilerplates">Initial work</a> on Todo apps integrated with back-end tech stacks (Backbone.js only for now)</li>
</ul>
</div>
</div>
<hr>
<div class="row">
<div class="span4">
<h2>Getting Started</h2>
<p>You can get setup with TodoMVC in just a few short steps:</p>
<p>
<ol class="vertical-space">
<li>Download the <a href="https://github.com/addyosmani/todomvc/zipball/v0.3">latest release</a>.</li>
<li>Run TodoMVC on a local server (using <a href="http://www.mamp.info">MAMP</a>, <a href="http://www.wampserver.com/en/">WAMP</a> or another suitable setup). You can then select an app to run using the 'Live demos' link to the left.</li>
<li>Browse through the Todo apps, examine their source and discover which framework you might feel the most comfortable working with.</li>
</ol>
</p>
</div>
<div class="span4">
<h2>Selecting a Framework</h2>
<p>Once you've downloaded the latest release and played around with the apps, you'll want to decide on a specific framework to try out.</p>
<p>Study the syntax required for defining models, views and (where applicable) controllers and classes in the frameworks you're interested in and try your hand at editing the code to see how it feels using it first-hand.</p>
<p>Please <strong>ensure</strong> that if you're happy with this, you do spend more time investigating the framework (including reading the official docs, the source and its complete feature list). There's often a lot more to a framework than what we present in our examples.</p>
</div>
<div class="span4">
<h2>Getting Involved</h2>
<p>Is there a bug we haven't fixed or an MV* framework you feel would benefit from being included in TodoMVC?</p>
<p>If so, feel free to fork the repo, read our <a href="https://github.com/addyosmani/todomvc/wiki">contribution guidelines</a>, and submit a pull request &mdash; we'll be happy to review it for inclusion.</p><p> Make sure you use the <a href="https://github.com/addyosmani/todomvc/tree/master/template">template</a> as a starting point and read the <a href="https://github.com/addyosmani/todomvc/wiki/App-Specification">app specification</a>.</p>
<p><a class="btn" href="https://github.com/addyosmani/todomvc/pull/new/master">Submit Pull Request &raquo;</a></p>
</div>
</div>
<hr>
<footer>
<p>© TodoMVC. Brought to you by <a href="https://github.com/addyosmani">Addy Osmani</a> (lead), <a href="https://github.com/boushley">Aaron Boushley</a> and <a href="https://github.com/sindresorhus">Sindre Sorhus</a>.</p>
<p id="contributor-list">Big thanks to our magnificent contributors: <span></span></p>
</footer>
</div>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<script src="assets/jquery.min.js"></script>
<script src="site/js/jquery.hoverIntent.min.js"></script>
<script src="site/js/bootstrap.min.js"></script>
<script src="site/js/main.js"></script>
</body>
</html>
Something went wrong with that request. Please try again.