In this chapter, we will look at building a TypeScript single-page web application from the ground up. We will start with a discussion on what the site should look like, how we want our page transitions to flow, and then move on to expore the capabilities of the Bootstrap framework, and discuss a pure HTML version of our site. Our focus will then switch to the data structures that we will need for our application, and what Backbone models and colllections we need to represent this data. Along the way, we will write a set of unit and integration tests for these models and collections.
Once we have data to work with, we will then use the Marionette framework to build views in order to render our application to the DOM. We will then show how to break up our pure HTML version of the site into smaller portions of HTML snippets, and then integrate these snippets with our Marionette views. Finally, we will tie the application together using events, and explore the State and Mediator Design Pattern to help us manage complex page transitions and DOM elements.
Marionette is an extension of the Backbone library, and introduces a number of enhancements to the framework, in order to reduce boilerplate Backbone code, and make working with DOM elements and HTML fragments easier. Marionette also introduces the concept of layouts and regions to help with managing logical portions of HTML within a large web page. A Marionette layout is a type of controller that manages several regions, and a Marionette region is an object that manages a particular HTML portion of our page. As an example, we could have a region for the header panel, one for a side-bar panel, and another for a footer area. This allows us to break up our application into logical areas, and then tie them together through messaging.