Search code examples
javascriptsproutcore

What's the recommended way to organise big sproutcore projects?


I'm just taking a look at Sproutcore (gem version 1.6.0.1) to see what I can do with it.. so excuses for the beginner questions...

I've gone through the tutorial and looked at the doc mini-site.

I'm wondering how I should organise my source code files. After building the really simple todo app I've already got one messy monolithic javascript file that contains a model, some views, some view controllers, etc.. i can't picture this scaling well.

I've noticed that if I add another js file it is automatically inserted into the project when I load the app in a browser but I'm second-guessing what order those files go in - alphabetically my file (test.js) should have been included before todos.js but it wasn't.

What's the recommended approach to organise a larger scale app; are there some guidelines for this?

Couldn't see anything on the sproutcore website, strangely enough..

What if I want to share models between apps, is that possible too ?

Thanks


Solution

  • The helper tools should arrange the files for you. Granted, you might not use them. Here is the folder structure I have from a project I did a while ago

    enter image description here

    So under the root project directory, there is an apps dir, a frameworks dir, and a Buildfile and README (the other stuff you see is not necessary for sproutcore).

    In the apps dir, you see the main app (sudoku in this case) directory. Under it, you see, directories that directly relate to the objects you are going to create -- datasources, controllers, models, views, states, etc....If you put more than one app in the apps dir, you can access both from localhost:4020/, i.e. localhost:4020/app1 vs localhost:4020/app2

    I didn't expand the frameworks dir, but in it are all the frameworks the project uses. So if you want to modify sproutcore, you can put the version you use in frameworks, and the build tools will use that version. It is a good idea to make your model layer its own framework, so you can use it with other projects if you want. You model framework should be completely decoupled from the rest of the app; it should expose an API that any client app will use.

    You can further create other directories under these directories at your discretion. For example, if you have a complicated application around a Person model, you can create person directories under models, views, controllers, etc, and then put your code in their.

    Note that if you have a PersonController object, the file name would be person.js according to convention, but that's up to you.