As more and more web applications start appearing, developers are finding ways to develop leaner and release more often. A good way to get there is to move the Model-View-Controller stack from the back-end to the front-end. In doing so, much of the back-end becomes a restful API which rarely changes. User experience logic on the other hand becomes concentrated in Javascript. This allows you to push new UI changes often without breaking anything. Users with older versions of the front-end application (i.e. loaded yesterday) still have an application that works. You may have users with older versions of the front-end loaded in their browsers, and other users with the newer. But they both work because the back-end hasn’t changed. How cool is that!
In Planbox, we do exactly that. The key was to do MVC in Javascript (we use Backbone JS). New changes to the UI are pushed many times a day without impacting our user base. The benefits are numerous:
- Easier to maintain code. You start organizing your Javascript code into a clean, modular approach. Its no longer just pieces of spaghetti code used to perform dumb tasks like form validation. Jonathan Snook explains this well.
- Debugging is easier. The Browser becomes the development environment. Hit F5 and see your new code running. All objects can be inspected and tested directly with Firebug.
- Faster development. 75% of the code is now written in Javascript. We no longer have to ask ourselves: “should we code that logic in PHP or Javascript?”. Never do we have port PHP code to Javascript.
- Release often. Now that application logic is self contained and organized in Javascript, you can push new changes to production more regularly.
- Shorter learning curve for new developers. Someone new on the team? He or she can get started fast solely with Javascript. Our mobile app was developed by Anthony, someone relatively new to web programming. It took him a month and he never had to touch one line of PHP.
So how do you get there? Well deciding on an MVC Javascript framework is a good start. I’m a big fan of lightweight frameworks. Have a look at Backbone JS. Also new on the block is Agility JS. There’s a good list of Javascript MVC frameworks on this Stackoverflow thread.
How do you manage no-js cases?
We still use PHP to generate HTML on static pages, if that’s what you meant. But for the single-page-web-app, Javascript takes care of generating HTML using John Resig’s micro-template engine.
[...] content are objects used to construct data models (Planbox uses Backbone JS, a Javascript MVC framework). Of course, this example returns more JSON. But you could also return [...]
http://allarehere.blogspot.com/2011/11/benefits-of-mvc.html
This post really helped me out. Thanks!
I would appreciate your comments on Agility.js vs Backbone.
I’m trying to decide between these two frameworks, and after looking to their respective docs I feel Agility is much simpler and easy to pick up.
But I wonder if I will miss something by not going with backbone…
Hi Luis, I’ve consulted our lead developer, Jean, and here’s what he had to say. Hope this helps!
“Both have terrible documentation…
Agility is great and has very nice features that Backbone lacks (at least by default), like bindings. Its shiny DSL is very nice for building isolated components (e.g. datepickers, etc.) or simple apps (e.g. a to-do list), but it makes sharing code harder.
On the other hand, Backbone can be considered an overkill for simple apps. For bigger apps like Planbox where your models are used by more than one controller, Backbone IHMO wins on the maintainability field.”
Hi Amanda!
Thank you very much for your kind reply.
What Jean says concurs well with my own experience so far.
My only concern with Agility is that it doesn’t seem to attract many people, so I wonder what will be its future in the long term…
Thanks!
Luis
[...] It’s just our way. The good folks at Planbox, a hosted Agile project management service, describe their recent move to a web-browser based architecture that removes the rendering responsibi…. A good read for you developer [...]