Best way to develop a dynamic website

Thu Dec 20, 2012   0

The develop a dynamic website, with all those smooth page transitions similar to gmail. As per design we will use Bootstrap, Bootstrap provides all the css tools you need to setup a quick website.

Frontend skills you will need
- javascript
- html

First of all we will start of with a model view controller + observer design patterns to achieve a maintainable site.
The web frameworks that we will use are
- backbone js , giving a "structure" to the code
- require js , setting up javascript dependencies, works like php include
- mustache , page templates
- jquery , dom manipulations

as font icons we can get them for free at fontello, their package includes font-awesome

Folder Structure

        templates/      <=== contains the html templates
        js/views/   <=== responsible for inital html materials and listenes to model changes / actions / events
        js/models/  <=== responsible for data models
        js/controller/  <=== defines the site routes
        blueprints/     <=== contains all the 3rd party library

To setup hashbang (similar to gmail) for page manipulations, there is a backbone module - backbone router. Using backbone router we can set up page to change dynamically depending on the hashbang setup. To let your hash bang searchable / crawable, checkout this post.

You can checkout the Boiler Plate i've setup using this structure for off the shelve deployment.

Further Readings
Backbone Router

Backbone + MVC

comments powered by Disqus