Membangun Moderen UI dengan Vue.js

Vue.JsThe Progressive Framework

Purwandi M@purwandi

Full Stack Web Developer @Froyo

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

Frontend Framework

The Progressive Framework

View

User Input

Render

State

var vm = new Vue({ el: '#demo', data: { msg: 'Hello Vue.js!' }})

<div id="demo"> <h1>{{msg}}</h1></div>

JavaScriptHTML

Binding

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

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

Component Oriented

Most App UIs can be broken down into components

Nav

Content

Item

Sidebar

SideItem

Every component is responsible for managing a piece of DOM

Nav

Content

Item

Sidebar

The entire UI can be abstracted into a tree of components

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

Registering a global component

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>

Data-passing with props<my-component :msg="msgFromParent"></my-

component>

parent

my-component

msgFromParent

msg

One-way binding

Build System

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

One More Thing1. Vue Dev Tools

Thanks

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