Speed Up Development with Prototyping and Vue

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.

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:

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.

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.

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:

There are a number of excellent resources for development. For example, we could work locally with command-line tools. This offers a fully-featured development environment, however, that’s a lot of overhead for a simple prototype.

There are many ways to make an app with javascript. We expect to render a relatively complex UI with some user interaction, so a framework like Vue, React, or Angular are the best options.

All of these frameworks are great options, but we’re looking for something that we can add to our app instantly, so we can get working right away.

In that case, Vue is an excellent choice. We just need to load it in a <script> tag, and then add Vue({el: “#app”}) to our js file. From there, we can load html templates, provide our data, and render components quickly.

For writing our prototype, Vue is the minimum viable solution. Note that Vue makes it easy to go from prototype to product, which we will discuss briefly later on.

We need to decide what data to use. In our final product, we’ll probably use an API to grab the sunset/sunrise times. Using an API would require the following:

That seems like a lot of overhead for a simple prototype. Alternatively, we could just make some dummy data. Our dummy data would look something like this:

Remember, we’re building a prototype. The API solution is the right answer for the product, but implementing it will take too long. The minimum viable solution is to use dummy data.

Next, we need to decide how we’d like to create the sunrise/sunset visualization. We want to show the times of each event, where they happen in the day, and show when the sun is actually out.

Since we’ll want our app to have a specific look, we consider making a custom component for the visualization. Making our own component would require:

Here’s how we might use it in Vue:

This produces the following:

For prototyping purposes, the slider is perfectly suitable. Eventually we’ll make a custom component, but that requires a lot more effort for now. Using an open-source component is the minimum viable solution.

Any app, even a prototype, should have some styling. CSS is an essential part of web development, and developers should design apps with CSS in mind.

We may choose to use a CSS specialist, or to learn more CSS on our own. This, however, adds more technology we’ll have to learn. We might get carried away thinking about browser support for various features, designing for mobile devices, and how to use CSS and js together.

We know enough CSS to get by, but it will take substantial effort to make it production-ready. Alternatively, we could use open-source solutions. There are two ways we could go:

Here’s an example of how to use tailwind to style a button:

Solutions like tailwind easy to use with our current knowledge of css. Furthermore, we note that all of the above options are capable of transitioning into a product when the time comes. Thus, these CSS solutions are more than suitable for prototyping purposes.

For styling our prototype, the minimum viable solution is to use pre-style components or a CSS utility library. We’ll use tailwind for ours.

We have made three key decisions that will help us build a prototype quickly. We have decided to

This article won’t spend any more time on building out this particular example. If you’d like to build it for yourself, see the example on CodePen. This pen has dummy data, detailed comments, and utilities loaded in.

After building our prototype, we can decide whether or not to continue towards production. There are several things to consider, such as

Notice that when choosing our minimum viable solutions, we determined all of these things. We noted the difficulty in getting an API set up, and the time it might take to write a custom component. Here’s a summary of the decisions for a prototype vs. a product (I’ve bolded the shared solutions):

If these challenges sound exciting, then go ahead — you spent some time up-front hashing out your ideas. If you don’t think you can commit, then that’s fine too — you only spent an hour on this.

Overall, the more you code, the more you’ll learn. As you practice prototyping, you’ll be able to implement new features faster. Prototyping lets you work on a project and learn!

If you have an idea for a product, it’s best to start with a prototype. When developing prototypes, be mindful of the decisions that will lead you in the right direction. When prototyping, it’s important to think small throughout the entire process, and to have an objective in mind. The prototyping process will help you when it comes time to make a product, and Vue is excellent for developing both.

Related posts:

Your conscience may be troubled by abortion, because you’re human. But abortion bans will not stop abortions. It will only make them more dangerous, except for the privileged and the wealthy who can…

Obat Penyakit Herpes Adalah — Pernahkah Anda mendengar tentang penyakit herpes? Atau bahkan Anda pernah mengalaminya? Herpes adalah penyakit kulit yang penyebab utamanya adalah virus, biasanya akan…