Skip to content

T
todomvc
Commit 002a5c28 authored by Addy Osmani's avatar Addy Osmani
Browse files
Options

Adding alternative homepage layout

parent 521aa8e3
Hide whitespace changes
Inline Side-by-side
Showing with 124 additions and 111 deletions
index.html
View file @ 002a5c28
...@@ -43,19 +43,16 @@ ...@@ -43,19 +43,16 @@
<div class="g-plusone" data-size="medium" data-annotation="none" data-href="http://todomvc.com"></div> <div class="g-plusone" data-size="medium" data-annotation="none" data-href="http://todomvc.com"></div>
</div> </div>
<div class="span8"> <div class="span8">
<h2>Our Stable Apps</h2> <h2>JavaScript Apps</h2>
<ul class="applist"> <ul class="applist">
<li class="routing"> <li class="routing">
<a href="architecture-examples/backbone/" data-source="http://documentcloud.github.com/backbone/" data-content="Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.">Backbone.js</a> <a href="architecture-examples/backbone/" data-source="http://documentcloud.github.com/backbone/" data-content="Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.">Backbone.js</a>
</li> </li>
<li class="routing">
<a href="architecture-examples/emberjs/" 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.">Ember.js</a>
</li>
<li class="routing"> <li class="routing">
<a href="architecture-examples/angularjs/" data-source="http://angularjs.org" data-content="What HTML would have been had it been designed for web apps">AngularJS</a> <a href="architecture-examples/angularjs/" data-source="http://angularjs.org" data-content="What HTML would have been had it been designed for web apps">AngularJS</a>
</li> </li>
<li class="routing"> <li class="routing">
<a href="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> <a href="architecture-examples/emberjs/" 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.">Ember.js</a>
</li> </li>
<li class="routing"> <li class="routing">
<a href="architecture-examples/knockoutjs/" data-source="http://knockoutjs.com" data-content="Simplify dynamic JavaScript UIs by applying the Model-View-View Model (MVVM) pattern">KnockoutJS</a> <a href="architecture-examples/knockoutjs/" data-source="http://knockoutjs.com" data-content="Simplify dynamic JavaScript UIs by applying the Model-View-View Model (MVVM) pattern">KnockoutJS</a>
...@@ -67,20 +64,104 @@ ...@@ -67,20 +64,104 @@
<a href="architecture-examples/yui/" data-source="http://yuilibrary.com" data-content="YUI's lightweight core and modular architecture make it scalable, fast, and robust. Built by frontend engineers at Yahoo!, YUI powers the most popular websites in the world.">YUI</a> <a href="architecture-examples/yui/" data-source="http://yuilibrary.com" data-content="YUI's lightweight core and modular architecture make it scalable, fast, and robust. Built by frontend engineers at Yahoo!, YUI powers the most popular websites in the world.">YUI</a>
</li> </li>
<li class="routing"> <li class="routing">
<a href="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> <a href="architecture-examples/agilityjs/" data-source="http://agilityjs.com" data-content="Agility.js is an MVC library for Javascript that lets you write maintainable and reusable browser code without the infrastructural overhead found in other MVC libraries. The goal is to enable developers to write web apps at least as quickly as with jQuery, while simplifying long-term maintainability through MVC objects.">Agility.js</a>
</li> </li>
<li class="routing"> <li class="routing">
<a href="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> <a href="architecture-examples/knockback/" data-source="http://kmalakoff.github.com/knockback/" data-content="Knockback.js provides Knockout.js magic for Backbone.js Models and Collections.">Knockback.js</a>
</li> </li>
<li class="routing"> <li class="routing labs">
<a href="architecture-examples/agilityjs/" data-source="http://agilityjs.com" data-content="Agility.js is an MVC library for Javascript that lets you write maintainable and reusable browser code without the infrastructural overhead found in other MVC libraries. The goal is to enable developers to write web apps at least as quickly as with jQuery, while simplifying long-term maintainability through MVC objects.">Agility.js</a> <a href="labs/architecture-examples/canjs/" 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</a>
</li>
<li class="labs">
<a href="labs/architecture-examples/maria/src/" 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 class="labs">
<a href="labs/architecture-examples/cujo/index.html" data-source="http://cujojs.com" data-content="Cujo.js is an architectural framework for building highly modular, scalable, maintainable applications in Javascript. It provides architectural plumbing, such as modules (AMD and CommonJS), declarative application composition, declarative connections, and aspect oriented programming.">cujo.js</a>
</li>
<li class="routing labs">
<a href="labs/architecture-examples/dermis" data-source="https://github.com/wearefractal/dermis" data-content="dermis is a tiny framework that provides models, collections, controllers, and data-binding out of the box. dermis is designed to be the simplest possible solution for creating complex applications">dermis</a>
</li>
<li class="labs">
<a href="labs/architecture-examples/montage/" data-source="https://github.com/Motorola-Mobility/montage" data-content="Montage simplifies the development of rich HTML5 applications by providing modular components, real-time two-way data binding, CommonJS dependency management, and many more conveniences.">Montage</a>
</li>
<li class="labs">
<a href="https://github.com/addyosmani/todomvc/tree/gh-pages/labs/architecture-examples/canjs#canjs-and-javascriptmvc" 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 class="labs">
<a href="labs/architecture-examples/extjs/" data-source="http://www.sencha.com/products/extjs" data-content="Ext JS 4 is the next major advancement in our JavaScript framework. Featuring expanded functionality, plugin-free charting, and a new MVC architecture it's the best Ext JS yet. Create incredible web apps for every browser.">Ext.js</a>
</li>
<li class="labs">
<a href="labs/architecture-examples/sammyjs/" 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 class="routing labs">
<a href="labs/architecture-examples/stapes/" 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 class="routing labs">
<a href="labs/architecture-examples/epitome/" data-source="http://dimitarchristoff.github.com/Epitome" data-content="Epitome is a new extensible and modular open-source MVP* framework, built out of MooTools Classes and Events.">Epitome</a>
</li>
<li class="labs">
<a href="labs/architecture-examples/somajs/" 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 class="labs">
<a href="labs/architecture-examples/duel/www/" 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 class="routing labs">
<a href="labs/architecture-examples/puremvc/" data-source="http://puremvc.github.com" data-content="PureMVC is a lightweight framework for creating applications based upon the classic Model-View-Controller design meta-pattern.">PureMVC</a>
</li>
<li class="labs">
<a href="labs/architecture-examples/olives/" 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 class="routing labs">
<a href="labs/architecture-examples/plastronjs/" 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>
<li class="labs">
<a href="labs/architecture-examples/dijon/" 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 class="routing labs">
<a href="labs/architecture-examples/rappidjs/" 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 class="routing labs">
<a href="labs/architecture-examples/o_O/" 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> </li>
<li class="routing labs">
<a href="labs/architecture-examples/knockoutjs_classBindingProvider/" data-source="https://github.com/rniemeyer/knockout-classBindingProvider" data-content="This project is an adaptation of /architecture-examples/knockoutjs with Ryan Niemeyer's Class Binding Provider.">Knockout +</br> ClassBindingProvider</a>
</li>
<li class="routing labs">
<a href="architecture-examples/angularjs-perf/" data-source="http://angularjs.org" data-content="What HTML would have been had it been designed for web apps. A version with several performance optimizations.">AngularJS (optimized)</a>
</li>
</ul>
<hr>
<h2>Compile To JavaScript</h2>
<ul class="applist ctojs">
<li class="routing"> <li class="routing">
<a href="architecture-examples/knockback/" data-source="http://kmalakoff.github.com/knockback/" data-content="Knockback.js provides Knockout.js magic for Backbone.js Models and Collections.">Knockback.js</a> <a href="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>
<li class="routing labs">
<a href="labs/architecture-examples/dart/web/" 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>
<li class="routing labs">
<a href="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>
<li> <li>
<a href="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> <a href="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> </li>
<li class="routing">
<a href="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>
</ul>
<hr>
<h2>MVC Extension Frameworks</h2>
<ul class="applist">
<li class="routing labs">
<a href="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>
<li class="routing labs">
<a href="labs/architecture-examples/thorax" data-source="https://github.com/walmartlabs/thorax" data-content="Thorax is a Backbone superset that integrates deeply with Handlebars to provide easy model and collection binding.">Thorax</a>
</li>
<li class="routing labs">
<a href="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-profen design patterns and best practises.">Chaplin + Brunch</a>
</li>
</ul> </ul>
<hr> <hr>
<h2>Apps using RequireJS/AMD</h2> <h2>Apps using RequireJS/AMD</h2>
...@@ -91,7 +172,34 @@ ...@@ -91,7 +172,34 @@
<li class="routing"> <li class="routing">
<a href="dependency-examples/emberjs_require/" 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> <a href="dependency-examples/emberjs_require/" 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> </li>
<li>
<a href="labs/dependency-examples/knockoutjs_require/" data-source="http://knockoutjs.com" data-content="This project is an adaptation of /architecture-examples/knockoutjs with require.js.">Knockout + RequireJS</a>
</li>
<li class="routing labs">
<a href="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>
<li class="routing labs">
<a href="labs/architecture-examples/troopjs/" 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>
</ul> </ul>
<hr>
<h2>Real-time</h2>
<ul class="applist">
<li class="labs">
<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 class="labs">
<a href="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>
<li class="labs">
<a href="labs/architecture-examples/socketstream/README.md" 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>
<li class="routing labs">
<a href="http://todomvc.crypho.com" data-source="https://github.com/ggozad/Backbone.xmpp" data-content="Backbone.xmpp is a drop-in replacement for Backbone’s RESTful API, allowing models/collections to be persisted on XMPP Pub-Sub nodes providing real-time updates.">Backbone.xmpp</a>
</li>
</ul>
<hr>
<h2>Compare these to a non-framework implementation</h2> <h2>Compare these to a non-framework implementation</h2>
<ul class="applist"> <ul class="applist">
<li> <li>
...@@ -102,6 +210,7 @@ ...@@ -102,6 +210,7 @@
</li> </li>
</ul> </ul>
<p>* <span class="label">R</span> = App also demonstrates routing</p> <p>* <span class="label">R</span> = App also demonstrates routing</p>
<p>* Gray = App requires further work to be spec-compliant</p>
</div> </div>
</div> </div>
<hr> <hr>
...@@ -152,107 +261,7 @@ ...@@ -152,107 +261,7 @@
</p> </p>
</div> </div>
</div> </div>
<hr>
<div class="row">
<div class="span12">
<h2>Labs</h2>
<ul class="applist">
<li class="routing">
<a href="labs/architecture-examples/canjs/" 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</a>
</li>
<li>
<a href="labs/architecture-examples/maria/src/" 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="labs/architecture-examples/cujo/index.html" data-source="http://cujojs.com" data-content="Cujo.js is an architectural framework for building highly modular, scalable, maintainable applications in Javascript. It provides architectural plumbing, such as modules (AMD and CommonJS), declarative application composition, declarative connections, and aspect oriented programming.">cujo.js</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="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>
<li>
<a href="labs/architecture-examples/montage/" data-source="https://github.com/Motorola-Mobility/montage" data-content="Montage simplifies the development of rich HTML5 applications by providing modular components, real-time two-way data binding, CommonJS dependency management, and many more conveniences.">Montage</a>
</li>
<li>
<a href="labs/architecture-examples/socketstream/README.md" 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 + jQuery</a>
</li>
<li>
<a href="labs/architecture-examples/extjs/" data-source="http://www.sencha.com/products/extjs" data-content="Ext JS 4 is the next major advancement in our JavaScript framework. Featuring expanded functionality, plugin-free charting, and a new MVC architecture it's the best Ext JS yet. Create incredible web apps for every browser.">Ext.js</a>
</li>
<li>
<a href="labs/architecture-examples/sammyjs/" 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="https://github.com/addyosmani/todomvc/tree/gh-pages/labs/architecture-examples/canjs#canjs-and-javascriptmvc" 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 class="routing">
<a href="labs/architecture-examples/dermis" data-source="https://github.com/wearefractal/dermis" data-content="dermis is a tiny framework that provides models, collections, controllers, and data-binding out of the box. dermis is designed to be the simplest possible solution for creating complex applications">dermis</a>
</li>
<li class="routing">
<a href="labs/architecture-examples/stapes/" 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 class="routing">
<a href="labs/architecture-examples/epitome/" data-source="http://dimitarchristoff.github.com/Epitome" data-content="Epitome is a new extensible and modular open-source MVP* framework, built out of MooTools Classes and Events.">Epitome</a>
</li>
<li class="routing">
<a href="labs/architecture-examples/troopjs/" 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/somajs/" 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/duel/www/" 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 class="routing">
<a href="labs/architecture-examples/puremvc/" data-source="http://puremvc.github.com" data-content="PureMVC is a lightweight framework for creating applications based upon the classic Model-View-Controller design meta-pattern.">PureMVC</a>
</li>
<li>
<a href="labs/architecture-examples/olives/" 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 class="routing">
<a href="labs/architecture-examples/plastronjs/" 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>
<li>
<a href="labs/architecture-examples/dijon/" 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 class="routing">
<a href="labs/architecture-examples/rappidjs/" 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 class="routing">
<a href="labs/architecture-examples/o_O/" 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>
<li class="routing">
<a href="labs/architecture-examples/knockoutjs_classBindingProvider/" data-source="https://github.com/rniemeyer/knockout-classBindingProvider" data-content="This project is an adaptation of /architecture-examples/knockoutjs with Ryan Niemeyer's Class Binding Provider.">Knockout +</br> ClassBindingProvider</a>
</li>
<li>
<a href="labs/dependency-examples/knockoutjs_require/" data-source="http://knockoutjs.com" data-content="This project is an adaptation of /architecture-examples/knockoutjs with require.js.">Knockout + RequireJS</a>
</li>
<li class="routing">
<a href="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>
<li class="routing">
<a href="architecture-examples/angularjs-perf/" data-source="http://angularjs.org" data-content="What HTML would have been had it been designed for web apps. A version with several performance optimizations.">AngularJS (optimized)</a>
</li>
<li class="routing">
<a href="http://todomvc.crypho.com" data-source="https://github.com/ggozad/Backbone.xmpp" data-content="Backbone.xmpp is a drop-in replacement for Backbone’s RESTful API, allowing models/collections to be persisted on XMPP Pub-Sub nodes providing real-time updates.">Backbone.xmpp</a>
</li>
<li class="routing">
<a href="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>
<li class="routing">
<a href="labs/architecture-examples/thorax" data-source="https://github.com/walmartlabs/thorax" data-content="Thorax is a Backbone superset that integrates deeply with Handlebars to provide easy model and collection binding.">Thorax</a>
</li>
<li class="routing">
<a href="labs/architecture-examples/dart/web/" 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>
<li class="routing">
<a href="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-profen design patterns and best practises.">Chaplin + Brunch</a>
</li>
</ul>
</div>
</div>
<hr> <hr>
<footer class="credit"> <footer class="credit">
<p>Brought to you by<a href="https://github.com/addyosmani"><img src="http://gravatar.com/avatar/96270e4c3e5e9806cf7245475c00b275?s=80" width="40" height="40" alt="Addy Osmani">Addy Osmani</a> and <a href="https://github.com/sindresorhus"><img src="http://gravatar.com/avatar/d36a92237c75c5337c17b60d90686bf9.png?s=80" width="40" height="40" alt="Sindre Sorhus">Sindre Sorhus</a></p> <p>Brought to you by<a href="https://github.com/addyosmani"><img src="http://gravatar.com/avatar/96270e4c3e5e9806cf7245475c00b275?s=80" width="40" height="40" alt="Addy Osmani">Addy Osmani</a> and <a href="https://github.com/sindresorhus"><img src="http://gravatar.com/avatar/d36a92237c75c5337c17b60d90686bf9.png?s=80" width="40" height="40" alt="Sindre Sorhus">Sindre Sorhus</a></p>
......
site/css/main.css
View file @ 002a5c28
...@@ -161,6 +161,10 @@ header nav a:first-child { ...@@ -161,6 +161,10 @@ header nav a:first-child {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
} }
.applist .labs a{
color:#666;
}
.applist .label, .applist .label,
p .label { p .label {
position: relative; position: relative;
......
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