</p><ulclass="applist js"><liclass="routing"><ahref="architecture-examples/spine"data-source="http://spinejs.com"data-content="Spine is a lightweight framework for building JavaScript web applications. Spine gives you an MVC structure and then gets out of your way, allowing you to concentrate on the fun stuff, building awesome web applications.">Spine</a></li><liclass="routing"><ahref="vanilla-examples/vanilladart/build"data-source="http://dartlang.org"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. It has two run modes : it can be compiled to JS, and will later run in native VM in compliant browsers (just in a dedicated Chromium provided with Dart SDK for the moment).">Dart</a></li><liclass="routing"><ahref="architecture-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><liclass="routing"><ahref="architecture-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><ahref="labs/architecture-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><ahref="labs/architecture-examples/batman"data-source="http://batmanjs.org"data-content="Batman.js is a framework for building rich web applications with CoffeeScript or JavaScript. App code is concise and declarative, thanks to a powerful system of view bindings and observable properties. The API is designed with developer and designer happiness as its first priority.">Batman.js</a></li><li><ahref="labs/architecture-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><ahref="labs/architecture-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><ahref="labs/architecture-examples/serenadejs"data-source="https://github.com/elabs/serenade.js"data-content="Serenade.js is yet another MVC client side JavaScript framework. Why do we indulge in recreating the wheel? We believe that Serenade.js more closely follows the ideas of classical MVC than competing frameworks.">Serenade.js</a></li></ul></div><divclass="js-app-list"data-app-list="labs"><pclass="applist-intro">
These are examples written in JavaScript that
we are still evaluating.
</p><ulclass="applist js"><liclass="routing"><ahref="labs/architecture-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.">MarionetteJS</a></li><liclass="routing"><ahref="labs/architecture-examples/thorax"data-source="http://thoraxjs.org"data-content="An opinionated, battle tested Backbone + Handlebars framework to build large scale web applications.">Thorax</a></li><liclass="routing"><ahref="labs/dependency-examples/chaplin-brunch/public"data-source="http://chaplinjs.org"data-content="Chaplin is an architecture for JavaScript applications using the Backbone.js library. Chaplin addresses Backbone’s limitations by providing a lightweight and flexible structure that features well-proven design patterns and best practises.">Chaplin + Brunch</a></li><liclass="routing"><ahref="dependency-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><ahref="labs/dependency-examples/knockoutjs_require"data-source="http://knockoutjs.com"data-content="This project is an adaptation of /architecture-examples/knockoutjs with require.js.">KnockoutJS + RequireJS</a></li><liclass="routing"><ahref="labs/dependency-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><liclass="routing"><ahref="labs/dependency-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><liclass="routing"><ahref="labs/dependency-examples/troopjs_require"data-source="https://github.com/troopjs/"data-content="TroopJS attempts to package popular front-end technologies and bind them with minimal effort for the developer. It includes jQuery for DOM manipulation, When.js for promises, RequireJS for modularity and Has.js for feature detection. On top, it includes Pub/Sub support, templating, weaving (widgets to DOM) and auto-wiring.">TroopJS + RequireJS</a></li><liclass="routing"><ahref="labs/dependency-examples/thorax_lumbar/public"data-source="http://walmartlabs.github.com/lumbar"data-content="An opinionated, battle tested Backbone + Handlebars framework to build large scale web applications. This implementation uses Lumbar, a route based module loader.">Thorax + Lumbar</a></li><liclass="routing"><ahref="labs/dependency-examples/somajs_require"data-source="http://somajs.github.com/somajs"data-content="soma.js is a framework created to build scalable and maintainable javascript applications.">soma.js + RequireJS</a></li><liclass="routing"><ahref="labs/dependency-examples/durandal"data-source="http://durandaljs.com/"data-content="Single Page Apps Done Right">Durandal</a></li><liclass="routing"><ahref="labs/dependency-examples/lavaca_require"data-source="http://getlavaca.com"data-content="A curated collection of tools for building mobile web applications.">Lavaca + RequireJS</a></li></ul></div></div><ulclass="legend"><li><b>*</b><spanclass="label">R</span> = App also demonstrates routing</li></ul><hr><h2>Real-time</h2><ulclass="applist"><li><ahref="http://todomvcapp.meteor.com"data-source="http://meteor.com"data-content="Meteor is an ultra-simple environment for building modern websites. A Meteor application is a mix of JavaScript that runs inside a client web browser, JavaScript that runs on the Meteor server inside a Node.js container, and all the supporting HTML fragments, CSS rules, and static assets. Meteor automates the packaging and transmission of these different components. And, it is quite flexible about how you choose to structure those components in your file tree.">Meteor</a></li><li><ahref="http://todomvc.derbyjs.com"data-source="http://derbyjs.com"data-content="MVC framework making it easy to write realtime, collaborative applications that run in both Node.js and browsers.">Derby</a></li><liclass="routing"><ahref="http://todomvc-socketstream.herokuapp.com"data-source="http://www.socketstream.org"data-content="SocketStream is a fast, modular Node.js web framework dedicated to building realtime single-page apps">SocketStream</a></li><liclass="routing"><ahref="labs/architecture-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><ulclass="applist"><liclass="routing"><ahref="vanilla-examples/vanillajs"data-source="https://developer.mozilla.org/en/JavaScript"data-content="You know JavaScript right? :P">Vanilla JS</a></li><liclass="routing"><ahref="architecture-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><divclass="row"><divclass="col-md-6 quotes"><blockquoteclass="quote speech-bubble"><p></p><footer><imgwidth="40"height="40"alt=""><a></a></footer></blockquote></div><divclass="col-md-6"><imgclass="screenshot"src="site-assets/screenshot.png"width="558"height="246"alt="Todo app screenshot"></div></div><hr><divclass="row"><divclass="col-md-4"><h2>New in 1.3</h2><ulclass="whats-new"><li>We now have 64 applications.
</p><ulclass="applist js"><liclass="routing"><ahref="labs/architecture-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.">MarionetteJS</a></li><liclass="routing"><ahref="labs/architecture-examples/thorax"data-source="http://thoraxjs.org"data-content="An opinionated, battle tested Backbone + Handlebars framework to build large scale web applications.">Thorax</a></li><liclass="routing"><ahref="labs/dependency-examples/chaplin-brunch/public"data-source="http://chaplinjs.org"data-content="Chaplin is an architecture for JavaScript applications using the Backbone.js library. Chaplin addresses Backbone’s limitations by providing a lightweight and flexible structure that features well-proven design patterns and best practises.">Chaplin + Brunch</a></li><liclass="routing"><ahref="dependency-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><ahref="labs/dependency-examples/knockoutjs_require"data-source="http://knockoutjs.com"data-content="This project is an adaptation of /architecture-examples/knockoutjs with require.js.">KnockoutJS + RequireJS</a></li><liclass="routing"><ahref="labs/dependency-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><liclass="routing"><ahref="labs/dependency-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><liclass="routing"><ahref="labs/dependency-examples/troopjs_require"data-source="https://github.com/troopjs/"data-content="TroopJS attempts to package popular front-end technologies and bind them with minimal effort for the developer. It includes jQuery for DOM manipulation, When.js for promises, RequireJS for modularity and Has.js for feature detection. On top, it includes Pub/Sub support, templating, weaving (widgets to DOM) and auto-wiring.">TroopJS + RequireJS</a></li><liclass="routing"><ahref="labs/dependency-examples/thorax_lumbar/public"data-source="http://walmartlabs.github.com/lumbar"data-content="An opinionated, battle tested Backbone + Handlebars framework to build large scale web applications. This implementation uses Lumbar, a route based module loader.">Thorax + Lumbar</a></li><liclass="routing"><ahref="labs/dependency-examples/somajs_require"data-source="http://somajs.github.com/somajs"data-content="soma.js is a framework created to build scalable and maintainable javascript applications.">soma.js + RequireJS</a></li><liclass="routing"><ahref="labs/dependency-examples/durandal"data-source="http://durandaljs.com/"data-content="Single Page Apps Done Right">Durandal</a></li><liclass="routing"><ahref="labs/dependency-examples/lavaca_require"data-source="http://getlavaca.com"data-content="A curated collection of tools for building mobile web applications.">Lavaca + RequireJS</a></li></ul></div></div><ulclass="legend"><li><spanclass="label">R</span> = App also demonstrates routing</li></ul><hr><h2>Real-time</h2><ulclass="applist"><li><ahref="http://todomvcapp.meteor.com"data-source="http://meteor.com"data-content="Meteor is an ultra-simple environment for building modern websites. A Meteor application is a mix of JavaScript that runs inside a client web browser, JavaScript that runs on the Meteor server inside a Node.js container, and all the supporting HTML fragments, CSS rules, and static assets. Meteor automates the packaging and transmission of these different components. And, it is quite flexible about how you choose to structure those components in your file tree.">Meteor</a></li><li><ahref="http://todomvc.derbyjs.com"data-source="http://derbyjs.com"data-content="MVC framework making it easy to write realtime, collaborative applications that run in both Node.js and browsers.">Derby</a></li><liclass="routing"><ahref="http://todomvc-socketstream.herokuapp.com"data-source="http://www.socketstream.org"data-content="SocketStream is a fast, modular Node.js web framework dedicated to building realtime single-page apps">SocketStream</a></li><liclass="routing"><ahref="labs/architecture-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><ulclass="applist"><liclass="routing"><ahref="vanilla-examples/vanillajs"data-source="https://developer.mozilla.org/en/JavaScript"data-content="You know JavaScript right? :P">Vanilla JS</a></li><liclass="routing"><ahref="architecture-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><divclass="row"><divclass="col-md-6 quotes"><blockquoteclass="quote speech-bubble"><p></p><footer><imgwidth="40"height="40"alt=""><a></a></footer></blockquote></div><divclass="col-md-6"><imgclass="screenshot"src="site-assets/screenshot.png"width="558"height="246"alt="Todo app screenshot"></div></div><hr><divclass="row"><divclass="col-md-4"><h2>New in 1.3</h2><ulclass="whats-new"><li>We now have 64 applications.
<labelclass="link"for="news-expander">New since 1.2 ▼</label><inputtype="checkbox"id="news-expander"><ulclass="collapsed"id="new-apps"><li><ahref="labs/architecture-examples/angular-dart/web">AngularDart</a></li><li><ahref="labs/dependency-examples/durandal">Durandel</a></li><li><ahref="labs/architecture-examples/atmajs">Atma.js</a></li><li><ahref="labs/architecture-examples/exoskeleton">Exoskeleton</a></li><li><ahref="labs/architecture-examples/componentjs">ComponentJS</a></li><li><ahref=""></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><divclass="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><divclass="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 <ahref="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 <ahref="https://github.com/tastejs/todomvc/tree/master/template">template</a> as a starting point and read the <ahref="https://github.com/tastejs/todomvc/blob/master/app-spec.md">app specification</a>.</p><p><aclass="zocial small ltgray"href="https://github.com/tastejs/todomvc/wiki">Submit Pull Request »</a></p></div></div><hr><footerclass="credit"><p>Brought to you by
