forked from tastejs/todomvc
/
index.html
187 lines (159 loc) · 9.53 KB
/
index.html
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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TodoMVC</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- 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>
<![endif]-->
<!-- Le styles -->
<link href="bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
}
</style>
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
</head>
<body>
<div class="topbar">
<div class="topbar-inner">
<div class="container-fluid">
<a class="brand" href="http://github.com/addyosmani/todomvc">TodoMVC</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="http://github.com/addyosmani/todomvc/issues/new">Submit New Ticket</a></li>
</ul>
<p class="pull-right">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://addyosmani.github.com/todomvc" data-count="horizontal">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
</p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="sidebar">
<div class="well">
<h5>Examples Included For:</h5>
<ul>
<li><a href="http://documentcloud.github.com/backbone/">Backbone.js</a></li>
<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://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://dojotoolkit.org/">Dojo</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="http://code.google.com/closure/">Closure</a></li>
<li><a href="https://github.com/jgallen23/fidel">Fidel.js</a></li>
<li><a href="http://kmalakoff.github.com/knockback/">Knockback.js</a></li>
<li><a href="https://github.com/brokenseal/broke-client">Broke.js</a></li>
</ul>
<h5>Architecture Examples:</h5>
<ul>
<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/dojo/index.html">Dojo</a></li>
<li><a href="../architecture-examples/closure/index.html">Closure</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="../reference-examples/vanillajs/index.html">Vanilla JS</a></li>
<li><a href="../architecture-examples/yuilibrary/index.html">YUILibrary</a></li>
</ul>
<h5>Dependency Examples:</h5>
<ul>
<li><a href="../dependency-examples/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>
<li><a href="http://twitter.com/jeromegn">Jérôme Gravel-Niquet</a></li>
<li><a href="http://twitter.com/justinbmeyer">Justin Meyer</a></li>
<li><a href="http://twitter.com/macmann">Alex MacCaw</a></li>
<li><a href="">Ashish Sharma</a></li>
<li><a href="http://emberjs.com">Tom Dale, Yehuda Katz</a></li>
<li><a href="http://cburgdorf.wordpress.com/">Christoph Burgdorf</a></li>
<li><a href="http://developer.yahoo.com">The YUI team</a></li>
<li><a href="https://github.com/jacobmumm">Jacob Mumm</a></li>
<li><a href="https://github.com/brokenseal">Davide Callegari</a></li>
<li><a href="https://github.com/kmalakoff">Kevin Malakoff</a></li>
<li><a href="https://twitter.com/ffesseler">Florian Fesseler</a></li>
<li><a href="https://github.com/jthomas">James Thomas</a></li>
<li><a href="https://github.com/sindresorhus">Sindre Sorhus</a></li>
<li><a href="https://github.com/chrisprice">Chris Price</a></li>
</ul>
</div>
</div>
<div class="content">
<!-- Main hero unit for a primary marketing message or call to action -->
<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>
<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>
<div class="span12">
<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.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 MV* 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>
<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>
<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 we'll be happy to review them further.</p>
<p><a class="btn" href="https://github.com/addyosmani/todomvc/pull/new/master">Submit Pull Request»</a></p>
</div>
</div>
<footer>
</footer>
</div>
</div>
</body>
</html>