2. What is Vue.js?
• Front End JavaScript framework
• Fast
• Simpler than Angular or React
• Fast learning curve
• Originated by Evan You
• 84K GitHub Stars
6. Vue.js in a Nutshell
• Single Page Applications (SPA)
• Components
• Separate HTML, JavaScript, and CSS
• Vue Router
• Vuex for state management - Redux
7. 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
10. 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"
12. JavaScript
import _ from 'lodash';
import Spinner from 'vue-simple-spinner';
import Item from '@/components/list/Item';
import Pagination from '@/components/list/Pagination';
29. Dyploma
A system for managing containerised applications and
services on top of Kubernetes in Outbrain:
1. deployments
2. artifacts
3. services
4. blockers
30. 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”
32. Dyploma Web UI
• BitBucket: Delivery / delivery-ui
• Cloud Platform > Core Services > Delivery Team
33. Structure of App
• Generic components: do not interact with store
1. List
2. Detail
3. Form
• Containers: interact with store, use generic components