Vue js and Dyploma

Vue.js and Dyploma
Dr. Yoram Kornatzky
kornatzky@gmail.com
http://yoramkornatzky.com

What is Vue.js?
• Front End JavaScript framework
• Fast
• Simpler than Angular or React
• Fast learning curve
• Originated by Evan You
• 84K GitHub Stars

GitHub Rising Stars 2017
Front-End Frameworks

State of JavaScript 2018
28K developers attention

Vue.js in a Nutshell
• Single Page Applications (SPA)
• Components
• Separate HTML, JavaScript, and CSS
• Vue Router
• Vuex for state management - Redux

The Ecosystem
• CLI to generate a project
• Build - Webpack (and Parcel)
• Test - Vue Test Utils - Mocha and Chai
• ES6 (x,y,z) => x + y + z, async/await
• ESLint

Single File Component -
List.vue
<template lang="html">
...
</template>
<script lang="js">
import ...
export default {
...
}
</script>
<style scoped lang=“scss">
…
</style>

The Template
<div v-if="!isLoading && !error && list.length > 0">
<Item v-for="(item, index) in list" :key="item.id"
v-bind:single="item"
v-bind:header-fields="headerFields"
v-bind:fields="fields"
v-bind:actions-icons="actionsIcons"
v-bind:actions=“actions"
v-bind:name-field=“nameField"
v-on:action=“doAction"
v-on:selectedItem="selectedItem"
>
</Item>
</div>

Rendering - Virtual DOM
• v-if for conditional rendering
• v-for for looping over data
• v-bind for transferring props
• v-on for receiving events
v-on:click=“doThis"

Binding HTML Classes
<div class=“select-all” v-bind:class="{ 'no-select-all': !hasSelectAll }" >
<div class="advanced" v-bind:style=“advancedStyle">
computed: {
advancedStyle() {
if (!this.isVertical) {
return {};
}
return { height: 'auto' /* `${2 *
18.95 this.advancedFields.length}vh` */ };
},
}

JavaScript
import _ from 'lodash';
import Spinner from 'vue-simple-spinner';
import Item from '@/components/list/Item';
import Pagination from '@/components/list/Pagination';

Components and Props
export default {
name: 'list',
components: { Top, Item, Pagination,
Spinner },
props: ['title', ‘placeholder’],

Local Data
data( ) {
return {
inSearch: false,
list: [
{ id: 11, name: ‘whoami’, cpu: 2, replicas: 7 … },
…
],
};
},

Lifecycle Methods
mounted() {
},
activated() {
this.rangeFetched = false;
this.query = this.init ||
this.field.default || '';
},

Methods
methods: {
doAction(data) {
this.allSelected({ chosen: false });
this.$emit('operation', data);
},
}

Computed Properties
<div class="artifact-information">
<detail
v-bind:detail="artifact"
v-bind:title="title"
v-bind:name="name"
v-bind:partition="partition"
v-on:reload="reload"
v-bind:is-loading="isLoadingSingle"
v-bind:error="singleError"
>
</detail>
</div>

computed: {
artifact( ) {
return {
...this.single,
branch: this.single.extraValues.branch,
java_env: this.single.extraValues.java_env,
user: this.single.extraValues.user
};
},
},

Two-Way Data Binding
<input
v-model="query"
@focus="reset"
type="text"
v-bind:placeholder="field.placeholder"
v-bind:disabled="isDisabled"
v-bind:class="{ 'disabled': isDisabled }"
>
data() {
return {
query: '',
};
},

Watching Data Changes
watch: {
query(to, from) {
if (this.query.trim().length >=
this.startAt) {
this.fetchItems();
}
}
},

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dyploma-ui</title>
</head>
<body>
<div id="app"></div>

</body>
</html>

main.js
import 'babel-polyfill';
import Vue from 'vue';
import App from './App';
import router from './router';
import store from './store';
Vue.config.productionTip = false;
new Vue({
el: '#app',
store,
router,
template: '<App/>',
components: { App },
});

App.vue
<template>
<div id="app">
<navigation/>
</div>
</template>
<script>
import Navigation from '@/components/Navigation';
export default {
name: 'app',
components: {
navigation: Navigation,
},
};
</script>

Vuex Store
State
Deployments
Service
s
Blocker
s
Artifacts
Mutations
Getters
Component
Actions
Server

Using the Store
computed: {
...mapGetters(['listError',
'isLoadingList', 'all', 'noMoreData',]),
deployments() {
return this.all(this.page,
this.inSearch);
},
}

Vue Router
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
export default new Router({ routes: [
{ path: ‘/', name: ‘Root', redirect: { name: 'Deployments' }, },
{ path: ‘/deployments', name: ‘Deployments', component: Deployments, },
{ path: ‘/deployments/deploymentInformation/:id', name: 'Deployment Information’,
component: DeploymentInformation, },
{ path: ‘/deployments/edit-deployment-information', name: 'Edit Deployment Information',
component: EditDeploymentInformation,
}, ]
});

beforeRouteEnter(to, from, next) {
next((vm) => {
vm.clearDeployments();
vm.getDeployments({ page: 1 });
});
},
Call Action on Entry

Dyploma
A system for managing containerised applications and
services on top of Kubernetes in Outbrain:
1. deployments
2. artifacts
3. services
4. blockers

The Backend
• Java Spring backend
• REST API
• MySQL database
• Python CLI:
dyploma-cli deployment create -n ob1ktemplate -e prod -v
db959fffc49 -c sadc1a - - parameter
service_configuration.cpu=4.0 -cm “simple commment”

Dyploma Web UI
• BitBucket: Delivery / delivery-ui
• Cloud Platform > Core Services > Delivery Team

Structure of App
• Generic components: do not interact with store
1. List
2. Detail
3. Form
• Containers: interact with store, use generic components

Field Block
<div class=“fields-block">
<flat-block
v-for="(f, index) in fields" :key="f.key"
v-bind:data="data"
v-bind:field="f">
</flat-block>
</div>

The Power of Generics
Detail Form component

Generic Input Form
<div v-for="(f, index) in advancedFields" :key="index" class="field">
<div class="field-label" v-if="f.key != nameField">{{ f.name }}</div>
<input class="field-input"
v-if="simpleField(f)"
v-bind:id="f.key"
v-bind:value="initialFieldValue(f)"
v-on:change="onChange"
v-bind:disabled="f.disabled"
v-bind:class="{ 'disabled': f.disabled }"
>
</input>
<typeahead
v-bind:field="f"
:start-at="3"
v-on:selected="typeaheadFiltered"
v-if="f.typeahead && f.key != nameField"
v-bind:init="initial && initial[f.full]"
v-bind:is-disabled="f.disabled"
v-bind:additional="initial && f.additional && initial[f.additional]"
>
</typeahead>
</div>

Container - Deployments
<template lang="html">
<div class="deployments">
<List
v-bind:list="deployments"
v-bind:title="title"
v-bind:has-advanced="hasAdvanced"
v-bind:has-search="hasSearch"
v-bind:placeholder="placeholder"
v-bind:fields="fields"
v-bind:actions-icons="actionsIcons"
v-bind:actions="actions"
>
</List>
</div>
</template>

Using the Store
import { createNamespacedHelpers } from ‘vuex';
const { mapActions, mapGetters } = createNamespacedHelpers(‘deployments’);
export default {
methods: {
...mapActions(['getDeployments', 'clearDeployments',
'searchDeployments', ‘deleteDeployment']),
},
computed: {
...mapGetters(['listError', 'isLoadingList', 'all',
'noMoreData', 'errorsList']),
deployments() {
return this.all(this.page, this.inSearch);
},
}

The Styling
• SASS (SCSS)
• Flexbox
• Grid
• Vue Material
• Chrome on desktop
• Desktop responsiveness

Vue js and Dyploma

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Vue js and Dyploma

Similar to Vue js and Dyploma (20)

Recently uploaded

Recently uploaded (20)

Vue js and Dyploma