As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I'm building a web application that interacts heavily with the DOM and need direction in making my code scalable and maintainable.
The application overview: Upon interaction, I have toolbars and overlays that guide the user to edit the page, I then send back the edited page to the server.
So far I've successfully built what I wanted but it's JQuery all tied together and I need help on how to rewrite my code to make it scalable and maintainable.
Research so far:
RequireJS - I've looked at RequireJS and thought this was a great starting point and got it all working.
JQuery - Can't get away from this awesome library.
Nicholas Zakas' presentation on Scalable JavaScript Application Architecture - Awesome idea, but how do I implement this? I'm fairly new to advanced JavaScript.
I will also need some kind of event pooling to manage all these events. If I use JQuery's built-in event pooling "bind", "trigger", will this not force me away from Zakas' idea that only my application core should have access to my JQuery library?
What type of framework should I be looking at to solve my problem?
You're actually asking more than one question. I am currently analyzing the "what framework should I use" question for our company. This entails a lot more than you think. Below is what I have so far, and as I get more details I will try to update this item.
In the meantime...
The question of architectural patterns is different from that of libraries or frameworks.
ARCHITECTURAL DESIGN PATTERNS are useful for many reasons. One reason would be to achieve loose coupling in your modules. A great example of how to achieve loose coupling is found in the Mediator Pattern.
The question of which framework to use has many decision points:
JavaScript Famework Usage
Google Trends
Comparison of JavaScript frameworks
Speed Tests:
Slick Speed
Task Speed
Write your own test like this guy did
These Are What I Consider FRAMEWORKS:
Dojo
jQuery: Is a framework only when 'umbrella' modules are included (can be used as a lone library)
YUI
Mootools
Prototype
I have decided to limit my FRAMEWORK CHOICES to:
Dojo: Toolkit, Desktop, Mobil, Graphics & Vectoring
YUI: Developer Tools, Infrastructure, Utilities, Widgets, gallery, Projects
jQuery: Core, UI, Mobil, Plugins, Graphing, Visualization
But...a breakdown of JavaScript LIBRARIES is also needed:
MVC is the most commonly used front-end pattern. However, my notes here are not yet complete. Even I am having trouble finding usage statistics on the items listed above.
Backbone.js (MVC)
Designed more toward consuming REST data. Backbone has its own event system, and thus, competes with jQuery functionality.
Spine.js (MVC)
JavaScriptMVC (MVC)
MVC integrated development tools; is used with jQuery; Highly modularized. Not yet sure if it can simply be considered a library or not...but daddy likey!
AngularJS (MVC)
Separation of concerns, loose coupling, and inversion of control. Two-way databinding
SproutCore (MVC)
YUILibrary (MVC)
This is really part of the overall YUI framework…but was listed in the original source article.
Broke.js (MVC)
Documentation is currently poor.
Fidel.js (MVC)
Sammy.js (MVC)
Designed more toward consuming REST data.
KnockoutJS (MVVM)
QUESTIONS:
Why are there so few outright MVVM implementations?
Is Two-Way Binding the same thing as MVVM?
If so, why do some of these libraries (that do two-way binding) consider themselves MVC?
MODULAR JAVASCRIPT: AMD, CommonJS and Promises-Based Implementations:
I am still outlining this area. However, below are some areas I am using for inspiration.
A previous question of mine
ARTICLE: Writing Modular JavaScript With AMD, CommonJS & ES Harmony
ARTICLE: My Thoughts on AMD
ARTICLE: Creating large-scale JavaScript Applications
PRESENTATION: AMD Patters by John Hann
Essential jQuery Plugin Patterns by Addy Osmoni
QUESTIONS:
Are there different 'flavors' of AMD (various articles seem to say yes)?
What does 'promises-based' mean?
CREATING WIDGETS & PLUGINS:
Once you decide on which flavor of AMD your modules should use you can actually begin writting something.
ARTICLE: Coding your First jQuery UI Plugin
ARTICLE: The jQuery UI Widget Factory
QUESTIONS:
What is the difference between a plugin and a widget?
GENERAL NOTES:
I would suggest looking at how each of your frameworks implement various modules. Look at the code it takes to accomplish something. Does it feel right? Does it feel clunky?
MY INITIAL FEELING:
Looking at the trends, usage, speed and vastness of community support options...jQuery is way ahead.
THE GOAL:
The final goal is to choose a framework, any/all libraries and define a general approach for loading and creating loosely-coupled JavaScript Modules.
Quantifying Cost by Risk:
Quantiying cost outright is difficult, but you can explain-away risk. In your final desicion, you should also take into account the trends listed above. But, in general, I would loosely break-up cost into 3 areas that define RISK:
Familiarity: What is your team most familiar with now?
Ramping Up: How much extra-effort would it take to get "ramped-up" on each framework and library?
Licensing: Are there any snags here?
Risk: Once assessed, you can rightfully explain WHY you might rank one option as low, medium or high.
#ErezCohen
We are an ASP.NET shop, so we use Web API for our RESTFUL backend. And since component-style JavaScript development is the future, we chose to use jQuery & RequireJS as a standard baseline on all our pages. Additionally, we make heavy use of Deferreds in our controllers.
As for client-side MVC, too many of the “frameworks” mentioned are more fads than anything else (and many have waned in use). Additionally, it made more sense to treat MVC/MVVM capabilities as a one-off add-on when requirements dictated rather than a standard. And, frankly, since we find making Ajax calls easy, brining-in vast frameworks to do simple data-binding seemed silly (the only real benefit is two-way binding for certain complex cases). Besides, think about what a pain it would be to decouple some of these frameworks once they are no longer popular.
Of course, we have the talent to do so on our own…you may not. If your crew isn’t very good with JavaScript, try Angular because it was developed for “designers” not programmers. Alternatively, if your team is capable of rolling-their-own and wants a framework for controllers then jQuery Widget Factory is useful. However, simple use of the Module Pattern for your controllers is fine too (that is what we do). And...it works great...and is VERY clean.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
My goal is to migrate an existing web application to a RESTful single page application (SPA).
Currently, I'm evaluating several Javascript web application frameworks.
My requirements are as follow:
RESTful data layer (like ember-data)
MV*-structure
Dynamic routes
Testing-support
Coding by convention
SEO-support
Browser-History-Support
Good (API-) documentation
Production-ready
Living community
Backbone
The current application is using backbone.js. Overall, backbone.js is a nice project, but I'm missing well-defined structures that determine where what has to happen and how things must get implemented. Working in a bigger team with changing developers this leads to some kind of unstructured code, difficult to maintain and difficult to understand. This is why I'm searching now for a framework, that already defines all this stuff.
Ember
I looked into ember.js the last days. The approach seems very promising to me. But, unfortunately, the code changes almost daily. So, I won't call it production-ready. And, unfortunately, we can't wait for it to be version 1.0. But I really like the idea behind this framework.
Angular
Angular.js is a widely spread framework as well, maintained by Google. But I could not get familiar with angular. For me, the structure seems kind of unclear, explanations are missing of the overall responsibilities of each part of the framework, and the implementations feel circuitous.
Just to get this straight: this is just my personal impression and might be based on missing knowledge.
Batman and Meteor
As I understood, both frameworks need a server part as well. And since we just want a RESTful backend - no matter what language, technic or software, this is not what we want. Further, the backend API does already exist (RoR).
Knockout, CanJS and Spine
I did not go any deeper into these three candidates. Maybe this will be my next step.
So my questions now:
Am I missing any good SPA-frameworks?
What framework would you suggest/recommend?
Would you avoid any of the mentioned frameworks?
What is your experience in bigger SP applications?
PS: I'd would like to recommend a great blogpost from Steven Anderson (core developer from Knockout.js) about the "Throne of JS"-conference (from 2012) and javascript frameworks in general.
PS: Yes, I know there are already some question on SO. But since the development is so rapidly and fast for SPAs, most of them are already out-of-date.
I recently had to decide on a JavaScript SPA framework on a project too.
Ember
Looked at Ember early on and had similar thoughts as you about it - I really liked it but it felt like it was still too early to use... about half the tutorials I read didn't work with the current version because something had recently changed in how templating works.
Backbone
Backbone was the first frameworks we seriously looked at. I'm not sure I understand why you think it doesn't have "well defined structures"? Backbone is pretty clear about how to divide up Model and View code. Maybe you mean there's not some kind of app template? Anyway, Backbone seems really focused on the model/REST-binding part, but doesn't really prescribe anything for view binding. If model binding's important to you and you're using Rails it should be a breeze to do this. Unfortunately, the web services for my app didn't really match up, and I had to write my own .sync and .parse methods for everything. The separation of Model and View code was nice, but since we'd have to write all our bindings from scratch it wasn't worth it.
Knockout
Knockout is like the Yin to Backbone's Yang. Where Backbone is focused on the Model, Knockout is a MVVM framework and is focused on the View. It has observable wrappers for JavaScript object properties and uses a data-bind attribute to bind properties to your HTML. In the end we went with Knockout since view binding was mainly what we needed for our app. (...plus others, as discussed later...) If you like Knockout's view binding and Backbone's model bindings there's also KnockBack which combines both frameworks.
Angular
Looked at this after Knockout - unfortunately we all seemed pretty happy with how Knockout did view binding. It seemed a lot more complex and harder to get into than Knockout. And it uses a bunch of custom HTML attributes to do bindings, which I'm not sure I like... I may take another look at Angular later, because since I've come across multiple people who really like the framework - maybe we just looked at it too late for this project.
Batman, Meteor, CanJS, Spine
Didn't really look too closely at any of these. Though I know Spine is a similar framework to Backbone with explicit Controller objects, and is written in CoffeeScript.
Afterword
As I mentioned, we ended up using Knockout because, for our project, focusing on view binding was more important. We also ended up using RequireJS for modularization, crossroads and Hasher to handle routing and history, Jasmine for testing, as well as JQuery, Twitter Bootstrap, and Underscore.js (and probably more libraries I'm forgetting at the moment).
Javascript app development is more like the Java ecosystem than the Rails ecosystem. Rails provides a solid core of stuff you're going to use for every app (Rails framework), and the community provides a lot of customizations on top of that (gems). Java provides... a language. And then you can choose Java EE or Spring or Play or Struts or Tapestry. And choose JDBC or Hibernate or TopLink or Ibatis to talk to the database. And then you can use Ant or Maven or Gradle to build it. And choose Tomcat or Jetty or JBoss or WebLogin to run it in. So there's more emphasis on choosing what you need and what works together than choosing THE framework to use.
it's been a year since we started development on our Cloud services project with numerous SPAs, so it was a big decision, which javascript framework to use for our UI to satisfy our RESTful architecture needs.
and after a lot of researches we ended up using Dojo framework .
main features you'll love:
educated community and a team that came up with a perfect design pattern. great conventions and modular/object-oriented architecture. with CrossBrowser programming attitudes :)
MV* structure. build UI widgets with external .htm templates and for production, build all your javascript & templates into a single, minified and small .js
build classes with inheritance. property setters, a lot of function tools.
pub/sub mechanism (named topics in dojo)
a lot of UI controls, from validation form control, dialogs/tooltips to a heavy featured, highly customizable (but lightweight) chart & data-grid solution.
a good unit test system named DOH. it also have a robot to reproduce mouse/keyboard actions.
a querying tool (like JQuery) named NodeList with all jquery features and even a lot of it's plugins.
and the good but not so complete part. it has a JsonRest module to use with your REST services. its a handy tool but it lacks a lot of features.
to overcome these issues, we developed an AJAX poller, error handling and universal, loading & notifications solution.
we did it very easily using dojo framework conventions and structures.
if you don't want to do that, perhaps you have to use another framework for this part.
looking at great SPAs around the web you'll find out all of them are customized and using multiple frameworks. but our experience with Dojo alone was fantastic. and therefore I suggest you to don't think of any other framework since all of them are incomplete for a SPA. but ultimately you have also another option (which I don't recommend and have no details information on). go with a JAVA framework that is capable of building SPAs, by automatically generating UI & javascript.
Is there a simple convention over configuration application framework that is javascript based, which looks and feels like a rich client side application, out-of-the-box? For example, there is GWT... But it is heavy weight (i.e. it requires compilation).
More specifically, given that tools like JQuery continue to gain popularity - are there any vanilla CSS + JQuery application frameworks that (again, like GWT), just "work" out of the box, with intuitive and natural layout managers similar to those defined by the GWT/Swing toolkits ? These parts of any such framework might be driven by a high level js wrapper.
Since JQuery is modular, and modularity has its benefits, the above may not be a fair expectation. Java is quite modular, but by picking a stack (hibernate + Spring + JSP, for example) we can simplify java development. Is there such thing as a common JQuery stack for full service front end development ?
The closest thing I have found so far to embody this are :
GWT
SproutCore (recent discovery which I haven't done too much with).
FLEX related technologies.
I'm sure other approaches to High level web / CSS / js / html5 programming exist- what are they? Although its that many js tools exist, it's not clear which ones are low level DIY ones (for DOM hackers) and which ones are the (less flexible) pre packaged frameworks that "just work".
UPD: 2014 answer
It's great to see insane progress in the field, be sure to check out the following frameworks:
EmberJS
AngularJS
KnockoutJS
It's virtually impossible to recommend a specific one without being opinionated but you can find plenty of comparison articles on the web and related questions here on SO.
From your description, the top 2 frameworks for RIA (Rich Internet Application) development that I would suggest are:
ExtJS. A rich and mature framework with a big community and lots of complementary tools. Gives you OOP-like class system, an event system, a pretty rich and flexible library of widgets (with layout managers) and lots of other cool abstractions, just check out their website. Very good an extensive documentation. They also have a product named Sencha GXT (ex ExtGWT) if you want interoperability with GWT, they've been doing it for quite a while.
Dojo Toolkit. Another robust framework, quite similar to ExtJS but probably more lightweight (which is framework's strength, they use AMD to define/load modules)
Also worth noting that the second one is free for commercial use and the second one isn't. I suggest you to look at what these two frameworks have to offer out of the box and decide which one better suits your needs.
Other less popular (someone please correct me if I'm wrong) and generally smaller frameworks that have some community around them are:
Sproutcore. that you've mentioned
YUI. RIA framework maintained by Yahoo. ExtJS was originally created as extension to YUI.
qooxdoo. I'm not familiar with the framework but I've seen people recommend it. The description on the website looks promising.
These are the the frameworks that can help you architect "serious" single-page rich web applications. I should note that jQuery isn't generally suitable for such projects as a core. If what you want is more like library of widgets built on top of jQuery then you should check out jQuery UI but there's lots of other similar toolkits.
Also, check out these similar threads on SO:
free and open source alternative to extjs
What are alternatives to ExtJS?
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I've been working as a flex dev for many years, building really complex apps. With all the recent hype, I'm interested in learning HTML5.
What I like about the Flex framework is it's a consistent, coherent, complete stack for building RIA's. I like that it has a broad set of components out-of-the-box, and a framework for extending and building really complex, heavily customized & skinned components.
Are there similar frameworks out in the HTML5 space?
From the searching I've done, I see there's tonnes of useful .js scripts out there which provide nifty components, effects, etc. However, I haven't been able to find a solid js framework with a mature and architected component library.
This worries me that in building a complex application, I may end up writing lots of plumbing code to wire together disparate components.
I know that HTML5 is still in it's infancy, so if there are promising frameworks that I should be keeping an eye on, I'd like to know about 'em.
My shopping list of ideal framework requirements would be as follows:
Solid component architecture (including lifecycle events)
Extensible
Layout managers
Browser agnostic
Support for data binding
Support for complex Skinning
Abstraction of services layers & protocols (ie., SOAP / JSON / XML services are all a type of IRemoteService)
Along with the UI framework itself, what frameworks exist in the Javascript space for
MVC architectures. (Similar to Parsley, or Maté in the Flex world)
Dependency Injection
Unit testing
If you're a Flex dev, then might be be interested in checking out both the desktop and mobile versions of the Sencha Frameworks (my company): Ext JS for desktop apps and Sencha Touch for mobile/tablet apps.
Ext JS is focused on desktop web apps that can work all the way back to IE6, so there's not much room to be "HTML5"y although where we can we are (our new charting stuff uses Canvas, SVG or VML depending on the browser it finds itself on).
Sencha Touch is focused on Android, iOS, Blackberry and IE9(?) mobile browsers, so we get to use all the CSS3, localStorage, etc. etc. that you can shake a stick at. If you're looking for a test case of what you can do when you start with an assumption of a modern browser then this is it.
Ext JS & Sencha Touch is components all the way down. The best overview of both components and layouts is this article that was written for Ext JS 2, although the component and layout model hasn't changed much for Ext JS 3. Layouts are getting a rewrite for Ext JS 4 - which will have its first beta this month - to make them more like the CSS3 flexbox layout system.
Extensibility is the outgrowth of having a proper component model. Ext JS has a bunch of user extension components that can be mixed and matched. A good example of a professional after market component is Ext Scheduler. There's also a good tutorial on how to create components.
Data binding: UI components are bound to stores, so multiple UI elements are updated with new data as it changes. You can read the store API reference to get a sense of how it works.
Complex skinning - Sencha Touch has an excellent theming system which is being ported to Ext JS 4 - but Ext JS 3 and 2 are a little more involved to theme due to IE6 compatibility requirements (you have to generate images)
Services layers are abstracted with data proxy, which is extended for JSON, Http, XML etc.
Sencha Touch and Ext JS 4 have a (simple) MVC architecture. Ext JS 3 and below does not.
Here's a good write-up on dependency injection in Ext JS (but it should generalize to Touch)
For unit testing, we recommend Jasmine - which came out of Pivotal Labs.
Ext JS and Sencha Touch are pretty widely used - Ext JS mostly for corporate apps, but there are lots of big companies using it like Salesforce, Marketo and more for externally focused users. Sencha Touch has a nice gallery of apps from our latest dev contest, you should check it out.
If you care about tooling, we also have a GUI drag and drop Designer and a CSS3 animation tool (the latter in developer preview)
The HTML5 Boilerplate may be interesting to you. http://html5boilerplate.com/
I'm not sure about JS frameworks for MVC or Dependency, but for unit testing Dojo's Harness (due to new user restrictions I can't post a second link, but it should be easy to find) is pretty powerful. I'd take a look at more of Dojo's stuff as they do some pretty cool work with JS
Sproutcore is a javascript application framework. It is fully MVC with a rich key-value observing/binding infrastructure that reduces the amount of plumbing code you need to write, if you use it correctly. It supports most of your requirements:
"Solid component architecture (including lifecycle events)" -- every view has a bunch of lifecycle events.
"Extensible" -- Sproutcore supports mixins, and has its own 'convert prototypal inheritance' to classical inheritance stuff so you feel like you are creating classes in JS.
"Layout managers" -- You lay out your own views, where they are, how big they are. There are SplitViews which you can resize, and nest, but this might be one area where SC does not meet your requirements (although you can easily implement view resizing via observing)
"Browser agnostic" -- it is pretty browser agnostic, like any other JS framework will be.
"Support for data binding" -- very extensive binding infrastructure. If you bind a view field to a model field, it will update when the model is changed.
"Support for complex Skinning" -- skinned via css like any other web app if you don't like the default theme.
"Unit testing" -- SC comes with a qunit test harness in place. When you use the SC command line tool to create a class (be it an M, a V, or a C) the tool creates a test stub for you.
'HTML5' -- sort of a nebulous concept to start. SC definitely supports generating an html5 app manifest in the build tools. There are frameworks available for writing to browser local storage. I think more html5 capabilities will come online in the near future.
The NPR app on chrome app store and this sudoku app are both SC apps.
I think you might like the Sencha Framework which complies with some of the things you are looking for.
I'm in the same boat as you.
All the js frameworks I found require a lot of CSS to make them half as good as native flex.
Most of the newer js frameworks give up on older browsers.
Funding and cool demos may make meteor the long term js framework winner.
I like the simplicity of angularJs
here's a good comparison of some popular ones
http://blog.stevensanderson.com/2012/08/01/rich-javascript-applications-the-seven-frameworks-throne-of-js-2012/
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I've been using various javascript frameworks including mootools, jquery, prototype and scriptaculous and have found them all good, but difficult to extend to more complex ideas.
If I am going to knuckle down and learn one, which is the simplest to extend and use whilst staying powerful enough to use in a variety of directions?
I propose jQuery.
I'll give you some of the major arguments from the presentation that my team put on yesterday for senior management to convince them of that.
Reasons:
Community acceptance. Look at this graph. It shows searches for "prototype", "yui" and "scriptaculous" growing from 2004 to 2008. Then out of nowhere in 2006 searches fro "jquery" shoot up to double the number of the other libraries. The community is actually converging on a single leading product, and it's jQuery.
jQuery is very very succinct and readable. I conducted an experiment in which I took existing code (selected at random) written in YUI, and tried re-writing it in jQuery. It was 1/4 as long in jQuery. That makes it 4 times as easy to write, and 4 times as easy to maintain.
jQuery integrates well with the rest of the web world. The use of CSS syntax as the key for selecting items is a brilliant trick which helps to meld together the highly diseparate worlds of HTML, CSS and JavaScript.
Documentation: jQuery has excellent documentation, with clear specifications and working examples of every method. It has excellent books (I recommend "jQuery in Action".) The only competitor which matches it is YUI.
Active user community: the Google group which is the main community discussion forum for Prototype has nearly 1000 members. The Google group for jQuery has 10 times as many members. And my personal experience is that the community tends to be helpful.
Easy learning curve. jQuery is easy to learn, even for people with experience as a designer, but no experience in coding.
Performance. Check out this, which is published by mootools. It compares the speed of different frameworks. jQuery is not always the VERY fastest, but it is quite good on every test.
Plays well with others: jQuery's noConflict mode and the core library's small size help it to work well in environments that are already using other libraries.
Designed to make JavaScript usable. Looping is a pain in JavaScript; jQuery works with set objects you almost never need to write the loop. JavaScript's greatest strength is that functions are first-class objects; jQuery makes extensive use of this feature.
Plug-ins. jQuery is designed to make it easy to write plugins. And there is an enormous community of people out there writing plugins. Anything you want is probably out there. Check out things like this or this for visual examples.
I hope you find this convincing!
In my opinion, jQuery is exceptionally powerful and simple. It uses CSS selector syntax to pull back elements and only adds two functions to the global namespace: jQuery() and $(), which is an alias for jQuery().
There are a massive number of plugins available for jQuery to let you do things like create slide shows, accordion controls, rich calendars, etc. The book "jQuery In Action" is a phenomenal companion to the online reference material.
We used it on my last project to create a fairly rich scheduling tool and we liked it so much, we're encouraging it's adoption throughout our consulting company as the defacto standard for all JavaScript use. You can check out the results at http://www.stanleysteemer.com
See also (other related questions):
Comparison of Javascript libraries
What JavaScript library would you choose for a new project and why?
What is the single most useful general purpose javascript library for rich internet apps?
Which JavaScript framework is best for web development?
Which JavaScript library is recommended for neat UI effects?
What is the best lightweight javascript framework?
Any good AJAX framework for Google App Engine apps?
jQuery is my favorite
Prototype. Is simple, unobtrusive, and makes your javascript code look cleaner than ever.
It has a wonderful user group, where you can get your questions answered almost immediately
Another vote for jQuery. It's small, focussed, and yet very powerful. It's also reasonable well documented, by the (generally awful) standards of JS libraries.
It's also very easy to extend, once you get your head around the syntax.
NOTE: This answer was pre-Angular/Ember/etc. so addresses an outdated issue.
I teach this stuff, and really had little choice but to home in on JQuery, since the majority in the industry has already 'chosen' it (not always a good reason, I know), but also because - for students that already know some CSS - the entry point is lower.
I've also used Mootools (my second choice), but a colleague convinced my to switch to JQuery with the 'programmability' argument - I find it cleaner to code with and understand. The JQuery community, online documentation, free online books and third-party sites help, too.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
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.
Backbone is a great light-weight framework. Give it a try:
http://backbonejs.org/
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
Spine has an API similar to Backbone but it's a lot smaller. It features prototypal inheritance.
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
Indeed there is: http://www.javascriptmvc.com/
I think you will find this sufficient!
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!)
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>
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.
There is the popular Backbone.js
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.
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.
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.
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.
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.
Jamal is the lightweightest I've seen. It's also based on jQuery (bonus). Have not used.
http://jamal-mvc.com/
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.
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.
Try kitty. It is only 1.4KB and its only dependency is EJS.
I wouldn't call this a micro-framework, but it sure looks interesting: Cappuccino Web Framework
CorMVC, easy to understand and to start with, jquery based and does not depend on any server technology
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.
Just to make the list a little more complete:
ActiveJS
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.
Maverick is a small JavaScript MVC framework — http://maverick.round.ee
I'm going to pipe up here too - AFrameJS works with jQuery, MooTools and Prototype.
Another one: MooTools-MVC
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.
Try this jQuery based javascript MVC framework.
One more, lightweight and tiny: http://jqnano.oleksiy.pro/
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.