Rapid Prototyping with Vue.js

Slide 1

Slide 1 text

Rapid Prototyping with Vue.js @bermonpainter | #CodeMotion19

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Levels of Prototypes Component Page Pages

Slide 9

Slide 9 text

Collab Trifecta Experience Business Technology

Slide 10

Slide 10 text

Prototyping Approach Idea Point of View + Assumptions + Use Cases Solutions Design / Develop Validate Validate Validate Go/No-go Design / Develop Design / Develop

Slide 11

Slide 11 text

Beneﬁts 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

Slide 12

Slide 12 text

Speed ﬁrst. Aesthetics second. – Jason Freid “ “

Slide 13

Slide 13 text

Build a prototype, not an unﬁnished product. – Me “ “

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Beneﬁts Easy learning curve Semantic & declarative Legible Easy to maintain 1 2 3 4

Slide 16

Slide 16 text

Installation NPM Module (CLI), or CDN with tag, or Codepen 1 2 3 npm install -g @vue/cli

Slide 17

Slide 17 text

CLI vue create vue ui vue serve vue build 1 2 3 4

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

new Vue({ el: '#app', data: { text: 'Hello Rome!’ } }); HTML JavaScript 1. 1. 2. 3. 4. 5. 6.

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

SINGLE FILE COMPONENT

{{ greeting }} Rome!

... ... 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16.

Slide 22

Slide 22 text

SINGLE FILE COMPONENT div p {{ greeting }} Rome! anotherComponent ... ... 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15.

Slide 23

Slide 23 text

SINGLE FILE COMPONENT ... 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.

Slide 24

Slide 24 text

SINGLE FILE COMPONENT div p {{ greeting }} Rome! anotherComponent 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.

Slide 25

Slide 25 text

Slide 26

Slide 26 text

SINGLE FILE COMPONENT ... ... p { font-size: 3em; text-align: center; } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.

Slide 27

Slide 27 text

SINGLE FILE COMPONENT ... ... p font-size: 3em text-align: center 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.

Slide 28

Slide 28 text

SINGLE FILE COMPONENT ... ... @import ‘variables.sass’ p font-size: $base-font-size text-align: center 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Components

Slide 33

Slide 33 text

Levels of Prototypes Component Page Pages

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Levels of Prototypes Component Page Pages

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

Gridsome Overview gridsome.org

Slide 43

Slide 43 text

Gridsome Overview Static Site Generator Progressive App Good for SEO 1 2 3 4 5 6 No databases Easy data sources Easy development

Slide 44

Slide 44 text

Gridsome Overview

Slide 45

Slide 45 text

File structure ├── package.json ├── gridsome.conﬁg.js ├── gridsome.server.js ├── static/ └── src/ ├── main.js ├── layouts/ │ └── Default.vue ├── pages/ │ ├── Index.vue │ └── Blog.vue └── templates/ └── BlogPost.vue

Slide 46

Slide 46 text

Getting Data

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Strapi Overview strapi.io

Slide 49

Slide 49 text

Strapi Overview Open source Content types REST or GraphQL GUI 1 2 3 4

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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.

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

Wrap-up

Slide 55

Slide 55 text

Speed ﬁrst. Aesthetics second. – Jason Freid “ “

Slide 56

Slide 56 text

Build a prototype, not an unﬁnished product. – Me “ “

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

Fin. Open Ofﬁce Hours Friday mornings: 7:00-9:00 ofﬁcehours.io/people/bermonpainter Twitter @bermonpainter