It’s very very easy to fall into the trap of writing code that ends up unmaintenable due to being “sphagettified”, that is linked together in ways that are hard to decouple, debug and, well, maintained. I’ve certainly started heading in that direction with iPlan.

Currently in iPlan, things like the database, toolbar buttons, settings (theme) are taken care of by accessing them directly via $root.$data. The ToDos component is used everywhere and seems to be be getting way too big. This is as a result of me not having a well designed framework in place as I started the project. I had a bunch of ideas in my head and a vague clue as to how they would interface and set out to build something.

The App component ensures that theme changes are immediate by binding the value of the dark attribute on v-app to $root.$data.settings.theme == 'dark'. This ensures that when the value of theme changes, the value of dark changes as well. But it seems janky and patch-like.

The ToDos component, checks which component it’s included in by the presence of the ids and goal props and exposes & renders different functionality. While this works at the moment, I wish to make it so that instead of that, the ToDos component can be customized in such a way that the component does not need to know what is using it, but instead uses props passed, which will be more extensive and concise. This should make implementing paginization and other features easier in the future.

The initial implementation of the toolbar buttons led to wonderful bugs such as a new button being added when an action is performed. The current implementation, while functional, also seems janky.

The solution in my head right now is to make use of the Vue event bus to handle things like updating the toolbar and changes to the settings. That is being worked on in the redesign-eventbus branch on my local machine. Oh and did I mention I pushed all changes and new functionality directly to master? Even non-functioning code. That changes now.