brd.bz/js2018

After attending many conferences, I've realized: I don't attend to learn. I attend to learn what I need to learn.

Cory House

History
State of JS
What to learn

The beginning

1995

Mocha

LiveScript

JavaScript

1997

ECMAScript-262  1

1998

ECMAScript-262  2

1999

ECMAScript-262  3

try {
} catch {}

new RegExp(/^(.*)$/)

ECMAScript was always an unwanted trade name that sounds like a skin disease.

- Brendan Eich

The bad years

2000

nothing

2001

nothing

2002

nothing

2003

nothing

2004

nothing

Rise of the libraries

2005

2006

2008

2009

ECMAScript-262  5

'use strict'

Object.create()
Object.defineProperties()
Object.keys()
Object.freeze()

Array.isArray()
Array.indexOf()
Array.filter()
Array.map()
Array.reduce()

JSON.parse()
JSON.stringify()

2007

ECMAScript-262  4

🔥

The age of npm

2010

2011

2012

2013

2014

Age of JavaScript

2015

2016

2017

2018

2019

ECMAScript-262  6

ECMAScript-262  7

ECMAScript-262  8

ES Next

Any application that can be written in JavaScript, will eventually be written in JavaScript.

- Jeff Atwood

I wish people would stop talking about ES8. I'm still not over that fact that there's an ES6 that I still haven't completely grasped yet. 😫

Sarah Soueidan

JavaScript Fatigue

History
State of JS
What to learn

We went through an age of explosive growth and new ideas in the JavaScript world. We’ve gradually arrived at a point where these mainstream solutions are converging on a common set of principles.

Evan You

Angular

React

Vue

(ES2015)

The great prerequisite

  • Arrow Functions
  • Classes
  • Enhanced Object Literals
  • Template Strings
  • Destructuring
  • Default / Rest / Spread
  • Let / Const
  • Iterators
  • For .. of
  • Generators
  • Unicode Support
  • Modules / Loaders
  • Maps / Sets
  • Proxies
  • Symbols
  • Subclasses
  • Updated Math
  • Updated Object
  • Updated String
  • Updated Number
  • Binary / Octals
  • Promises
  • Reflect API
  • Tail Calls

Mandatory!!!

Arrow Functions

let squares = [1, 2, 3, 4].map(function (n) {
  return n * n;
});
let squares = [1, 2, 3, 4].map((n) => {
  return n * n
})
let squares = [1, 2, 3, 4].map(n => n * n)

ES5

ES6

are beautiful

Template Strings

ES5

function greeting(name, message) {
 return 'Hello ' + name + ', ' + message;
}

ES6

function greeting(name, message) {
 return `Hello ${name}, ${message}`
}

are readable

Classes (kinda)

class ES6Car {
  constructor (mph, car = '🏎') {
    this.speed = mph/36000
    this.car = car
    this.time = 0
    this.report()
    setInterval(() => {
      this.time += 1
      this.report()
    }, 100)
  }

  report () {
    let distance = Math.round(this.time * this.speed * 1000)/1000
    console.log(`${this.car}  (${distance} miles)`);
  }
} 

new ES6Car(60);

Destructuring

function triplets(names) {
  var first = names[0];
  var second = names[1];
  var third = names[2];
  console.log('First: ' + first);
  console.log('Second: ' + second);
  console.log('Third: ' + third);
};


triplets(['Jane', 'Jenny', 'Jill']);
function triplets([first, second, third]) {
  console.log(`First: ${first}`)
  console.log(`Second: ${second}`)
  console.log(`Third: ${third}`)
}

triplets(['Jane', 'Jenny', 'Jill'])

ES5

ES6

let img = [
    1200,
    400,
    'http://pic.com/flowers.jpg'
]
let [width, height, src] = img

Destructuring

var me = {
 first: 'Justin',
 last: 'Schroeder',
 hair: 'going bald'
};

function greeting (person) {
  console.log('Hello ' +
    person.first +
    '. You are ' +
    person.hair + '.');
}

greeting(me);

// Hello Justin, you are going bald.
var me = {
  first: 'Justin',
  last: 'Schroeder',
  hair: 'blond'
}
  
function greeting ({hair, first, last}) {
  console.log(`Hello ${first}, you are ${hair}.`);
}
  
greeting(me)
  



// Hello Justin, you are blond

ES5

ES6

Rest

var prices = [1200, 1400, 100, 300, 20]

var first = prices[0]
var second = prices[1]
var remaining = prices.slice(2)

console.log(first)        // 1200
console.log(second)       // 1400
console.log(remaining)    // [100,300,20]
let prices = [1200, 1400, 100, 300, 20]

let [first, second, ...remaining] = prices

console.log(first)
console.log(second)
console.log(remaining)

ES5

ES6

var accounts = {
  bbt: 100,
  chase: 300,
  ally: 23100
}

var others = Object.assign({}, accounts)
var bbt = others.bbt
delete others.bbt

console.log(bbt)    // 100
console.log(others) // {chase: 300, ally: 23100}
var accounts = {
  bbt: 100,
  chase: 300,
  ally: 23100
}

let {bbt, ...others} = accounts

console.log(bbt)    // 100
console.log(others) // {chase: 300, ally: 23100}

Spread

function family (father, mother, child) {
  console.log(father +
   ' + ' + mother +
   ' = ' + child)
}

family.apply(null, ['Justin', 'Lauren', 'Roman']);

// Justin + Lauren = Roman
function family (father, mother, child) {
  console.log(father +
   ' + ' + mother +
   ' = ' + child)
}

family(...['Justin', 'Lauren', 'Roman'])

ES5

ES6

Promises

function makePizza (topping, callback) {
  setTimeout(function () {
    callback(topping + ' pizza')
  }, 5000)
}

function deliverPizza () {
  makePizza('pepperoni', function (pizza) {
    console.log('delivered a ' + pizza)
  })
}

deliverPizza() // delivered a pepperoni pizza
function makePizza (topping) {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(`${topping} pizza`), 5000)
  })
}

deliverPizza () {
  makePizza('pepperoni')
    .then(pizza => console.log(`delivered a ${pizza}`))
}

deliverPizza() // delivered a pepperoni pizza

ES5

ES6

async function makePizza(topping) {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(`${topping} pizza`), 5000)
  })
}

async function deliverPizza () {
 let pizza = await makePizza('pepperoni')
 console.log(`delivered a ${pizza}`))
}

deliverPizza() // delivered a pepperoni pizza

ES8

Modules

//------ lib.js ------
module.exports = function () {
    console.log('hello world')  
};

//------ main.js ------
var hello = require('./lib')
hello();
//------ lib.js ------
export default function () {
    console.log('hello world')
}

//------ main.js ------
import hello from './lib'
hello()

ES5 (CommonJS)

ES6

SyntaxError: Unexpected token import
    at createScript (vm.js:74:10)
    at Object.runInThisContext (vm.js:116:10)
    at Module._compile (module.js:533:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Function.Module.runMain (module.js:605:10)
    at startup (bootstrap_node.js:158:16)
    at bootstrap_node.js:575:3

Use ES2015 Today

Tooling

ES2016

ES2017

ES2018

const square = a => a * a
var square = function (a) { return a * a; }
<script src="/js/main.js"></script>
// webpack.config.js
const path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  context: path.resolve(__dirname, './themes/mytheme'),
  entry: {
    main: './js/main.js'
  },
  output: {
    path: path.resolve(__dirname, './themes/mytheme/dist'),
    filename: '[name].bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: [/node_modules/],
        use: [{
          loader: 'babel-loader',
          options: {
            presets: [
              ['env', {browsers: ['ie >= 11']}]
            ]
          }
        }]
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract({
          use: [
            { loader: 'css-loader', options: { importLoaders: 2 } },
            'resolve-url-loader',
            'sass-loader',
            'postcss-loader'
          ]
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({
      filename: '[name].css',
      allChunks: true
    })
  ]
}
https://github.com/angular/angular-cli
https://github.com/vuejs/vue-cli
https://github.com/facebook/create-react-app

Web APIs

  • Animation
  • Device Acceleration
  • Device Light
  • Device Proximity
  • Fetch
  • Gamepad
  • Payment Request
  • Performance

 

  • Push
  • Service Worker
  • Speech Recognition
  • URL
  • Virtual Reality
  • WebGL
  • WebSocket
  • Query Selector

Web APIs

$('.lists').first()
document.querySelector('.list')
$('.list li')
document.querySelectorAll('.list li')
Array.from(document.querySelectorAll('li'))
.map(item => item.classList.add('list-item'))
$('li').addClass('list-item')
$(document).click(function () {
    $(this).addClass('clicked-button');
});
document.addEventListener('click',
    e => document.classList.add('clicked-button')
)

History
State of JS
What to learn

  • Bullet One
  • Arrow Functions
  • Classes
  • Enhanced Object Literals
  • Template Strings
  • Destructuring
  • Default / Rest / Spread
  • Let / Const

  • For … of

  • Modules / Loaders

  • Updated Object

  • Updated String

  • Updated Number

  • Promises

https://github.com/lukehoban/es6features

End.

@jpschroeder

@wearebraid

jpschroeder.com

wearebraid.com

justin@wearebraid.com

brd.bz/js2018

JS Like It's 2018

By Justin Schroeder

Loading comments...

More from Justin Schroeder