ES 6 JavaScript 2015

Impact and overcome for latest JS standard

Alan Chiang, IT Wake

handle: @itsnotvalid

track for

What's ES6
aka JavaScript 2015

The "browser language", JavaScript, has been around since 20-some years ago. Newer thoughts emerged to modernize the language, to make it faster, easier to maintain and add new features to it.

@me

  • JavaScript dev
  • es6 adopter
  • languages lover (in both senses)

A little bit of background.

ES6, which stands for ECMAScript 6, is the proposal (now accepted) to provide new, perhaps backwards incompatible changes to the language to make it better for use in the future.

How it's defined.

A steering committee, TC 39, was formed to make the decisions on which proposals are accepted. The proposal keeps updated until a point where it becomes stable. On Jun 17, 2015, the draft becomes current standard.

What's new in ES6?

New features since ES 5

  • Symbols
  • Blocks {}
  • Arrow Functions
  • generators (yieldables)
  • class
  • let & const
  • rest & spread
  • dereferencing
  • built-in Promises
  • Map, Set & WeakMap, WeakSet
  • Proxy and Reflect object
  • ES6 Modules
  • Many more...

Symbols

  • Built-in type (!)
  • unique over different instances
  • Symbol('foo') !== Symbol('foo')

Blocks

  • Isolated closure

Arrow functions

  • Allows inlining of functions with fewer typing
  • specific values for "this"

Generators

  • Break out of procedure, making it iteratable
  • use cases for avoiding callback hell (co)

Class

  • constructor
  • methods (not prototype.method)
  • extend

let, const

  • provides better optimization for implmentations
  • specific scope for use cases like 'for' loops

rest ... spread

  • better than argument[i] or argument.unshift

dereferencing

  • shorthand for getting values from arrays and objects
  • one less variable

Promises

  • No longer require 3rd party modules
  • Standardized on methods available

Map, Set, WeakMap, WeakSet

  • Provides non-dangling way of handling garbage collection
  • WeakMap, WeakSet:  Allows saving non-retaining references of objects, which would not lead to memory leaks

Proxy, Reflect

  • Proxies allows you to filter output before presenting in a more efficient way
  • Reflect provides APIs for metaprogramming

ES6 Modules

  • There has been many different module systems, e.g.
    • AMD (require.js & friends)
    • CommonJS
    • <script src="my_last_dependency.js"></script>

ES6 Modules

  • Unifies the ecosystem of modules by making it official (finally)
  • Provides static modules

Wanna use?

iojs --v8-options | grep "harmony"
  --es_staging (enable all completed harmony features)
  --harmony (enable all completed harmony features)
  --harmony_shipping (enable all shipped harmony fetaures)
  --harmony_modules (enable "harmony modules (implies block scoping)" (in progress))
  --harmony_arrays (enable "harmony array methods" (in progress))
  --harmony_array_includes (enable "harmony Array.prototype.includes" (in progress))
  --harmony_regexps (enable "harmony regular expression extensions" (in progress))
  --harmony_arrow_functions (enable "harmony arrow functions" (in progress))
  --harmony_proxies (enable "harmony proxies" (in progress))
  --harmony_sloppy (enable "harmony features in sloppy mode" (in progress))
  --harmony_unicode (enable "harmony unicode escapes" (in progress))
  --harmony_unicode_regexps (enable "harmony unicode regexps" (in progress))
  --harmony_computed_property_names (enable "harmony computed property names" (in progress))
  --harmony_rest_parameters (enable "harmony rest parameters" (in progress))
  --harmony_tostring (enable "harmony toString")
  --harmony_numeric_literals (enable "harmony numeric literals")
  --harmony_strings (enable "harmony string methods")
  --harmony_scoping (enable "harmony block scoping")
  --harmony_templates (enable "harmony template literals")
  --harmony_classes (enable "harmony classes (implies block scoping & object literal extension)")
  --harmony_object_literals (enable "harmony object literal extensions")

What if I still need IE{7,8,9,whatever}?

>>Babel.js

Babel.js

  • convertor to transform your code to es5
  • automatically add many polyfills
  • fits in most workflows
  • future-proof
{
  let privateKey = Math.random();

  var login = function (password) {
    return password === privateKey;
  };
}
"use strict";

{
  var login;

  (function () {
    var privateKey = Math.random();

    login = function login(password) {
      return password === privateKey;
    };
  })();
}

ES6

ES5

Drawbacks

  • a fraction of es6 features may cause problems
    • symbol: cannot be used outside non-babel code on function calls
    • generators: requires regenerator runtime which add a lot of dependencies
    • no support for Proxy (requires basic Proxy support in the target language)
    • syntactic sugar?
square = (x) -> x * x

sum = (x, y) -> x + y

odd = (x) -> x % 2 isnt 0

even = (x) -> x % 2 is 0

run_loop = ->
  fire_events((e) -> e.stopPropagation())
  listen()
  wait()
let square = (x) => x * x

let sum = (x, y) => x + y

let odd = (x) => x % 2 !== 0

let even = (x) => x % 2 === 0

let run_loop = () => {
  fire_events((e) => e.stopPropagation())
  listen()
  return wait()
}

ES6

Created by potrace 1.10, written by Peter Selinger 2001-2011

What's next?

ES7!

  • Currently in draft
  • selected features already supported by babel
    • async, await (big time)
    • class decorators
    • types

WebAssembly

  • Built upon asm.js
  • "web bytecode"
  • full access to the same API that JS currently has

More info

ES6: Impact and overcome for latest JS standard

By itsnotvalid

ES6: Impact and overcome for latest JS standard

  • 1,521