VueJS and iteratively adopting a framework

Aug 2017

Michael Holroyd, Ph.D.


Front-End Engineer

Metis Machine is looking for a motivated, high-energy and enthusiastic personality to implement new designs, features, user experience using HTML, CSS, and JavaScript.

CVJS meta-slide

Frequency of meetings? Desired content?

New co-organizers?

Future of CVJS: merge back with DevOpsCV and beCraft? ?

Cville Slack:  (#javascript channel)

Use to propose new topics. "Attend" proposed topics to help us gauge interest.



view-layer javascript library/framework

"Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable."
<div id="app-4">
<li v-for="todo in todos">
{{ todo.text }}

var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }

app4.todos.push({text: 'New Item'}) (Javascript FOMO)


1. VueJS wraps the data object in a hidden setter/getter and explicitly tracks dependencies in the render graph. You don't have to manually explain the data->render dependency graph like in React to avoid re-rendering entire trees with every change.

2. JSX and complex build systems are optional.

3. Community and support are much stronger for React.


One data-source for multiple views:
Live modification of data:

Demo VueJS Chrome DevTools as shared ground truth?

"It is often overlooked that the source of truth in Vue applications is the raw data object - a Vue instance simply proxies access to it. Therefore, if you have a piece of state that should be shared by multiple instances, you can simply share it by identity:"

const sourceOfTruth = {}
const vmA = new Vue({
data: sourceOfTruth
const vmB = new Vue({
data: sourceOfTruth

Centralized State Management for Vue.js:


Arqball (computer vision and visualization):

Scenethink (event data platform):

Learnstream (link curation and sharing):

Michael Holroyd

VueJS and iteratively adopting a framework

By Michael Holroyd

VueJS and iteratively adopting a framework

Vue.js and iteratively adopting a framework.

  • 2,048