Tips for architecting scalable AngularJS apps

CJ Cenizal

Repo: https://github.com/cjcenizal/complex-view.

3 things:

1. Have a scalable folder structure (and lots of files)
2. Prefer mixins over inheritance
3. Use a scope-independent event system

Scalable folder structure

Scalable folder structure

├── app.coffee
├── index.jade
├── layout
│   └── toast-list
│       ├── signal
│       │   └── show-toast-signal.coffee
│       ├── toast-list-controller.coffee
│       └── toast-list.jade
├── shared
│   ├── component
│   └── service
│       ├── enum-factory.coffee
│       ├── mixin-factory.coffee
│       └── signal-factory.coffee
└── view
    └── team-list
        ├── directive
        │   ├── beerpong-editor
        │   │   ├── beerpong-editor-directive.coffee
        │   │   └── beerpong-editor.jade
        │   ├── beerpong-table
        │   │   ├── team-list-beerpong-table-directive.coffee
        │   │   └── team-list-beerpong-table.jade
        │   ├── calvinball-table
        │   │   ├── team-list-calvinball-table-directive.coffee
        │   │   └── team-list-calvinball-table.jade
        │   ├── roster-editor
        │   │   ├── team-list-roster-editor-directive.coffee
        │   │   └── team-list-roster-editor.jade
        │   ├── roster-table-container
        │   │   ├── team-list-roster-table-container-directive.coffee
        │   │   └── team-list-roster-table-container.jade
        │   └── sport-navigation
        │       ├── team-list-sport-navigation-directive.coffee
        │       └── team-list-sport-navigation.jade
        ├── service
        │   ├── enum
        │   │   └── sport-enum.coffee
        │   ├── helper
        │   │   └── roster-model-helper.coffee
        │   ├── mixin
        │   │   └── roster-mixin.coffee
        │   ├── model
        │   │   ├── beerpong-roster-model.coffee
        │   │   └── calvinball-roster-model.coffee
        │   └── signal
        │       ├── team-list-deselect-players-signal.coffee
        │       └── team-list-toggle-select-player-signal.coffee
        ├── team-list-view-controller.coffee
        └── team-list-view.jade
					

Scalable folder structure

29 files

31 lines of code each, on average

(Longest is 58 lines long)

More files == more meaningful file names

Shorter files == easier to grok

Bite-size functionality == easier to test?

Prefer mixins over inheritance

3 things:

1. Have a scalable folder structure (and lots of files)
2. Prefer mixins over inheritance
3. Use a scope-independent event system

Questions?