I'm currently on a web application project written in javascript with node.js and Express server-side and it's time to consider the client-side of this application. The two questions are:
Should I consider using a framework or can I write it without such a tool?
And if not, which framework?
I've chosen three of these: backbone, knockout and Ember. I read all the questions I found about them but I'm still hesitating. The points to consider are:
It is good to mix html with javascript like knockout does?
Will my application be easily maintainable?
Will the framework continue and not diappear tomorrow, leaving me in a very uncomfortable situation?
EDIT: And what do you think about JavaScriptMVC?
As #Christian Varga has said in the comments, it depends. However, I would make the following observations:
It is good to mix html with javascript like knockout does?
With knockout you are not forced to mix javascript into the html. See Unobstrusive Event Handling.
Will my application be easily maintainable?
In my experience with knockout , if the application gets especially large the pages do get complicated. However, if you are going for a SPA style page then the code will always get fairly involved. I haven't worked with Ember or Backbone but certainly Backbone does have a reputation for being be good for larger applications.
Will the framework continue and not diappear tomorrow, leaving me in a
very uncomfortable situation?
I think you have picked your three frameworks to consider wisely. Knockout and Backbone both have fairly wide adoption. Knockout is to be shipped with MVC4 which gives you some confidence behind its future. Ember is newer but there seems to be a lot of excitement behind it. There is a good discussion of Ember with various references to knockout and backbone here
Hope this helps you evaluate what will be best for your project.
All those are good frameworks. You can choose anyone and you won't make a huge mistake. Of course, you might like one most than others, but that's a matter of taste. All those frameworks will make your app easy mantainable.
Now, I want to add something more. You asked "Should I consider using a framework"? You can build your own stuff, that's something cool. I'd just recomend to keep in mind good organization of your project. In my short experience, Js is a mess. And these FWs help you to keep your code clean and organized.
1 more thing to add to organization: You should consider some AMD tool, like Require.js
If you're thinking of building an application with scalability and maintainability in mind you might want to consider a reference architecture such as Boilerplatejs.
BoilerplateJS incorporates best practices to be used when building a large scale application. Furthermore it ships with libraries such as knockoutjs and also utilities that would help structure and organize your code.
I'm migrating from server side development (java, php) to client side - HTML, CSS, javascript.
Though I technically understand (mostly) how javascript works, I have not found a good guide to creating an application - particularly with regards to how to organise functions and objects and setting up a solid test framework for them.
I'm currently half way through the Ruby on Rails tutorial
http://ruby.railstutorial.org/
which is excellent - I now feel confident in understanding the standard structure for arranging all the code in an application, and setup good testing practices as I go.
Plus, the integration with heroku and git make for a really tangible real world example, making for a complete understanding of how to develop and deploy a rails app.
Can anyone recommend a similar kind of guide for JS/AJAX development?
One good way to write JavaScript is to do it in a modular fashion. For dependency loading, you would also need module loaders like RequireJS. As for structure, there are a lots of frameworks out there, I suggest you give BackboneJS a try. You would also want to make your JS scalable so that you won't ever have to worry about expanding. Here's more videos about it as well.
There are a lot of frameworks to choose in JS. Test them all out and create a stack which you feel comfortable playing with.
I don't think you'll find a similar tutorial as on Ruby on Rails about Javascript, because Rails is a framework and Javascript is just a language that has hundreds of different frameworks built around it. I don't know what kind of applications are you willing to develop, but Backbone.js is an MVC framework for frontend development and you could search some tutorials on it.
However, if you're just starting out with JS, you probably want to learn first on the basics of JS. Good source for that is for ex. MDN JS guide:
https://developer.mozilla.org/en/JavaScript/Guide
Then you might want to check out guide on JS design patterns for learning how to structure your code:
http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#designpatternsjavascript
Hope these will help!
I need advice. I can understand asp.net mvc/c#, but I feel uncomfortable when I am working with html-css, javascript, jQuery. I can not understand how to mix It all. Can you give some good advice? possible good articles, examples.
I would recommend you starting with the jquery documentation which contains many useful tutorials and examples. If you are saying that you are comfortable with ASP.NET MVC then you already know the markup that is being generated by the different helpers and so applying jquery to them unobtrusively in a separate javascript file is really simple and the same as if you were using some other server side framework. Just try to make an abstraction of the server side framework when working with jquery. Think of it in terms of static HTML markup that you are applying some dynamic actions to.
The following two topics are really important to learn as you will probably be using them most during application development:
DOM manipulation
AJAX
There have been some efforts from the part of Microsoft to abstract javascript into some HTML helpers (known as the MicrosoftAjax framework) so that the developer shouldn't need to know javascript or jquery in order to use them and IMHO this is a disaster. It is leading to mixing markup and javascript and the developer loosing track of what is happening with his application and not knowing why it doesn't work, simply because he learned some leaky abstractions without understanding the fundamental concepts. So if I had an advice to give you is to download FireBug and start practicing jquery with some simple HTML markup.
By the way jsfiddle.net is a great site allowing you to very quickly start creating mockups with jquery, HTML and CSS.
Regarding how to mix it all you could say that html and css is only connected to your views and that javascript/jQuery could be connected to both your views and your controllers (if you use AJAX).
W3schools.com has nice html and css intros:
http://www.w3schools.com/html/html_intro.asp
http://www.w3schools.com/css/css_intro.asp
practice and work more with the technologies, if you have gotten grasp on asp.net/c#/mvc you should have no problem with the other things as well; start reading blogs and books too
Only one way - practice. Practice with books and with mentor is much better.
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.