Vue.js Helsinki - Rapid prototyping with Vue.js
- 2. Rapid prototyping with Vue.js 2018-03-22 Tomi Sjöblom Vue.js Helsinki
- 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!
Editor's Notes
- #10: Single file components are great in this.