Vue.js in production

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/

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 <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

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

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

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

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/

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/

[email protected] gh: @lunardog

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

Vue.js in production

Vue.js in production

Leszek Rybicki

More Decks by Leszek Rybicki

Other Decks in Programming

Featured

Transcript