how to manage large client side only web apps

Question

I am building a project which uses jQuery UI for the client side. My goal is to have my web-app never do a postback and do everything client side.

While developing though I found almost all my code goes into 1 .js file and 1 .html file where I have a lot of div's which I show and hide when appropriate.

Is there a better way to organize this? Is an oldschool server side include the best way to do this? Also is there a way to have 2 javascript files be able to see contents from within one another? I think how it works only the second one can call things from the first one.

I'm just not sure about the best way to scale because I'm used to building client side applications which have many source files.

Answer 1

You probably want to try and modularize your jquery functionality into plugins. Everything in one file is usually not a good idea.

I also think you are going to need a server for some things. For example if a user has two computers and wants to use your app on both, they are going to need a way to sync the 'state' of your application. But without knowing specifically what you are doing its impossible to say for sure...

Answer 2

Similar to Hvgotcodes, its best to keep all your classes in seperate files whilst in development. I follow a simple rule of one class per file. When you are ready to go to production you can concatinate all your scripts together.

Javascript will automatically be able to see content in other scripts, i.e.

<script src="firstScript.js"></script>
<script src='canReadPreviousScripts.js"></script>

As far as I know if the files are class based, then they can reference each other freely, but if the code is procedurally coded then they have to be loaded in the right order.

I've been working on a medium sized js only app which can be viewed here: http://explore.travellr.com

If you check the source you can see there are over a dozen files, as this is still in development. Once its ready for production, the files (except the framework, MooTools) will be concatenated, and zipped.

Hope this helps!