<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 <ahref="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>
<p>TodoMVC Labs showcases sample Todo applications for frameworks that have just been released or are stil maturing.</p>
<p>While our team are working on improving these applications for inclusion in 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>
</div>
<divclass="span5"id="demos">
<h2>Demos</h2>
<ulclass="nav nav-pills">
<li>
<ahref="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>
<ahref="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>
<ahref="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>
<ahref="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>
<ahref="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>
<ahref="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>
<ahref="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>
<ahref="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>
<ahref="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>
<ahref="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>
<ahref="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>
<ahref="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>
<ahref="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>
</ul>
<ulclass="nav nav-pills">
<li>
<ahref="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>
<li>
<ahref="architecture-examples/broke/index.html"data-source="https://github.com/brokenseal/broke-client"data-content="The Broke Javascript Framework is a porting of the fantastic Django Web Framework on Javascript. It summarizes all the best concepts present in Django like url resolving, decoupling, DRY principle, project-specific settings and a pretty simple template engine. It could be put in the big Javascript MVC frameworks group outside there, but, as Django is, this is more a MTV (Model-Template-View) framework.">Broke.js</a>
</li>
<li>
<ahref="architecture-examples/fidel/index.html"data-source="http://jga.me/blog/2011/06/10/fidel"data-content="Fidel is a small library for building out ui components (widgets, modules, plugins, whatever you want to call them). It looks very similar to backbone.js and spine.js's controller.">Fidel.js</a>
</li>
<li><ahref="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>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><ahref="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>
<divclass="row">
<divclass="span4">
<h2>Getting Started</h2>
<p>You can get setup with TodoMVC in just a few short steps:</p>
<p>
<olclass="vertical-space">
<li>Download the <ahref="https://github.com/addyosmani/todomvc/zipball/v0.3">latest release</a>.</li>
<li>Run TodoMVC on a local server (using <ahref="http://www.mamp.info">MAMP</a>, <ahref="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>
<divclass="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 it's complete feature list). There's often a lot more to a framework than what we present in our examples.</p>
</div>
<divclass="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 and submit a pull request — we'll be happy to review it for inclusion.</p><p> Make sure you use the <ahref="https://github.com/addyosmani/todomvc/tree/master/template">template</a> as a starting point and read the application <ahref="https://github.com/addyosmani/todomvc/wiki/Todo-Application-Specification">specifications</a> to make sure your app meets the guidelines for our next major release.</p>
