This document discusses rapid prototyping using Vue.js. It defines rapid prototyping as a design process that is constantly readjusting direction based on open questions. Vue.js is presented as a useful tool for rapid prototyping because it allows for quick adjustments and collaboration between designers and developers. The document also outlines when Vue.js may be most suitable for prototyping, such as when it is the fastest tool, technically feasible, and can provide value to later development stages.

2. Rapid prototyping with Vue.js
2018-03-22 Tomi Sjöblom
Vue.js Helsinki

3. Rapid prototyping?

4. What is rapid prototyping?
2018-03-22
S E C T I O N T I T L E
4

5. Design process vs Development process
Development process:
How shall we do this?
Design process:
What could it do?
Why do we do this?
What should we do??
2018-03-22
S E C T I O N T I T L E
5

6. Best prototyping is rapid
As the questions are more open,
we are constantly readjusting direction.
We need a toolbox that can readjust with us.
2018-03-22
S E C T I O N T I T L E
6

7. Why Vue?

8. Toolbox for design/dev collaboration
• Prototyping tools should be friendly to all participants
• Designers tend to have some experience with HTML
• Vue enhances that by adding simple functionality on top
of familiar syntax
…which was one of the nice things with Angular 1
2018-03-22
W H Y V U E ?
8

9. Separation of concerns
Separation of concerns is valid in programming.
Separation of concerns is time-consuming in prototyping.
Context switching is time-consuming in prototyping.
And we like our prototyping rapid.
2018-03-22
W H Y V U E ?
9

10. Self-documenting
Using Vue for prototyping produces a lot of development
understanding:
• How should the API work
• What’s the content/template relation
• What’s our data structure
• How can we componentize the design
2018-03-22
W H Y V U E ?
10

11. Scalable
1. Prototyping visual structure.
2. Prototyping class toggling.
3. Prototyping clicks.
4. Prototyping computational components.
5. Prototyping animations.
6. Prototyping user-specific flows.
7. Prototyping application structure.
2018-03-22
W H Y V U E ?
11

12. When to prototype with Vue

13. 2 out of 3
1. Is Vue the fastest tool?
2. Is Vue technically feasible tool?
3. Does the prototyping with Vue bring
value to development?
2018-03-22
W H E N T O P R O T O T Y P E W I T H V U E
13

14. Is Vue the fastest tool?
• Can you use pen and paper to get to the same result?
• Can you use Sketch and Invision to get to the same result?
• Can you/the team use Vue fast enough to produce efficient prototypes?
• How fast can you adjust the prototype when more answers or questions arise?
2018-03-22
W H E N T O P R O T O T Y P E W I T H V U E
14

15. Is Vue technically feasible tool?
• Are we making a front-end intensive project?
• Is the platform we are aiming at comparable to Vue?
• Does prototyping with Vue bring out some observations that are important to the
case?
• Does Vue provide a feature set that’s helpful for the case in hand?
2018-03-22
W H E N T O P R O T O T Y P E W I T H V U E
15

16. Does the prototyping with Vue bring value to development?
• What’s the code throwaway percentage?
• Can we re-use the prototype to continue testing new features and ideas?
• Does prototyping with Vue make handovers more efficient?
• Does prototyping with Vue help to highlight the potential caveats of the design
process?
2018-03-22
W H E N T O P R O T O T Y P E W I T H V U E
16

17. Demo time!