Airbnb. Until we all belong. How we’ve built a global campaign with Vue.js. @VueJsAustralia

@maoosi @_maoosi Sylvain Simao Technical Lead @ Clemenger BBDO Melbourne

No content

untilweallbelong.com #

After 48h 236,000 pageviews 23,000 rings ordered 5,000 pledges shared

Workflow :: Dev Webpack + Babel + Eslint Vue 2.2.6 + VueX + Vue-Router + Vue-Touch Axios + Chroma.js + Spritz.js

Workflow :: Test Jira + BugHerd Parallels for Mac + BrowserStack

Workflow :: Deploy Bitbucket + Buddy.works + AWS

Workflow :: Deliver Sentry.io + Contentful + Analytics

Serverless Architecture using AWS

Advantages of the Serverless Architecture - ………………… - ……………… - …………………………... - …………… ?

Advantages of the Serverless Architecture - Quick to setup - Cost effective - Scalable (without the hassle) - Modular (micro services)

AWS Architecture >

AWS Architecture ?

Blue / Green deployment... >

…& Nginx proxy Static HTML Vue.js SPA is user? is robot?

Micro services

>

Micro services

VueX + Axios App VueX store Axios HTTP AWS Vue framework Vanilla JS >

import api from './api.js' export default new Vuex.Store({ state: { isInStock: true }, actions: { checkStock ({ commit, state }) { api.checkStock().then((stock) => { commit('SET_STOCK', stock) } } }, mutations: { SET_STOCK: (state, stock) => { state.isInStock = stock }) } }) import axios from 'axios' export function checkStock () { return new Promise((resolve, reject) => { axios.get('/aws-service') .then((response) { return resolve(response) }) }) } VueX + Axios Vue framework Vanilla JS

Hand + Y axis + X axis = Handyx.js

No content

Hand Selector Combinations 36 different hands + 36 different colors

Hand Selector Grid

Challenges - Cross-browser images drawing - Lock / unlock hand selection - Preloading 36 images - Responsive display and behaviors - Accessible for blind users - Editable grid / hands / colors >

Output = Handyx.js - Dependency-free ES6 library - HTML5 canvas - WebP support (up to 50% reduction) - Screen-readers compatible - Async preloading

Vue + ES6 lib import Handyx from 'handyx.js' export default { data () { return { handSelector: false } }, activated () { this.handSelector = new Handyx(this.$refs.handSelector, { hands: require('hands.json') }) }, deactivated () { this.handSelector.destroy() } }

Consider writing Vanilla / ES6 libs - Because it is testable - Because it is reusable - Because it is maintainable

Dynatiles.js

Pledgr.js

Spritz.js https://github.com/maoosi/spritz.js

Vue-Router, the Swiss army tool

Vue-Router + Meta const router = new Router({ routes: [ { path: '/order-your-ring', component: Order, name: 'order', meta: { restrictFrom: ['ring'], preload: ['dom', 'ring-image', 'stock'], color: colors.$black } } ] })

Vue-Router + Preloading const router = new Router({ routes: [ { path: '/order-your-ring', component: Order, name: 'order', meta: { restrictFrom: ['ring'], preload: ['dom', 'ring-image', 'stock'], color: colors.$black } } ] })

Vue-Router + Guards const router = new Router({ routes: [ { path: '/order-your-ring', component: Order, name: 'order', meta: { restrictFrom: ['ring'], preload: ['dom', 'ring-image', 'stock'], color: colors.$black } } ] })

Vue-Router + VueX VueX store Vue Router > Set next bg color > Set preload list Preloader component Background component Global state Router Components

Code and memory best practices

#1 Use keep-alive export default { mounted () { // First time a component is loaded }, activated () { // Each time a component is activated }, deactivated () { // Each time a component is deactivated } } >

#1 Use keep-alive

#2 Remove events listeners export default { activated () { window.addEventListener('resize', this.resizeHandler) }, deactivated () { window.removeEventListener('resize', this.resizeHandler) }, methods: { resizeHandler (event) { /* code here */ } } }

#3 Avoid setInterval / setTimeout class Animate { construct (callback, interval) { callback.call() this.animation = setInterval(callback, interval) } stop () { clearInterval(this.animation) } } const animation = new Animate(animFunc, 1000) animation.stop() ?

class Animate { construct (callback, interval) { this.callback = callback this.interval = interval this.isPlaying = true this.animation = requestAnimationFrame(this.step.bind(this)) } step (timestamp) { this.timer = this.timer || timestamp if (timestamp - this.timer >= this.interval) { this.callback.call() this.timer = false } if (this.isPlaying) this.animation = requestAnimationFrame(this.step.bind(this)) } stop () { cancelAnimationFrame(this.animation) this.isPlaying = false } } const animation = new Animate(animFunc, 1000) animation.stop() >

#3 Prefer requestAnimationFrame new Animate(animFunc, 1) // Execute animFunc every milliseconds setInterval / setTimeout requestAnimationFrame Pause inactive tabs

#4 Empower webpack - CommonsChunkPlugin :: Bundle common modules - UglifyJsPlugin :: Compress JavaScript - Url-loader :: Base64 encode assets - Svg-sprite-loader & svgo-loader :: SVG Sprites - CompressionWebpackPlugin :: Gzipping

No content

Question to win an acceptance ring ?

Thanks! @VueJsAustralia Want to give a talk? Please contact us on @VueJsAustralia