Skip to content

Commit

Permalink
Merge branch 'master' of https://github.com/addyosmani/todomvc
Browse files Browse the repository at this point in the history
  • Loading branch information
@addyosmani
addyosmani committed Feb 17, 2012
2 parents e0b2829 + 983cbcc commit 6830854
Show file tree
Hide file tree
Showing 5 changed files with 1,812 additions and 20 deletions.
75 changes: 55 additions & 20 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,35 +31,67 @@ <h1>TodoMVC</h1>
<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>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">Backbone.js</a></li>
<li><a href="dependency-examples/backbone_require/index.html">Backbone.js + RequireJS</a></li>
<li><a href="architecture-examples/emberjs/index.html">Ember.js</a></li>
<li><a href="architecture-examples/javascriptmvc/todo/todo/index.html">JavaScriptMVC</a></li>
<li><a href="architecture-examples/spine/index.html">Spine.js</a></li>
<li><a href="architecture-examples/knockoutjs/index.html">KnockoutJS (MVVM)</a></li>
<li><a href="architecture-examples/sammyjs/index.html">Sammy.js</a></li>
<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">Dojo</a></li>
<li><a href="architecture-examples/closure/index.html">Closure</a></li>
<li><a href="architecture-examples/yuilibrary/index.html">YUILibrary</a></li>
<li><a href="architecture-examples/knockback/index.html">Knockback.js</a></li>
<li><a href="architecture-examples/angularjs/index.html">AngularJS</a></li>
<li><a href="architecture-examples/angularjs_persistencejs/index.html">Angular + PersistenceJS</a></li>
<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>
</ul>
<ul class="nav nav-pills">
<li><a href="architecture-examples/extjs/index.html">Ext.js</a></li>
<li><a href="architecture-examples/broke/index.html">Broke.js</a></li>
<li><a href="architecture-examples/fidel/index.html">Fidel.js</a></li>
<li><a href="architecture-examples/jquery/index.html">jQuery</a></li>
<li><a href="reference-examples/vanillajs/index.html">Vanilla JS</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>
<li>
<a href="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>
<a href="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><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>

Expand Down Expand Up @@ -107,5 +139,8 @@ <h2>Getting Involved</h2>
<p>© TodoMVC. Brought to you by <a href="http://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>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="site/js/bootstrap.min.js"></script>
<script src="site/js/main.js"></script>
</body>
</html>
22 changes: 22 additions & 0 deletions site/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,28 @@ h2 {
float: none;
}

#demos ul li a {
position: relative;
}

#demos .popover {
margin: 0;
cursor: default;
color: #333;
}

#demos .popover-title {
padding: 9px 70px 9px 15px;
}

#demos .popover-title a {
font-size: 13px;
line-height: 18px;
position: absolute;
top: 16px;
right: 20px;
}

@media (max-width: 480px) {
#demos ul {
float: none;
Expand Down
Loading

0 comments on commit 6830854

Please sign in to comment.