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
Made with Slides.com