Organizing Browser Application Files
MyApp/ Makefile README etc/ lib/ src/ tst/
Perhaps the first thing you will do when starting the project is fill the
lib directory with all the third-party libraries you know you’ll be using. These libraries are dropped into the
lib directory without modification. Just plop them there in the same form they are distributed. You aren’t allowed to edit these files. This directory is the only directory where you put files created by a third party.
src directory contains all of the files that you create and write that will become part of the files downloaded by the browser of a user of your application. These are the files we are excited about writing.
tst directory contains all the files that test the files in the
src directory. These are the files we are not excited about writing.
Makefile has a default
build target that generates the directory called
bld which is filled with production-ready files that can be copied to the production web servers. The files in the
src directories are combined, minified, compressed, and otherwise mutated to become the files in the
bld directory. This target can possibly generate a
MyApp.tar.gz file if that is how the distribution to production will be done.
The build process may be guided by data in files in the
etc directory. For example, there may be manifest files that state which files are concatenated together during the build and the name of the resulting files. Exactly which files with which data are in your
etc directory depend on which tools you are using in your build process.
Makefile should have a
clean target that deletes the
Makefile might have a
test target that runs the tests in the
README should at least explain what the targets in the Makefile do and how to run the tests.
You should not need to run
make build in order to test your application either with the files in the
tst directory or in the browser while developing. You may have files in your
etc directory that control how the development environment is configured.
An MVC-style Application
MyApp/ Makefile README etc/ lib/ maria.js src/ css/ html/ index.html templates/ img/ js/ bootstrap.js controllers/ models/ views/ util/ tst/
index.html files is the page that the user loads into their browser to start the one-page application. This may be named something different like
bootstrap.js file is the one with the call to
window.onload that fires up the whole application. It will start the loading of the data from the server, create the model layer, build the views, and add those views to the page so the user can begin interacting with the application.
views directories contain the obvious.
util directory contains utility code that is not specific to any of the model, view, or controller layers. There may be pure functions that make computations with no side effects. You might have some obscure DOM related utilities that you wish were written by a third party for your
lib directory but that you have to write yourself for your unique browser scripting requirements.
Have something to write? Comment on this article.