Slide 1

Slide 1 text

Vue.js in production Leszek Rybicki TokyoJS 12.08.2016

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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!

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

hey, what’s this?

Slide 6

Slide 6 text

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/

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Hello.vue export default { props: { name: { type: String, default: 'World' } }, computed: { greeting () { return `Hello ${this.name}!` } } }

{{ greeting }}

h1 { color: #42b983; } thank you, Webpack! computed property style is global unless scoped

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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/

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Remember this?

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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/

Slide 20

Slide 20 text

[email protected] gh: @lunardog

Slide 21

Slide 21 text

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