OverVue 9.0
Our team is proud to present OverVue 9.0 as part of the OS Labs Tech Accelerator.
Build, customize and visualize your Vue applications all in one space.
What is OverVue ?
OverVue is a Vue prototyping tool that empowers the user to compose their own custom applications and export a Vue project that is ready for development.
Our application simplifies the process of building unique Vue components, passing them custom state and actions, injecting and nesting HTML elements, and visualizing the complex relationships between parent and child components. New and experienced Vue developers will find OverVue to be a valuable tool that eases the transition between pre-development and development cycles for large-scale front-end projects.
What is Vue ?
Vue is one of the most popular open-source front-end libraries available for developers. With the release of Vue 3, the framework has established itself as a reliable choice for modern web development. Vue offers a robust declarative and component-based programming model, a new build toolchain utilizing Vite, a revamped state management system in Pinia, and a wealth of useful documentation and tutorials.
Vue is popular among developers because it is flexible and intuitive. Web components developed in Vue can be used in other development stacks, and is perfect for SPAs that require native tooling like DevTools, Typescript, client-side routing and testing.
Front-End Prototyping
Prototyping is an essential stage for any design team that needs to assess an application’s look and feel. Teams can test this prototype to assess its functions and uncover any flaws it may contain. Stakeholders can offer feedback before more time, money and labor is invested in a product.
Prototyping allows design teams to focus on the big picture: what will the user experience be like? How will users navigate through the many features that their application will offer?
OverVue allows designers to do what they do best without needing significant coding experience. Engineers can then work with those design elements as exported code. OverVue gives design ops teams of any size the power to construct prototypes that serve both designers and engineers from within a single application.
Features:
- Quickly produce product prototypes with your choice of custom or Element Plus library components.
- Customize properties like class, innerText and two-way binding within each HTML element.
- Customize your prototype with snap-to-grid positioning and component color and sizing.
- Visualize and manipulate project routing, component hierarchies, and code snippets in real time.
- Export accurate boilerplate code for Vue 3.0 applications including required npm packages, Oauth login of your choice, customized Vue SFC’s, and component testing files.
- Share project updates with your team via Slack.
Challenges We Faced
OverVue’s codebase required a full-scale rework to prepare it for future development. Our team modernized the Vue structures that make up OverVue by converting over forty Vue components from Options API to Composition API. This paved the way for us to reach our larger goals of converting OverVue’s state management system from Vuex to Pinia, Vue’s new official state management system. We also achieved our goal of converting OverVue entirely from Javascript to Typescript in order to track down bugs more easily and prepare future teams for the complexity of OverVue’s codebase.
This was an extremely complex project to take on in such a short time frame. Our team was tasked with developing a deep understanding of Vue, Vuex, Pinia, Options API, Composition API, Quasar, Electron and Typescript all within four weeks. Many of the struggles we faced involved converting an unfamiliar codebase from one complex technology stack to another. There were times in which we feared that we had irrevocably broken the application and undone the hard work of our predecessors.
We also faced many hurdles when bundling the application within Quasar and Electron. When disconnecting the Vuex state documents and reconnecting our Pinia state documents, it felt as if we were never going to get Electron to render the application again. Through perseverance we were able to rebuild an application that we are proud to have worked on.
Next Steps
Our current iteration still exports code for Vue components with the Vuex state management system in mind. In future iterations we hope to modernize the exported code so that it frames exported code within the Composition API model and makes use of Pinia as its state management system.
On future iterations the OverVue team will add more dynamic testing and Oauth connectivity options for users to export. The application would also benefit from a more robust visualization system and access to more element libraries.
Our team is proud to present OverVue 9.0 for users and contributors alike.
If you’re interested in developing OverVue further with us, please join us in contributing to this open source project.
To learn more and download OverVue click here.
Contact Us
Christopher Davis: Github | LinkedIn
