Front End Flows

Node - Javascript - ES6 - Babel
Npm - Yarn - node_modules
Webpack
Vue.js 2
FLUX
VueX
Time Travel

Node/Javascript

2009 - ES5

2015 - ES6/ES2015

Block-Scoped Constructs const/let

const max = 5
for (let i = 0; i < max; i++) {
  setTimeout(function(){
    console.log(i)
  }, i*1000)
}
// using var => 5, 5, 5, 5, 5
// using let => 0, 1, 2, 3, 4

Object Destructuring / Assignments

let [head,...tail] = 'hello'
console.log(head, tail.join('')) // -> h ello

const object = { a:0, b:1, c:2, d:{ d2:3 } }
const { a, b, c:cAlias, d:{d2:dAlias} } = object
console.log(a, b, cAlias, dAlias) // -> 0 1 2 3

Template literals + Multiline strings

let name = 'Bob'
let message = `
  Dear ${name},
  This is a multiline message!
`
console.log(message)

Arrow functions

setTimeout( () => console.log('🤖'), 2000)
// -> 🤖

document.body.onclick = (e) => 
  console.log('click X:%s - Y:%s', e.screenX, e.screenY)
// -> click X: 543 Y:165

Default parameters

echo = (foo='anonymous') => foo
echo('kim') // -> kim
echo()      // -> anonymous

Promises

let asyncTask = () => new Promise((resolve, reject)=> {
  setTimeout(resolve, Math.random()*2000)
})
let progress = 0
asyncTask()
  .then(()=> console.log('progress', progress++))
  .then(asyncTask)
  .then(()=> console.log('progress', progress++))
  .then(asyncTask)
  .then(()=> console.log('progress', progress))
  .catch((error) => console.log('ERROR:', error))

Classes

class Button {
  constructor (label='Home') {
    this.label = label
  }
  logLabel () {
    console.log(' -> ', this.label)
  }
}

class BackButton extends Button {
  constructor () {
    super('Back')
  }
}

let btn = new Button()
let backBtn = new BackButton()
btn.logLabel()     // -> Home
backBtn.logLabel() // -> Back

Generators

sayTwoWords = function*() {
  let word1 = yield 'enter a first word'
  let word2 = yield 'enter a second word'
  yield 'ready when you are'
  console.log(word1 + ' ' + word2)
}

generator = sayTwoWords();
generator.next()
generator.next('Hello')
generator.next('World')
generator.next()

Webpack wokflow

Get Started

            # install nodejs and package manager
            brew install yarn 
            

            # install vue cli
            yarn global add vue-cli 
            

            # list templates available
            vue list
            # bootstrap a webpack project 
            vue init webpack
            

            # install dependencies
            yarn
            # run local dev server
            yarn dev
            # build for prod
            yarn build
            # run e2e and unit tests
            yarn test
            

Is Backbone a MVC?

Model Backbone Models / Collections
View Handlebars.js / Underscore Templates
Controller Backbone Views

MVC Data Flow

FLUX - Unidirectional Data Flow

Store - basics

Single Object

Read Only

Dispatch `actions` in order to trigger a state change

Handle `actions` in pure functions called reducers

Flux - Libraries and Frameworks

Redux React, but also Angular, Ember, jQuery, vanilla JS

VueX VueJS

Store Mutations in VueX

Store State

Single State Tree

Can be split into modules

            const state = {
              count: 0
            }
            

Store Mutations

Only way to change the state tree

Using Reducer, Pure Functions

            const mutations = {
              increment (state) {
                state.count++
              },
              decrement (state) {
                state.count--
              }
            }
            

Store Actions

(A)Synchronous Mutation(s) Dispatcher Functions

            const actions = {
              increment: ({ commit }) => commit('increment'),
              decrement: ({ commit }) => commit('decrement'),
              incrementIfOdd ({ commit, state }) {
                if ((state.count + 1) % 2 === 0) {
                  commit('increment')
                }
              },
              incrementAsync ({ commit }) {
                return new Promise((resolve, reject) => {
                  setTimeout(() => {
                    commit('increment')
                    resolve()
                  }, 1000)
                })
              }
            }
            

HMR - Time Travel

Install Chrome Extension

            git clone git@github.com:vuejs/vuex.git
            cd vuex
            yarn
            yarn dev