Rapid Prototyping with Vue.js

Rapid Prototyping with Vue.js

Ever feel like the design process is a drag? You’ve gotta do some research, define some wireframes, maybe do some high fidelity mockups? Sometimes talking gets in the way of the actual doing and sometimes there’s more value into just do. Recognize the benefits of rapid prototyping to increase communication and collaboration on your project teams. There are a number of great rapid prototyping tools out there today. In this session, we’ll focus on Vue.js as a rapid prototyping tool to quickly implement functional design concepts and streamline the designer + developer relationship.

Five Things Audience Members Will Learn:

1. Challenges with most design to development processes
2. Benefits of rapid prototyping
3. Creating a consistent language between designers and developers
4. Leveraging frameworks like Vue.js to build a rapid prototyping framework
5. Bending the web to your will to create highly functional prototypes

7559f6cff1f5efc2d210965febd4d71c?s=128

Bermon Painter

March 22, 2019
Tweet

Transcript

  1. 10.

    Prototyping Approach Idea Point of View + Assumptions + Use

    Cases Solutions Design / Develop Validate Validate Validate Go/No-go Design / Develop Design / Develop
  2. 11.

    Benefits of Rapid Prototyping Focuses on content & interactions Sets

    realistic stakeholder expectations Improved cross-collaboration Increases shared understanding Determines feasibility/usability/value sooner 1 2 3 4 5
  3. 16.

    Installation NPM Module (CLI), or CDN with <script> tag, or

    Codepen 1 2 3 npm install -g @vue/cli
  4. 18.

    Directives v-text v-html v-show v-if v-else 1 2 3 6

    7 8 v-else-if v-for v-on / @ v-bind / : v-model 11 12 13 v-pre v-cloak v-once 4 5 9 10
  5. 19.

    <div id="app">{{ text }}</div> new Vue({ el: '#app', data: {

    text: 'Hello Rome!’ } }); HTML JavaScript 1. 1. 2. 3. 4. 5. 6.
  6. 20.

    <template> ... </template> <script> ... </script> <style scoped> ... </style>

    1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. SINGLE FILE COMPONENT
  7. 21.

    SINGLE FILE COMPONENT <template> <div> <p>{{ greeting }} Rome!</p> <anotherComponent

    /> </div> </template> <script> ... </script> <style scoped> ... </style> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16.
  8. 22.

    SINGLE FILE COMPONENT <template lang=“jade”> div p {{ greeting }}

    Rome! anotherComponent </template> <script> ... </script> <style scoped> ... </style> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15.
  9. 23.

    SINGLE FILE COMPONENT <template> ... </template> <script> import anotherComponent from

    './anotherComponent.vue' export default { components: { anotherComponent }, data () { return { greeting: 'Hello' } } } </script> <style scoped> ... 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.
  10. 24.

    SINGLE FILE COMPONENT <template lang=“jade”> div p {{ greeting }}

    Rome! anotherComponent </template> <script> import anotherComponent from './anotherComponent.vue' export default { components: { anotherComponent }, data () { return { greeting: 'Hello' } } } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.
  11. 25.

    SINGLE FILE COMPONENT <template lang=“jade”> div p {{ greeting }}

    Rome! anotherComponent </template> <script> import anotherComponent from './anotherComponent.vue' export default { components: { anotherComponent }, data () { return { greeting: 'Hello' } } } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.
  12. 26.

    SINGLE FILE COMPONENT <template> ... </template> <script> ... </script> <style

    scoped> p { font-size: 3em; text-align: center; } </style> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.
  13. 27.

    SINGLE FILE COMPONENT <template> ... </template> <script> ... </script> <style

    lang=“sass” scoped> p font-size: 3em text-align: center </style> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.
  14. 28.

    SINGLE FILE COMPONENT <template> ... </template> <script> ... </script> <style

    lang=“sass” scoped> @import ‘variables.sass’ p font-size: $base-font-size text-align: center </style> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.
  15. 29.

    <template> ... </template> <script> ... </script> <style scoped> ... </style>

    1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. SINGLE FILE COMPONENT
  16. 30.
  17. 31.

    <template> ... </template> <script> ... </script> <style scoped> ... </style>

    1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. SINGLE FILE COMPONENT
  18. 36.
  19. 37.
  20. 38.
  21. 39.
  22. 40.
  23. 41.
  24. 43.

    Gridsome Overview Static Site Generator Progressive App Good for SEO

    1 2 3 4 5 6 No databases Easy data sources Easy development
  25. 45.

    File structure ├── package.json ├── gridsome.config.js ├── gridsome.server.js ├── static/

    └── src/ ├── main.js ├── layouts/ │ └── Default.vue ├── pages/ │ ├── Index.vue │ └── Blog.vue └── templates/ └── BlogPost.vue
  26. 47.

    const axios = require('axios') module.exports = function (api) { api.loadSource(async

    store => { const { data } = await axios.get('https://api.example.com/posts') const contentType = store.addContentType({ typeName: 'BlogPosts' }) for (const item of data) { contentType.addNode({ id: item.id, title: item.title }) } }) } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. JavaScript
  27. 50.

    import axios from 'axios'; const postId = 'YOUR_POST_ID_HERE'; // Replace

    with one of your posts id. // GET API. axios .get(`http://localhost:1337/posts/${postId}`) .then(response => { // Handle success. console.log('Well done, here is the post: ', response.data); }) .catch(error => { // Handle error. console.log('An error occurred:', error); }); 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. JavaScript
  28. 51.

    import axios from 'axios'; // POST TO API. axios .post(`http://localhost:1337/posts/`,

    { title: 'My new post' }) .then(response => { // Handle success. console.log( 'Well done, your post has been successfully created: ', response.data ); }) .catch(error => { // Handle error. console.log('An error occurred:', error); }); 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. JavaScript
  29. 52.

    import axios from 'axios'; const postId = 'YOUR_POST_ID_HERE'; // Replace

    with one of your posts id. // PUT API. axios .put(`http://localhost:1337/posts/${postId}`, { title: 'Updated title' }) .then(response => { // Handle success. console.log( 'Well done, your post has been successfully updated: ', response.data ); }) .catch(error => { // Handle error. console.log('An error occurred:', error); }); 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. JavaScript 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.
  30. 53.

    import axios from 'axios'; const postId = 'YOUR_POST_ID_HERE'; // Replace

    with one of your posts id. // DELETE FROM API. axios .delete(`http://localhost:1337/posts/${postId}`) .then(response => { // Handle success. console.log( 'Well done, your post has been successfully updated: ', response.data ); }) .catch(error => { // Handle error. console.log('An error occurred:', error); }); 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. JavaScript
  31. 54.