A Vue over React

A comparison of Vue.js and React ecosystems and principles, from a personal perspective.

Transcript

1. A Vue over React
2. Vue.js The Progressive JavaScript Framework since 2014
3. forum.vuejs.org Vue.js
6. Project Scaffolding vue-cli + templates create-react-app
7. App Bootstrap import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( <App />, document.getElementById('root') ); import Vue from 'vue' import App from './App' new Vue({ el: '#root', template: '<App/>', components: { App } })
8. Component types React.createClass() Vue.component() › Single File Components ES2015 Classes › Functional Components Stateless Functional Components › › › ›
9. Vue.component() Vue.component('Counter', { template: ` <div> <span>{{ nr }}</span> <div> `, data() { return { nr: 0 } } }) plain Vanilla JavaScript › great for prototypes & small projects ›
10. Single File Components (SFC) <template> <div> <span>{{ nr }}</span> <div> </template> <script> export default { data() { return { nr: 0 } } } </script> <style> /* CSS goes here */ </style> compiler required (webpack / browserify) › useful for large apps › template engine support (Jade / Pug) › .vue files ›
11. Single File Components (SFC) <template> <div> <span>{{ nr }}</span> <div> </template> <script src="Counter.js"></script> <style src="Counter.css"></style> external files for CSS / JS ›
12. Functional Components suitable for containers › React-like render() function › no internal state › Vue.component('Counter', { functional: true, render(createElement, context) { return createElement(/**/) } }) faster to render ›
13. Template / Markup
14. Whitespace return( <div> <i>1</i> {" "} <i>2</i> </div> ); <template> <div> <i>1</i> <i>2</i> </div> </template>
15. Conditionals return( <div> { cond && <span>No data</span> } </div> ); <template> <div> <span v-if="cond">No data</span> </div> </template>
16. Conditionals let markup; if (cond) markup = <span>No data</span>; return( <div> { markup } </div> ); <template> <div> <span v-if="cond">No data</span> </div> </template>
17. Loops return( <ul> {list.map(item => <li>{item}</li> )} </ul> ); <template> <ul> <li v-for="item in list"> {{item}} </li> </ul> </template>
18. Data binding render() { return( <input value={this.name} onchange={this.update.bind(this)}/> ); } update(event) { this.setState({ name: event.target.value }); } <template> <input :value="name" @change="update"/> </template> <script> export default { methods: { update(event) { this.name = event.target.value; } } } </script>
19. Data binding <template> <input v-model="name" /> </template> render() { return( <input value={this.name} onchange={this.update.bind(this)}/> ); } update(event) { this.setState({ name: event.target.value }); }
20. Template Overview Readability Other template engines Data binding ✔ ✔ Component name restrictions for Vue ✔ ✔
21. Script / Logic
22. Props declaration export default { props: ['name', 'age'] } optional in React ›
23. Props validation export default { props: { name: String, age: { type: Number, default: 18 } } } class Foo extends React.Component { } Foo.propTypes = { name: React.PropTypes.string, age: React.PropTypes.number, }; Foo.defaultProps = { age: 18 };
24. Custom methods export default { mounted() {}, methods: { getData() {}, saveData() {} } } class Foo extends React.Component { componentDidMount() {} getData() {} saveData() {} }
25. Methods, Computed, Watchers export default { methods: { saveData() {} }, computed: { fullName() {} }, watch: { firstName() {} } } methods are callable functions › computed are reactive properties › watchers are similar to Angular ›
26. Context export default { template: `<a @click="save" />`, methods: { save() {} } } class Foo extends React.Component { constructor() { this.save = this.save.bind(this); } render() { return (<a onclick={this.save} />); } save() {} }
27. Components communication // parent component template: '<Child @save="saveData" />' methods: { saveData() {} } // parent component saveData() {} render() { return (<Child save={this.saveData}/>); } // child component render() { return (<a onclick={this.onClick} />); } onClick() { this.props.save(); } // child component template: '<a @click="onClick" />' methods: { onClick() { this.$emit('save') }, }
28. Components communication Parent Child handler passes what to execute executes Parent Child notify subscribes & executes notifies
29. Components communication
30. Event Bus // global Event Bus const eventBus = new Vue() // some deeply nested component methods: { onClick() { eventBus.$emit('save') } } // any other component mounted() { eventBus.$on('save', () => {}) } $emit $on Event Bus
31. Script / Logic Overview Props Context Components communication ✔ ✔ Simpler API ✔ ✔
32. State Management
33. Libraries Vuex Redux + Revue Redux + react-redux MobX + mobx-react
34. Paradigms no state change outside store › mutable › better integrated › strict immutable › uex additional integration needed › optional strict mode › more boilerplate › more magic ›
35. State update const state = { list: [...] }
36. State update uex state.list.splice(idx, 1, data) return { ...state, list: [ ...state.list.slice(0, idx), data, ...state.list.slice(idx + 1) ] };
37. // init state as immutable data import {List, Map} from 'immutable'; const state = Map({ list: List([...]) }); // in reducer return state.setIn(['list', idx], data); Immutable.js specific / big API › serialize / deserialize needed ›
38. Misc.
39. CSS Animations export default { template: ` <transition name="slide"> ... </transition> ` } import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; class Foo extends React.Component { render() { return ( <ReactCSSTransitionGroup transitionName="slide" transitionEnterTimeout={500} transitionLeaveTimeout={500} ... </ReactCSSTransitionGroup>); } }
40. Unit Testing react-addons-test-utils is horrible › decent out-of-the box experience › need to render elements on DOM › Enzyme is awesome › Jest is awesome › non-trivial to run tests on Node.js ›
41. DevTools separate addons for React & Redux › only one plugin for Vue + Vuex › less features › Redux devtool more advanced ›
42. Add-ons react-router vue-router react-resource vue-resource, axios React Native Weex (wip)
43. Performance
44. Optimizations required key={} for iterations › default key out-of-the-box › shouldComponentUpdate() › optimized out-of-the-box ›
45. Change detection Dirty checking Doesn’t know what changed, iterates through all watchers Virtual DOM Depends on tree diff, needs manual optimizations Zones, Change Detection Tree Depends on CD, needs manual optimizations Virtual DOM + Dependency Tracking https://www.youtube.com/watch?v=Ag-1wmHWwS4 https://www.youtube.com/watch?v=r4pNEdIt_l4 Dependency Tracking Slower init, updates only what has changed
46. Rendering speed JS web frameworks benchmark http://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html
47. Comparing React to Vue https://engineering.footballradar.com/a-fairer-vue-of-react-comparing-react-to-vue-for-dynamic-tabular-data-part-2/ Rendering speed
48. Conclusions
49. › “good” magic, optimized out-of-the-box some magic, bigger API › › requires extra boilerplate / optimizations › functional, immutable data lower level, simpler concepts, no magic › › doesn’t feel JS friendly reactive, mutable data › › feels friendlier with JS write only JS › separate HTML/CSS/JS › › smaller file size › larger file size
50. “By default, the Laravel package.json file includes a few packages such as vue and vue-resource […]”
51. VueConf conf.vuejs.org
52. Resources Vue.js free tutorials https://laracasts.com/series/learn-vue-2-step-by-step Official Docs, Guide https://vuejs.org/v2/guide/ Vue.js 2 - The Complete Guide https://www.udemy.com/vuejs-2-the-complete-guide/
53. Q?
54. Thank You For listening