I'm using Babel and so should you

# I'm using Babel and so should you

Johannes Stein

Twitter: @frostney_

Github: frostney

---

# Agenda

1. The history of Babel
2. What does Babel do
3. How to configure Babel
4. Babel: Targeting ES2015
5. Babel: Targeting ES2016
6. Babel on the server
7. Babel ❤️ React
8. Beyond ES2015+

---

![Timetravel](images/back-to-the-future.jpg)

###It's mid 2014 and we want to use ES6
###(Back when the ES2015 name wasn't official)
### What can we do?

---

![Babybel](images/coffeescript.png)

---

```coffeescript
class Person
  constructor: (@age) ->

showAge: -> console.log @age

makeSomeoneOlder = (Person) -> Person.age += 10

person = new Person(18)
person.showAge()
makeSomeoneOlder person
person.showAge()
```

---

```javascript
var Person, makeSomeoneOlder, person;

Person = (function() {
  function Person(age) {
    this.age = age;
  }

Person.prototype.showAge = function() {
    return console.log(this.age);
  };

return Person;

})();

makeSomeoneOlder = function(Person) {
  return Person.age += 10;
};

person = new Person(18);

person.showAge();

makeSomeoneOlder(person);

person.showAge();
```

---

## Why is CoffeeScript not what we're looking for?

* CoffeeScript is not a standardized language

* CoffeeScript's compile target is still ES3 (Yes, even today in 2015)

* Its syntax has a specific Ruby taste

###But:

* Its JavaScript output is really clean

---

![Traceur](images/traceur.svg)

---

```javascript
class Person {
  contructor(age) {
    this.age = age;
  }

showAge() {
    console.log(this.age);
  }
}

var makeSomeoneOlder = person => person.age += 10;

var person = new Person(18);
person.showAge();
makeSomeoneOlder(person);
person.showAge();
```

---

```javascript
$traceurRuntime.ModuleStore.getAnonymousModule(function() {
  "use strict";
  var Person = function() {
    function Person() {}
    return ($traceurRuntime.createClass)(Person, {
      contructor: function(age) {
        this.age = age;
      },
      showAge: function() {
        console.log(this.age);
      }
    }, {});
  }();
  var makeSomeoneOlder = function(person) {
    return person.age += 10;
  };
  var person = new Person(18);
  person.showAge();
  makeSomeoneOlder(person);
  person.showAge();
  return {};
});
//# sourceURL=traceured.js
```

---

## Why is Traceur not what we're looking for?

* What the hell is going on with its JavaScript output? (Dart anyone?)

* Traceur runtime is needed all the time every time

###But:

* You can use ES6 now!

---

![6to5](images/6to5.png)

---

```javascript
class Person {
  contructor(age) {
    this.age = age;
  }

showAge() {
    console.log(this.age);
  }
}

var makeSomeoneOlder = person => person.age += 10;

var person = new Person(18);
person.showAge();
makeSomeoneOlder(person);
person.showAge();
```

---

```javascript
var Person = function () {
  function Person() {
  }
  Person.prototype.contructor = function (age) {
    this.age = age;
  };
  Person.prototype.showAge = function () {
    console.log(this.age);
  };
  return Person;
}();
var makeSomeoneOlder = function (person) {
  return person.age += 10;
};
var person = new Person(18);
person.showAge();
makeSomeoneOlder(person);
person.showAge();
```

---

![6to5Love](images/6to5-love.gif)

---

![7to5](images/7to5.png)

---

![7to6](images/7to6.png)

---

![2015to5](images/es2015to5.png)

---

![Tower of Babel](images/tower_of_babel.jpg)

---

![Babel](images/babel.png)

---

![Tower of Babel](images/babel-pronounce.png)

---

## What does Babel do?

* Transpiles JavaScript into JavaScript

---

## What does Babel do?

* Transpiles _next-generation_ JavaScript into _current-generation_ JavaScript

* Provides polyfills for ES2015 (https://github.com/zloirock/core-js)

---

## ES Stages & proposals

The TC39 categorises proposals into 4 stages:

* Stage 0 - Strawman
* Stage 1 - Proposal
* Stage 2 - Draft
* Stage 3 - Candidate
* Stage 4 - Finished

Stage 0: Class properties, ...

Stage 1: Async/await, Decorators, ...

Stage 2 and above enabled by default.

---

## How to configure Babel

`babel myfilename.js`

* Loose mode: Make code faster, but less spec-compliant

* Stage: Which stage to compile

* Modules: CommonJS, AMD, etc.

```javascript
// .babelrc
{
  "stage": 1,
  "loose": ["es6.modules", "es6.classes"],
  "ignore": [
    "foo.js",
    "bar/**/*.js"
  ]
}
```

---

## How to configure Babel

Webpack

`npm install --save-dev babel-loader`

```javascript
module: {
  loaders: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
  ]
}
```

---

## How to configure Babel

Grunt

`npm install --save-dev grunt-babel`

```javascript
grunt.initConfig({
  "babel": {
    options: {
      sourceMap: true
    },
    dist: {
      files: {
        "dist/app.js": "src/app.js"
      }
    }
  }
});
```

---

## How to configure Babel

Gulp

`npm install --save-dev gulp-babel`

```javascript
var gulp = require("gulp");
var babel = require("gulp-babel");

gulp.task("default", function () {
  return gulp.src("src/app.js")
    .pipe(babel())
    .pipe(gulp.dest("dist"));
});
```

Brunch, Broccoli, Duo and what-have-you are supported as well.

---

## Babel: Targeting ES2015

###Arrow functions

```javascript
[1, 2, 3, 4].map(item => item * 2)
```

```javascript
let miniBind = function(callback) {
  return () => {
    callback.apply(this, argument);
  };
};
```

---

## Babel: Targeting ES2015

###Classes

```javascript
class FancyClass {
  constructor(something = 'Heya') {
    this.something = something;
  }

log() {
    console.log(this.something);
  }
}
```

```javascript
class SuperFancy extends FancyClass {
  constructor(something) {
    super(something);

this.something += ' there!';
  }
}
```

---

## Babel: Targeting ES2015

###Modules

```javascript
import Shapes from './Shapes';
import Vector from './Vector';
// Module imports are constants!

var Triangle = Shapes.create([
  new Vector(0.5, 0),
  new Vector(0, 1),
  new Vector(1, 1)
]);

export default Triangle;
```

---

## Babel: Targeting ES2016

###Async/Await

```javascript
async function routeHandler(userId) {
  try {
    let user = await getUser(userId);
    let hash = await createHash(user.password);

console.log("hash is " + hash);
  }

catch (err) {
    console.error(err.message);
  }
}

routeHandler("user-1");
```

---

## Babel: Targeting ES2016

###Class properties and decorators
```javascript
@useGraplingHook({from: 'LuciusFox'})
@superRich
class Batman {
  suitColor = 'black';

@canUseBatMobil
  use(vehicle) {

}
}
```

---

## Babel on the server

`babel-node` for the REPL

`babel-node myfile.js`

Require hook:

```javascript
require("babel/register");
```

Or transpile the server side code and use and use optional runtime

---

## Babel loves React (And other frameworks, too)

* JSX transformer built-in and activated by default

* Additional JSX performance plugins available

---

## Beyond ES2015+

### Create your own Babel plugin
```javascript
export default function({ Plugin, types: t }) {
  return new Plugin("foo-bar", {
    visitor: {
      CallExpression(node, parent) {
        return t.isIdentifier(node.callee);
      }
    }
  });
}
```

### Or use available plugins
* Babel Emoji Plugin

---

![6to5](images/babel-repl.png)

---

# Thank you!

http://frostney.github.io/talks/babel/slides

### Twitter: @frostney_

### Github: frostney

---

Image credit:
* Sebastian McKenzie (https://speakerdeck.com/sebmck/javascript-transformation-jsconf-2015)
* Wikipedia (https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Pieter_Bruegel_the_Elder_-_The_Tower_of_Babel_%28Vienna%29_-_Google_Art_Project_-_edited.jpg/600px-Pieter_Bruegel_the_Elder_-_The_Tower_of_Babel_%28Vienna%29_-_Google_Art_Project_-_edited.jpg)
* Universal Pictures