Vue.js in production Leszek Rybicki TokyoJS 12.08.2016

About me Leszek Rybicki gh: @lunardog Coder since the 80s ML researcher at heart Front-end dev at Abeja

Presentation outline 1. Our story 2. What is Vue.js? 3. Getting started with Vue.js 4. The ABC of Vue.js 5. Routing 6. Sample app 7. Back to our story 8. Lessons learned not yet another TodoMVC!

Our use case Renewal of corporate dashboard ● keep users happy ● display the same data ● improve speed

hey, what’s this?

What is Vue.js? Made by Evan You, designer & coder Based on Angular Mostly view layer Reactive components Not opinionated Designed for simplicity Google Glass http://vuejs.org/

No content

Nested DOM elements Vue objects referencing one another App Containers Components App Containers Components

Scaffolding # npm install -g vue-cli # vue init webpack my-project # cd my-project # npm install # npm run dev It will ask you a lot of questions

Hello.vue export default { props: { name: { type: String, default: 'World' } }, computed: { greeting () { return `Hello ${this.name}!` } } } h1 { color: #42b983; } thank you, Webpack! computed property style is global unless scoped

main.js import Vue from 'vue' import HelloMessage from './Hello.vue' new Vue({ el: 'body', components: { HelloMessage }, data: { presenter: "@lunardog" } }) index.html Hello World this means it’s a dynamic property CamelCase becomes kebab-case

Hello @lunardog! https://jsfiddle.net/lundardog/bkqtx31s/ * actual results may vary *

Directives {{ task.text }} x conditional rendering two-way, reactive model binding reactive class binding loop component method DOM event

Routing var Foo = Vue.extend({ template: '

This is foo!

' }) var Bar = Vue.extend({ template: '

This is bar!

' }) var App = Vue.extend({}) var router = new VueRouter() router.map({ '/foo': { component: Foo }, '/bar': { component: Bar } }) router.start(App, '#app') this could mean yourdomain/foo or yourdomain/#!foo, depending on your setup http://router.vuejs.org/

Not yet another TodoMVC! https://megakanban.firebaseapp.com/tokyojs https://github.com/lunardog/MEGAKanban/

Remember this?

Data Analysis Platform SSO Dashboard Back-end Dashboard Front-end Heat Map Builder Data Analysis Platform Dashboard Single Page Application Heat Map Builder Firebase Backbone.js Sails.js node.js Python Python Rails auth auth time series time series REST data REST data time series Image data Image data REST data REST data Python handlebars templates ejs templates

~5000￥→160￥ *Abeja Dashboard hosting cost per month

Lessons learned Vue.js was very easy to pick up and use for us, but... With great freedom comes great refactoring! → we started with page containers as controllers and small components for view → later, we created some smart containers inside the pages → then, we shifted from passing props to global state (http://vuex.vuejs.org/) → now: we are trying to separate dumb and smart components http://jaketrent.com/post/smart-dumb-components-react/

leszek@abeja.asia gh: @lunardog

One more thing: vuex global state storage Flux-inspired optional works as a plugin http://vuex.vuejs.org/