Application Front end Architecture
This page goes some way in explaining the structure of the front-end application.
The top-level folder (i.e. frontend/src/) contains five sub-folders:
| Name | Description |
|---|---|
| adaptbuilder/ | This folder contains the 'build' files, such as the compiled Javascript, LESS, Handlebars templates, and any assets required by the front-end application. Important: Any changes you make in this folder will be overwritten by the grunt build task.
|
| core/ | This folder contains all of the 'core' files which are required for the app to run. See the section Modular core approach for more info. |
| less/ | This folder contains any LESS overrides. If you want to apply custom styling to the front-end app, this is where you should place your files. |
| plugins/ | This folder contains any front-end plugins you've added (it will be empty by default). |
In the interests of making working with the code as painless as possible, we've split the front-end files into logical sections, grouped by functionality (by files, I'm referring to the Javascript, Handlebars templates, LESS/CSS files, and any other assets). Some example modules being: assetManagement, navigation and notify.
Using the assetManagement folder/module as an example, you'll find several sub-folders (not all modules will contain all of these folders):
| Name | Description | File type |
|---|---|---|
| assets/ | This folder contains any assets required by this module. In the case of asset management, this includes various images for the media player plugin used to preview audio and video assets. | Any |
| collections/ | Any Backbone collection files go in here. | .js |
| less/ | All styling for the module goes here. |
.less/.css
|
| models/ | All Backbone models are kept here. | .js |
| templates/ | This folder contains any Handlebars templates used in the module. | .hbs |
| views/ | Any Backbone views go here. | .js |
In addition to the above folders, you'll also find a single Javascript file: assetManagement.js. This is the entry point for the module, and usually loads in the relevant Javascript files when needed (usually triggered by a specific event). This is usually the place to go if you're looking for where a specific module starts executing.
