Our crew is proud to current OverVue 9.0 as a part of the OS Labs Tech Accelerator.
Construct, customise and visualize your Vue functions multi function house.
What’s OverVue ?
OverVue is a Vue prototyping software that empowers the consumer to compose their very own customized functions and export a Vue venture that’s prepared for improvement.
Our software simplifies the method of constructing distinctive Vue parts, passing them customized state and actions, injecting and nesting HTML parts, and visualizing the advanced relationships between dad or mum and little one parts. New and skilled Vue builders will discover OverVue to be a helpful software that eases the transition between pre-development and improvement cycles for large-scale front-end initiatives.
What’s Vue ?
Vue is likely one of the hottest open-source front-end libraries accessible for builders. With the discharge of Vue 3, the framework has established itself as a dependable alternative for contemporary internet improvement. Vue presents a strong declarative and component-based programming mannequin, a brand new construct toolchain using Vite, a revamped state administration system in Pinia, and a wealth of helpful documentation and tutorials.
Vue is standard amongst builders as a result of it’s versatile and intuitive. Internet parts developed in Vue can be utilized in different improvement stacks, and is ideal for SPAs that require native tooling like DevTools, Typescript, client-side routing and testing.
Entrance-Finish Prototyping
Prototyping is an important stage for any design crew that should assess an software’s feel and look. Groups can check this prototype to evaluate its capabilities and uncover any flaws it could include. Stakeholders can provide suggestions earlier than extra time, cash and labor is invested in a product.
Prototyping permits design groups to concentrate on the massive image: what’s going to the consumer expertise be like? How will customers navigate by the various options that their software will provide?
OverVue permits designers to do what they do greatest with no need vital coding expertise. Engineers can then work with these design parts as exported code. OverVue offers design ops groups of any dimension the facility to assemble prototypes that serve each designers and engineers from inside a single software.
Options:
- Rapidly produce product prototypes along with your alternative of customized or Aspect Plus library parts.
- Customise properties like class, innerText and two-way binding inside every HTML factor.
- Customise your prototype with snap-to-grid positioning and part coloration and sizing.
- Visualize and manipulate venture routing, part hierarchies, and code snippets in actual time.
- Export correct boilerplate code for Vue 3.0 functions together with required npm packages, Oauth login of your alternative, personalized Vue SFC’s, and part testing information.
- Share venture updates along with your crew through Slack.
Challenges We Confronted
OverVue’s codebase required a full-scale rework to arrange it for future improvement. Our crew modernized the Vue constructions that make up OverVue by changing over forty Vue parts from Choices API to Composition API. This paved the best way for us to succeed in our bigger targets of changing OverVue’s state administration system from Vuex to Pinia, Vue’s new official state administration system. We additionally achieved our aim of changing OverVue fully from Javascript to Typescript with a view to monitor down bugs extra simply and put together future groups for the complexity of OverVue’s codebase.
This was an especially advanced venture to tackle in such a short while body. Our crew was tasked with creating a deep understanding of Vue, Vuex, Pinia, Choices API, Composition API, Quasar, Electron and Typescript all inside 4 weeks. Lots of the struggles we confronted concerned changing an unfamiliar codebase from one advanced know-how stack to a different. There have been instances through which we feared that we had irrevocably damaged the applying and undone the laborious work of our predecessors.
We additionally confronted many hurdles when bundling the applying inside Quasar and Electron. When disconnecting the Vuex state paperwork and reconnecting our Pinia state paperwork, it felt as if we have been by no means going to get Electron to render the applying once more. Via perseverance we have been capable of rebuild an software that we’re proud to have labored on.
Subsequent Steps
Our present iteration nonetheless exports code for Vue parts with the Vuex state administration system in thoughts. In future iterations we hope to modernize the exported code in order that it frames exported code inside the Composition API mannequin and makes use of Pinia as its state administration system.
On future iterations the OverVue crew will add extra dynamic testing and Oauth connectivity choices for customers to export. The applying would additionally profit from a extra strong visualization system and entry to extra factor libraries.
Our crew is proud to current OverVue 9.0 for customers and contributors alike.
In case you’re excited about creating OverVue additional with us, please be a part of us in contributing to this open supply venture.
To study extra and obtain OverVue click on right here.
Contact Us
Christopher Davis: Github | LinkedIn
