Friday, April 6, 2012

The project file structure

The first thing you have to decide with a project is how to structure it. I like to use an MVC framework and so this is how I usually end up structuring my projects:

myApp/
    js/
        api/
        app/
        control/
        models/
            schema/
        sync/
        ui/
            widgets/
    lib/
        mvc/
    style/
    template/
        strings/


  • The JS folder holds all your javascript files.
  • The api folder holds communication with servers
  • the app holds your main.js and other files that the rest of your program can access (like a mediator)
  • the control holds the controls for your model
  • the models will hold your models
  • the schema holds the definition of your models (transforms on model data e.g. getters and setters)
  • sync holds the models communication with the data layer
  • ui holds javascript for general page UI (like page layout)
  • widgets holds reusable elements like dialog boxes
  • lib holds 3rd party js libraries like an mvc framework or the closure library
  • style holds all the CSS/GSS/SASS etc
  • template holds you HTML templates (soy files)
  • strings hold translatable strings to be injected in the DOM.
This is an example and may not make much sense for your project or may be tweaked but is a good guide to start off with and you can change your structure if your needs are different.

3 comments:

  1. Nice post! Also the first time I see that much js structure!

    ReplyDelete
  2. nice post but where are your images?

    ReplyDelete
  3. MVC is a pattern, not framework.

    ReplyDelete