▲ 97 points
back
38 comments
This is a very useful resource, and it really is great to see it being done in such a professional manner, but I can't help but wish for the end of these Todo<blah> examples.
A todo app simply isn't complex enough to give users any sort of insight into which framework to choose. There are so many other areas that are important yet completely uncovered in the code - things like authentication, ACL, mobile support, and plenty more examples that I just can't think of off the top of my head right now.
The idea behind this is fantastic, the execution is incredible, but the project choice is too limited in my eyes.
The difficulty is that anything more complex is TOO complex as an example. This is meant to demonstrate the MVC of a thing. With this example, I can quickly examine the structure and feel of a given tool, an hold the entire example in my head. When you start stacking all of the other bits on too, this starts to become more difficult. What TodoMVC allows is a quick survey to narrow down contenders. At that point I can examine the other crucial aspects and understand if they work for my project.
>The difficulty is that anything more complex is TOO complex as an example.
This sums it up. "Todo" examples are intended as a web/js-framework equivalent to the traditional "Hello World" example used to introduce a programming language. "Todo" defines a basic unit of usefulness that can be easily implemented to give the target audience an idea of what a given framework "looks like". It isn't perfect, but it is a starting point for framework comparison.
Couldn't agree more. Todo doesn't come close to exposing the actual strengths or limitations of a given framework.
"Set the bar so low, no one cares if you succeed" - Homer Simpson
Something like Google contacts, or Gmail if you wanna push your luck, would be more appropriate.
Maintainer here. We are fully aware that todo apps are not enough to get a deep insight into frameworks. Think of it more as getting a little taste of each framework which will help you narrow down the choices. We're planning more fully featured apps in the future with the most popular frameworks. Stay tuned.
Would love to have table based comparison with number of files, file size, etc
That's in the works. Nice to see someone else wants that too :)
Thanks a lot for doing this.
I'm trying to choose a framework right now and TodoMVC is really helping in doing so.
I have one question though: Would you mind if I ported your apps over to CoffeeScript? I prefer CoffeeScript over JavaScript, but haven't done that much work in CoffeeScript. I think porting the apps would be a great learning experience and would help others too. Of course I would put it up on Github.
Sure of course. Feel free to!
Be sure to add it to our wiki when it's done: https://github.com/addyosmani/todomvc/wiki/Other-implementat...
Their README says the site is MIT Licensed, so you're fine: https://github.com/addyosmani/todomvc#license
Most of these MVC frameworks seem to add a lot of extra structure, which I don't like. Compare e.g. Backbone (https://github.com/addyosmani/todomvc/tree/gh-pages/architec...) or AngularJs (https://github.com/addyosmani/todomvc/tree/gh-pages/architec...) implementations to the simple jQuery implementation (https://github.com/addyosmani/todomvc/tree/gh-pages/architec...).
Are there any good JS libraries that take more Unix-like approach, i.e. they do one thing and they do it well? For example a library that would implement just the Model part: syncing data between server and client. Or another one that would implement for example a better abstractions for event handling (event-firing states, futures, etc.), but nothing more.
I think the problem is mostly that a todo list is too simple an example for these frameworks and that's why it seems like they're just adding extra structure. That extra structure is (hopefully) going to save you a lot of code once your app gets more complex.
I made a MVC library called Stapes that hopefully fills in this space:
It's on TodoMVC as well in the labs section:
http://todomvc.com/labs/architecture-examples/stapes/
About 500 LOC, only the important parts you need in a MVC library (a flexible event system and models with change events), nothing else.
Have a look and tell me what you think :)
It's all well and good to keep it simple if the extent of your app is actually a Todo list, but most of these frameworks are built to render an entire website worth of content on the client, including a router, controller, models, views, etc. That necessarily can make them a little more verbose for these simple examples, but invaluable in giving structure to complex apps.
My company uses Spine for pretty much exactly that reason.
It's written by Alex McCaw, it's fantastic, and it even has a set of (again, modular) pieces to help develop mobile compatible interfaces.
Backbone does that , you can just use one part of backbone without the rest. want are router ? use the Router , want models? use the Model object ,want just sync ? use the Sync ect... backbone is not a MVC framework it is a collection of tools. Backbone doesnt force you into anything. That's why there are no controllers in Backbone ( Routers are not , routers are mediators ).
Wow, the Angular version is so small. Very impressed with the clean, readable, and terse code. Thanks guys.
It's not so small when you add up all of the obtrusive javascript/framework code that is littered throughout the html:
<li ng-repeat="todo in todos | filter:statusFilter" ng-class="{completed: todo.completed, editing: todo == editedTodo}">
... which some may consider a bigger problem than size.
We recently had to make a choice between frameworks and my colleague and I came from a jquery/rails background, virtually no practical experience with js frameworks. We started with backbone.js, but I was immediately frustrated. We then switched to angular.js after going through the tutorial ~2hrs.
Four months and a lot of learning later, I am very happy with our choice. If I ever get some spare time I want to write some posts on angular from a rails perspective. I found the rails nomenclature I was used to didn't directly translate to angular.
One other reason we chose angular, it is backed by Google. The meetups I have attended in Seattle keep growing steadily and the mailing list is great.
> One other reason we chose angular, it is backed by Google.
I like Google for many things - there is no doubt they have some solid developers and have released great products - but they have a poor track record with frontend framework adoption. For example:
- GWT (not a lot of adoption and waning)
- Closure Tools (except for the great Google products that are built with this library and closure compiler it hasn't had a lot of adoption)
- Dart (verdict is still out on this one but it doesn't look good)
PLEASE write this up. :) I'm in a similar boat. I have a fair amount of legacy code I would need to port over, so I'd especially like to know what the transition was like (if that applies to your situation).
Edit: also, vis a vis Rails I'm curious whether and how it's possible to handle validations on the client side without having to duplicate everything in the Rails model.
Yes! AngularJS's concept is similar to RAD frameworks such as VCL (in Delphi) and the UI frameworks in .net frameworks on Windows.
but not small enough. i just recently 'convert' from backbone to angular, so i'm bias. but i dont understand why on earth the js needs to be seperated instead of everything in 1 js file. only then people can say, "is this all? wow!" and i cant help but wonder why the actions need to be in 'form' element. angular can do ng-click just fine.
Check out http://jsfiddle.net/api/post/library/pure/, it uses a single file for the entire angular app. From my experience, spreading services, controllers, etc over multiple files is just for convenience.
Bah, ignore that. Try out the JSFiddle linked for the "Wire up a Backend" example on http://angularjs.org/
Most obvious telltale that todo is too simplistic is that the jquery version is shorter than many of the framework versions.
It's also the most obvious telltale that most of these frameworks are completely unnecessary for many front-end scenarios. I find a good portion of the front-end work I do does not benefit even from the more lightweight ones like Backbone in the least.
I used to feel like that too, but Backbone is really lightweight and unopinionated. Check out this step-by-step guide on how to convert a jQuery app to Backbone: https://github.com/kjbekkelund/writings/blob/master/publishe...
I've used Backbone extensively before. It was actually the other way around where I didn't need 90% of what backbone did for what I was doing and just switched back to jQuery.
For situations where I actually do want some kind of client-to-server data-binding, I generally prefer it to provide two-way view<->model binding so I've been leaning towards Angular (as heavy as it is) and Knockout.
TodoMVC is great for getting a rough idea, but as discussed in these comments, it's not terribly helpful for selecting a library. What is helpful? Looking at the diversity of different sorts of apps and projects that the library has been used to build. For example:
http://backbonejs.org/#examples
No doubt this is a great resource for getting to know very basics of all these frameworks.
The thing is that the TODO application is way too simple and does not require solving any meaningful problems. A much better and more realistic sample app would include at least handling basic relations between objects like users commenting under articles or voting on submissions. Say simple HN in JS MV* implementation would be a lot better resource.
I asked about this on twitter recently but no responses.
Can anyone list their absolute favourite open source client side web based todo lists? It seems like there would be a lot as its everyones favourite personal project (I do have my own). however most seem to be extremely basic.
I am mostly judging by UX features and polish, something that works really well webbased + tablet + mobile would be a plus.
If anyone is interested in why, I am an author of pouchdb, a javascript library that aims to make syncing offline apps incredibly easy, I plan to take a standalone todo app and modify it to sync the data to see how easy it is / make a tutorial.
What I would find more important than a comparison of technical features is a comparison of their active communities.
How many people are using each project, how active is development, that sort of thing.
At good metric for an indirect peg on number of people using something is the "star" count on Github. It's not an ideal metric but it is a reasonable proxy. The other thing I'd look at which requires more effort is to look at the number of subscribers to the mailing list (if you can get it.)
Went to a session at Silicon Valley Code Camp, where this was mentioned. It seems like a good intermediary between code inspection and anecdotal recommendations.
To those more well versed in JS than I:
Which of these frameworks have the best support for client side persistence? I'm thinking something like active record for indexeddb/websql.