Skip to content

T
todomvc
Commit 84b565dd authored by addyosmani's avatar addyosmani
Browse files
Options

Updating to merge labs into main index, reflect latest apps available, correct broken links.

parent 17188438
Show whitespace changes
Inline Side-by-side
Showing with 146 additions and 27 deletions
index.html
View file @ 84b565dd
...@@ -28,9 +28,9 @@ ...@@ -28,9 +28,9 @@
<a class="btn btn-primary btn-large" href="https://github.com/addyosmani/todomvc/zipball/v0.3">Download</a> <a class="btn btn-primary btn-large" href="https://github.com/addyosmani/todomvc/zipball/v0.3">Download</a>
<a class="btn btn-large" href="http://github.com/addyosmani/todomvc">Follow on GitHub</a> <a class="btn btn-large" href="http://github.com/addyosmani/todomvc">Follow on GitHub</a>
</nav> </nav>
<p style="font-size: 16px;">Check out our new subproject <a href="http://todomvc.com/labs">TodoMVC Labs</a></p>
</div> </div>
</header> </header>
<div class="row"> <div class="row">
<div class="span4"> <div class="span4">
<h2>Introduction</h2> <h2>Introduction</h2>
...@@ -38,8 +38,11 @@ ...@@ -38,8 +38,11 @@
<p>To help solve this problem, we created <a href="http://github.com/addyosmani/todomvc">TodoMVC</a> - a project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today.</p> <p>To help solve this problem, we created <a href="http://github.com/addyosmani/todomvc">TodoMVC</a> - a project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today.</p>
<p>Solutions look and feel the same, have a common simple feature-set and make it <strong>easy</strong> for you to compare the syntax and structure of different frameworks so you can select the one you feel the most comfortable with.</p> <p>Solutions look and feel the same, have a common simple feature-set and make it <strong>easy</strong> for you to compare the syntax and structure of different frameworks so you can select the one you feel the most comfortable with.</p>
</div> </div>
<div class="span4" id="demos">
<h2>Demos</h2>
<div class="span4 demos">
<h2>Apps</h2>
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<li> <li>
<a href="architecture-examples/angularjs/index.html" data-source="http://angularjs.org/" data-content="What HTML would have been <a href="architecture-examples/angularjs/index.html" data-source="http://angularjs.org/" data-content="What HTML would have been
...@@ -100,19 +103,6 @@ had it been designed for web apps. A version with several performance optimizati ...@@ -100,19 +103,6 @@ had it been designed for web apps. A version with several performance optimizati
</li> </li>
</ul> </ul>
</div> </div>
<div class="span4">
<h2>Version 1.0 Pre</h2>
<ul class="vertical-space">
<li>New applications</li>
<li>Improved consistency</li>
<li>Routing</li>
<li>TodoMVC Labs apps</li>
<li>and more!</li>
</ul>
</div>
</div>
<hr>
<div class="row">
<div class="span4"> <div class="span4">
<h2>Getting Started</h2> <h2>Getting Started</h2>
<p>You can get setup with TodoMVC in just a few short steps:</p> <p>You can get setup with TodoMVC in just a few short steps:</p>
...@@ -124,18 +114,147 @@ had it been designed for web apps. A version with several performance optimizati ...@@ -124,18 +114,147 @@ had it been designed for web apps. A version with several performance optimizati
</ol> </ol>
</p> </p>
</div> </div>
<div class="span4">
<hr>
<div class="row">
<div class="span12 demos">
<div class="span3">
<h2>Selecting a Framework</h2> <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>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>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 <strong>ensure</strong> 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> <p>Please <strong>ensure</strong> 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> </div>
<div class="span4">
<div class="span3">
<h2>Labs</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>
</div>
<div class="span5">
<h2>Labs Apps</h2>
<ul class="nav nav-pills">
<li>
<a href="labs/architecture-examples/cujo/index.html" data-source="http://cujojs.github.com" data-content="JavaScriptMVC is an open-source framework containing the best ideas in jQuery development. It guides you to successfully completed projects by promoting best practices, maintainability, and convention over configuration.">cujo.js *</a>
</li>
<li>
<a href="labs/architecture-examples/maria/src/index.html" data-source="https://github.com/petermichaux/maria" data-content="An MVC framework for JavaScript applications. The real MVC. The Smalltalk MVC. The Gang of Four MVC. The three core design patterns of MVC (observer, composite, and strategy) are embedded in Maria's Model, View, and Controller objects. Other patterns traditionally included in MVC implementations (e.g. factory method and template) make appearances too.">Maria</a>
</li>
<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="labs/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="labs/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="labs/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="labs/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="labs/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="labs/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>
<li>
<a href="labs/architecture-examples/o_O/index.html" data-source="http://weepy.github.com/o_O/" data-content="o_O: HTML binding for teh lulz: &lt;br>- Elegantly binds objects to HTML&lt;br>- Proxies through jQuery, Ender, etc&lt;br>- Automatic dependency resolution&lt;br>- Plays well with others">Funnyface.js *</a>
</li>
</ul>
<ul class="nav nav-pills">
<li>
<a href="labs/architecture-examples/javascriptmvc/todo/todo/index.html" data-source="http://javascriptmvc.com/" data-content="JavaScriptMVC is an open-source framework containing the best ideas in jQuery development. It guides you to successfully completed projects by promoting best practices, maintainability, and convention over configuration.">JavaScriptMVC</a>
</li>
<li>
<a href="labs/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="labs/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="labs/architecture-examples/somajs/index.html" data-source="http://somajs.github.com/somajs" data-content="soma.js is a JavaScript Model-View-Controller (MVC) framework that is meant to help developers to write loosely-coupled applications to increase scalability and maintainability.">soma.js *</a>
</li>
<li>
<a href="labs/architecture-examples/rappidjs/index.html" data-source="http://www.rappidjs.com" 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.js</a>
</li>
<li>
<a href="labs/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="labs/architecture-examples/sammyjs/index.html" data-source="http://sammyjs.org/" data-content="Sammy.js is a tiny JavaScript framework developed to ease the pain and provide a basic structure for developing JavaScript applications.">Sammy.js</a>
</li>
<li>
<a href="labs/dependency-examples/knockoutjs_require/index.html" data-source="" data-content="This project is an adaptation of /architecture-examples/knockoutjs with require.js.">Knockout + Require.js *</a>
</li>
<li>
<a href="labs/dependency-examples/angularjs_require/index.html" 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>
<li>
<a href="labs/architecture-examples/plastronjs/index.html" data-source="https://github.com/rhysbrettbowen/PlastronJS" data-content="PlastronJS is an mvc framework built on top of the Closure Library and built to compile with projects that use the Closure Compiler.">PlastronJS *</a>
</li>
</ul>
<ul class="nav nav-pills">
<li>
<a href="labs/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="labs/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="labs/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="labs/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="labs/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="labs/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="labs/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="labs/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>
</div>
<hr>
<div class="row">
<div class="span8">
<h2>Getting Involved</h2> <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>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 <a href="https://github.com/addyosmani/todomvc/wiki">contribution guidelines</a>, and submit a pull request &mdash; we'll be happy to review it for inclusion.</p><p> Make sure you use the <a href="https://github.com/addyosmani/todomvc/tree/master/template">template</a> as a starting point and read the <a href="https://github.com/addyosmani/todomvc/wiki/App-Specification">app specification</a>.</p> <p>If so, feel free to fork the repo, read our <a href="https://github.com/addyosmani/todomvc/wiki">contribution guidelines</a>, and submit a pull request &mdash; we'll be happy to review it for inclusion.</p><p> Make sure you use the <a href="https://github.com/addyosmani/todomvc/tree/master/template">template</a> as a starting point and read the <a href="https://github.com/addyosmani/todomvc/wiki/App-Specification">app specification</a>.</p>
<p><a class="btn" href="https://github.com/addyosmani/todomvc/pull/new/master">Submit Pull Request &raquo;</a></p> <p><a class="btn" href="https://github.com/addyosmani/todomvc/pull/new/master">Submit Pull Request &raquo;</a></p>
</div> </div>
<div class="span2">
&nbsp;
</div>
<div class="span2">
&nbsp;
</div>
</div> </div>
<hr> <hr>
<footer> <footer>
......
site/css/main.css
View file @ 84b565dd
...@@ -63,33 +63,33 @@ h2 { ...@@ -63,33 +63,33 @@ h2 {
float: none; float: none;
} }
#demos { .demos {
display: inline-block; display: inline-block;
} }
#demos ul { .demos ul {
float: left; float: left;
} }
#demos ul li { .demos ul li {
float: none; float: none;
} }
#demos ul li a { .demos ul li a {
position: relative; position: relative;
} }
#demos .popover { .demos .popover {
margin: 0; margin: 0;
cursor: default; cursor: default;
color: #333; color: #333;
} }
#demos .popover-title { .demos .popover-title {
padding: 9px 70px 9px 15px; padding: 9px 70px 9px 15px;
} }
#demos .popover-title a { .demos .popover-title a {
font-size: 13px; font-size: 13px;
line-height: 18px; line-height: 18px;
position: absolute; position: absolute;
...@@ -103,7 +103,7 @@ h2 { ...@@ -103,7 +103,7 @@ h2 {
} }
@media (max-width: 480px) { @media (max-width: 480px) {
#demos ul { .demos ul {
float: none; float: none;
} }
} }
...@@ -131,7 +131,7 @@ h2 { ...@@ -131,7 +131,7 @@ h2 {
.header-title h1 { .header-title h1 {
font-size: 60px; font-size: 60px;
} }
#demos ul { .demos ul {
margin: 0; margin: 0;
font-size: 16px; font-size: 16px;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7