tastejs/todomvc

Helping you select an MV* framework - Todo apps for React.js, Ember.js, Angular, and many more

Helping you select an MV* framework

Website    Blog    TasteJS

Developers these days are spoiled with choice when it comes to selecting an MV* framework for structuring and organizing JavaScript web apps.

Backbone, Ember, AngularJS... 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?

To help solve this problem, we created TodoMVC - a project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today.

Team

TodoMVC would not be possible without a strong team of contributors helping push the project forward each day. Additionally, we have a core project team composed of:

Addy Osmani - Founder/Lead

Addy is a Software Engineer at Google who originally created TodoMVC. He oversees the project direction, maintenance and organizes the planning and development efforts of the team.

Sindre Sorhus - Lead Developer

Sindre is a Web Developer who leads core development, quality control and application design for the project. His engineering contributions have helped us ensure consistency and best practices are enforced wherever possible. Sindre also leads up development of the TodoMVC application spec.

Pascal Hartig - Developer

Pascal is a Software Engineer at Twitter with a deep passion for consistency. He watches pull requests and helps developers getting their contributions integrated with TodoMVC.

Stephen Sawchuk - Developer

Stephen is a Front-end Engineer at Quicken Loans that cares about improving the maintainability and developer experience of open-source projects. His recent contributions include helping us move all apps over to using Bower and implementing the new information bar.

Colin Eberhardt - Developer

Colin is a software consultant at Scott Logic who is passionate about all software - from JavaScript to Java, and C# to Objective-C. His recent contribution to the project has been a fully automated test suite.

Sam Saccone - Developer

Sam is a Software Engineer at Google who is driven by an endless desire to create, solve problems, and improve developers' lives.

Arthur Verschaeve - Developer

Arthur is an open-source fanboy from Belgium. He is passionate about developer tooling and all things JavaScript.

Fady Samir Sadek - Developer

Fady is a front-end developer who loves all things JavaScript and enjoys solving real world problems using the web platform and helping other developers do the same. He currently leads maintenance of the project and ensures that the project is friendly for new contributors and upcoming developers.

Gianni Chiappetta - Logo designer

Gianni is a programmer and designer currently working as the Chief Rigger at MetaLab.

Disclaimer

TodoMVC has been called many things including the 'Speed-dating' and 'Rosetta Stone' of MV* frameworks. Whilst we hope that this project can offer assistance in deciding what frameworks are worth spending more time looking at, remember that the Todo application offers a limited view of a framework's potential capability.

It is meant to be used as a gateway to reviewing how a basic application using a framework may be structured, and we heavily recommend investing time researching a solution in more depth before opting to use it.

Also, please keep in mind that TodoMVC is not the perfect way to compare the size of different frameworks. We intentionally use the unminified versions to make reading the source code easier.

Getting Involved

Whilst we enjoy implementing and improving existing Todo apps, we're always interested in speaking to framework authors (and users) wishing to share Todo app implementations in their framework/solution of choice.

Check out our contribution docs for more info.

License

Everything in this repo is MIT License unless otherwise specified.

MIT © Addy Osmani, Sindre Sorhus, Pascal Hartig, Stephen Sawchuk.

todomvc's Issues

Homepage experiencing strange floating issues at high-resolution

As reported by @cowboy http://gyazo.com/7d47d06d5c5414d9115347f7fc4f0f47. This needs to be fixed.

Update YUI library example

1. Need to update the html/css/folder structure to match the new template.
2. Update to the latest version of the libraries.

KnockoutJS example doesn't work in Opera

When adding a new todo item, no text is being added to the list. This is probably to do with Opera not correctly catching the observable value.

Jsview example

JSViews are the next generation of jquery templating. Can this example be included?
http://borismoore.github.com/jsviews/demos/step-by-step/10_todos.html

Update fidel example

1. Need to update the html/css/folder structure to match the new template.
2. Update to the latest version of the libraries.

SproutCore example issues

• Should update to latest jQuery
• Ensure this is available locally as there should be no external calls required. This is a self-contained project entirely.

Standardization Across Examples

There is some standardization that needs to happen across the examples. For instance, some of them store things between refresh and other don't. Some have a "mark all" checkbox and some don't. These are fairly straightforward to implement in each of the versions where it's missing, and I've started on this.

Another piece of this that I'm coming across is the third party libraries used by some of these. I think we should try to figure out a way to standardize which third party plugins should be used. One example that I think should be removed is things like emberjs using Sassy CSS (scss). SCSS is interesting and good to use, but I don't think it contributes to the nature of this project. If it's decided that SCSS is so valuable, then we should be using it on all of the projects and not just one. Another one of these is javascriptmvc's use of StealJS. I know that they work together, but it would be great if we weren't using compiled production code for the demo app, and if we could eliminate this from the example completely I think it would help level the playing field between the examples in understandability and size.

I really want some discussion around this and how other people think this should move forward.

Twitter "widgets.js" fails when in file://

In the index.html file there is this code:

<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

This fails while loading from the file:// scheme for obvious reasons.
Not sure if it should be considered a bug but in chrome 14 it's quite annoying having the page trying to load for some time before failing.

google closure library example

To make this more complete I'd like to see a Google Closure Library example with Closure Templates (aka Soy templates).

0.3 Release

I think we should try to get a 0.3 release finalised for the end of this week. Since 0.2 we've had a number of significant changes to the project including cleanups, tweaks, the boilerplate, a todo specification and new apps such as the Dojo example.

I really wanted to get #59 sorted out too, but I'm not sure we'll have time. I might try getting this finished myself during the week.

Some tasks related to a release are:

• Update https://github.com/addyosmani/addyosmani.github.com/tree/master/todomvc to reflect the new apps. Also revise the page language a little to better match the project README (e.g moving towards referring to apps as using the MV* pattern over MVC as this is more accurate)
• Tag the release on Friday (and update any download links above)

Other than these items is there anything else you think we should be covering for 0.3? (this will be the last major release before the application rewrites for 1.0)

//cc @boushley @sindresorhus

dojo toolkit

I'm just wondering: Would a Todo application using the Dojo Toolkit be an interesting addition?

Background:
I have personally not yet worked with Dojo, but it seems to me that Dojo implements a fair amount of MVC architecture, e.g. they have explicit support for data models and for binding UI components to these models. (http://dojotoolkit.org/reference-guide/dojox/index.html)

Update sammyjs example

1. Need to update the html/css/folder structure to match the new template.
2. Update to the latest version of the libraries.

Update jQuery Example

Need to add a tooltip to the todo creation box.

Add FlatIron example

Would be nice to see a Todo example built using FlatIron. Here's a related issue on their end:
flatiron/flatiron#5

Note that FlatIron targets both server and client, but if I understand correctly, it doesn't require a server.

What about qooxdoo?

Hey. Great project. What about implementing qooxdoo?
I guess mostly german people would love it.

Backbone+require: could use simple commonjs wrappers

Instead of this style:

  define([
    'jquery',
    'underscore',
    'backbone',
    'collections/todos',
    'views/todos',
    'text!templates/stats.html'
    ], function($, _, Backbone, Todos, TodoView, statsTemplate){

  });

This style can be used, it might help match up dependencies with their variable names better:

  define(function(require){

    var $ = require('jquery'),
        _ = require('underscore'),
        Backbone = require('backbone'),
        Todos = require('collections/todos'),
        TodoView = require('views/todos'),
        statsTemplate = require('text!templates/stats.html');

  });

Either is fine though. Just mentioning it to create awareness of the alternative.

Sammy.js app not working

http://addyosmani.github.com/todomvc/todo-example/sammyjs/index.html

It loads properly, but when I try to create a new item by typing into the text box and hitting enter, nothing happens and the console shows:

GET http://addyosmani.github.com/todomvc/todo-example/sammyjs/templates/_todo.template 404 (Not Found)

Tested in Chrome and FF

Update broke example

1. Need to update the html/css/folder structure to match the new template.
2. Update to the latest version of the libraries.

Redesign site, integrate new logo, V1 updated app list.

@boushley and I have been discussing it and we think that for the 1.0 release (which I don't think will be out for at least another month if not longer) we should see if we can get a redesign done of the TodoMVC index here: http://addyosmani.github.com/todomvc

I would love it if we could get someone like @nimbupani involved here as she's done an excellent job on sites like HTML5 Boilerplate, but if she's swamped it would be great if someone else would like to give this a shot.

Some examples of landing pages for projects done well:

html5boilerplate.com
sproutcore.com
handlebarsjs.com

0.3 Dojo app issues

We're getting reports of the Dojo app not functioning correctly on Chrome/Windows. There are also some minor reports about this being the case on Chrome/OSX, however I haven't been able to reproduce.

Could we get some people testing http://addyosmani.github.com/todomvc/architecture-examples/dojo/index.html just to confirm?

//cc @sindresorhus @boushley

Update knockoutjs example

1. Need to update the html/css/folder structure to match the new template.
2. Update to the latest version of the libraries.

Update to latest Backbone.js

The todo example included doesn't cover the latest updates to the version on the official Backbone repo. These changes need to be integrated in shortly.

Tooltip "Press Enter"

In the latest firefox the tooltip doesn't appear in the correct position.

Update vanillajs example

1. Need to update the html/css/folder structure to match the new template.
2. Update to the latest version of the libraries.

Why tests are important.

In response to the following response in the FAQ:

A:I'm currently still deciding whether there would be a great benefit to this. I regularly state that OS solutions should contain both tests and documentation, however, a few developers have suggested there not being a need nor expectation as these are essentially usage examples. If enough people request tests, I'm happy to support them.

When choosing a framework, an important point is how easy it is to write testable code with it.

For example AngularJS has all the sample code snippets equipped with tests, and has testability as one of it's main selling points. Then, it would be very interesting to know how it compares with other frameworks on this.

If it is easier to write testable code, chances are that we will write more of it.

Host on Github Pages "gh-pages" branch

Hi Addy,

I would love to see this hosted on Github via Github Pages : http://pages.github.com/

p.s. I think what you're doing here is AWESOME. Reading code is such a great way to cross compare frameworks. Thank you!

Performance comparisons and/or size comparisons?

It would be nice to see some type of performance comparisons between all of the options out there. Like speed tests between adding one, deleting one, deleting all, mark all as done, or initial rendering of a really long bootstrapped list of todos.
Although I am imagine in these really simple examples the differences would be almost negligible except for perhaps the rendering of the big list (which is also dependent on the template technology being used). In more complex and data-intensive apps those figures might actually add up to something significant.

Also, and this one it probably really easy to do- maybe in the documentation there could be some chart of the different file sizes the whole package comes out to, maybe without and without dependencies included.

I know the most important things when comparing these apps is code style and robustness, but I think some other comparison charts might also weigh in on peoples decisions.
Keep up the great work! Thanks for this great resource!

use custom binding for knockout.js enter key

I think it would be more idiomatic Knockout.js code if you set up a custom binding rather than check the keycode in the add function.

The custom binding page in the docs has an example of an event binding under hasFocus(). It's jQuery. It might be better for example purposes to use Knockout functions to set up the event.

Update javascriptmvc example

1. Need to update the html/css/folder structure to match the new template.
2. Update to the latest version of the libraries.

Update Backbone Example

1. Need to update the html/css/folder structure to match the new template.
2. Update to the latest version of the libraries.

Update backbone + require example

1. Need to update the html/css/folder structure to match the new template.
2. Update to the latest version of the libraries.

Online demo

An online demo showing the code and the apps would be great for quick demo of different frameworks and how they are structured.

Typo in backbone-version

Over here it should be backbone-localstorage.js instead of backbone-localstorage.html, right?

Want a PR?

PureMVC example

Here's a placeholder to add a PureMVC implementation of the todo list

Discussion about the role of TodoMVC

Both Yehuda (Ember) and Jeremy (Backbone) were in #documentcloud today discussing their frameworks, misconceptions and options on modular solutions like AMD. TodoMVC came up briefly and I wanted to discuss some of the comments that come out of that portion of the talk.

Jeremy commented that he thought this project was somewhat silly as Todo apps shouldn't be the way people decide on a framework. In his opinion this should be done by browsing the source and looking at serious applications built with it .Yehuda felt the project was at least better than how people were going about comparing frameworks in the past so that's at least something.

I agree with J's assertions to a degree, but imo the Todo app presents a gateway solution for easily comparing syntax and structure. It was also mentioned that none of the apps cover routing, something both developers felt was necessary for a true comparison (Yehuda mentioned a proper routing solution for ember.js was probably a month off).

I'm wondering based on this feedback if we should be revisiting a ticket that came in a while back to add routing to all of the Todo examples. This could be as simple as providing a way to link to individual Todo entries (with a routed view), however it would represent a change to our template and slightly more work to changing the apps.

I also think that we should revise our project readme/site when we get a chance to more strongly point out that we don't consider TodoMVC apps the end-all of how people should be choosing frameworks. I thought this was relatively clear before, but if it can be improved perhaps we should.

Open to thoughts on the above and other ways we can improve the project that we may not have considered. I think it's better to look at these now as we're still in a phase of rewriting existing apps.

//cc @boushley @sindresorhus

Update emberjs example

1. Need to update the html/css/folder structure to match the new template.
2. Update to the latest version of the libraries.

Shared dependencies

Should all examples be able to run stand-alone? Having just one instance of the stylesheet, and the numerous JS dependencies as well, would be a nice clean-up imho. I'm happy to fork & request a pull.

I think such files only distract from the purpose of this project.

My idea is to create a /shared folder and put shared JS/CSS there. Obviously I would also need to e.g. check/fix HTML, and perhaps views in JS to match CSS.

Update knockback example

1. Need to update the html/css/folder structure to match the new template.
2. Update to the latest version of the libraries.

Batman.js example

It would be great to have Batman.js included here.

Browser support?

Which browsers do we intend to support? Only modern? Same as jQuery?

We need to have a list in the the wiki for new framework implementations and users.

Or just "current - 1", but that might be a bit drastic.

Serenade.js

Something to consider for a future release:

https://github.com/elabs/serenade_todomvc

Update Angularjs and Angularjs + Persistence Examples

1. Need to update the html/css/folder structure to match the new template.
2. Update to the latest version of the libraries.

Sencha / Ext.JS example

Their MVC/model models are very solid. Possible to do w/o using the widget UI tropes and make match the experience. Could be instructive

YUI Library Implementation is broken in Google Chrome

When I run the YUILibrary version in Google Chrome I get the error:

yui-3.4.0.min.js:8 Uncaught SyntaxError: Unexpected token ,

backbone + curl + wire example

https://github.com/pieter-vanderwerff/todomvc/tree/master/dependency-examples/backbone_curl_wire

A TodoMVC example using backbone + curl + wire libraries, based on the backbone + require example allowing for comparisons.

Curl.js (https://github.com/cujojs/curl)
Wire.js (https://github.com/cujojs/wire)

This example comes with a test suite (using jasmine and sinon), run js/spec/browser/SpecRunner.html

Known deficiencies needed for 1.0 (based off issue #73):

• Need to update the html/css/folder structure to match the new template.
• Update to the latest version of the libraries.
• "Mark all complete" checkbox should be hidden when there are no tasks.
• Underscore AMD implementation error issues, see cujojs/curl#36

Update extjs example

1. Need to update the html/css/folder structure to match the new template.
2. Update to the latest version of the libraries.

No framework example

It would be great to also have the example that uses no MVC framework. jQuery only and maybe even poor JavaScript with no framework at all.

Add Opa TodoMVC implementation?

Opa (http://opalang.org) is not a Javascript MVC framework but it an alternative to using Javascript at all (directly).

My first project with it was actually taking TodoMVC and implementing it with Opa:

https://github.com/tsloughter/opado
And running live here: http://www.opado.org/

I thought it was worth sharing and possibly including in some way to the TodoMVC list of implementations.

Update spine example

1. Need to update the html/css/folder structure to match the new template.
2. Update to the latest version of the libraries.

knockback.js demo todo misbehaves with Opera version 11.61

1. New task entry field requires to submit.
2. Double click on existing task creates the entry field, but does not submit and does not clear the entry field box outline.