Question

I want to start a new project, a large jquery application/website. I want the site to function a lot like twitter or github, very dynamic, very fluid/smooth, etc…

My problem is I don’t know where to start. I’ve read countless blog posts, investigated many JS frameworks / templating & MVC type systems.

When I write JS code, should I put everything into a single file? Or should I breakout each plugin I write into separate files and then use a JS loader like Respond.JS?

I think I need a templating system though to get the hashtag navigation to work, so I’m looking at either Backbone.JS or Mustache/Handlebars.JS

Does anyone have a starting point for this? Perhaps a boilerplate solution / development pattern that I can follow?

Thanks!

Answer 1

It depends very heavily on your definition of “large” and what kinds of components you are deploying. I find it highly doubtful that we’d be able to know your environment well enough to tell you what to do, but I can give you some general advice:

1. If you need a component on the page (e.g. an interactive visualization of data) try to find an off-the-shelf plugin.

2. If an off-the-shelf plugin is unavailable, write the component in the form of a plugin. This ties in well with jQuery’s design and ensures a high degree of reusability.

3. Try to separate the Javascript from the HTML. Typically your HTML is a page full of ids or classes that can be used as “mount points” for the Javascript to link into. The Javascript file would typically look like this:

   $(document).ready(function() {

   // Start making AJAX calls, setting up page

   // elements, and whatever else you need.

   });

4. Given that the Javascript is tied to the page, try to keep the number of pages down while giving each page its own Javascript file. If a page is particularly complicated or makes use of reusable include files, separate the Javascript into smaller files that control only a portion of the page. There can be as many $(document).ready() calls as you need.

Good luck!