Skip to content

T
todomvc
Commit 338c0ff7 authored by Aaron Boushley's avatar Aaron Boushley
Browse files
Options

Moved project overview into a folder of its own.

parent 52c9d10d
Hide whitespace changes
Inline Side-by-side
Showing with 201 additions and 0 deletions
index.html → introduction/index.html
View file @ 338c0ff7
......@@ -8,7 +8,7 @@
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles -->
......@@ -53,19 +53,17 @@
<div class="well">
<h5>Examples Included For:</h5>
<ul>
<li><a href="http://www.emberjs.com/">Ember.js (SproutCore 2.0)</a></li>
<li><a href="http://javascriptmvc.com/">JavaScriptMVC</a></li>
<li><a href="http://documentcloud.github.com/backbone/">Backbone.js</a></li>
<li><a href="http://spinejs.com/">Spine.js</a></li>
<li><a href="http://sammyjs.org/">Sammy.js</a></li>
<li><a href="http://kmalakoff.github.com/knockback/">Knockback.js</a></li>
<li><a href="http://knockoutjs.com/">KnockoutJS</a></li>
<li><a href="http://developer.yahoo.com/yui/">YUILibrary</a></li>
<li><a href="http://angularjs.org/">AngularJS</a></li>
<li><a href="https://github.com/brokenseal/broke-client">Broke.js</a></li>
<li><a href="https://github.com/jgallen23/fidel">Fidel.js</a></li>
<li><a href="http://angularjs.org/">AngularJS</a></li>
<li><a href="http://documentcloud.github.com/backbone/">Backbone.js</a></li>
<li><a href="https://github.com/brokenseal/broke-client">Broke.js</a></li>
<li><a href="http://www.emberjs.com/">Ember.js (SproutCore 2.0)</a></li>
<li><a href="https://github.com/jgallen23/fidel">Fidel.js</a></li>
<li><a href="http://javascriptmvc.com/">JavaScriptMVC</a></li>
<li><a href="http://kmalakoff.github.com/knockback/">Knockback.js</a></li>
<li><a href="http://knockoutjs.com/">KnockoutJS</a></li>
<li><a href="http://spinejs.com/">Spine.js</a></li>
<li><a href="http://sammyjs.org/">Sammy.js</a></li>
<li><a href="http://developer.yahoo.com/yui/">YUILibrary</a></li>
</ul>
<h5>0.2 Changelog</h5>
......@@ -78,25 +76,29 @@
<li><span class="label">New</span> Fidel.js example</li>
</ul>
<h5>Live demos</h5>
<h5>Architecture Examples:</h5>
<ul>
<li><a href="todo-example/emberjs/index.html">Ember.js</a></li>
<li><a href="todo-example/javascriptmvc/todo/todo/index.html">JavaScriptMVC</a></li>
<li><a href="todo-example/spine/index.html">Spine.js</a></li>
<li><a href="todo-example/backbone/index.html">Backbone.js</a></li>
<li><a href="todo-example/backbone_require/index.html">Backbone.js + RequireJS</a></li>
<li><a href="todo-example/sammyjs/index.html">Sammy.js</a></li>
<li><a href="todo-example/knockback/todos-classic/index.html">Knockback.js</a></li>
<li><a href="todo-example/knockoutjs/index.html">KnockoutJS (MVVM)</a></li>
<li><a href="todo-example/yuilibrary/index.html">YUILibrary</a></li>
<li><a href="todo-example/angularjs/main/index.html">AngularJS</a></li>
<li><a href="todo-example/angularjs/persistencejs/index.html">Angular + PersistenceJS</a></li>
<li><a href="todo-example/broke/index.html">Broke.js</a></li>
<li><a href="todo-example/fidel/index.html">Fidel.js</a></li>
<li><a href="todo-example/vanillajs/index.html">Vanilla 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/backbone/index.html">Backbone.js</a></li>
<li><a href="../architecture-examples/broke/index.html">Broke.js</a></li>
<li><a href="../architecture-examples/emberjs/index.html">Ember.js</a></li>
<li><a href="../architecture-examples/fidel/index.html">Fidel.js</a></li>
<li><a href="../architecture-examples/javascriptmvc/todo/todo/index.html">JavaScriptMVC</a></li>
<li><a href="../architecture-examples/knockback/index.html">Knockback.js</a></li>
<li><a href="../architecture-examples/knockoutjs/index.html">KnockoutJS (MVVM)</a></li>
<li><a href="../architecture-examples/spine/index.html">Spine.js</a></li>
<li><a href="../architecture-examples/sammyjs/index.html">Sammy.js</a></li>
<li><a href="../architecture-examples/vanillajs/index.html">Vanilla JS</a></li>
<li><a href="../architecture-examples/yuilibrary/index.html">YUILibrary</a></li>
</ul>
<h5>Contributors</h5>
<h5>Dependency Examples:</h5>
<ul>
<li><a href="../dependency-example/backbone_require/index.html">Backbone.js + RequireJS</a></li>
</ul>
<h5>Contributors:</h5>
<ul>
<li><a href="http://twitter.com/addyosmani">Addy Osmani</a></li>
<li><a href="https://github.com/boushley">Aaron Boushley</a></li>
......@@ -113,13 +115,13 @@
<li><a href="https://twitter.com/ffesseler">Florian Fesseler</a></li>
</ul>
<h5>Coming Soon</h5>
<h5>Coming Soon:</h5>
<ul>
<li>ES.Next Todo app using native Models, Modules, Classes.</li>
<li>Dojo Todo app (with MVC patterns)</li>
<li>Batman.js Todo app</li>
<li>Todo app boilerplate</li>
<li>Todo app pure JS : no framework, no MVC</li>
<li>Todo app pure JS : no framework, no MVC</li>
</ul>
</div>
......@@ -129,83 +131,71 @@
<div class="hero-unit">
<h1>TodoMVC</h1>
<p>A common learning application for popular JavaScript MVC frameworks</p>
<p><a class="btn primary large" href="https://github.com/addyosmani/todomvc/zipball/master">Download (latest)</a> &nbsp;
<a class="btn secondary large" href="http://github.com/addyosmani/todomvc">Follow On GitHub</a></p>
<p>
<a class="btn primary large" href="https://github.com/addyosmani/todomvc/zipball/master">Download (latest)</a> &nbsp;
<a class="btn secondary large" href="http://github.com/addyosmani/todomvc">Follow On GitHub</a>
</p>
</div>
<div class="span12">
<h3>Screenshots</h3>
<p>A preview of the Todo apps included in the download:</p>
<ul class="media-grid">
<li>
<a href="#"><img src="images/sproutcore.jpg" alt="SproutCore"></a>
</li>
<li>
<a href="#"><img src="images/backbone.jpg" alt="Backbone"></a>
</li>
<li>
<a href="#"><img src="images/yui.jpg" alt="YUILibrary"></a>
</li>
</ul>
</div>
<a name="about"></a>
<!-- end row-->
<div class="span12">
<h2>Introduction</h2>
<p>Developers these days are spoiled with choice when it comes to selecting an <strong>MVC framework</strong> for structuring and organizing JavaScript web apps. Backbone, Spine, Ember.js (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, I created <a href="http://github.com/addyosmani/todomvc">TodoMVC</a> - a project which offers the same Todo application implemented using MVC concepts in most of the popular JavaScript MVC frameworks of today. 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>
<hr class="span12">
<div class="span12">
<h2>Getting Started</h2>
<p>You can get setup with TodoMVC in just a few short steps:</p>
<p>
<ol>
<li>Download the <a href="https://github.com/addyosmani/todomvc/zipball/v0.2">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>
<hr class="span12">
<div class="span12">
<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 use. </p>
<div class="span12">
<h3>Screenshots</h3>
<p>A preview of the Todo apps included in the download:</p>
<ul class="media-grid">
<li> <a href="#"><img src="images/sproutcore.jpg" alt="SproutCore"></a> </li>
<li> <a href="#"><img src="images/backbone.jpg" alt="Backbone"></a> </li>
<li> <a href="#"><img src="images/yui.jpg" alt="YUILibrary"></a> </li>
</ul>
</div>
<a name="about"></a>
<p>Study the syntax required for defining models, views, controllers and classes (if supported) 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>
<div class="span12">
<h2>Introduction</h2>
<p>Developers these days are spoiled with choice when it comes to selecting an <strong>MVC framework</strong> for structuring and organizing JavaScript web apps. Backbone, Spine, Ember.js (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>Some developers have also found that creating derivative apps that take the basic list-editing concept further greatly helped them in their selection process, so you may find a similar exercise helpful.</p>
</div>
<p>To help solve this problem, I created <a href="http://github.com/addyosmani/todomvc">TodoMVC</a> - a project which offers the same Todo application implemented using MVC concepts in most of the popular JavaScript MVC frameworks of today. 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>
<hr class="span12">
<div class="span12">
<h2>Getting Started</h2>
<p>You can get setup with TodoMVC in just a few short steps:</p>
<p>
<ol>
<li>Download the <a href="https://github.com/addyosmani/todomvc/zipball/v0.2">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>
<hr class="span12">
<hr class="span12">
<div class="span12">
<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 use. </p>
<div class="span12">
<h2>Getting Involved</h2>
<p>Is there a bug we haven't fixed or an MVC framework you feel would benefit from being included in TodoMVC? If so, feel free to submit a pull request and I'll be happy to review it for inclusion. A boilerplate for Todo apps will probably land in TodoMVC 0.3, but until then if you have any stylistic or app-specific questions you'd like to ask, feel free to ask on <a href="http://twitter.com">Twitter</a>.</p>
<p><a class="btn" href="https://github.com/addyosmani/todomvc/pull/new/master">Submit Pull Request&raquo;</a></p>
</div>
<p>Study the syntax required for defining models, views, controllers and classes (if supported) 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>
</div>
<p>Some developers have also found that creating derivative apps that take the basic list-editing concept further greatly helped them in their selection process, so you may find a similar exercise helpful.</p>
</div>
<hr class="span12">
<div class="span12">
<h2>Getting Involved</h2>
<p>Is there a bug we haven't fixed or an MVC framework you feel would benefit from being included in TodoMVC? If so, feel free to submit a pull request and I'll be happy to review it for inclusion. A boilerplate for Todo apps will probably land in TodoMVC 0.3, but until then if you have any stylistic or app-specific questions you'd like to ask, feel free to ask on <a href="http://twitter.com">Twitter</a>.</p>
<p><a class="btn" href="https://github.com/addyosmani/todomvc/pull/new/master">Submit Pull Request&raquo;</a></p>
</div>
<footer>
<p>&copy; TodoMVC, Addy Osmani 2011</p>
</footer>
</div>
<footer>
<p>&copy; TodoMVC, Addy Osmani 2011</p>
</footer>
</div>
</div>
</body>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7