We’re working on creating a new web channel for the on-line portal of a large financial services company in Poland. One of the top priorities is building the "wow effect" by making the new front-end - a true Web 2.0 application. Client has decided (and it seems to make sense) that the graphic design should be made by professional web-designer agency, that specializes in fancy HTML + JS +CSS. As the agency is responsible for presentation layer only, web server app and service layer beneath will be covered by client IT (and us). In theory, sounds like a quite typical presentation separation that can be easily covered for instance by using MVC/MVVM paradigm.
But it’s not that simple.
Client doesn’t want to build a generic site model, they want the particular screens to be designed separately (individually), to make sure they are polished and as fancy as possible. They want minimum postbacks. They want thick client application’s look&feel for web application. There will be a lot of Ajax calls and in-the-background interactions, plenty of drillable charts, sliding content and other dynamic content with a lot of embedded data. This still could be achieved with MVC, but:
- if agency cares for presentation layer only, they won’t use any server side technology (only HTML + JS + CSS)
- ASP.NET MVC doesn’t bring full decoupling between view and model - you have to use HTML helpers (interwoven with static HTML) to actually generate some data bound client controls
So, what could we do / what did we do?
We could move MVC paradigm to the presentation layer!
Is it even possible? Bringing such a complex design pattern to JavaScript? Suprisingly… it is.
We’ve considered using Knockout.js (http://knockoutjs.com/), but even if it looks like a nice piece of a good design, it doesn’t work well in more complex scenarios (pretty much in any case above basic tutorial level ;>). So we went for Backbone.js (http://backbonejs.org/).
What does it help with? You can separate actual view and the JSON model and massively limit the number of junction points, where binding occurs. You can bind particular piece of data to different in-view representations (for instance: master-detail). For us, it meant that agency has created few mock JavaScript functions that were used to fill the models and these were the only code pieces we had to modify while integrating presentation layer (view) with the business logic (in this case represented by returned model). If you like the idea, be warned - this is not an easy piece of library. Actually, it has a very steep learning curve. But it plays it role well and I can’t imagine doing this project without it.