OverVue is a Prototype Driven Development (PDD) tool that allows developers to dynamically create and visualize a Vue application, implementing a real-time intuitive tree display of component hierarchy and a live-generated code preview.

You might be asking yourself — PDD what is that? I know you have questions, we will point you towards some answers. To truly appreciate PDD we have to hop into the time machine.

Waterfall…falling short

The Waterfall model is a conventional model used for software development. Documentation rules: every detail planned, discussed, changed, improved, trashed long before writing a line of code. Unfortunately, if major changes were made in the late stages of the development phase … hold the press! We will have to replan, discuss, and redo documentation before we continue. Time is money and most products need more flexibility — enter Agile.

Amenable, adaptable, Agile:

Agile is all about collaboration through adaptive planning, evolutionary development, early delivery, and continual improvement. Rapid wire-framing tools like Balsamiq are great at building a User Interface (UI) to show what an application or feature will look like; however, how would designers and customers react if they could interact with the application and see the functionality come to life? A prototype will provide developers with the tactile feedback that a wireframe lacks. Quickly begin coding, iterate everyday, see what works, push your MVP out the door, and give your idea some fresh air.

“Usage is like oxygen for ideas. You can never fully anticipate how an audience is going to react to something you’ve created until it’s out there. That means every moment you’re working on something without it being in the public it’s actually dying, deprived of the oxygen of the real world. — Matt Mullenwig”

How useful is Prototype Driven Development?

Prototype Driven Development directly supports Agile methodologies: the driving force behind PDD is that the prototype becomes the documentation. Speed of iteration beats quality of iteration and is valued over detailed planning (Cagen, “Inspired: How to Create Products Customers Love”). A prototype is the one unifying point where all involved in the creation, design, and deployment of the application can meet. The Agile process empowers developers to receive priceless feedback early on in the project with repeated testing, making the end product more predictable for the stakeholder/customer. Developing prototypes timely is crucial, and any tool you can use to streamline that becomes immeasurable — introducing OverVue 3.0:

OverVue, a Vue Developer’s must-have tool

Features

Upon booting up OverVue, users are introduced to a GUI where they can select, drag, and resize components. On the left side of the page, there is a “create component” input field with buttons representing html elements underneath. When a component is created, a draggable-resizable box will be reactively rendered within the GUI, and once that box is selected, the user can view its details within the dashboard right below the interface.

Within the vuex dropdown menu, there are input fields that allow actions, state properties, and data properties to be created, and a multi-select drop-down menu for each that allows these properties to be added to specific components.

All of these properties, and the component name, layers, and children can be changed within the edit component drop down menu.

OverVue supports a cyclic process that encourages developers to continually build prototypes based on received feedback.

There may come a time when you are tasked with creating a demo with a hard deadline. Reach into your developers toolkit for OverVue, speed wins.

Thank you from OverVue

Thanks for taking the time to read about our application! It is open source so we’d love for you to test it out and submit contributions to build on it or suggestions for future iterations. Visit our sites for more information:

OverVue || GitHub || LinkedIn

Co-authored by: Faraz Moallemi, Nicholas Schillaci, Sean Grace

Checkout the Medium articles on previous versions:

Open Source: A Walkthrough of OverVue V2

OverVue, A Vue Prototyping Tool

A huge shoutout to the development team: Dean Chung, Dean Ohashi, Drew Nguyen, Joseph Eisele, Alexander Havas, Keriann Lin, Allison Pratt, and Joju Olaode, Faraz Moallemi, Nicholas Schillaci, Sean Grace, Terry Tilley