Have you ever worked on a project that got away from you? It’s easy to start with a project, only to find yourself overwhelmed with new skills and challenges. Prototypes help keep projects small, and help developers decide if they’re worth pursuing. Furthermore, we can leverage the flexibility of Vue to build prototypes, so we can iterate on ideas quickly.
Product vs. Prototype
A product is what a user sees, like an app, a service, or a device. A prototype resembles the product, but is meant to experiment with a particular feature of the product at a low cost.
As web developers, we often make the product before the prototype. If you’ve ever had a weekend project turn into a month-long effort, consider taking the prototyping approach. Prototypes have some useful benefits:
- You can make a prototype in an hour, as opposed to a day
- Prototypes are not production-focused, so you don’t need a production environment (testing, deploying, etc.)
- You can prototype one feature at a time, to see how it fits into your product (and if it’s worth implementing)
- If you’d like to try out some new technology, you can use a prototype to explore it, instead of experimenting in a production environment
Products take more time to make, requiring research and testing. On the other hand, prototypes require less time and fewer resources. We’ll explore how to make a prototype instead of a product with modern web tools including Vue.js.
Suppose we want to make an app that tells a user when the sun will rise and set at a given location. Furthermore, we’d like to display a visual that shows what time in the day the sun rises/sets.
Goal: Make an app that shows the times that the sun will rise and set at a given location. The times should be shown in a data visualization.
Throughout this example, we’ll identify minimum viable solutions for our prototype. These minimum viable solutions come when we have to make a decision about what we’re building. We’ll choose an option more appropriate for building a prototype, instead of a product.
This is what the final product will look like: