A few days ago, I wrote a blog post about managing state in Vue apps using Vuex modules. Currently, I am dealing with complex state management in a Vue app for wind turbine operators. In this app, operators can select turbines, compare data from various sensors, and visualize the data. The app makes API calls to fetch data and updates the page URL based on user selections. However, the code had become bloated and hard to understand due to multiple iterations and added functionality. Therefore, I decided to refactor the code.
To start the refactoring process, I used Miro, a visual collaboration tool, to map out the user journey and break down the complex coding tasks into flow diagrams. By visualizing the steps involved, I was able to comprehend the functions needed at each step. For example, I defined actions in Vuex such as updating the date range, turbine selection, channel selection, fetching data, and updating visualizations.
In the flow diagram, I used different colors to distinguish between actions performed by the user and those initiated by the app. This helped clarify the sequence of actions. I also considered additional steps and scenarios, such as handling missing filter selections or API request failures, and updated the flow diagram accordingly.
Based on the flow diagram, I identified the getter functions needed in the state management library, such as determining whether to enable the “Apply” button, getting visualizations, and retrieving errors.
Once the user journey was comprehensively plotted out, I started planning the structure of the application state. Under each step in the flow diagram, I added text boxes to show the current state, highlighting the updated parts. This helped identify which parts of the state needed updates and where functions could be reused.
With the application state structure in place, I could now focus on writing functions to update the state and retrieve computed values for the frontend. By identifying similarities and avoiding repetition, I could write more efficient code. For example, I noticed that updating turbines and channels followed a similar pattern, so I created one mutation to handle both cases. Additionally, I grouped mutations into actions when multiple changes needed to occur after a user’s interaction.
In summary, using tools like Miro to map out the application state visually can greatly assist in writing better code. It also helps with testing and ensuring full coverage. If you have any tips or suggestions, feel free to let me know!
Source link
