ECMASCRIPT 6

What is ECMASCRIPT?

ECMAScript is a Standard for scripting languages.

Languages like Javascript are based on this standard.

History

• Ecmascript 1 - 1997

• Ecmascript 2 - 1998

• Ecmascript 3 - 1999

• Ecmascript 4 - Abandoned

• Ecmascript 5 - 2009

• Ecmascript 6 - 2015

• Ecmascript 7 - In progress...

Ecmascript 6 features

Arrow Functions

Ecmascript 5:

this.color = "red";
var _this = this;
element.on("click", function() {
    _this.color = "white";
})

Ecmascript 6:

this.color = "red";
element.on("click", () => this.color = "white");

Classes

Ecmascript 5:

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

Ecmascript 6:

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

Modules

Export:

export function getColor() {
  return "#ccc"
}

Import

import _ from 'lodash'

And a lot more...

• Default Parameter Values

• Iterators

• Generators

• Destructuring Assignments

• Promises

• Block Scoping

• Immutable variables

ES6 browser support ?

Only partially supported by modern browsers.

Some of the features are not yet available...

Can we start using it ?

How to use it?

Gulp : Initiate build task, watch for changes.

Browserify : Bundle up your different modules into a single js file.

Babelify : Babel transformer for Browserify

Babel : The actual ES6 transpiler

main.js

import React from 'react'
import ReactDOM from 'react-dom'
import _ from 'lodash'

import {MerchantCompetitors} from "./components/merchant_competitors.js"

gulpfile.js

gulp.task("es6", function() {
    var src = 'slxadmin/assets/es6/main.js'

    var bundler = browserify(src, {debug: true})
    bundler.transform(babelify, {
        presets: ["es2015", "react"]
    })
    var stream = bundler.bundle();
    return stream.on('error', handleErrors)
        .pipe(source("main.js"))
        .pipe(gulp.dest("slxadmin/static/js"))
}

Example

class CompetitorRow extends React.Component {
    constructor() {
        super()
    }
    render() {
        let name = this.props.competitor.label
        return (<tr>
                    <td>{ name }</td>
                    <td>{this.props.competitor.clicks}</td>
                </tr>)
    }
    onSelectChange = () => {
        let newValue = !this.props.competitor.selected
        this.props.onSelectCompetitor(this.props.competitor, newValue)
    }
}

var CompetitorRow = (function (_React$Component) {
    _inherits(CompetitorRow, _React$Component);

    function CompetitorRow() {
        var _this = this;

        _classCallCheck(this, CompetitorRow);

        _get(Object.getPrototypeOf(CompetitorRow.prototype), "constructor", this).call(this);

        this.onSelectChange = function () {
            var newValue = !_this.props.competitor.selected;
            _this.props.onSelectCompetitor(_this.props.competitor, newValue);
        };
    }

    _createClass(CompetitorRow, [{
        key: "render",
        value: function render() {
            var name = this.props.competitor.label;
            return React.createElement(
                "tr",
                null,
                React.createElement(
                    "td",
                    null,
                    name
                ),
                React.createElement(
                    "td",
                    null,
                    this.props.competitor.clicks
                )
            );
        }
    }]);

    return CompetitorRow;
})(React.Component);

Source Maps

Map the compiled code to the original code.

Make debugging easier.

Available in modern browsers

Should we start using ES6 in new projects?

Questions?