Vue — The Ultimate Prototyping Framework
I love putting together simple products that generate real value to users. The simplicity is a result of iterative process involving lots of prototyping and gaining constant feedback.
When building prototypes I seek for maximum speed and frequency of feedback. The faster the feedback, the faster I know which way to go next.
It’s a big React monoculture we are currently living in. React is great, but there’s a niche where I’ve found Vue to single-handedly beat React.
Here are the top 5 reasons why Vue tops React in rapid prototyping:
1. No compiling needed
It’s possible to write both Vue and React without build tools. Raw React looks, well, raw while Vue can be written the same way regardless of compiling it or not.
Setting up a compiler is a sidetrack that distracts away from writing code that is reflected directly to the test users. End users don’t care how a prototype was built under the hood as long as it doesn’t crash.
2. Speed of development
The speed aspect concerns both how quickly I can get started and how fluidly I can iterate to different directions when there’s some code already in place.
For me, Vue is 69% faster than React in prototyping.
To proof my point I made an experiment and built the same mini application with both Vue and React:
3. No wasted storage space
Although called throwaway prototypes, I never delete my prototypes as they contain lots of codified knowledge I might come back to at later time. In comparison the above prototype that functioned identically weighted:
- Vue: 4 kB
- React: 218 MB
So the React prototype was 54.400 times heavier than the Vue one. A weight of a Volkswagen Golf vs. a golf ball.
4. Clean architecture
Vue provides a nice skeleton architecture to start with. There’s data, methods and template clearly separated from each other.
The workflow to implement a new feature is very intuitive.
- add new data properties
- write methods to manipulate the data
- bind data and methods to the template
There’s nothing preventing similar workflow in React. Personally I find Vue structure to have less clutter and easier to navigate.
5. Mutable state
It may sound counterintuitive, but for prototyping data mutation is often simpler, faster and thus better alternative compared to writing immutable code.
React is using shallow comparison under the hood to detect changes and thus forces developers to write immutable code. Vue is implementing reactivity through replacing state object properties with getters and setters.
In Vue, It’s possible to directly mutate an object inside an array and still see the changes reflected in the DOM.
The benefits of immutability per se are undisputed but the downside is that immutable code quickly becomes verbose. There’s actually a clever tool combining best of the both worlds. Immer allows to write mutation-based syntax with immutable outcome.
How about scalability?
These prototypes are trashed after users have given their feedback. There are many types of prototypes and it’s important to distinguish between them. Here we are talking about so called rapid throwaway prototyping.
I often end up making different technology choices when building the production version. It might be that the final product is actually a native app while the prototype could be a Progressive Web App.
Any tips for learning Vue?
I learned Vue by reading through their documentation. For a tech documentation it’s exceptionally well written and covers all the relevant topics.
TL;DR;
Vue provides an elegant way of building tiny single page applications that are quick to develop, lightweight to store and easy to iterate with. Such applications are perfect for rapid prototyping purposes.
In large scale, both React and Vue are great options, although currently React has greater traction.
Personally I have both Vue and React in my toolbox, both in active use. There’s also a third candidate framework that may at some point marginalize one of the previous. It’s called Svelte, but that’s a story of it’s own.
