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

More Related Content

What's hot (20)

Similar to Vue js and Dyploma (20)

Recently uploaded (20)

Vue js and Dyploma