Structuring Single Page Applications

Knockout js, Require js, Templating

1. I came up with a custom solution to a problem we were having at my job. We needed to be able to add components to the screen and then reuse that screen real estate later. Therefore we wanted to dispose of old components and prevent memory leaks. In the past I had experience with Backbone js and two frameworks written for it, Chaplin and Marionette. I found Marionette's solution to be the best, it had the idea of a Region. A Region represents an area of the screen usually an element. It controls opening and closing a view inside it's area. This allows you to composite the screen up into Regions, also taking care of making sure a parent Region closes any child Regions it knows about.

2. When initially designing the application we wanted to be able to split up the javascript files to make for easy development. In order to make a quicker load in production we wanted to be able to recombine and minify those files into one. Require js allows us to do all of these things easily.

3. Finally we wanted to split up our knockout templates into separate files, I used handlebars, and would use a "View" to apply a knockout viewmodel to a rendered template inside an element. Something like this ko.applyBindings(new BlahViewModel(), this.el);

Final thoughts on this approach and combination of technologies. I found knockout js to be extremely productive and I wasted less time doing simple things by using knockout's expressive templates and great bindings. Dependency tracking proved extremely useful and very versatile as well. Using require js and templating (handlebars in my case) to split up the javascript files and the markup/knockout stuff made the application much more maintainable. Falcon js seems to combine alot of the things I did by hand but I don't see any mention of the idea of Regions. http://stoodder.github.io/falconjs/#view

Backbone js, Marionette js, Require js

Look to my previous articles for a detailed explanation about these technologies. All in all has many of the benefits as the knockout stack above but not nearly as productive as knockout. Knockout has great support for binding html components to javascript viewmodels which saves LOTS of time.