membangun moderen ui dengan vue.js
TRANSCRIPT
![Page 1: Membangun Moderen UI dengan Vue.js](https://reader036.vdokumen.com/reader036/viewer/2022062311/58efff121a28ab693a8b4569/html5/thumbnails/1.jpg)
Vue.JsThe Progressive Framework
![Page 2: Membangun Moderen UI dengan Vue.js](https://reader036.vdokumen.com/reader036/viewer/2022062311/58efff121a28ab693a8b4569/html5/thumbnails/2.jpg)
Purwandi M@purwandi
Full Stack Web Developer @Froyo
![Page 3: Membangun Moderen UI dengan Vue.js](https://reader036.vdokumen.com/reader036/viewer/2022062311/58efff121a28ab693a8b4569/html5/thumbnails/3.jpg)
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
![Page 4: Membangun Moderen UI dengan Vue.js](https://reader036.vdokumen.com/reader036/viewer/2022062311/58efff121a28ab693a8b4569/html5/thumbnails/4.jpg)
Frontend Framework
![Page 5: Membangun Moderen UI dengan Vue.js](https://reader036.vdokumen.com/reader036/viewer/2022062311/58efff121a28ab693a8b4569/html5/thumbnails/5.jpg)
The Progressive Framework
![Page 6: Membangun Moderen UI dengan Vue.js](https://reader036.vdokumen.com/reader036/viewer/2022062311/58efff121a28ab693a8b4569/html5/thumbnails/6.jpg)
View
User Input
Render
State
![Page 7: Membangun Moderen UI dengan Vue.js](https://reader036.vdokumen.com/reader036/viewer/2022062311/58efff121a28ab693a8b4569/html5/thumbnails/7.jpg)
var vm = new Vue({ el: '#demo', data: { msg: 'Hello Vue.js!' }})
<div id="demo"> <h1>{{msg}}</h1></div>
JavaScriptHTML
Binding
![Page 8: Membangun Moderen UI dengan Vue.js](https://reader036.vdokumen.com/reader036/viewer/2022062311/58efff121a28ab693a8b4569/html5/thumbnails/8.jpg)
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
![Page 9: Membangun Moderen UI dengan Vue.js](https://reader036.vdokumen.com/reader036/viewer/2022062311/58efff121a28ab693a8b4569/html5/thumbnails/9.jpg)
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
![Page 10: Membangun Moderen UI dengan Vue.js](https://reader036.vdokumen.com/reader036/viewer/2022062311/58efff121a28ab693a8b4569/html5/thumbnails/10.jpg)
Component Oriented
![Page 11: Membangun Moderen UI dengan Vue.js](https://reader036.vdokumen.com/reader036/viewer/2022062311/58efff121a28ab693a8b4569/html5/thumbnails/11.jpg)
Most App UIs can be broken down into components
Nav
Content
Item
Sidebar
SideItem
![Page 12: Membangun Moderen UI dengan Vue.js](https://reader036.vdokumen.com/reader036/viewer/2022062311/58efff121a28ab693a8b4569/html5/thumbnails/12.jpg)
Every component is responsible for managing a piece of DOM
Nav
Content
Item
Sidebar
![Page 13: Membangun Moderen UI dengan Vue.js](https://reader036.vdokumen.com/reader036/viewer/2022062311/58efff121a28ab693a8b4569/html5/thumbnails/13.jpg)
The entire UI can be abstracted into a tree of components
![Page 14: Membangun Moderen UI dengan Vue.js](https://reader036.vdokumen.com/reader036/viewer/2022062311/58efff121a28ab693a8b4569/html5/thumbnails/14.jpg)
Vue.component('my-component', { props: ['msg'], template: '<p>{{msg}}</p>'})
Registering a global component
![Page 15: Membangun Moderen UI dengan Vue.js](https://reader036.vdokumen.com/reader036/viewer/2022062311/58efff121a28ab693a8b4569/html5/thumbnails/15.jpg)
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>
![Page 16: Membangun Moderen UI dengan Vue.js](https://reader036.vdokumen.com/reader036/viewer/2022062311/58efff121a28ab693a8b4569/html5/thumbnails/16.jpg)
Data-passing with props<my-component :msg="msgFromParent"></my-
component>
parent
my-component
msgFromParent
msg
One-way binding
![Page 17: Membangun Moderen UI dengan Vue.js](https://reader036.vdokumen.com/reader036/viewer/2022062311/58efff121a28ab693a8b4569/html5/thumbnails/17.jpg)
Build System
![Page 18: Membangun Moderen UI dengan Vue.js](https://reader036.vdokumen.com/reader036/viewer/2022062311/58efff121a28ab693a8b4569/html5/thumbnails/18.jpg)
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
![Page 19: Membangun Moderen UI dengan Vue.js](https://reader036.vdokumen.com/reader036/viewer/2022062311/58efff121a28ab693a8b4569/html5/thumbnails/19.jpg)
One More Thing1. Vue Dev Tools
![Page 20: Membangun Moderen UI dengan Vue.js](https://reader036.vdokumen.com/reader036/viewer/2022062311/58efff121a28ab693a8b4569/html5/thumbnails/20.jpg)
Thanks
![Page 21: Membangun Moderen UI dengan Vue.js](https://reader036.vdokumen.com/reader036/viewer/2022062311/58efff121a28ab693a8b4569/html5/thumbnails/21.jpg)
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