Structuring a JavaScript/HTML Project

Question

I've new to the world of JavaScript and I've been looking at some of the ESRI applications/Templates (ex. Service Request for HTML 5 application) to get a feel for how a projected should be structured and set up.  Right now I'm build one huge defualt.htm file with all my code jammed in one file but I'm trying to learn how to create and structure an entire web project (utilize and call various js files, use css file, etc).  Is there a good place to find some resources for my knowledge needs.  I would really prefer some videos but text/reading also will help.

P.S. I know this is basic but this topic might be a good Dev. Summit or U.C. seminar session.

Thanks
Nathalie

StephenLead · Answer

Matt,

This sounds promising. Do you have any samples (either your own, or can you point to someone else's online) which show how to do this?

Steve

MattMoyles · Answer

ESRI's suggested approach to javascript application development is ancient and outdated. I would not recommend following the samples. Dojo 1.7 supports AMD with Asynchronous dependency loading. I would start with the dojo boilerplate template and "work" the arcgis api into that. The samples are not suitable for serious application developers. They are mostly just proof of concept snippets. A serious application should be developed with the aid of some sort of framework to help structure things. I have been using dojox.mvc with great success! But other options include things like backbone.js, spine.js, or even javascript MVC.

Dojo Boilerplate - https://github.com/csnover/dojo-boilerplate

StephenLead · Answer

I know this is basic but this topic might be a good Dev. Summit or U.C. seminar session.

On the contrary, I think it's an excellent suggestion and would definitely make a good Dev Summit session.

The ArcGIS.com samples (lower-left of the Samples page) might be a good place to start. The Border and Margin sample says:
 In the sample application the CSS and JavaScript are inlined in the page to make it easier to view the code. However in the real world the CSS and JavaScript are typically contained in external files. Click here to download a zipped version of the sample which uses external files for the JavaScript and CSS.

This gives a good indication of separating the HTML, CSS and JS components.

Steve