Skip to content

Other implementations

Fabiano Taioli edited this page Jan 24, 2019 · 57 revisions

Due to the current number of MVC/MVVM/MV* frameworks in circulation at the moment, it's not always possible to include each one in TodoMVC, but we would still like to show some of them off here.

MV*

Espresso.js

Espresso.js is a tiny MVC framework with a focus on clean separation of code & markup. You get reactive views (no templating, shadow DOM or JSX) and data binding in a simple 500 LOC file. Make static HTML pages interactive without templating - designers will thank you! The ToDoMVC source is a single 100 LOC file.

Scala.js + Binding.scala

Binding.scala is a data-binding framework for Scala, running on both JVM and Scala.js.

Binding.scala can be used as a reactive web framework. It enables you use native XML literal syntax to create reactive DOM nodes, which are able to automatically change whenever the data source changes.

Binding.scala's TodoMVC application has the tiniest code size among all the TodoMVC implementations, only one source file, 150 lines of code!

Broke.js

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.

ClojureScript One

This submission uses the ClojureScript One MVC framework.

ClojureScript One is a "IDE in the browser" to develop/test/deploy web apps in Clojure/ClojureScript View part is done with Enfocus/Enlive.

Halo

Halo is a client-side MVC framework based on Addy Osmani's talks about Aura. It was conceived while Aura was still in private development, causing some concepts to be shared and others to be significantly different.

reactive.coffee

A lightweight CoffeeScript library/DSL for reactive programming and for declaratively building dynamic web UIs. It focuses on simplicity and on scalability in both performance and application architecture.

Mithril 2 + MVVM + FRP + ES6 Modules

Mithril 2 project structured following Model-View-ViewModel pattern and Functional Reactive Programming.

Non-MV*

abaaso

abaaso is a modern, lightweight Enterprise class RESTful JavaScript application framework. This version provides an alternative way to do the application with a focus on events & OOP, which create a reactive GUI. Sorting is implemented on the DataList with an SQL like syntax.

AbsurdJS

AbsurdJS is a JavaScript library available for Node.js and the browser. It acts as a CSS and HTML preprocessor. There are a lot of build-in mixins called atoms and molecules. Having both, CSS and HTML preprocessing, you are able to create cutting edge web components. All for JavaScript and JavaScript for all.

ClojureScript + C2

Clojure is a lisp-dialect on the JVM, and ClojureScript is Clojure compiled to JavaScript. This particular submission uses the C2 Clojure library, which is (roughly) what would happen if Knockout.js and D3.js had a baby and raised it on a diet of 100% organic, free-range, immutable data structures.

Laces.js

Laces.js provides you with a Model, but nothing more. It provides you with the laces to tie your model to whatever View or Controller you prefer. It consists of about 700 lines of JavaScript code, including whitespace and comments. Optionally, you can add one or more add-ons for extra features.

JavaScript

JavaScript implementation provides pure and native code without using any external libraries. Project is based just on HTML, CSS and JS but nothing more. This version is very similar to jQuery & handlebarsjs solution. Its goal is to show how simple is to implement TodoMVC without MVC model.

Preact + ES6

A Preact + ES6 + Webpack fork of the React TodoMVC implementation. Fast and ~7kb.

VanillaJS by Ondras

A fresh take on the existing "vanillajs" implementation in pure JavaScript. This version is rather short and compact, leverages JS prototypes and event handling using the EventListener paradigm. Its goal is to show that a viable solution is well possible without tons of kilobytes of external tools - and that this solution is readable, maintainable and usable.

Combinations

AngularFire

Firebase bindings for AngularJS that will make it even easier for developers to write rich, real-time web applications using the two technologies.

AngularJS + Persistence.js

Backbone.Marionette

Backbone.Marionette is a composite application library for Backbone.js that aims to simplify the construction of large scale JavaScript applications. It is a collection of common design and implementation patterns found in the applications that I (Derick Bailey) have been building with Backbone, and includes various pieces inspired by composite application architectures, such as Microsoft's "Prism" framework.

Backbone.js with sorting

Backbone example with sorting of todos using jQuery UI.

Backbone.js + LMD

LMD: Lazy Module Declaration - powerful yet simple loader/builder. LMD is not yet another RequireJS - it is different.

Backbone.js + Socket.IO + Express.js + MongoDB

Realtime implementation by Ishuah Kariuki.

Ember.js + Persistence.js

Ember.js + RequireJS

The Ember code behind this application is almost an exact duplicate of the example without RequireJS. The code has been split into multiple files, using RequireJS to load them on demand.

A great discussion took place discussing the simplicity of the TodoMVC demo application and the current complexity of marrying an Ember.js application with RequireJS. To learn more about the reasoning behind keeping this implementation separate, a link is provided below.

ExtJS using widgets

Harmony + jQuery BBQ

Meteor with CoffeeScript

knockoutjs + classBindingProvider

React + Coffeescript

Using React and vanilla Coffeescript, following this discussion.

Heavily influenced by the TodoMVC official implementation using react.

Really simple and readable code, and as fast as React using JS.

GWT + GAE Channel

Using Google Web Toolkit + Google App Engine Channel API.

Real-time & collaborative.

Uses Command Pattern to distribute changes among clients and the server (only deltas, not whole objects are put on the wire). Based on this Google I/O talk (10 minutes).

FunScript (F#) + Ractive

FunScript is a lightweight F# library that lets you rapidly develop single-page applications. You can connect to external data sources and call REST APIs with intellisense, produce dashboards using JavaScript visualization libraries and write asynchronous computations easily without explicit callbacks.

Agility [unmaintained]

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.

Meteor with Iron Router

Meteor is a complete open source platform for building web and mobile apps in pure JavaScript. Iron Meteor is a collection of packages that include Iron Router, a client and server side router designed specifically for Meteor.