A short talk about feasibility of Vue.js as a prototyping toolbox.

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!