forked from tastejs/todomvc
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
332 lines (327 loc) · 24.6 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
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TodoMVC</title>
<meta name="description" content="Helping you select an MV* framework - Todo apps for Backbone.js, Ember.js, AngularJS and many more">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="TodoMVC">
<meta name="twitter:site" content="@TasteJS">
<meta name="twitter:description" content="Helping you select an MV* framework - Todo apps for Backbone.js, Ember.js, AngularJS and many more">
<meta name="twitter:image" content="https://raw.githubusercontent.com/tastejs/todomvc/gh-pages/site-assets/screenshot.png">
<meta property="og:url" content="http://todomvc.com">
<meta property="og:title" content="TodoMVC">
<meta property="og:image" content="https://raw.github.com/tastejs/todomvc/gh-pages/site-assets/screenshot.png">
<meta property="og:description" content="Helping you select an MV* framework - Todo apps for Backbone.js, Ember.js, AngularJS and many more">
<link rel="shortcut icon" href="site-assets/favicon.ico">
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<!-- build:remove -->
<script src="bower_components/prefixfree/prefixfree.min.js"></script>
<!-- endbuild -->
<!-- build:css site-assets/main.min.css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="site-assets/main.css">
<!-- endbuild -->
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
</head>
<body>
<div class="container">
<header class="row">
<div class="col-md-8">
<img class="logo" src="site-assets/logo.svg" width="500" height="86" alt="TodoMVC">
<p>Helping you <strong>select</strong> an MV* framework</p>
<nav>
<a href="https://github.com/tastejs/todomvc/archive/master.zip" class="zocial red">Download</a>
<a href="https://github.com/tastejs/todomvc" class="zocial ltgray">View on GitHub</a>
<a href="https://medium.com/@tastejs" class="zocial ltgray">Blog</a>
</nav>
</div>
<div class="col-md-4">
<img class="logo-icon" src="site-assets/logo-icon.png" width="330" height="330" alt="TodoMVC">
</div>
</header>
<div class="row">
<div class="col-md-4">
<h2>Introduction</h2>
<p>Developers these days are spoiled with choice when it comes to <a href="http://coding.smashingmagazine.com/2012/07/27/journey-through-the-javascript-mvc-jungle/">selecting</a> an <strong>MV* framework</strong> for structuring and organizing their JavaScript web apps.</p>
<p>Backbone, Ember, AngularJS… the list of new and stable solutions continues to grow, 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 <a href="https://github.com/tastejs/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>
<a href="https://twitter.com/tastejs" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false"></a>
<a href="https://twitter.com/share" class="twitter-share-button" data-via="tastejs" data-url="http://todomvc.com" data-text="TodoMVC - Helping you select an MV* framework - Todo apps for Backbone.js, Ember.js, AngularJS, and more"></a>
<div class="g-plusone" data-size="medium" data-annotation="none" data-href="http://todomvc.com"></div>
</div>
<div class="col-md-8">
<h2>Examples</h2>
<style is="custom-style">
paper-tabs {
--paper-tabs-selection-bar-color: #b12d2b;
}
paper-tab {
--paper-tab-ink: #b12d2b;
}
paper-tabs, core-toolbar {
color: rgb(53, 53, 53);
background-color: #f4f4f4;
font-family: 'Helvetica Neue', Helvetica, Arial;
box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);
}
</style>
<paper-tabs selected="{{selectedTab}}" class="js-app-tabs">
<paper-tab data-target="js">JavaScript</paper-tab>
<paper-tab data-target="ctojs">Compile-to-JS</paper-tab>
<paper-tab data-target="labs">Labs</paper-tab>
</paper-tabs>
<iron-pages selected="{{selectedTab}}" class="app-lists">
<div class="js-app-list" data-app-list="js">
<p class="applist-intro">
These are examples written in pure JavaScript.
</p>
<ul class="js-app-list-inner applist js">
<li class="routing">
<a href="examples/backbone/" data-source="http://backbonejs.org/" 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 class="routing">
<a href="examples/angularjs/" data-source="http://angularjs.org" data-content="What HTML would have been had it been designed for web apps">AngularJS</a>
</li>
<li class="routing">
<a href="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>
</li>
<li class="routing">
<a href="examples/knockoutjs/" data-source="http://knockoutjs.com" data-content="Simplify dynamic JavaScript UIs by applying the Model-View-View Model (MVVM) pattern">KnockoutJS</a>
</li>
<li class="routing">
<a href="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>
</li>
<li class="routing">
<a href="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>
</li>
<li class="routing">
<a href="examples/canjs/" data-source="http://canjs.us" data-content="CanJS with jQuery. CanJS is a client-side, JavaScript framework that makes building rich web applications easy. It provides can.Model (for connecting to RESTful JSON interfaces), can.View (for template loading and caching), can.Observe (for key-value binding), can.EJS (live binding templates), can.Control (declarative event bindings) and can.route (routing support).">CanJS</a>
</li>
<li class="routing">
<a href="examples/polymer/index.html" data-source="http://polymer-project.org" data-content="Polymer is a new type of library for the web, built on top of Web Components, and designed to leverage the evolving web platform on modern browsers. It is comprised of core platform features (e.g Shadow DOM, Custom Elements, MDV) enabled with polyfills and a next generation web application framework built on these technologies.">Polymer</a>
</li>
<li class="routing">
<a href="examples/react/" data-source="http://facebook.github.io/react/" data-content="React is a JavaScript library for building user interfaces.">React</a>
</li>
<li class="routing">
<a href="examples/mithril/" data-source="https://mithril.js.org/" data-content="Mithril is a modern client-side Javascript framework for building Single Page Applications. It's small (< 8kb gzip), fast and provides routing and XHR utilities out of the box.">Mithril</a>
</li>
<li class="routing">
<a href="examples/vue/" data-source="http://vuejs.org" data-content="Vue.js provides the benefits of MVVM data binding and a composable component system with an extremely simple and flexible API.">Vue.js</a>
</li>
<li class="routing">
<a href="examples/backbone_marionette/" data-source="http://marionettejs.com" data-content="Backbone.Marionette is a composite application library for Backbone.js that aims to simplify the construction of large scale JavaScript applications.">Marionette.js</a>
</li>
</ul>
</div>
<div class="js-app-list" data-app-list="ctojs">
<p class="applist-intro">
These are applications written in programming
languages that compile to JavaScript.
</p>
<ul class="js-app-list-inner applist js">
<li class="routing">
<a href="examples/kotlin-react/" data-source="https://github.com/JetBrains/create-react-kotlin-app" data-content="Kotlin + React implementation uses Kotlin language in conjunction with React. Kotlin is designed to be an industrial-strength object-oriented language, and a 'better language' than Java, but still be fully interoperable with Java code, allowing companies to make a gradual migration from Java to Kotlin">Kotlin + React</a>
</li>
<li class="routing">
<a href="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>
</li>
<li class="routing">
<a href="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>
</li>
<li class="routing">
<a href="examples/elm/" data-source="http://elm-lang.org" data-content="A functional reactive language for interactive applications">Elm</a>
</li>
<li>
<a href="examples/angular-dart/web/" data-source="https://github.com/angular/angular.dart" data-content="Dart firstly targets the development of modern and large scale browser-side web apps. It's an object oriented language with a C-style syntax. AngularDart is a port of Angular to Dart.">AngularDart</a>
</li>
<li>
<a href="examples/typescript-backbone/" data-source="http://typescriptlang.org" data-content="TypeScript is a language for application-scale JavaScript development. It offers classes, modules, interfaces and type-checking at compile time to help you build robust components.">TypeScript <br>+ Backbone.js</a>
</li>
<li>
<a href="examples/typescript-angular/" data-source="http://typescriptlang.org" data-content="An AngularJS + TypeScript implementation of TodoMVC. The only significant difference between this and the vanilla Angular app is that dependency injection is done via annotated constructors, which allows minification of JavaScript.">TypeScript <br>+ AngularJS</a>
</li>
<li>
<a href="examples/typescript-react/" data-source="http://typescriptlang.org" data-content="An TypeScript + React implementation of TodoMVC. TypeScript is a language for application-scale JavaScript development. It offers classes, modules, interfaces and type-checking at compile time to help you build robust components. This examples showcases how to work with TSX files, which allow us to enjoy native JSX support while working with TypeScript.">TypeScript <br>+ React</a>
</li>
<li class="routing">
<a href="examples/reagent/" data-source="https://reagent-project.github.io/" data-content="Reagent provides a minimalistic interface between ClojureScript and React.">Reagent</a>
</li>
<li class="routing">
<a href="examples/scalajs-react/" data-source="https://github.com/japgolly/scalajs-react" data-content="Facebook's React on Scala.js.">Scala.js + React</a>
</li>
<li class="routing">
<a href="examples/binding-scala/" data-source="https://github.com/ThoughtWorksInc/Binding.scala" data-content="Binding.scala is a reactive web framework. This TodoMVC application has the tiniest code size among all the TodoMVC implementations.">Scala.js + Binding.scala</a>
</li>
<li class="routing">
<a href="examples/js_of_ocaml/" data-source="http://ocsigen.org/js_of_ocaml/" data-content="Js_of_ocaml is a compiler of OCaml bytecode to Javascript.">js_of_ocaml</a>
</li>
<li class="routing">
<a href="examples/humble/" data-source="https://github.com/go-humble/humble" data-content="Humble is a collection of loosely-coupled tools designed to build client-side and hybrid web applications using GopherJS, which compiles Go code to JavaScript.">Humble + GopherJS</a>
</li>
</ul>
</div>
<div class="js-app-list" data-app-list="labs">
<p class="applist-intro">
These are examples written in JavaScript that
we are still evaluating.
</p>
<ul class="js-app-list-inner applist js">
<li class="routing">
<a href="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>
</li>
<li>
<a href="examples/knockoutjs_require/" data-source="http://knockoutjs.com" data-content="This project is an adaptation of /examples/knockoutjs with require.js.">KnockoutJS + RequireJS</a>
</li>
<li class="routing">
<a href="examples/angularjs_require/" data-source="http://angularjs.org" data-content="What HTML would have been had it been designed for web apps. This is an example of using it with AMD modules.">AngularJS + RequireJS</a>
</li>
<li class="routing">
<a href="examples/canjs_require/" data-source="http://canjs.us" data-content="CanJS is a client-side, JavaScript framework that makes building rich web applications easy. The AMD version lets you use the framework in a fully modular fashion and will only what you actually need.">CanJS + RequireJS</a>
</li>
<li class="routing">
<a href="examples/lavaca_require/" data-source="http://getlavaca.com" data-content="A curated collection of tools for building mobile web applications.">Lavaca + RequireJS</a>
</li>
<li>
<a href="examples/cujo/index.html" data-source="http://cujojs.com" data-content="cujoJS is an architectural framework for building highly modular, scalable, maintainable applications in Javascript. It provides architectural plumbing, such as modules (AMD and CommonJS), declarative application composition, declarative connections, and aspect oriented programming.">cujoJS</a>
</li>
<li>
<a href="examples/somajs/" data-source="http://somajs.github.com/somajs" data-content="soma.js is a framework created to build scalable and maintainable javascript applications.">soma.js</a>
</li>
<li>
<a href="examples/duel/www/" data-source="https://bitbucket.org/mckamey/duel/wiki/Home" data-content="DUEL is a dual-side templating engine using HTML for layout and 100% pure JavaScript as the binding language. The same views may be executed both directly in the browser (client-side template) and on the server (server-side template).">DUEL</a>
</li>
<li>
<a href="examples/dijon/" data-source="https://github.com/creynders/dijon-framework" data-content="Dijon is an IOC and DI micro-framework for Javascript. Originally it was meant to be a port of Robotlegs, but deviated to something quite different. It remains however heavily inspired by Robotlegs, and more specifically Swiftsuspenders.">Dijon</a>
</li>
<li class="routing">
<a href="examples/enyo_backbone/" data-source="http://enyojs.com/" data-content="Enyo is a simple but powerful encapsulation model, which helps you factor application functionality into self-contained building blocks that are easy to reuse and maintain.">Enyo +<br>Backbone.js</a>
</li>
<li class="routing">
<a href="examples/exoskeleton/" data-source="http://exosjs.com/" data-content="A faster and leaner Backbone for your HTML5 apps.">Exoskeleton</a>
</li>
<li>
<a href="examples/ractive/" data-source="http://ractivejs.org" data-content="Ractive.js is a next-generation DOM manipulation library, optimised for developer sanity.">Ractive.js</a>
</li>
<li class="routing">
<a href="examples/react-alt/" data-source="http://alt.js.org" data-content="This React example integrates Alt for an example of an application following the Flux architecture.">React + Alt</a>
</li>
<li>
<a href="examples/react-backbone/" data-source="http://facebook.github.io/react/" data-content="This React example integrates Backbone for its model and router. It is a showcase of third-party library integration for developers wishing to use React together with a different JavaScript framework.">React + <br>Backbone.js</a>
</li>
<li class="routing">
<a href="examples/aurelia/" data-source="http://aurelia.io/" data-content="Aurelia is a next generation JavaScript client framework that leverages simple conventions to empower your creativity">Aurelia</a>
</li>
<li>
<a href="examples/angular2/" data-source="http://angular.io" data-content="Angular is a development platform for building mobile and desktop web applications">Angular 2.0</a>
</li>
<li class="routing">
<a href="examples/riotjs/" data-source="http://riotjs.com/" data-content="Riot.js is a React-like user interface micro-library.">Riot</a>
</li>
<li class="routing">
<a href="examples/jsblocks/" data-source="http://jsblocks.com/" data-content="From simple user interfaces to complex single-page applications using faster, server-side rendered and easy to learn framework.">JSBlocks</a>
</li>
</ul>
</div>
</iron-pages>
<ul class="legend">
<li><span class="label">R</span> = App also demonstrates routing</li>
</ul>
<hr>
<h2>Real-time</h2>
<ul class="applist">
<li class="routing">
<a href="examples/firebase-angular/" data-source="https://www.firebase.com" data-content="Firebase is a scalable realtime backend that lets you build apps without managing servers. Firebase persists and updates JSON data in realtime and is best used in combination with a JavaScript MV* framework such as AngularJS or Backbone.">Firebase + AngularJS</a>
</li>
</ul>
<hr>
<h2>Compare these to a non-framework implementation</h2>
<ul class="applist">
<li class="routing">
<a href="examples/vanillajs/" data-source="https://developer.mozilla.org/en/JavaScript" data-content="You know JavaScript right? :P">Vanilla JS</a>
</li>
<li class="routing">
<a href="examples/vanilla-es6/" data-source="https://developer.mozilla.org/en/JavaScript" data-content="Just ECMAScript 6 and DOM APIs. Compiled with Google Closure Compiler.">Vanilla ES6</a>
</li>
<li class="routing">
<a href="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>
</li>
</ul>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-6 quotes">
<blockquote class="quote speech-bubble">
<p></p>
<footer>
<img width="40" height="40" alt="">
<a></a>
</footer>
</blockquote>
</div>
<div class="col-md-6">
<img class="screenshot" src="site-assets/screenshot.png" width="558" height="246" alt="Todo app screenshot">
</div>
</div>
<hr>
<div class="row">
<div class="col-md-4">
<h2>New in 1.3</h2>
<ul class="whats-new">
<li>We now have 64 applications.
<label class="link" for="news-expander">New since 1.3 ▼</label>
<input type="checkbox" id="news-expander">
<ul class="collapsed" id="new-apps">
<li><a href="examples/angular-dart/web/">AngularDart</a></li>
<li><a href="examples/atmajs/">Atma.js</a></li>
<li><a href="examples/exoskeleton/">Exoskeleton</a></li>
<li><a href="examples/componentjs/">ComponentJS</a></li>
<li><a href="examples/binding-scala/">Binding.scala</a></li>
</ul>
</li>
<li>Updates have been made to apps including Vanilla, Angular, React, Backbone, Ember, jQuery & many more.</li>
<li>The knockoutjs_classBindingProvider application has been removed.</li>
</ul>
</div>
<div class="col-md-4">
<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 ensure that if you're happy with this, you do spend more time investigating the framework (including reading the official docs, the source and its complete feature list). There's often a lot more to a framework than what we present in our examples.</p>
</div>
<div class="col-md-4">
<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, read our <a href="https://github.com/tastejs/todomvc/wiki">contribution guidelines</a>, and submit a pull request — we'll be happy to review it for inclusion.</p>
<p>Make sure you use the <a href="https://github.com/tastejs/todomvc-app-template">template</a> as a starting point and read the <a href="https://github.com/tastejs/todomvc/blob/master/app-spec.md">app specification</a>.</p>
<p>
<a class="zocial small ltgray" href="https://github.com/tastejs/todomvc/wiki">Submit Pull Request »</a>
</p>
</div>
</div>
<hr>
<footer class="credit">
<p>Brought to you by
<a href="https://github.com/addyosmani"><img src="http://gravatar.com/avatar/96270e4c3e5e9806cf7245475c00b275?s=80" width="40" height="40" alt="Addy Osmani">Addy</a>
<a href="https://github.com/sindresorhus"><img src="http://gravatar.com/avatar/d36a92237c75c5337c17b60d90686bf9.png?s=80" width="40" height="40" alt="Sindre Sorhus">Sindre</a>
<a href="https://github.com/passy"><img src="http://gravatar.com/avatar/be451fcdbf0e5ff07f23ed16cb5c90a3.png?s=80" width="40" height="40" alt="Pascal Hartig">Pascal</a>
<a href="https://github.com/stephenplusplus"><img src="http://gravatar.com/avatar/098cfe2d360e77c3229f2cd5298354c4?s=80" width="40" height="40" alt="Stephen Sawchuk">Stephen</a>
<a href="https://github.com/colineberhardt"><img src="http://gravatar.com/avatar/73bba00b41ff1c9ecc3ee29487bace7d?s=80" width="40" height="40" alt="Colin Eberhardt">Colin</a>
<a href="https://github.com/arthurvr"><img src="https://avatars1.githubusercontent.com/u/6025224?v=3&s=80" width="40" height="40" alt="Arthur Verschaeve">Arthur</a>
<a href="https://github.com/samccone"><img src="https://avatars0.githubusercontent.com/u/883126?v=3&s=80" width="40" height="40" alt="Sam Saccone">Sam</a>
</p>
</footer>
</div>
<!-- build:js site-assets/main.min.js -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="site-assets/main.js"></script>
<!-- endbuild -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async=true;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<script>(function(){var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://apis.google.com/js/plusone.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();</script>
<script>var _gaq=[['_setAccount','UA-31081062-1'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'));</script>
</body>
</html>