<p>Helping you <strong>select</strong> a MV* framework</p>
<nav>
<ahref="#"class="zocial red">Download (1.0)</a>
<ahref="#"class="zocial red">Project on GitHub</a>
<ahref="https://github.com/addyosmani/todomvc"class="zocial red">Project on GitHub</a>
</nav>
</div>
<divclass="span4">
...
...
@@ -35,78 +35,74 @@
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 decide on which to use in a sea of so many options?</p>
<p>To help solve this problem, we created <ahref="https://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>
</div>
<divclass="span8 applist">
<divclass="span8">
<h2>Our Stable Apps</h2>
<divclass="row">
<divclass="span2">
<ulclass="applist">
<li>
<aclass="routing"href="architecture-examples/angularjs/"data-source="http://angularjs.org"data-content="What HTML would have been had it been designed for web apps">AngularJS</a>
<spanclass="label">R</span>
</div>
<divclass="span2">
</li>
<li>
<ahref="architecture-examples/backbone/"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>
<spanclass="label">R</span>
</div>
<divclass="span2">
</li>
<li>
<ahref="architecture-examples/emberjs/"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>
<spanclass="label">R</span>
</div>
<divclass="span2">
</li>
<li>
<ahref="architecture-examples/spine/"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>
<spanclass="label">R</span>
</div>
</div>
<divclass="row">
<divclass="span2">
</li>
<li>
<ahref="architecture-examples/knockoutjs/"data-source="http://knockoutjs.com"data-content="Simplify dynamic JavaScript UIs by applying the Model-View-View Model (MVVM) pattern">KnockoutJS</a>
</div>
<divclass="span2">
</li>
<li>
<ahref="architecture-examples/dojo/"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>
<spanclass="label">R</span>
</div>
<divclass="span2">
</li>
<li>
<ahref="architecture-examples/yuilibrary/"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>
</div>
<divclass="span2">
</li>
<li>
<ahref="architecture-examples/gwt/"data-source="https://developers.google.com/web-toolkit/"data-content="Google Web Toolkit (GWT) is an MVP development toolkit for building and optimizing complex browser-based applications. GWT is used by many products at Google, including Google AdWords.">GWT</a>
</div>
</div>
<divclass="row">
<divclass="span2">
</li>
<li>
<ahref="architecture-examples/closure/"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>
<spanclass="label">R</span>
</div>
<divclass="span2">
</li>
<li>
<ahref="labs/architecture-examples/extjs/"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>
</div>
<divclass="span2">
</li>
<li>
<ahref="architecture-examples/agilityjs/"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>
<spanclass="label">R</span>
</div>
<divclass="span2">
</li>
<li>
<ahref="architecture-examples/knockback/"data-source="http://kmalakoff.github.com/knockback/"data-content="Knockback.js provides Knockout.js magic for Backbone.js Models and Collections.">Knockback.js</a>
<spanclass="label">R</span>
</div>
</div>
</li>
</ul>
<hr>
<h2>Apps using RequireJS/AMD</h2>
<divclass="row">
<divclass="span4">
<ulclass="applist amd">
<li>
<ahref="dependency-examples/backbone_require/"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>
</div>
<divclass="span4">
</li>
<li>
<ahref="dependency-examples/emberjs_require/"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. This is an example of using it with AMD modules">Ember.js + RequireJS</a>
<spanclass="label">R</span>
</div>
</div>
</li>
</ul>
<h2>Compare these to a non-framework implementation</h2>
<ahref="architecture-examples/jquery/"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>
</div>
</div>
</li>
</ul>
<p>* <spanclass="label">R</span> = App also demonstrates routing</p>
