Friday, February 24, 2012

A short wish list for Javascript based MVC frameworks

Compared to five years ago, the portion of a web site that is client side Javascript has increased a lot. But whereas server side web development nowadays are pretty neatly built, with frameworks as Zend Framework for PHP, and ASP.Net MVC, client side scripting is often rather messy.

And as we all know, messy code is hard to maintain and buggy. This leads leads us to the conclusion that we should try and find a model for creating nice, maintainable, reliable client side code.

As I've already stated I think that MVC has a good structure for server side development, and I think that it is quite likely that a MVC-based structure could be functional for client side scripting as well.

I know that there are a few MVC-based frameworks for Javascript around (heck, I've even built one myself a couple of years ago), but while reading up on them I've created a short wish list for a Javascript based MVC framework for client side scripting.

Views should be based on templates
HTML-tag based editing has proved itself efficient for design implementation. Apart from wysiwyg editors I haven't seen anything easier to work with, especially not DOM-object based design buiding. Whereas html tags gives you a simple overview of your design, the DOM-based counterpart gives you no help at all. So everything that is possible to do with html tags should be done with them. 

Controller handling the link between views and models, not automatic updates
It's nice when it's easy to sync data to views, but views should not update a model without a controller. That is an important principle in MVC: You know that model changes are handled by controller actions.

Logic should reside in controllers, not in the view, unless it is pure ui logic
Views should handle ui and not business logic, or you will get code that is harder to maintain and debug. Sounds obvious, but it isn't.

Clear separation between code and tags in views
UI code should not be scattered around in the html-code. Inline code is even worse than inline css, as it is hard to maintain and debug.

One file per object in development
This is important for maintainability. That way it is easy to get an overview of the project as well as easy to find the right place to edit your code. Since this will create a huge amount of files, it is probably best to use some kind of Javascript minimizer, so that the number of server request can be kept as low as possible. 

Never inline html in javascript strings
Ok, there are times when inline html in javascript is ok, but most of the time you should keep code and design separated.

Ok, so those are the points on my wish list for the perfect Javascript based MVC framework.
Do you agree? Please let me know! :)