Application Front end Architecture
This page goes some way in explaining the structure of the front-end application.
You'll notice that the top-level folder (i.e. frontend/) contains src and build. As their names suggest, the src folder contains the source code for the frontend application, and the build folder contains the compiled/processed application files served to the user when the server is configured to run in 'production' mode.
The src folder is what we're focussing on here, and contains the following sub-folders:
| Name | Description |
|---|---|
| core/ | This folder contains files needed by the rest of the application, such as generic data models, internal libraries, and of course the main boot-loader. |
| modules/ | This folder contains the bulk of the application, which is split into a number of parts, or 'modules'. The idea being that these can be switched out for alternatives with relatively little fuss. |
| plugins/ | This folder contains any front-end plugins you've added (it won't exist unless you've already created it). |
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, we're 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 (in our example, 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.
