The state of ES6

# The state of ES6

## Can we use it yet?

Krzysztof Zbicinski  
        _k.zbicinski@gmail.com_  
        _@zbicin_  
        _http://zbic.in_

---

# History

---

# History

.center[
        ![IE vs Netscape](https://3.bp.blogspot.com/-M60wBEd-m5M/UA2j_xAro-I/AAAAAAAAAD0/vPn5H8zWLIA/s1600/ie-vs-netscape.jpg)

.small[
            *http://royalmulti.blogspot.com.au/2012/07/holy-browser-wars.html*    
        ]
        ]

???

* created in 1995 by Brendan Eich

* based on Java, Scheme and Self

* Java began in 1990 as a smart appliances language

* Sun worked with Netscape to break the monopoly of IE

* introduced in Netscape Navigator 2.0 in 1996

---

# History

* Mocha ➔ LiveScript ➔ JavaScript - Netscape
        * JScript - Microsoft

---

# Why 'ECMAScript'?

---

* ECMAScript - Ecma International (former European Computer Manufacturers Association)

---

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

---

# Versioning

* ES1 (Published in June 1997)

* ES2 (June 1998)

* ES3 (December 1999)

* ES4 (abandoned)

* ES5 (December 2009)

* ES5.1 (June 2011)

* ES6 (ES2015, June 2015)

* ES7  (ES2016, June 2016)

---

# Great, new features

1. Arrow functions

2. Modules

3. Destructuring

4. Generators

5. Promises

6. Template literals

7. Spread operator

8. New object literal features (including method definitions)

9. let and const

10. Rest parameters

---

## Great, but

# can we use it yet?

---

name: yes-we-can
        count: false
        class: title-only, inverted, no-margins

![Yes we can](assets/images/yes-we-can.jpg)
  
        .small[*http://bcgavel.com/wp-content/uploads/2015/04/tumblr_md3p0xrgqy1r0z99do1_500.jpg*]

---

## but

---

![Nope](assets/images/nope.jpg)

---

# Compatibility

---

* Implementations are still not perfect:

* Node 6.5 - 97%

* Chrome 56 - 97%

* Firefox 52 - 94%

* Edge 14 - 93%

* Missing e.g. modules syntax (`import` and `export`).

---

```bash
        $ node -v
        v7.0.0
        ```

---

```js
        // a.js
        export let a = 'a';
        ```

---

```js
        // b.js
        import { a } from './a';
        console.log(a);
        ```

---

```bash
        $ node b.js 
        /tmp/b.js:2
        import { a } from './a';
        ^^^^^^
        SyntaxError: Unexpected token import
            at Object.exports.runInThisContext (vm.js:76:16)
            at Module._compile (module.js:545:28)
            at Object.Module._extensions..js (module.js:582:10)
            at Module.load (module.js:490:32)
            at tryModuleLoad (module.js:449:12)
            at Function.Module._load (module.js:441:3)
            at Module.runMain (module.js:607:10)
            at run (bootstrap_node.js:382:7)
            at startup (bootstrap_node.js:137:9)
            at bootstrap_node.js:497:3
        ```

---

* http://kangax.github.io/compat-table/es6/
        
        * http://node.green/

---

## Implementations are not complete.

# What now?

---

# Transpilers to the rescue!

---
        
        count: false

# Transpilers to the rescue

* Transpilers take the ES6 code as an input and transform it into ES5 code which works 100% the same way and is supported by most environments.

* ES6 code ➔ magic ➔ ES5 code

---

```js
        // a.es6.js 
        export let a = 'a';
        ```

---

count: false
        template: transpilers-rescue-0
        name: transpilers-rescue-1

```bash
        $ ./node_modules/.bin/babel a.es6.js -o a.es5.js
        ```

---

count: false
        template: transpilers-rescue-1
        name: transpilers-rescue-2

```js
        // a.es5.js 
        'use strict';

Object.defineProperty(exports, "__esModule", {
          value: true
        });
        var a = exports.a = 'a';
        ```

---

# Transpilers to the rescue

* Babel (https://babeljs.io/)

* Traceur (https://github.com/google/traceur-compiler)

---

### Great, so can we use transpilers and 
        
        # everything will be fine?

---

---

---

# something _may_ not be fine.

---

# Transpilers - disadvantages

---

count: false
        template: transpilers-disadvantages-0
        name: transpilers-disadvantages-1

* Usually an additional step of build process.

---

count: false
        template: transpilers-disadvantages-1
        name: transpilers-disadvantages-2

* Debugging issues if sourcemaps are not configured properly.

---

count: false
        template: transpilers-disadvantages-2
        name: transpilers-disadvantages-3

* Potential slight performance loss (if any).

---

# Nevertheless, transpilers are awesome.

---

# Transpilers - how to begin?
        
        ---

The easiest way to start playing with ES6 are:

* Babel REPL - https://babel.io/repl

---

![Babel REPL](assets/images/babel-repl.png)  
        *https://babeljs.io/repl*

---

* Babel Require Hook

---

# Babel's Require Hook

```bash
        $ npm install --save-dev babel-register babel-preset-es2015
        ```

---

```js
        // .babelrc
        { "presets": ["es2015"]}
        ```
        ---

Then, at the top of our main `.js` file:

```js
        // main.js
        require('babel-register');
        require('./src/app.js');
        ```
        ---

```js
        // src/app.js
        import 'foo' from 'bar'; // works!

let baz = () => Math.random(); // works!
        ```
        ---

```bash
        $ node main.js # works!
        ```

---
        
        count: false
        template: transpilers-2

* `babel-node`

---
        
        count: false
        name: babel-node-0

# `babel-node`

```bash
        $ npm install --save-dev babel-cli babel-preset-es2015
        ```

---

```js
        // a.js
        export let a = 'a';
        ```
        ---

```js
        // b.js
        import { a } from './a';
        console.log(a);
        ```
        ---

```js
        // .babelrc
        { "presets": ["es2015"] }
        ```
        ---

```bash
        $ ./node_modules/.bin/babel-node b.js
        a # works! 
        ```

---

# Bonus: Languages compiled to JavaScript
        
        * TypeScript (https://www.typescriptlang.org/)

* Dart (https://www.dartlang.org/)

* ClojureScript (http://clojure.org/)

* CoffeScript (http://coffeescript.org/)

---

# Thanks!

Krzysztof Zbicinski  
        _k.zbicinski@gmail.com_  
        _@zbicin_  
        _http://zbic.in_