Skip to content

Report: State of the Frontend

State of Frontend

This document is to be extended in the coming days and will serve as the basis for more detailed issues concerning the different pain points of the frontend.

Component structure

Vue components are divided into components and pages where page components are the ones being routed to by the router. Pages usually contain some of the data loading by dispatching actions. Components as well as pages are partly divided into folders for the available roles (student, tutor, reviewer) as well as into folders that package multiple components used to implement some functionality (e.g. the subscription folder contains multiple .vue files all associated with the subscription system)

State management

State management is mostly divided into modules. The original idea was that all state would be directly at the root state in a fashion resembling the database, where eg. the submissions key would hold all loaded submissions accessible via their uuid. This lead to a multitude of problems:

  • it's unclear at waht times what parts of the store data are needed and when data can be freed -> memory leaks
  • trying to share data across multiple views resulted in many bugs related to inconsistencies to how the data is accessed, what is stored, etc.
  • views were very tightly coupled via the store At the moment the state management is converted to a module/page centric model, where pages (or. data intensive components) have their own respective vuex modules. This decouples some of the components since it is no longer tried to reuse once fetched data to the maximum extent. As a result, loading times will probably increase slightly, but the possiblity of memory leaks can be severely reduced, since the corresponding store state can be resetted upon a route change.

Routing

The routing is not to complex at the moment and works pretty well. Permission guards could be seperated into their own file though.

Error Handling

Error handling is not consistent. At some places the user is shown a helpful message should an error occur, in other places the user is shown very unhelpful messages (e.g. "Error during feedback creation") despite better error information beeing available from the backend and some things just fail silently.

Documentation

  • documentation is basically nonexistent

Testing

  • testing is non existent