The Vue Sorting Visualizer was one of the first projects I built with the Vue library. Shortly after having started into frontend libraries I picked Vue to get into and wanted a project that let me explore different aspect of frontend development.
I got the idea from Clément Mihailescu who had done the same type of project with React; code-wise, however, I built the project from the ground up.
Technologies
The site is built in Vue (Version 2) using Vuetify (v2) as a component library for the UI. For state-management of the controls I used Vuex, which was the library maintained by the Vue team and has since been replaced by Pinia. The site is single-page with no additional routes and is hosted on Netlify.
Difficulties
It has been some time since I've worked on this project, so I am a bit rusty, however, I distinctly remember having trouble with slowing down the execution enough for anything to be visible and understandable. Even though javascript is not a fast language and certainly having a layer on top of it with Vue does not improve performance, but even then it can handle the sorting operations faster than we can perceive. The solution I chose was to artificially block the thread between steps to slow down the execution. With the usage of promises it was even possible to not block the entire browser window with this technique. Here's the method:
sleep (ms) {
return new Promise(resolve => setTimeout(resolve, ms))
}
Critiques
Looking back, I still think that this project is pretty good for a beginner's project. There are, however, some things I would likely not do anymore if I were to attempt this project again. My gripe is mainly with the fact that the sorting visualization is not modular and requires too much UI management from the sorting algorithms themselves. They're responsible for setting elements to an active state as well as taking care of the animation timeouts. They are also part of the Sorting Visualizer Component instead of being separate which makes adding new ones cumbersome and makes the component unnecessarily big and cluttered.
The correct solution to this would probably be to replace the sorting functions by functions that take the current state of the sort and return the next state and let the sorting visualize handle how to visualize these states. This way the visualizer would also be responsible of handling the animation speed making the sorting functions more pure.