VueJS and iteratively adopting a framework

Aug 2017

Michael Holroyd, Ph.D.

Sponsor

https://www.metismachine.com/

Front-End Engineer

https://www.metismachine.com/careers/frontend-engineering/

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?

meetup.cville.co ?

Cville Slack: bit.ly/cville-slack (#javascript channel)

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

VueJS

vuejs.org

VueJS

view-layer javascript library/framework

"Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable."

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>


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'})

stateofjs.com/2016/frontend (Javascript FOMO)

React?

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.

Example:

One data-source for multiple views:

Live modification of data:

Demo VueJS Chrome DevTools

vm.data 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: https://github.com/vuejs/vuex

Thanks!

Arqball (computer vision and visualization):

http://arqspin.com

Scenethink (event data platform):

http://scenethink.com

Learnstream (link curation and sharing):

http://learnstream.com

Michael Holroyd

http://meekohi.com