Pro Yearly is on sale from $80 to $50! »

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. Rapid Prototyping with Vue.js @bermonpainter | #CodeMotion19

  2. Rapid Prototyping Concepts Overvue Vue Components Wrap-up 1 2 3

    4 Rapid Prototyping with Vue.js
  3. Rapid Prototyping Concepts Overvue Vue Components Wrap-up 1 2 3

    4 Rapid Prototyping with Vue.js
  4. Rapid Prototyping Concepts Overvue…get it? “OVER…VUE” Vue Components Wrap-up 1

    2 3 4 Rapid Prototyping with Vue.js
  5. Rapid Prototyping Concepts Overvue Vue Components Wrap-up 1 2 3

    4 Rapid Prototyping with Vue.js
  6. Rapid Prototyping with Vue.js Rapid Prototyping Concepts Overvue Vue Components

    Wrap-up 1 2 3 4
  7. Rapid Prototyping Concepts Overvue Vue Components Wrap-up 1 2 3

    4 Rapid Prototyping with Vue.js
  8. Levels of Prototypes Component Page Pages

  9. Collab Trifecta Experience Business Technology

  10. Prototyping Approach Idea Point of View + Assumptions + Use

    Cases Solutions Design / Develop Validate Validate Validate Go/No-go Design / Develop Design / Develop
  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
  12. Speed first. Aesthetics second. – Jason Freid “ “

  13. Build a prototype, not an unfinished product. – Me “

  14. Rapid Prototyping Concepts Overvue Vue Components Wrap-up 1 2 3

    4 Rapid Prototyping with Vue.js
  15. Benefits Easy learning curve Semantic & declarative Legible Easy to

    maintain 1 2 3 4
  16. Installation NPM Module (CLI), or CDN with <script> tag, or

    Codepen 1 2 3 npm install -g @vue/cli
  17. CLI vue create <app-name> vue ui vue serve <app.vue> vue

    build <app.vue> 1 2 3 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
  19. <div id="app">{{ text }}</div> new Vue({ el: '#app', data: {

    text: 'Hello Rome!’ } }); HTML JavaScript 1. 1. 2. 3. 4. 5. 6.
  20. <template> ... </template> <script> ... </script> <style scoped> ... </style>

    1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. SINGLE FILE COMPONENT
  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.
  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.
  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.
  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.
  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.
  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.
  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.
  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.
  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
  30. None
  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
  32. Components

  33. Levels of Prototypes Component Page Pages

  34. View the demo https://codesandbox.io/s/4322ox0p0w

  35. Levels of Prototypes Component Page Pages

  36. None
  37. None
  38. None
  39. None
  40. None
  41. None
  42. Gridsome Overview gridsome.org

  43. Gridsome Overview Static Site Generator Progressive App Good for SEO

    1 2 3 4 5 6 No databases Easy data sources Easy development
  44. Gridsome Overview

  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
  46. Getting Data

  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
  48. Strapi Overview strapi.io

  49. Strapi Overview Open source Content types REST or GraphQL GUI

    1 2 3 4
  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
  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
  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.
  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
  54. Wrap-up

  55. Speed first. Aesthetics second. – Jason Freid “ “

  56. Build a prototype, not an unfinished product. – Me “

  57. Extra Knowledge css-tricks.com/guides/vue/ vuemastery.com egghead.io/browse/frameworks/vue

  58. Fin. Open Office Hours Friday mornings: 7:00-9:00 officehours.io/people/bermonpainter Twitter @bermonpainter