es6 everywhere
TRANSCRIPT
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
THANK YOU