CanJs application structure

Question

I am new to canJs. Looking for a good application structure for building a canjs app. I would like to separate the Model, controller and view/template logics to separate folders. The todo app available in canjs site is a simple one which has everything written on a single file. Any help is appreciated.

Thanks in advance

Answer 1

Justin Meyer always says "The secret to building large apps is to NEVER build large apps. Break up your applications into small pieces. Then assemble those testable, bite-sized pieces into your big application."

Let's assume that I have 2 models in CRUD app, so we can break the app into small apps lets say accounts app, transactions app, each app is broken into small testable pieces so the adviced structure:

in this example accounts and transaction are traditional controller that listen to can.route to update the state of the app; list, edit ...etc are views that are extended from control too but they listen just for their events (Single responsability principal) the communication between the different controllers and views is made by can.Map and can.compute (Observer pattern) to make them decoupled, take a look here and here this can be helpful too.

Answer 2

Previous answer is quite good but you can do it automatically by using yeoman.

You can also use yoeman to create your canjs application structure automatically.

All you need to do is in your terminal type this commands:

npm install -g yo
yo canjs

and write the directory and app name it will be asked during the app creation.

If you want to add AMD support then type Y when you have been asked for requirejs.

For more information visit yeoman website