Motivation
SPHEREboard was created using .NET Framework until major version 3, when we migrated and undertook a large refactoring effort focused on our server-side code. This effort aimed to simplify and reduce repeated blocks of code. After a successful cleanup of the server-side code, the client-side JavaScript and CSS became our next target for improvement. We needed to address repeated and complex UI components, general development headaches, overly complicated JS logic, automate module “resets,” and simplify debugging layout issues.
Research
In recent years, using a JavaScript framework has become the common solution to these problems, with React and Vue being top choices for adding to existing projects with complex UIs. We chose Vue because it seemed simple to get started with and had an ecosystem that allowed us to add additional features as we built out the system and needed higher-level functionality.
To build interfaces faster and ensure browser compatibility, we decided to use a UI component library. We chose Vuetify because it is mature, well-supported, and helps quickly build a presentable interface.
Implementation
After defining the core architecture of the new module, we developed an initial implementation plan to add Vue to the codebase. Following a multi-step implementation process, including creating a new page powered entirely by Vue and building the new module’s components, we were ready to dive into the new interface effort. We started seeing benefits early in this stage. As requirements changed and we needed to modify and refactor the code, it proved much easier than before. We soon undertook the following frontend initiatives:
- Increasing test coverage and facilitating test creation for our Vue components
- Implementing interactive component documentation
- Overhauling additional modules
This implementation allowed us to use components piecemeal in existing interfaces, in addition to creating full SPA interfaces for new modules. We also discovered how to integrate new components into existing interfaces as we worked on new features.
Benefits
The implementation was a significant development milestone. Immediate benefits included:
- Upgrading JS to ES6, adding many new useful features
- Single file components (SFCs), allowing us to keep all UI concerns in one file instead of spreading them across multiple files
- Transpiling code as needed to ensure compatibility even with older browsers
- Increasing testing, enabling test-driven development
- Maintaining an easy-to-use documentation site with VuePress, generated from markdown files and deployable as a static site
- Leveraging VuePress’s ecosystem of themes and plugins to extend base functionality
Closing Thoughts
If you’re part of a software development team, don’t be afraid of large rewrite or refactoring efforts if you believe the benefits will be worthwhile. Conduct thorough research, discuss with your team, create a solid plan, and have confidence in the process.
To learn more about Vue, their official guide is an excellent resource. It’s some of the best software documentation I’ve encountered. The JavaScript world is exciting and ever-changing, so do your own research and choose the tools best suited for your situation. After using Vue for several years, I’m still very happy with it, but other options like Alpine, Svelte, and Elm are also worth exploring.
If you want a sneak peek of what the SPHEREboard front-end looks like in action, you can explore:
- The SPHEREboard page on our website
- This blog post recapping the second module redesign
- Our latest release notes, where we extended functionality in the new interfaces
- Or reach out to your sales rep for a full demo
P.S. If you enjoyed this, be sure to check out the first post in this series, Starcraft and Cybersecurity!
