A Collection Of Javascript MVC Frameworks That You Should Know About

Experienced web developers use MVC frameworks not because it is an interesting thing to do, but because it is the proper way to build a web application from scratch. Instead of using jQuery and a few other plugins, you can just use a Model-View-Controller framework so that you won’t get as a result a scrambled code within an overgrown file and zero capability to find what you are looking for in it.

The way MVC frameworks work is by organizing the concerns in an application into models, views, controllers. The frameworks don’t always respect this structure, an example being Backbone which adds the responsibility of the controller in view, but is the basic way for MVC frameworks to work.

Like I said in the first paragraph, starting a web application from scratch may lead to cluttered code and also you may end up reinventing the wheel and writing features that are already in some of these frameworks. Because time is really important for everyone you can skip remaking what others have done and start using a framework like the ones presented below.

Backbone.js

Backbone.js

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.

TodoMVC

TodoMVC

Backbone, Ember, AngularJS, Spine… the list of new and stable solutions continues to grow, but just how do you decide on which to use in a sea of so many options?

To help solve this problem, they created TodoMVC – a project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today.

Ember.js

Ember.js

Ember.js (formerly SproutCore 2.0) is a JavaScript framework that does all of the heavy lifting that you’d normally have to do by hand. There are tasks that are common to every web app; Ember.js does those things for you, so you can focus on building killer features and UI.

Knockout

Knockout

Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainably.

Cappuccino

Cappuccino

Cappuccino is a web application framework providing you with everything you need to create desktop flavored applications running right on the browser of your users. Unlike most of JavaScript framework, Cappuccino completely abstract the DOM.

SproutCore

SproutCore

SproutCore applications move business logic to the browser so they can respond to your users’ taps and clicks immediately, avoiding an agonizing roundtrip across often intermittent network connections.

As web application users go increasingly mobile, applications can no longer depend on reliable connections to a remote server to do the heavy lifting.

Backbone.Marionette

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 we have been building with Backbone, and includes pieces inspired by composite application architectures, event-driven architectures, messaging architectures, and more.

Geddy

Geddy

Geddy is built on the same MVC principles that many popular frameworks are based on. Every Geddy app has its models, controllers, and views as well as config files and routes.

Batman.js

Batman.js

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.

eyeballs.js

eyeballs.js

CanJS

CanJS

Agility.js

Agility.js

Agility.js is an MVC library for Javascript that lets you write maintainable and reusable browser code without the verbose or 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.

cujo.js

cujo.js

cujo is an architectural framework for next generation JavaScript applications. It encourages highly modular development, declarative application assembly, and embraces the asynchronous nature of JavaScript and its fusion of object-oriented and functional programming styles.

Tower.js

Tower.js

Serenade.js

Serenade.js

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 and has a number of other advantages as well

Stapes.js

Stapes.js

PlastronJS

PlastronJS

PlastronJS is an MVC library which uses the Google Closure library for use with the Closure Compiler. I’ve decided to call it Plastron after the name of the underside of the turtle to mimic names of frameworks like Backbone and Spine but also because it’s a good base to build upon.

PlastronJS though is not just a MVC framework, it’s the start of an application framework. I’ve decided to include a mediator and a store with the package which will hopefully help in the construction of medium to large size applications.

Choco

Choco

Knockback.js

Knockback.js

Both Knockout.js and Backbone.js have their strengths and weaknesses, but together they are amazing! With Knockback.js, you can use the strong ORM provided by Backbone and create dynamic views using Knockout bindings.

CompoundJS

CompoundJS

Backbone.stickit

Backbone.stickit

Backbone.stickit is yet another model-view binding plugin for Backbone. Like the other plugins, Stickit will wire up bindings that will keep form elements, innerHTML, text, and attribute values bound with model attributes.

soma.js

soma.js

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.

The main idea behind the MVC pattern is to separate the data (model), the user interface (view) and the logic of the application (controller). They must be independent and should not know about each other in order to increase the scalability of the application.

soma.js is providing tools to make the three parts “talks” to each other, keeping the view and the model free of framework code, using only native events that can be dispatched from either the framework of the DOM itself.

Funnyface.js

Funnyface.js

Maria

Maria

modeljs

modeljs

broke.js

broke.js

The Closure Library

The Closure Library

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.

Backbone.ViewMaster

Backbone.ViewMaster

DUEL

DUEL

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).

The goal of DUEL is to leverage knowledge in existing technologies to build UI for Ajax web applications. Modern apps require a fluid UI meaning an investment in JavaScript. DUEL takes this one step further by enabling JavaScript to build the entire view. Less context switching means focusing on the real problems rather than fighting the tools.

Monocle

Monocle

Photon

Photon

Photon is an extensible JavaScript framework for developing dynamic web sites and applications. Photon provides powerful data driven templating features, including flow control and external loading. There is even experimental support for 3rd party templating engines.

Ivy.js

Ivy.js

Olives

 Olives

laces.js

laces.js

Ratchet

Ratchet

JavaScriptMVC

JavaScriptMVC

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.

rAppid.js

rAppid.js

rAppid.js allows you to encapsulate complexity into components which can be used beside HTML. Therefor rAppid.js uses a Shadow DOM, which is rendered as valid HTML in the document body or a specific target. It is completely extendable and works well with other libraries.

Spine

Spine

DIJON FRAMEWORK

DIJON FRAMEWORK

Yahoo! Mojito

Yahoo! Mojito

Enjoyed this article? Subscribe to read more like it

 
 
 
 
 

Sponsors