Client Structure - GoryMoon/DIT076-Flow GitHub Wiki

General Structure

MVC

The client code follows a typical MVC structure, allowing for some level of separation between the different parts of the program. The event system is heavily based on the eventBus.js provided in the workshops of the DIT076 course, the eventBus file also contains all event strings to allow for a cleaner code.

Mustache

The client uses mustache templates to allow for easier and faster coding of dynamic webpages, the templates are found in "client/public/templates/*.mustache" and are instantiated by the view.

client/model/serverService.js (Model)

Purpose

This js file is the server interface, used for calling the server.

Details

The serverService routes the specific function calls to the correct server address and using the correct server method, see Protocol for specifics. IF these server requests succeed then they automatically call the callback and log the success, if they fail they just log the failiure and do nothing.

client/view/*.js (View)

Purpose

These js files handle the display of data received from the server and the instantiation of mustache templates.

Details

The view files are registered as listeners to the eventBus, these then receive events which are interpreted and appropriatley displayed or stored for the client.

client/control/*.js (Control)

Purpose

These js files handle the user input and other requests which is parsed to the appropriate events or server requests.

Details

The typical functions included in these files obtain most of their option parameters from the plugin store.js and JQuery, occasionally the options are also obtained from function parameters. These are then used to decorate the nulled JSON object (see the Protocol for specifics) which will be sent to the server, these server calls are given an event containing the received data which will be sent to the eventBus if they succeed.

client/util/eventBus.js (Util)

Purpose

Handles listeners routes events to them.

Details

While the eventBus is very simplistic and does not route events to specific listeners nor is it asynchronic like a typical event bus, it does allow for some level of separation between different parts of the program.