Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vue.js in production

Vue.js in production

Vue.js - we found it, we loved it, we're using it in production.


Leszek Rybicki

August 12, 2016


  1. Vue.js in production Leszek Rybicki TokyoJS 12.08.2016

  2. About me Leszek Rybicki gh: @lunardog Coder since the 80s

    ML researcher at heart Front-end dev at Abeja
  3. 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!
  4. Our use case Renewal of corporate dashboard • keep users

    happy • display the same data • improve speed
  5. hey, what’s this?

  6. 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/
  7. None
  8. Nested DOM elements Vue objects referencing one another App Containers

    Components App Containers Components
  9. 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
  10. Hello.vue <script> export default { props: { name: { type:

    String, default: 'World' } }, computed: { greeting () { return `Hello ${this.name}!` } } } </script> <template> <div class="hello"> <h1>{{ greeting }}</h1> </div> </template> <style scoped> h1 { color: #42b983; } </style> thank you, Webpack! computed property style is global unless scoped
  11. main.js import Vue from 'vue' import HelloMessage from './Hello.vue' new

    Vue({ el: 'body', components: { HelloMessage }, data: { presenter: "@lunardog" } }) index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello World</title> </head> <body> <div id="app"> <hello-message :name="presenter"> </hello-message> </div> </body> </html> this means it’s a dynamic property CamelCase becomes kebab-case
  12. Hello @lunardog! https://jsfiddle.net/lundardog/bkqtx31s/ * actual results may vary *

  13. Directives <task-list> <task v-for="task in tasks" v-if="!task.deleted" v-bind:class="{done: task.done}"> <input

    v-model="task.done" type="checkbox"> {{ task.text }} <a v-on:click="delete(task)">x</a> </task> </task-list> conditional rendering two-way, reactive model binding reactive class binding loop component method DOM event
  14. Routing var Foo = Vue.extend({ template: '<p>This is foo!</p>' })

    var Bar = Vue.extend({ template: '<p>This is bar!</p>' }) 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/
  15. Not yet another TodoMVC! https://megakanban.firebaseapp.com/tokyojs https://github.com/lunardog/MEGAKanban/

  16. Remember this?

  17. 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
  18. ~5000¥→160¥ *Abeja Dashboard hosting cost per month

  19. 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/
  20. leszek@abeja.asia gh: @lunardog

  21. One more thing: vuex global state storage Flux-inspired optional works

    as a plugin http://vuex.vuejs.org/