Description
Creating this tracking issue to plan what I need to do during the winter break.
Refactoring
Workspace component duplication
There are currently five copies of the workspace component that contains the editor:
- Playground: this one has basically all of the features enabled
- Assessment
- Grading
- Sourcereel
- Sourcecast
Each of these components started as copies of each other. The Playground is the most "up-to-date", as it is where all the CP3108 and CS4215 development went into first. I also optimised it over summer, so it's now the fastest workspace out of the five (more on this later).
The biggest issue with this is that each of the workspaces deviate ever so slightly from each other, and a lot of logic is duplicated across the components (e.g. when to show certain side content tabs, etc).
Workspace state
Each of the 5 workspaces have their state in the Redux store. This makes no sense whatsoever, as the bulk of the state is local to the workspace, and should not be in the Redux store. (In fact I would argue that Redux is a mistake for this project, because we don't have that much global state.)
Because the state is in the Redux store, we use Sagas to deal with many things. There is no way for Sagas to return results back to the workspaces other than by updating the Redux store, and this has led to a gradual ballooning of the Redux store workspace state. Each state object is now huge!
The plan
- Identify what is common across all the workspaces, and pull them out into a unified Workspace component.
- The main things that differ across the workspaces are the buttons that are enabled and the side content panels that are enabled.
- Trim down the workspace state as far as possible. Ideally, remove it all from the Redux store, so that we don't have "singleton" workspaces. (Right now, it's virtually impossible to create a new workspace without also adding it to the Redux store!)
Optimising
Currently in the assessment workspace, each keystroke causes at least 6 React renders at minimum.
Some latency measurements, by dumping keystrokes using libinput debug-events, recording my screen at the refresh rate (60 Hz) and inspecting the playback frame-by-frame, and counting the frames between the "key pressed" output from libinput to the character appearing in the editor
- Geany (a code editor, C++): consistently 0 frames
- VS Code (code editor, JS Monaco): 0-4 frames
- Source Academy Playground: 0-3 frames
- Source Academy Assessment workspace: 4-13 frames
There is clearly something wrong with the Assessment workspace.