tastejs / todomvc Goto Github PK
View Code? Open in Web Editor NEWHelping you select an MV* framework - Todo apps for React.js, Ember.js, Angular, and many more
Home Page: http://todomvc.com
License: Other
Helping you select an MV* framework - Todo apps for React.js, Ember.js, Angular, and many more
Home Page: http://todomvc.com
License: Other
An online demo showing the code and the apps would be great for quick demo of different frameworks and how they are structured.
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):
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.
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!
Over here it should be backbone-localstorage.js
instead of backbone-localstorage.html
, right?
Want a PR?
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:
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
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.
@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
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
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
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.
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.
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.
Hey. Great project. What about implementing qooxdoo?
I guess mostly german people would love it.
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.
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.
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
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!
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.
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.
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
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
It would be great to have Batman.js included here.
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.
Something to consider for a future release:
Need to add a tooltip to the todo creation box.
As reported by @cowboy http://gyazo.com/7d47d06d5c5414d9115347f7fc4f0f47. This needs to be fixed.
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)
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.
When I run the YUILibrary version in Google Chrome I get the error:
yui-3.4.0.min.js:8 Uncaught SyntaxError: Unexpected token ,
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.
Here's a placeholder to add a PureMVC implementation of the todo list
To make this more complete I'd like to see a Google Closure Library example with Closure Templates (aka Soy templates).
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.