let

(function() {
  var foo = 'A'
  if(foo !== false) {
    var foo;
    console.log(foo) // this will print "A" to console
  }
})()

(function() {
  let foo = 'A'
  if(foo) {
    let foo;
    console.log(foo) // this will print "undefined" to console
  }
})()

const

const foo = {};

foo = 4 // this will crash
foo.a = 4 // this will not

PROMISES

• Promises (or Futures, in other languages) are incomplete value objects.
   
• They can be in either of three states: pending, resolved or rejected.
   
• When the asynchronous operation ends it can either resolve or reject a Promise, passing a value (or error) to it.
   
• Promises are one of the simplest synchronisation constructs.

PROMISES

// using callbacks
getUser(1, {
  success: (user) => {
    this.user = user;
  },
  failure: (error) => {
    this.error = error;
  }
);

// using promises
getUser(1)
  .then((user) => {
    this.user = user
  })
  .catch(error) => {
    this.error = error;
  })

PROMISES CAN BE

CHAINED

PROMISE CHAINING

// using callbacks
doSomething('1', function(resultA) {
  thenDoSomething(resultA, function(resultB) {
    andSomethingElse(resultB, function(resultC) {
      // WE NEED TO GO DEEPER
    })
  })
})

// using promise chaining
doSomething('1')
  .then(thenDoSomething)
  .then(andSomethingElse)
  .then((result) => {
    // WE NEED TO GO DEEPER
  })

PROMISES CAN BE

SYNCHRONISED

PROMISE.ALL

const getUsers = fetch('/users')
const getProjects = fetch('/projects')

Promise.all([ getUsers, getProjects ]).then((results) => {
  // this can be simplified with destructuring, we'll get there
  const users = results[0]
  const projects = results[1]
})

PROMISES CAN BE

WRITTEN LIKE SYNCHRONOUS CODE

(wait, what?)

ASYNC/AWAIT SYNTAX

async function getResult() {
  const resultA = await doSomething('1')
  const resultB = await thenDoSomething(resultA)
  const resultC = await andSomethingElse(resultB)
  // WE NEED TO GO DEEPER
}


try {
  const response = await axios('/users')
  console.log(response.data)
} catch(error) {
  if(error.response && error.response.code === 404) {
    console.log("Not found")
  }
}

DESTRUCTURING

• Simplifies working with hashes (objects)
   
• Work both with {} objects and [] arrays
   
• You can pass default parameters

DESTRUCTURING - simple case

const object = { foo: 1, bar: 2}
const { foo, bar } = object

// this is equivalent of

const foo = object.foo
const bar = object.bar

DESTRUCTURING - NESTED

const object = { a: { b: 1 } }
const { a: { b, c }} = object 

// this is equivalent of

const b = object.a.b
const c = object.a.c

// for most cases this is more readable

const { b, c } = object.a

DESTRUCTURING - ARRAYS

const list = [1, 2]
const [ foo, bar ] = list

// this is equivalent of

const foo = list[0]
const bar = list[1]

DESTRUCTURING - DEFAULTS

const emptyObject = {}
const { foo = 1, bar } = emptyObject

// this is (more or less) equivalent of

const foo = typeof emptyObject.foo !== 'undefined' ? emptyObject.foo : 1
const bar = emptyObject.bar

DESTRUCTURING - DIFFERENT NAMES

const emptyObject = { first: 1, last: 2 }
const { first: firstNumber, last: lastNumber } = emptyObject

console.log(firstName, lastName) // will log 1 2
console.log(first, last) // this will throw TypeError because first and last
                         // are not defined

es6 classes

• Classes are just syntactic sugar over already existing prototype-based functions
   
• They can inherit from one another...
   
• ...but inheriting from standard library is still not the best idea
   
• They can also have properties with getters and setters

classes - constructor

class Model {
  constructor(attributes) {
    this.attributes = attributes
  }
}

const me = new Model({ name: 'Michal' })
console.log(me.attributes) // logs { name: 'Michal' }

classes - INHERITANCE

class Model {
  constructor(attributes) {
    this.attributes = attributes;
  }
}

class User extends Model {
  constructor(attributes) {
    super(attributes);
  }
}

const me = new User({ name: 'Michal' })
console.log(me.attributes) // logs { name: 'Michal' }

classes - GETTERS AND SETTERS

class User extends Model {
  constructor(attributes) {
    this.attributes = attributes;
  }

  get name() {
    return this.attributes.name
  }

  set name(value) {
    return this.attributes.name = value
  }
}

const me = new User({ name: 'Michal' })
console.log(me.name) // logs 'Michal'
me.name = 'Maciek'
console.log(me.name) // logs 'Maciek'

IMPORT/export syntax

• Official standard for Javascript modules (finally!)
   
• Works out of the box with Babel and/or Webpack
   
• They allow multiple named exports from one file (and one default export)

IMPORT/export syntax

export function createUser() {}

const updateUser = () => {}
export { updateUser }

export default MyClass



import React from 'react'
import { FormGroup } from 'react-bootstrap'
import each from 'lodash/each'

import { createUser }, MyClass from './export_example'

decorators

• Wrappers around class or class method.
   
• Can be used as cleaner alternative for wrapping class methods in constructor.
   
• Heavily used by MobX (though not required).

decorators

• Not really a standard just yet, the specification was heavily changed since they were adopted.
   
• Original proposal is now called "legacy" and require Babel transform plugin (transform-decorators-legacy).
   
• Current standard (stage-2) is not yet implemented anywhere.
   
• This is not a problem as we can treat legacy (stage-0) decorators as any other syntactic sugar applied via Babel.

DECORATORS

import { debounce } from 'lodash-decorators'

class Updater {
  constructor(selector) {
    document.querySelectorAll(selector).addEventListener('change', this.onChange)

    // without decorators we would write this:
    // this.onChange = _.debounce(this.onChange, 200)
  }

  @debounce(500)
  onChange(e) {
    axios.post('/updates', { [e.target.name]: e.target.value })
  }
}

const updater = new Updater('form input[type="text"]')

BABEL.js

(formerly 6to5)

babel.js

• Javascript transpiler.
   
• Converts code from one syntax to another using a set of plugins / transformers.
   
• Allows heavy configurability by turning on single transformers and broad configuration with presets.
   
• Can be used as standalone tool using babel-cli npm package.

babel.js presets

• Sets of predefined or dynamically defined plugins, you don't need to use them but they are wildly useful
   
• You can use es2015/es2016 directly or use env preset which automatically updates based on browser vendors progress
   
• stage-0, stage-1 etc. presets add plugins for experimental or unstable features of the language that are still in works and not a fully accepted spec (like decorators)
   
• There's also preset "react" for JSX 

WEBPACK

WEBPACK

• Module bundler, used to create javascript "bundles" but also to prepare and handle other assets like images, fonts, CSS etc
   
• Uses loaders to transform assets in similar way to babel (integration with babel is done with babel-loader)
   
• Uses plugins to apply changes after transformations (for ex. minification or string replacement) or to create extra files (for ex. HtmlWebpackPlugin)
   
• It's used both for compilation in development (with live reloading and watching) and production

wait, this is confusing

what's the difference?

BABEL

• Handles Javascript transformation
   
• Cares only about Javascript
   
• Does not resolve import/export (they are just part of language so they end up unchanged in compiled code*)

* unless you use a preset or plugin that transforms them to something else

WEBPACK

• Transforms files into different files using loaders
   
• Supports non-javascript files, can pipe them through loaders and plugins
   
• Creates dependency tree from Javascript files (compiled with babel-loader or not) and other assets
   
• Resolves import/export syntax