Introduction

I wanted to create a simple Model View Controller(MVC) framework for a Single Page Application(SPA). Back in the late 1990's I observed that writing code that delivered entire web pages for every click was inefficient on tight networks. A web based application has a tendency of using the same page over and over, with only the data changing. I developed a technique of using framesets to contain code that would dynamically create the displayed page, called 'Compartments'. Each pages specialized frame would be loaded on demand and stay loaded until the application was closed. The data displayed would be retrieved using the XMLHttpRequest object using pipe '|' separated fields. This turned out to be extremely efficient but required complex data contacts mapped on position based fields, which wasn't very flexible. Then comes along AJAX and JSON, these two techniques added order and flexibility while maintaining network efficiency. The client side coding was performed with dynamically created strings of HTML using document.writeln calls and document.createElement to the displayed frameset. Now comes along jQuery that makes it way easier to manipulate and create the DOM. Even though this helped a lot we still need a more efficient way of creating page content and mapping that data to the pages. Now we have templating and data binding. I had stepped into ASP .Net programming with Web Forms after developing the frameset techniques for a Rich Internet Application(RIA). I quickly felt like I had taken a step backwards. Then came along .Net MVC, 1,2,3,4,5... Web Forms has its place, but for developing highly interactive and efficient applications, in my opinion, is not well suited. Microsoft MVC(MSMVC) is way better for that. MSMVC also allowed for a clean separation of concerns. Several JavaScript based frameworks for a SPA have emerged(Backbone, Ember, Angular, Durandal, ect..), and they all have their pluses and minuses. I was looking for a more simplified approach and an approach that mimicked MSMVC. I was also looking to reduce jQuery coding. I wanted a reactive pattern(Observers), two way binding(Observers), templating(Views), controller, View Models, Entity Framework likeness, LINQ, and interfaces to the data stores, all in a JavaScript SPA framework. I also wanted a way to define modules and ensure all the parts were loaded. Require.js filled that need quite nicely. Templating has several libraries out there also, every thing from John Resig's simple templating to complex templating as in Angular. I felt like the Handlebars template engine is simple and clean, and could be extended easily to handle some additional handling as needed. I looked for a natural JavaScript JSON object binding library, and decided to write my own utilizing the getter and setter options in JavaScript, and yes I know older browsers are not compatible, but I am working towards the future and in an environment where the browser is limited to IE9 and forward. In the end, I only chose to use 3 existing JavaScript libraries on the client side; Require.js, Handlebars, and jQuery. Everything else is hand crafted.