Create/Setting up an MVC Web App

How they built the MVC web application that are used on the Brandon Generator project using Backbone.js

Brandon Generator provides a rich and immersive online experience with lots of animations, Av effects and crowd sourcing elements that allow viewers to contribute to the next episode. There were a few CSS3 and HTML5 features which we couldn’t use, so we had to write a lot of JavaScript and jQuery.

We needed a lightweight client-side MVC framework that would provide clean and organized structure to code, was extensible, provided URL routing, was fast to load and could integrate easily with backend RESTful web services through JSON. We have similar requirements on other projects that had a rich online user experience, such as Grolsch, BT and Motilo. There the LBi Interface developers had successfully implemented Backbone.js, and it was fast becoming the architectural framework of choice for font end development.

Backbone.js has been particularly useful for the crowdsourcing aspect of the site as it comes with code we can reuse, such as methods to validate form inputs, and post data back to the server using JSON. Here we show you how to get set up with Backbone.js so that you can start developing your web apps using an MVC-like approach.

Expert tip Next steps

Ads by Google

Once you’ve finished the tutorial, check out Backbone’s documentation at http://documentcloud.github.com/backbone/docs/backbone.html. Some of the most useful features include the history model, which can hijack your browser’s internal history, and the router, which enables your app to start handling URls itself, facilitating a much more seamless user experience. Also worth becoming familiar with is the event model, which helps you start building mediator-style applications with ease, straight off the bat.

Start

Install Git and set up hosts file

Git is a versioning control system like SVN. The code for this project is stored on GitHub, a public code repository. To install Git on OSX this is as simple as visiting www.mac.github.com. And on Windows at www.windows.github.com.

2. Grab backbone tutorial

Git has done the ddemo tutorial into a local folder from http://github.com/rayui/mvc-lesson-1. There is a great post for Git beginners check it out; it’s well worth the read.

3. Install node.js

Ads by Google

Node.js is a JavaScript compiler that runs from the command console. Visit www.nodejs.org and install node.js using the supplied installers. Following this, install the dependencies required for the tutorial (NPM comes packaged with node.js) as per the README file.

4. Run the program

From the command line, change into your working directory, run nodejs/apps.js and visit localhost: 8000 in your browser. This will start the demo application. Have Firebug or the Webkit inspector open in the network tab to watch the AJAX requests.

5. Generate the inline documentation

The docs are generated using docco, a node.js library that autogenerates documentation from inline comments. Run. /doc generator.sh from the command line of the working directory and visit localhost: 800/docs to read them.

Finish Try the automated build

Heroku is a cloud hosted application server supporting many of the latest languages, including node.js. Visit http://devcenter.heroku.com/articles/nodejs to install Heroku. Set it up, push to the instance with Git push Heroku master, then play!

Leave a reply