Contoh kode yang digunakan dapat dilihat dan diunduh di https://github.com/purwandi/vue-webpack-mozilla. Ditulis oleh Purwandi, Lead Developer di Froyo.

1. Vue.Js
The Progressive Framework

2. Purwandi M
@purwandi
Full Stack Web Developer @Froyo

3. Web App
1. Declarative & Reactivity Rendering
2. Component System Oriented Architecture
3. Client Side Routing
4. State Management
5. Build System
6. Client-Server Data Persistence

4. Frontend Framework

5. The Progressive Framework

6. View
User Input
Render
State

7. var vm = new Vue({
el: '#demo',
data: {
msg: 'Hello Vue.js!'
}
})
<div id="demo">
<h1>{{msg}}</h1>
</div>
JavaScriptHTML
Binding

8. var vm = new Vue({
el: '#demo',
data: {
msg: 'Hello Vue.js!'
}
})
<div id="demo">
<h1>{{msg}}</h1>
<input type=”text” v-model=”msg”/>
</div>
JavaScriptHTML
Two Binding

9. var vm = new Vue({
el: '#demo',
data: {
msg: 'Hello Vue.js!'
}
})
<div id="demo">
<h1>{{msg}}</h1>
</div>
JavaScript
Dynamic Bindings
Vue instance
State
DOM Mounting
point
Template

10. Component Oriented

11. Most App UIs can be broken
down into components
Nav
Content
Item
Sidebar
Side
Item

12. Every component is responsible for
managing a piece of DOM
Nav
Content
Item
Sidebar

13. The entire UI can be abstracted
into a tree of components

14. Vue.component('my-component', {
props: ['msg'],
template: '<p>{{msg}}</p>'
})
Registering a global component

15. Using the component
<my-component msg="Hello!">
</my-component>
my-component’s template will be
inserted into the container element
<p>Hello!</p>
`msg` will be passed in as data
state.
<p>{{msg}}</p>

16. Data-passing with props
<my-component :msg="msgFromParent"></my-component>
parent
my-component
msgFromParent
msg
One-way binding

17. Build System

18. Setup
# install vue-cli
$ npm install --global vue-cli
# create a new project using the "webpack" template
$ vue init webpack my-project
# install dependencies and go!
$ cd my-project
$ npm install
$ npm run dev

19. One More Thing
1. Vue Dev Tools

20. Thanks

21. Scalling Up
1. More Features
2. Tooling Configuration
3. Code Organization
4. Team Collaboration
Scaling Down
1. Approachability
2. Avoid Overkills
3. Flexibility
4. Onboardinf Cost