Bermon Painter - Rapid Prototyping with Vue.js - Codemotion Rome 2019

Rapid Prototyping
with Vue.js
@bermonpainter | #CodeMotion19

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

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

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

Levels of Prototypes
Component Page Pages

Collab Trifecta
Experience
Business
Technology

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

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

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

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

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

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

CLI
vue create <app-name>
vue ui
vue serve <app.vue>
vue build <app.vue>
1
2
3
4

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

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

<template>
...
</template>
<script>
...
</script>
<style scoped>
...
</style>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
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.

<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.

<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.

<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.

<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.

<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.

<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.

<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.

Bermon Painter - Rapid Prototyping with Vue.js - Codemotion Rome 2019

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

Gridsome Overview
gridsome.org

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

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

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

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

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

// 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.
});
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
JavaScript

// 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.
});
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.

// 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.
});
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
JavaScript

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

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

Bermon Painter - Rapid Prototyping with Vue.js - Codemotion Rome 2019

Recommended

More Related Content

What's hot (20)

Similar to Bermon Painter - Rapid Prototyping with Vue.js - Codemotion Rome 2019 (20)

More from Codemotion (20)

Recently uploaded (20)

Bermon Painter - Rapid Prototyping with Vue.js - Codemotion Rome 2019