Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 128d3e51d1
Fetching contributors…

Cannot retrieve contributors at this time

executable file 182 lines (171 sloc) 15.617 kb
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TodoMVC Labs</title>
<meta name="description" content="A preview of new demo applications for JavaScript MV* frameworks">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="../site/css/bootstrap.min.css" rel="stylesheet">
<link href="../site/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="../site/css/main.css" rel="stylesheet">
<style>
/* main site overrides */
a {
color: #488C48;
}
a:hover {
color: #264C26;
}
.nav {
width: 150px !important;
}
#contributor-list {
display: block;
}
#contributor-list a:after {
content: ', '
}
#contributor-list a:last-child:after {
content: ''
}
</style>
</head>
<body>
<div class="container">
<header class="hero-unit row">
<div class="span4 screenshot">
<img src="../site/screenshot.png" width="528" height="330">
</div>
<div class="span5 header-title">
<h1>TodoMVC Labs</h1>
<p>
A preview of new demo applications for JavaScript MV* frameworks
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://addyosmani.github.com/todomvc/labs" data-via="addyosmani">Tweet</a>
</p>
<nav>
<a class="btn btn-primary btn-large btn-success" href="https://github.com/addyosmani/todomvc/zipball/master">Download Latest</a>
<a class="btn btn-large" href="http://github.com/addyosmani/todomvc">Follow on GitHub</a>
</nav>
<p style="font-size:16px"><a href="http://todomvc.com">⬅ Home</a></p>
</div>
</header>
<div class="row">
<div class="span4">
<h2>Introduction</h2>
<p>TodoMVC Labs showcases sample Todo applications for frameworks that have just been released or are still awaiting consideration for inclusion in <a href="http://todomvc.com">TodoMVC</a>.</p>
<p>These implementations may not completely meet our specifications just yet, but are functional enough to provide developers with a preview of what they're capable of.</p>
<p>While our team are working on improving these applications for a future release of TodoMVC, developers wishing to try out brand new frameworks or see what's coming next for this project can preview these applications today.</p>
<p><em>An * indicates the application is using our latest template. Please note that all applications should be run on a local HTTP server unless we've said otherwise.</em></p>
<p></p>
</div>
<div class="span5" id="demos">
<h2>Demos</h2>
<ul class="nav nav-pills">
<li>
<a href="architecture-examples/stapes/index.html" data-source="http://hay.github.com/stapes/" data-content="Stapes is a (really) tiny Javascript MVC micro-framework (1.7kb) that has all the building blocks you need when writing an MVC app. It includes a powerful event system, support for inheritance, use with AMD, plugin support and more. A RequireJS Todo application is <a href='dependency-examples/stapes_require/index.html'>also</a> available.">Stapes *</a>
</li>
<li>
<a href="architecture-examples/troopjs/index.html" 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, ComposeJS for object composition, 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 *</a>
</li>
<li>
<a href="architecture-examples/fun/index.html" data-source="https://github.com/marcuswestin/fun" data-content="Fun is not an MVC framework, but a programming language meant to tackle MVC/UI programming on a deeper, more fundamental level - part reactive/functional and part sequential/procedural.">Fun *</a>
</li>
<li>
<a href="architecture-examples/duel/www/index.html" 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="architecture-examples/fidel/index.html" data-source="https://github.com/jgallen23/fidel" data-content="Fidel is a micro-framework for building widgets, modules and plugins. It resembles the controller in Spine.js and could be considered a controller library. Having not heavily needed models and routing in some of the single-page applications the author built, he found a library focusing on controller logic more useful.">Fidel</a>
</li>
<li>
<a href="architecture-examples/broke/index.html" data-source="https://github.com/brokenseal/broke-client" data-content="The Broke Javascript Framework is a porting of the fantastic Django Web Framework on Javascript. It summarizes all the best concepts present in Django like url resolving, decoupling, DRY principle, project-specific settings and a pretty simple template engine. It could be put in the big Javascript MVC frameworks group outside there, but, as Django is, this is more a MTV (Model-Template-View) framework.">Broke.js</a>
</li>
</ul>
<ul class="nav nav-pills">
<li>
<a href="http://todomvc.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>
<a href="architecture-examples/batman/index.html" 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>
<a href="architecture-examples/gwt/index.html" 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.">Google Web Toolkit</a>
</li>
<li>
<a href="architecture-examples/olives/index.html" data-source="https://github.com/flams/olives" data-content="Olives is a JS MVC framework that helps you create realtime UIs. It includes a set of AMD/CommonJS modules that are easily extensive, a high level of abstraction to reduce boilerplate and is based on socket.io, to provide a powerful means to communicate with node.js.">Olives</a>
</li>
<li>
<a href="architecture-examples/rappidjs/index.html" data-source="https://github.com/it-ony/rAppid.js" data-content="rAppid.js is a declarative JavaScript framework for rapid web application development. It supports dependency loading, Model-View binding, View-Model binding, dependency injection and i18n.">rAppid</a>
</li>
<li>
<a href="architecture-examples/dijon/index.html" 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>
<a href="dependency-examples/emberjs_require/index.html" 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. This is an example of using it with AMD modules">Ember.js + RequireJS</a>
</li>
</ul>
<ul class="nav nav-pills">
<li>
<a href="architecture-examples/canjs/dojo/index.html" data-source="http://canjs.us" data-content="CanJS with Dojo. 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 (Dojo)</a>
</li>
<li>
<a href="architecture-examples/canjs/dojo-widget/index.html" data-source="http://canjs.us" data-content="CanJS with Dojo (includes a Dojo widget binding example). 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 (Dojo Widget)</a>
</li>
<li>
<a href="architecture-examples/canjs/jquery/index.html" 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 (jQuery)</a>
</li>
<li>
<a href="architecture-examples/canjs/jquery-widget/index.html" data-source="http://canjs.us" data-content="CanJS with jQuery (includes a jQuery UI widget binding example). 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 (jQuery Widget)</a>
</li>
<li>
<a href="architecture-examples/canjs/mootools/index.html" data-source="http://canjs.us" data-content="CanJS with Mootools. 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 (MooTools)</a>
</li>
<li>
<a href="architecture-examples/canjs/yui/index.html" data-source="http://canjs.us" data-content="CanJS with YUI. 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 (YUI)</a>
</li>
<li>
<a href="architecture-examples/canjs/yui-widget/index.html" data-source="http://canjs.us" data-content="CanJS with YUI (includes a YUI widget binding example). 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 (YUI Widget)</a>
</li>
<li>
<a href="architecture-examples/canjs/zepto/index.html" data-source="http://canjs.us" data-content="CanJS with Zepto. 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 (Zepto)</a>
</li>
</ul>
</div>
<div class="span3">
<h2>Contributing</h2>
<p>Interested in helping us improve or complete these applications?</p><p>Please feel free to get involved by taking a look at our <a href="https://github.com/addyosmani/todomvc/issues">issue tracker</a> or reviewing one of these apps on the <a href="https://github.com/addyosmani/todomvc/tree/master/labs">labs folder</a> of TodoMVC.</p>
<p>We're currently working towards bringing all applications in-line with our official <a href="https://github.com/addyosmani/todomvc/wiki/App-Specification">specifications</a> using an updated <a href="https://github.com/addyosmani/todomvc/tree/master/template">template</a> to ensure consistency in style.</p>
<p>If you would like to get involved or simply suggest ideas for how we can improve the project further, please feel free to <a href="https://github.com/addyosmani/">reach</a> <a href="https://github.com/sindresorhus/">out</a>.</p>
</div>
</div>
<hr>
<footer>
<p>© TodoMVC Labs. Brought to you by <a href="https://github.com/addyosmani">Addy Osmani</a> and <a href="https://github.com/sindresorhus">Sindre Sorhus</a>.</p>
<p id="contributor-list">Big thanks to our magnificent labs contributors:
<a href="https://github.com/johnknott">John Knott</a>
<a href="https://github.com/brokenseal">Davide Callegari</a>
<a href="http://bitovi.com">Bitovi</a>
<a href="https://github.com/creynders">creynders</a>
<a href="https://github.com/mckamey">Stephen McKamey</a>
<a href="https://github.com/jgallen23">Greg Allen</a>
<a href="https://github.com/marcuswestin">Marcus Westin</a>
<a href="https://github.com/jeromegn">Jérôme Gravel-Niquet</a>
<a href="https://github.com/ColinEberhardt">Colin Eberhardt</a>
<a href="https://github.com/siuying">siuying</a>
<a href="https://github.com/podefr">Olivier Scherrer</a>
<a href="https://github.com/krebbl">krebbl</a>
<a href="http://github.com/hay">Hay Kranen</a>
<a href="https://github.com/mikaelkaron">Mikael Karon</a>
</p>
</footer>
</div>
<script src="../assets/jquery.min.js"></script>
<script src="../site/js/jquery.hoverIntent.min.js"></script>
<script src="../site/js/bootstrap.min.js"></script>
<script src="../site/js/main.js"></script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</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>
Jump to Line
Something went wrong with that request. Please try again.