ES6 Everywhere

Adam Klein

The “future” is hereClasses & Inheritance Promises Modules Arrow functions Default parameters and more…

ES 2015

Adam Klein

- Developing for >18 years - Development, Consulting & Training

in Angular, React & Node - International clients

CTO @ 500Tech

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa

Browser Compatibility

Meaningless

Transpilers will always precede the slowest browser

http://kangax.github.io/compat-table/es6/

Babel JS transpiler Compatibility Speed Debugging Plugins JSX Output code

Babel JS $ npm i -g babel

playgrounds: codepen.io (choose babel preprocessor) babeljs.io/repl $ babel file.js // see transpiled $ babel-node file.js // run

ES6

Classesclass Point { constructor(x, y) { this.x = x; this.y = y; } move(x, y) { this.x += x; this.y += y; } }

Inheritanceclass AxisPoint extends Point { constructor(x) { super(x, 0); } move(x) { super.move(x, 0); } }

transpiled code

modules

// tree.ctrl.js import BaseCtrl from ‘base';

class TreeCtrl extends BaseCtrl { }

// base.ctrl.js export default class BaseCtrl { }

Arrow functions and lexical ‘this’

var self = this; http.get(‘/people').then(function(people) { self.people = people; });

constructor() { http.get('/people').then((people) => { this.people = people; }); }

people.map(function(p) { return p.name; });

people.map(p => p.name);

Sugar!

Default parameters

http(url, method='GET', headers={})

http(url, method, headers) { method = method || 'GET'; headers = headers || {}; }

More cool features I bet you didn’t know

Rest & Spread// rest function format(str, ...args) { args.forEach(...); } // spread let arr1 = [1,2,3]; Math.max(...arr1);

// spread in array literal let arr2 = [4,5,6]; let arr3 = [...arr1, ...arr2];

“Named” parametersfunction connect( {host = ‘localhost', port = 9000, username, password} = {})

connect({port: 9002, username: ‘adam'}); connect();

ES7

function connect( {host = ‘localhost', port = 9000, username, password, ...opts} = {}) { }

string templates (String Interpolation)

let name = 'Adam Klein' template = `<div> <h1>Hello ${name}</h1> <a>Have a good day!</a> </div> `

ES6 in Angular

Using in Angularclass Auth { constructor($http) { this.$http = $http; } get(x) { return this.$http.get('...'); } } export Auth;

Registering with Angularimport { Auth } from './auth'; import angular from 'angular';

angular.module('Demo.services', []) .service('Auth', Auth);

Magic assignment

class HomeController { constructor($scope, $q, $timeout, Auth, Modal) { this.$scope = $scope; this.$q = $q; this.$timeout = $timeout; this.Auth = Auth; this.Modal = Modal; } }

Object.assign(this,{$scope, $q, $timeout, Auth, Modal});

Destructuring

{$scope, $q, $timeout, Auth, Modal} == { $scope: $scope, $q: $q, $timeout, $timeout, Auth: Auth, Modal: Modal

}

Webpacksimple config file

super fast dev server (in-memory transpilation)

import whatever (js, css, html, json)

possibility to pack chunks for lazy loading

‘Kick’ - Angular best practicesGreat way to see angular + webpack + ES6 in action

$ npm i -g kick (requires node >= 4.0)

$ kick n app

$ kick g service Auth

$ kick g state users

$ kick start

$ kick tdd

$ kick bundle

* disclaimer - WIP

www.angular-kick.com

Debuggingsource maps

debug in inspector normally

Tests using ES6webpack + karma

configured in kick

share mocks between dev & unit-tests & integration tests

Config files using ES6 (node 4.2.1)webpack config file

gulpfile

karma config file

etc.

Angular 2 https://github.com/500tech/angular2-webpack-es6

React https://github.com/500tech/react-webpack-es6

Component = classimport React, { Component } from 'react'; import { Row, Col } from 'react-bootstrap';

export class Root extends Component { render() { return ( <Row> <Col md={ 8 }> Office Radio { this.props.children } </Col> </Row> ); } }

Node

Node 4.2.1https://nodejs.org/en/docs/es6/ ClassesPromises Arrow functions let & const Template strings more…

Babel-nodeuse for development

$ babel-node server.js

$ babel-node-debug server.js

production

$ babel src —out-dir dist

Express hello world ES6https://github.com/500tech/nodejs-express-es6

Check the slides:

Follow us:http://blog.500tech.com

Keep in touch:

@500techil

Questions?

http://www.slideshare.net/500tech/es6-everywhere

adam@500tech.com

THANK YOU