The next Javascript ๐Ÿš€

Miguel รngel Durรกn

Frontend Engineer at Schibsted Spain

@midudev

Javascript is evolving

ES6, I choose you!

ProxyGenerators & IteratorsPromisesEnhanced object literalsMap/SetTyped ArraysNew Intl methodsDestructuringClassesconst & letArray#findModules: import/exportfor ... ofFunction params default valuesSymbolTemplate stringsArrow functionsString#includes

And much more...

ES6 EcmaScript 2015

๐Ÿคฉ Tons of additions!



EcmaScript 2016

๐Ÿ˜… Array#includes and exponential operator



EcmaScript 2017

๐Ÿ˜ฑ async/await

๐Ÿ˜ฌ Object.values/Object.entries

๐ŸŽธ Trailing commas in function parameter list and calls

and more! ๐Ÿ™Œ

so... what's next? ๐Ÿค”๐Ÿฒ

EcmaScript 2018


๐Ÿ˜Ž๐Ÿ”ฅ rest/spread properties

๐Ÿ™ Promise.prototype.finally

๐Ÿ˜… and some RegExp stuff

Prepare for the future


But before continuing... ๐Ÿ™‹โ€โ™‚๏ธ

TC39 Process & Stages

More info: https://tc39.github.io/process-document/

Who is TC39?

The committe responsible for evolving Javascript.
Its members are companies (major browser vendors) and others. Operates by consensus.

I have a picture of them! ๐Ÿ“ธ

TC39 in action!


Real TC39 in real action!

But, how does the TC39 work?

Meetings every two months ๐Ÿ“†
Proposals go through a process based on stages ๐Ÿšตโ€โ™‚๏ธ

๐Ÿ’ก Stage 0: Strawman

Just an idea, not a formal proposal. You could even write one!
Very highly likely it will change or be dropped. โ™ป๏ธ

๐Ÿค” Stage 1: Proposal

TC39 is willing to examine, discuss and contribute to the proposal.
WIP, much could change or even dropped. ๐Ÿ™…โ€โ™‚๏ธ

๐Ÿ“ Stage 2: Draft

First version of what will be in the specification.
Changes could occur.

๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ผ Stage 3: Candidate

Spec is completed but needs feedback from browser implementations and users.
Changes are unlikely but could happen.

๐Ÿคฉ Stage 4: Finished

It will be included to the next yearly standard ratification.

Lots of proposals on different stages

https://github.com/tc39/proposals

Vote your proposals! ๐Ÿ—ณ

https://vote-js.now.sh

proposal-array-last

๐Ÿค” Stage 1: Proposal

myArray[myArray.length - 1] // return the last item of the array
// but it has some problems...
const thoughLastIndex = myArray.length - 1
myArray[myArray.length] // manual error
myArray[thoughLastIndex - 1] // manual error

// using the new proposal
myArray.lastItem // return the last item of the array

proposal-optional-chaining

๐Ÿค” Stage 1: Proposal

var street = user.address && user.address.street;
var fooInput = myForm.querySelector('input[name=foo]')
var fooValue = fooInput ? fooInput.value : undefined

// using optional chainig
var street = user.address?.street
var fooValue = myForm.querySelector('input[name=foo]')?.value

proposal-global

๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ผ Stage 3: Candidate

// If we're in a browser, the global namespace is named 'window'. If we're
// in node, it's named 'global'. If we're in a shell, 'this' might work.
const globalThis = (typeof window !== "undefined"
  ? window
  : (typeof process === 'object' &&
      typeof require === 'function' &&
      typeof global === 'object')
    ? global
    : this);

proposal-pipeline-operator

๐Ÿค” Stage 1: Proposal

const doubleSay = str => str + ", " + str
const capitalize = str => str[0].toUpperCase() + str.substring(1)
const exclaim = str => str + '!'
// old way
let result = exclaim(capitalize(doubleSay("hello")));

let result = "hello" // using the new proposal
  |> doubleSay
  |> capitalize
  |> exclaim

console.log(result) // "Hello, hello!"

proposal-class-fields

๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ผ Stage 3: Candidate

class MyClass {
  #number // # symbol indicates it's private
  increment = 2 // public property field for MyClass

  constructor(number) {
      this.#number = number; // this._number = number
  }

  incNumber() {
      this.#number = this.#number + this.increment;
      // this._number = this._number++ + this.increment;
  }
}

proposal-numeric-separators

๐Ÿ“ Stage 2: Draft

const FRONTEND_SALARY = 12300;
// is this 12,300โ‚ฌ? Or 123, because it's in cents?

const TIMES_JAVASCRIPT_DIED = 1543345345;
// Is this a billion? a hundred millions? Fifteen millions?

// Using underscores _ as separators
// helps improve readability for numeric literals
const FRONTEND_SALARY = 12_300 // ah! not bad! ๐Ÿ’ฐ
const TIMES_JAVASCRIPT_DIED = 1_543_345_345 // and yet still is alive! ๐Ÿค”

proposal-simple-arrow-function

๐Ÿ€ No Stage

const square = function (x) {
  return x * x
}

const cube = function(x) {
  return square(x) * x
}

// simple arrow function would not bind this
square = x -> x * x
cube   = x -> square(x) * x

proposal-chained-comparisons

๐Ÿ€ No Stage

const beatsPerMinute = 150
const patientIsOk = (40 < beatsPerMinute && beatsPerMinute < 220)

// using chained comparison!
const patientIsOk = 40 < beatsPerMinute < 220

proposal-immutable-type

๐Ÿ€ No Stage

immutable person = {
  name: 'Miguel',
  age: 18,
  isCool: true,
  isModest: 'the one that most'
}

person.name = 'Pepito'
// throws TypeError('cannot assign `name` from Object')

Thanks for voting! ๐Ÿ—ณ

One more thing... โ˜๏ธ

Tech used!

and...

The next React โš› ๐Ÿš€ ๏ธ

Voting website app using React Hooks

0 Component classes used!

but with state and life cycle with useState and useEffect

/* eslint-disable react/prop-types */
import React, {useEffect, useState} from 'react'
import {Score} from '../components/Score'

import {onGetVotesByProposal} from '../firebase'

export const Iframe = ({match}) => {
  const [votes, setVotes] = useState([])
  const [isReady, setIsReady] = useState(false)
  const {params} = match
  const {proposal} = params

  useEffect(
    () => {
      onGetVotesByProposal({proposal}, votes => {
        setVotes(votes)
        setIsReady(true)
      })
    },
    [proposal]
  )

  return (
    <div className="js-IframePage">
      {!isReady && (
        <h2 className="js-IframePage-loading">Loading scores... ๐Ÿญ</h2>
      )}
      {isReady && <Score votes={votes} />}
    </div>
  )
}

Source code available RIGHT NOW ๐Ÿ‘‡:

https://github.com/miduga/the-next-javascript

Thanks! ๐Ÿ™‡โ€โ™‚๏ธ

any questions? ๐Ÿค”