Is there a JavaScript MVC (micro-)framework?
JavascriptModel View-ControllerFormsJavascript Problem Overview
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.
Javascript Solutions
Solution 1 - Javascript
Backbone is a great light-weight framework. Give it a try: http://backbonejs.org/
Solution 2 - Javascript
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
Solution 3 - Javascript
Spine has an API similar to Backbone but it's a lot smaller. It features prototypal inheritance.
Solution 4 - Javascript
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
Solution 5 - Javascript
Indeed there is: http://www.javascriptmvc.com/
I think you will find this sufficient!
Solution 6 - Javascript
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!)
Solution 7 - Javascript
There is the popular Backbone.js
Solution 8 - Javascript
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
Solution 9 - Javascript
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.
Solution 10 - Javascript
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.
Solution 11 - Javascript
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.
Solution 12 - Javascript
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.
Solution 13 - Javascript
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][1]
Hope you check it out.
[1]: http://www.claypooljs.com "jquery-claypool"
Solution 14 - Javascript
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.
Solution 15 - Javascript
Jamal is the lightweightest I've seen. It's also based on jQuery (bonus). Have not used.
Solution 16 - Javascript
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.
Solution 17 - Javascript
Try kitty. It is only 1.4KB and its only dependency is EJS.
Solution 18 - Javascript
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.
Solution 19 - Javascript
I wouldn't call this a micro-framework, but it sure looks interesting: Cappuccino Web Framework
Solution 20 - Javascript
CorMVC, easy to understand and to start with, jquery based and does not depend on any server technology
Solution 21 - Javascript
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.
Solution 22 - Javascript
Just to make the list a little more complete: ActiveJS
Solution 23 - Javascript
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.
Solution 24 - Javascript
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.
Solution 25 - Javascript
Maverick is a small JavaScript MVC framework — http://maverick.round.ee
Solution 26 - Javascript
I'm going to pipe up here too - AFrameJS works with jQuery, MooTools and Prototype.
Solution 27 - Javascript
Try this jQuery based javascript MVC framework.
Solution 28 - Javascript
Another one: MooTools-MVC
Solution 29 - Javascript
One more, lightweight and tiny: http://jqnano.oleksiy.pro/
Solution 30 - Javascript
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.