Is there a JavaScript MVC (micro-)framework?

Question

Are there any client-side JavaScript MVC (micro-)frameworks?

I have a rather complicated HTML form, and it would benefit from the MVC pattern.

I imagine a good solution would provide the following:

Model and View update the Controller when values change (Observer pattern)
Populate the model from the form data when the page loads
Populate the form from the model when the model changes

Ajax, comet, JSONP and all that jazz are serious overkill.

Am I wrong or is this just a bad idea (or perhaps a framework being buzzword-compliant)?. — , Dec 22 '08 at 22:14
I started working on something a little while ago because I had the same feeling as you. It's as minimal as it gets, AMD and as unopinionated as I could get it. That means no jQuery etc. I know this has been closed now, but I think this *might* be the kind of thing you were looking for: https://github.com/Wolfy87/tarmac - I haven't done much with it recently because I thought I would be the only user. — Olical, Jul 16 '13 at 14:44
Have a look at [TodoMVC](http://todomvc.com/), which compares (nearly) all available JavaScript frameworks by implementing a simple TODO App. — koppor, Sep 17 '16 at 07:51
Look at stimulusjs - for an existing app with server side generated markup, i found this framework to be minimal, least invasive and to the point. Really fun to work with. But may not satify all your requirements — Sudhir N, Dec 09 '20 at 06:24

score 70 · Answer 1 · edited Sep 09 '15 at 18:18

70

Backbone is a great light-weight framework. Give it a try: http://backbonejs.org/

edited Sep 09 '15 at 18:18

Nick

1,417
1
14
21

answered Dec 30 '10 at 01:05

Martin Drapeau

1,484
15
16

2

I am SO glad I found Backbone. – Aaron Greenlee Jan 11 '11 at 17:33
I agree, one to check out definitely! – Jan 11 '11 at 20:46
How to use Backbone in MVC way? – IsmailS Oct 20 '11 at 11:15
1

@TristanJuricek is there a free alternative to peepcode? – Matt Apr 01 '12 at 19:24
Skip Backbone and go right for Spine. It's got a much more logical MVC implementation. – Chris Jaynes May 19 '12 at 05:27

score 33 · Answer 2 · edited Aug 02 '15 at 11:17

33

JavaScriptMVC is an excellent solution. It's everything is a plugin approach enables you to select only the features you need. As of 2.0, it's based on jQuery.

On progressively enhancing your website, that's left up to the user as JMVC provides just a middle layer for development - it's up to you to make that design choice yourself.

However, JavaScriptMVC is simply the best general purpose JavaScriptMVC library because of its powerful event delegation based controllers.

Event delegation lets you escape having to attach event handlers, and simply create rules for your page.

Finally, JMVC is much more than a MVC architecture. It has all parts of the development cycle covered with:

Code Generators
Selenium and Env.js integrated testing
Documentation Engine
Automatic Concat+Compress
Error detection and reporting

edited Aug 02 '15 at 11:17

Kevin

6,539
5
44
54

answered Aug 22 '09 at 08:56

Justin Meyer

1,677
13
15

1

+1 for JavascriptMVC - I've used it for a few apps now, and it's pretty nice. Skip the code generation examples on the website. I'd imagine those are only there to pacify the Rails fanboys. :) Start with the basic JQueryMX object model, and create a controller. – Chris Jaynes Aug 31 '11 at 02:41
1

Since I made this comment, I've switched to using Require and Spine. Ultimately they are smaller, more elegant, and less 'Enterprisey' than JMVC. JMVC was nice for our team of Java developers to make the adjustment to JS, but it just doesn't hold up once you start to understand JS better... – Chris Jaynes May 19 '12 at 05:24
The MVC part of JMVC is now [can.js](http://canjs.com/) – PHearst Apr 19 '14 at 11:36

score 21 · Answer 3 · edited Sep 17 '16 at 07:56

21

Spine has an API similar to Backbone but it's a lot smaller. It features prototypal inheritance.

edited Sep 17 '16 at 07:56

koppor

19,079
15
119
161

answered May 09 '11 at 08:23

Kolja

2,667
1
30
29

2

It's also written in CoffeeScript and uses CoffeeScript's style of classes — not that that's a huge win, but it's kinda nice. – a paid nerd Nov 11 '11 at 21:53
1

I assume that's why it's small than backbone? Coffeescript code is more compact... – Brenden Jan 20 '12 at 01:43
I love Spine. Use it with RequireJS for pure awesomeness. Don't let the fact that it's CoffeeScript scare you off either, it works fine with normal JS, too... – Chris Jaynes May 19 '12 at 05:26
Browser support is IE >= 9 so check that matches the profile of your visitors. – Richard Dec 22 '14 at 17:10

score 20 · Answer 4 · answered Aug 22 '11 at 06:59

20

AngularJS works well together with jQuery and will help you a lot with MVC structure and strict separation of concerns.

Full testing environment and Dependency Injection included...

Check it out at http://angularjs.org

answered Aug 22 '11 at 06:59

Vojta

23,061
5
49
46

Angularjs is THE best so far in late 2013.... I think.... – Tony Bao Oct 24 '13 at 20:09
15

angular is not a micro framework :/ – iConnor Feb 01 '14 at 01:53
1

Agree, Angular is not a micro-framework. – Vojta Mar 12 '14 at 03:12
2

yes, also the learning curve is non-proportional it's benefits comparing to other frameworks. – vsync Mar 30 '14 at 22:10
4

angular is the very opposite of a micro framework. it's a beast. – hasen Mar 23 '15 at 03:07

Filip Ekberg · Answer 5 · 2009-08-26T10:01:38.050

14

Indeed there is: http://www.javascriptmvc.com/

I think you will find this sufficient!

edited Aug 26 '09 at 10:01

answered Dec 22 '08 at 17:54

Filip Ekberg

36,033
20
126
183

That site has a blink tag. o_0 – Tad Donaghe Dec 22 '08 at 18:32
that site doesn't load for me at all – Josh Aug 25 '09 at 19:29
1

Try again, should work again. – Filip Ekberg Aug 26 '09 at 10:01

score 14 · Answer 6 · answered Dec 24 '10 at 10:24

14

I think this one looks like something you should check out: http://knockoutjs.com/

(As a silverlight / wpf programmer this was the library that made me finally start learning javascript. It is based on the Model-View-View-Model (MVVM) pattern, as for me right now seems like a good choise!)

answered Dec 24 '10 at 10:24

Larsi

4,654
7
46
75

As a silverlight / wpf programmer I evaluated knockout, backbone, and a couple others. At the end of the day I switched to Angular. It has bindings and MUCH more. – jonperl Apr 11 '12 at 23:47

score 8 · Answer 7 · edited Sep 17 '16 at 07:52

8

There is the popular Backbone.js

edited Sep 17 '16 at 07:52

koppor

19,079
15
119
161

answered Dec 09 '10 at 23:29

Drew LeSueur

19,185
29
89
106

score 8 · Answer 8 · edited Jun 20 '20 at 09:12

Ember.js

These are the three features that make Ember a joy to use:

Bindings
Computed properties
Auto-updating templates

Bindings

Use bindings to keep properties between two different objects in sync. You just declare a binding once, and Ember will make sure changes get propagated in either direction.

Here's how you create a binding between two objects:

MyApp.president = Ember.Object.create({
  name: "Barack Obama"
});

MyApp.country = Ember.Object.create({
  // Ending a property with 'Binding' tells Ember to
  // create a binding to the presidentName property.
  presidentNameBinding: 'MyApp.president.name'
});

MyApp.country.get('presidentName');
// "Barack Obama"

Bindings allow you to architect your application using the MVC (Model-View-Controller) pattern, then rest easy knowing that data will always flow correctly from layer to layer.

Computed Properties

Computed properties allow you to treat a function like a property. Computed properties are useful because they can work with bindings, just like any other property.

Auto-updating Templates

Ember uses Handlebars, a semantic templating library. To take data from your JavaScript application and put it into the DOM, create a tag and put it into your HTML, wherever you'd like the value to appear:

<script type="text/x-handlebars">
  The President of the United States is {{MyApp.president.fullName}}.
</script>

is ember advantageous to use over backbone in any way.... if the specifications are not so clear at the initial stages.. — Bijendra, Nov 16 '12 at 11:56
I do like emberJS, but it is not **"micro"** it's **HUGE** because its a flat out framework — iConnor, Feb 10 '14 at 16:07
Using Ember and microframework in the same sentence shouldn't be allowed. — tdc, Nov 02 '15 at 16:49

score 8 · Answer 9 · answered Mar 16 '12 at 03:18

8

Stapes.js

Full disclosure: i'm the author of this library :)

If you're looking for something really tiny (1.5kb minified / gzipped) have a look, and tell me if you like it.

answered Mar 16 '12 at 03:18

Husky

5,757
2
46
41

Looks great at first sight! I like your focus on prototypal inheritance (no simulated classes, and no confusing `new` operator). What seems unnecessary is yet another `each` and `map`. I already have them in [Underscore.js](http://underscorejs.org/) and [jQuery](http://jquery.com/). – feklee Jul 28 '12 at 12:57

score 7 · Answer 10 · answered Feb 04 '09 at 01:37

If your requirements are really simple, you could write your own simple MVC like Alex Netkachov did.

His examples are built on dojo (Note: they don't work for me on his page because of a missing dojo.js file), but you could follow the pattern in plain Javascript.

score 4 · Answer 11 · edited Jul 17 '15 at 19:53

4

It's probably overkill for what you need, but SproutCore is an MVC framework, and it doesn't look any more heavyweight than JavaScriptMVC or TrimPath's Junction.

Unfortunately, none of these seem to be built on the principle of progressive enhancement.

edited Jul 17 '15 at 19:53

Peter Mortensen

30,738
21
105
131

answered Feb 04 '09 at 01:02

system PAUSE

37,082
20
62
59

1

JavaScriptMVC's core MVC components are about 1k larger than Backbone's gzipped (while have a number more features). And JMVC is fully able to build progressively enhanced apps. You'd just throw away the Model layer. – Justin Meyer Mar 24 '11 at 17:07

score 3 · Answer 12 · edited Sep 17 '16 at 07:54

Please also checkout jquery-claypool.

jquery-claypool is a small, fast, railable mvc framework built on jquery, based on my experience with django, rails, spring etc. Its very light weight and runs on both on the client and in server environments.

it provides a routing framework for clean mvc, category logging, filters (aop), lazy creation of controllers, inversion of control, convention-over-configuration and not much more by design.

it doesn't do anything jquery already does, feels like jquery, and works like a good framework should: simply.

jquery-claypool

Hope you check it out.

How do you see Claypool in relation to Backbone? – Pepijn Jun 17 '11 at 12:57 — Pepijn, Jun 17 '11 at 12:57

score 3 · Answer 13 · edited Jul 17 '15 at 19:54

3

The popular ActionScript MVC framework PureMVC was recently ported to JavaScript. I haven't had a chance to try it out yet, but I am confident it's good.

edited Jul 17 '15 at 19:54

Peter Mortensen

30,738
21
105
131

answered Feb 04 '09 at 01:33

Ricky

5,365
2
32
30

I like it for flex. Simple and powerful. – Glenn Sep 01 '09 at 04:23

Bijan · Answer 14 · 2016-04-01T13:33:02.143

3

UPDATE 2016: Sammy.js seems to be abandoned.

Have a look at Sammy.js

Text from the site:

A small webframework with class.

SMALL Sammy's core is only 16K compressed and 5.2K compressed and gzipped
MODULAR Sammy is built on a system of plugins and adapters . Only include the code you need. It's also easy to extract your own code into reusable plugins.
CLEAN The entire API was designed to be easy to understand and read. Sammy tries to encourage good encapsulation and application design.
FUN What's the real point of development if its not enjoyable. Sammy tries to follow the MATZ approach. It is optimized for developer happiness.

edited Apr 01 '16 at 13:33

answered Mar 17 '12 at 15:04

Bijan

25,559
8
79
71

Could you expand, please, on what is MATZ? – kstep Apr 01 '16 at 13:22
1

Yukihiro “Matz” Matsumoto, the creator of ruby has often said that he is “trying to make Ruby natural, not simple,” in a way that mirrors life. So software should feel natural to the user. This is meant by MATZ approach. – Bijan Apr 01 '16 at 13:27

score 2 · Answer 15 · answered Aug 17 '09 at 13:28

2

Jamal is the lightweightest I've seen. It's also based on jQuery (bonus). Have not used.

http://jamal-mvc.com/

answered Aug 17 '09 at 13:28

KevBurnsJr

4,869
2
25
16

score 2 · Answer 16 · answered Sep 24 '10 at 13:50

2

If you want to keep things under control and quite simple, you may don't need a framework, but just implement your own mvc pattern. Just check this article: Model-View-Controller (MVC) with JavaScript by Alex Netkachov on 2006.

answered Sep 24 '10 at 13:50

Batailley

131
1
4

Michal Jezierski · Answer 17 · 2014-05-29T20:55:17.893

2

Try kitty. It is only 1.4KB and its only dependency is EJS.

edited May 29 '14 at 20:55

answered Aug 26 '11 at 14:15

Michal Jezierski

69
5

Vikrant Chaudhary · Answer 18 · 2011-12-02T19:50:00.453

2

Here is a list of all open-source JavaScript Frameworks known to mankind.

http://getopensource.info/explore/javascript/framework/

Or only MVC frameworks

http://getopensource.info/explore/javascript/mvc/

Disclosure: I'm the developer of this website.

edited Dec 02 '11 at 19:50

answered Dec 02 '11 at 19:40

Vikrant Chaudhary

11,089
10
53
68

score 1 · Answer 19 · answered Sep 25 '10 at 19:05

1

CorMVC, easy to understand and to start with, jquery based and does not depend on any server technology

answered Sep 25 '10 at 19:05

epitka

17,275
20
88
141

score 1 · Answer 20 · answered Dec 22 '08 at 18:34

1

I wouldn't call this a micro-framework, but it sure looks interesting: Cappuccino Web Framework

answered Dec 22 '08 at 18:34

PEZ

16,821
7
45
66

score 1 · Answer 21 · answered Nov 16 '10 at 10:55

I have developed a very simple Javascript MVC framework called MCV. It does not do exactly what you ask for, but it is easily extensible with helpers. Anyway, it is definitely micro (1,9kb packed).

It works more or less like Jamal, but I decided to roll my own for two reasons:

remove the jQuery dependency (although I use it together with jQuery most of the time)
making it extensible with helpers. These are analog to CakePHP behaviors, components and helpers.

score 1 · Answer 22 · answered Mar 27 '11 at 00:43

1

Just to make the list a little more complete: ActiveJS

answered Mar 27 '11 at 00:43

Bijan

25,559
8
79
71

score 1 · Answer 23 · answered Sep 14 '11 at 16:51

I upvoted the AngularJS (full disclosure, I'm involved in a limited way with the angular dev effort) and am very excited about it. I did a side-by-side comparison taking one feature for an internal project (sorry don't have signoff to share it) and implementing it in both AngularJS and Backbone. It was a great exercise and in the end, I'm very much leaning towards Angular. The core developers are great about answering questions and they've done a really nice job with builtin databinding, unit/e2e testing and documentation. Its still in beta with 1.0 coming out in near future. The beta is very stable.

There is a bit of a paradigm shift, and they use a fairly different approach than most. Integrating your favorite jquery plugins takes a bit of effort but is doable and has been done (angular-contrib on github).

I will say (and this is a problem for most js-centric frameworks), make sure to investigate how to make your content SEO-friendly (if its important to you). Since joining the angular community in June, I've noticed the interest is growing and a number of people are making posts saying that they've looked at Backbone and others but really like what they are seeing in Angular.

score 0 · Answer 24 · edited Jul 17 '15 at 19:56

0

Can.js has everything you need and weighs in at just 8 KB. It's taken the best bits from JavaScriptMVC and distilled it into one small, yet kickass framework with observers, widgets, binding, the works. It is compatible with major frameworks (jQuery, Dojo Toolkit, MooTools, etc.). Documentation is excellent and authors are responsive. It is definitely worth a look.

edited Jul 17 '15 at 19:56

Peter Mortensen

30,738
21
105
131

answered May 18 '12 at 21:16

Steven Garcia

2,814
2
24
12

score 0 · Answer 25 · edited Dec 21 '11 at 20:56

0

There was a key-value binding JavaScript framework called "Coherent", which was inspired by Apple's Cocoa Bindings. The framework has been bought by Apple, but there is still an old copy at http://github.com/trek/coherentjs/tree/master.

edited Dec 21 '11 at 20:56

answered Dec 22 '08 at 22:04

Steve Harrison

121,227
16
87
72

score 0 · Answer 26 · answered Jan 18 '11 at 15:32

0

Maverick is a small JavaScript MVC framework — http://maverick.round.ee

answered Jan 18 '11 at 15:32

Martin Tajur

5,242
1
20
15

score 0 · Answer 27 · answered Feb 08 '11 at 15:31

0

I'm going to pipe up here too - AFrameJS works with jQuery, MooTools and Prototype.

answered Feb 08 '11 at 15:31

Shane Tomlinson

3,310
3
19
12

score 0 · Answer 28 · edited Nov 29 '12 at 23:09

0

Try this jQuery based javascript MVC framework.

edited Nov 29 '12 at 23:09

Isaac

2,701
4
30
47

answered Feb 11 '11 at 11:50

Garion

1
1

score 0 · Answer 29 · answered Jul 08 '11 at 17:13

0

Another one: MooTools-MVC

answered Jul 08 '11 at 17:13

Alejandro García Iglesias

16,222
11
51
64

score 0 · Answer 30 · edited Dec 06 '14 at 11:42

0

One more, lightweight and tiny: http://jqnano.oleksiy.pro/

edited Dec 06 '14 at 11:42

Mathieu Rodic

6,637
2
43
49

answered Mar 20 '12 at 11:07

Oleksii G.

487
5
20

Is there a JavaScript MVC (micro-)framework?

30 Answers30

Bindings

Computed Properties

Auto-updating Templates

Have a look at Sammy.js

Linked

Related