es6 everywhere
TRANSCRIPT
![Page 1: Es6 everywhere](https://reader030.vdocuments.mx/reader030/viewer/2022021422/58efebe81a28ab93358b45f7/html5/thumbnails/1.jpg)
ES6 Everywhere
Adam Klein
![Page 2: Es6 everywhere](https://reader030.vdocuments.mx/reader030/viewer/2022021422/58efebe81a28ab93358b45f7/html5/thumbnails/2.jpg)
The “future” is hereClasses & Inheritance Promises Modules Arrow functions Default parameters and more…
![Page 3: Es6 everywhere](https://reader030.vdocuments.mx/reader030/viewer/2022021422/58efebe81a28ab93358b45f7/html5/thumbnails/3.jpg)
ES 2015
![Page 4: Es6 everywhere](https://reader030.vdocuments.mx/reader030/viewer/2022021422/58efebe81a28ab93358b45f7/html5/thumbnails/4.jpg)
Adam Klein
- Developing for >18 years - Development, Consulting & Training
in Angular, React & Node - International clients
CTO @ 500Tech
![Page 5: Es6 everywhere](https://reader030.vdocuments.mx/reader030/viewer/2022021422/58efebe81a28ab93358b45f7/html5/thumbnails/5.jpg)
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa
![Page 6: Es6 everywhere](https://reader030.vdocuments.mx/reader030/viewer/2022021422/58efebe81a28ab93358b45f7/html5/thumbnails/6.jpg)
Browser Compatibility
Meaningless
Transpilers will always precede the slowest browser
http://kangax.github.io/compat-table/es6/
![Page 7: Es6 everywhere](https://reader030.vdocuments.mx/reader030/viewer/2022021422/58efebe81a28ab93358b45f7/html5/thumbnails/7.jpg)
Babel JS transpiler Compatibility Speed Debugging Plugins JSX Output code
![Page 8: Es6 everywhere](https://reader030.vdocuments.mx/reader030/viewer/2022021422/58efebe81a28ab93358b45f7/html5/thumbnails/8.jpg)
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
![Page 9: Es6 everywhere](https://reader030.vdocuments.mx/reader030/viewer/2022021422/58efebe81a28ab93358b45f7/html5/thumbnails/9.jpg)
ES6
![Page 10: Es6 everywhere](https://reader030.vdocuments.mx/reader030/viewer/2022021422/58efebe81a28ab93358b45f7/html5/thumbnails/10.jpg)
Classesclass Point { constructor(x, y) { this.x = x; this.y = y; } move(x, y) { this.x += x; this.y += y; } }
![Page 11: Es6 everywhere](https://reader030.vdocuments.mx/reader030/viewer/2022021422/58efebe81a28ab93358b45f7/html5/thumbnails/11.jpg)
Inheritanceclass AxisPoint extends Point { constructor(x) { super(x, 0); } move(x) { super.move(x, 0); } }
transpiled code
![Page 12: Es6 everywhere](https://reader030.vdocuments.mx/reader030/viewer/2022021422/58efebe81a28ab93358b45f7/html5/thumbnails/12.jpg)
modules
// tree.ctrl.js import BaseCtrl from ‘base';
class TreeCtrl extends BaseCtrl { }
// base.ctrl.js export default class BaseCtrl { }
![Page 13: Es6 everywhere](https://reader030.vdocuments.mx/reader030/viewer/2022021422/58efebe81a28ab93358b45f7/html5/thumbnails/13.jpg)
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; }); }
![Page 14: Es6 everywhere](https://reader030.vdocuments.mx/reader030/viewer/2022021422/58efebe81a28ab93358b45f7/html5/thumbnails/14.jpg)
people.map(function(p) { return p.name; });
people.map(p => p.name);
Sugar!
![Page 15: Es6 everywhere](https://reader030.vdocuments.mx/reader030/viewer/2022021422/58efebe81a28ab93358b45f7/html5/thumbnails/15.jpg)
Default parameters
http(url, method='GET', headers={})
http(url, method, headers) { method = method || 'GET'; headers = headers || {}; }
![Page 16: Es6 everywhere](https://reader030.vdocuments.mx/reader030/viewer/2022021422/58efebe81a28ab93358b45f7/html5/thumbnails/16.jpg)
More cool features I bet you didn’t know
![Page 17: Es6 everywhere](https://reader030.vdocuments.mx/reader030/viewer/2022021422/58efebe81a28ab93358b45f7/html5/thumbnails/17.jpg)
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];
![Page 18: Es6 everywhere](https://reader030.vdocuments.mx/reader030/viewer/2022021422/58efebe81a28ab93358b45f7/html5/thumbnails/18.jpg)
“Named” parametersfunction connect( {host = ‘localhost', port = 9000, username, password} = {})
connect({port: 9002, username: ‘adam'}); connect();
![Page 19: Es6 everywhere](https://reader030.vdocuments.mx/reader030/viewer/2022021422/58efebe81a28ab93358b45f7/html5/thumbnails/19.jpg)
ES7
function connect( {host = ‘localhost', port = 9000, username, password, ...opts} = {}) { }
![Page 20: Es6 everywhere](https://reader030.vdocuments.mx/reader030/viewer/2022021422/58efebe81a28ab93358b45f7/html5/thumbnails/20.jpg)
string templates (String Interpolation)
let name = 'Adam Klein' template = `<div> <h1>Hello ${name}</h1> <a>Have a good day!</a> </div> `
![Page 21: Es6 everywhere](https://reader030.vdocuments.mx/reader030/viewer/2022021422/58efebe81a28ab93358b45f7/html5/thumbnails/21.jpg)
ES6 in Angular
![Page 22: Es6 everywhere](https://reader030.vdocuments.mx/reader030/viewer/2022021422/58efebe81a28ab93358b45f7/html5/thumbnails/22.jpg)
Using in Angularclass Auth { constructor($http) { this.$http = $http; } get(x) { return this.$http.get('...'); } } export Auth;
![Page 23: Es6 everywhere](https://reader030.vdocuments.mx/reader030/viewer/2022021422/58efebe81a28ab93358b45f7/html5/thumbnails/23.jpg)
Registering with Angularimport { Auth } from './auth'; import angular from 'angular';
angular.module('Demo.services', []) .service('Auth', Auth);
![Page 24: Es6 everywhere](https://reader030.vdocuments.mx/reader030/viewer/2022021422/58efebe81a28ab93358b45f7/html5/thumbnails/24.jpg)
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});
![Page 25: Es6 everywhere](https://reader030.vdocuments.mx/reader030/viewer/2022021422/58efebe81a28ab93358b45f7/html5/thumbnails/25.jpg)
Destructuring
{$scope, $q, $timeout, Auth, Modal} == { $scope: $scope, $q: $q, $timeout, $timeout, Auth: Auth, Modal: Modal
}
![Page 26: Es6 everywhere](https://reader030.vdocuments.mx/reader030/viewer/2022021422/58efebe81a28ab93358b45f7/html5/thumbnails/26.jpg)
Webpacksimple config file
super fast dev server (in-memory transpilation)
import whatever (js, css, html, json)
possibility to pack chunks for lazy loading
![Page 27: Es6 everywhere](https://reader030.vdocuments.mx/reader030/viewer/2022021422/58efebe81a28ab93358b45f7/html5/thumbnails/27.jpg)
‘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
![Page 28: Es6 everywhere](https://reader030.vdocuments.mx/reader030/viewer/2022021422/58efebe81a28ab93358b45f7/html5/thumbnails/28.jpg)
Debuggingsource maps
debug in inspector normally
![Page 29: Es6 everywhere](https://reader030.vdocuments.mx/reader030/viewer/2022021422/58efebe81a28ab93358b45f7/html5/thumbnails/29.jpg)
Tests using ES6webpack + karma
configured in kick
share mocks between dev & unit-tests & integration tests
![Page 30: Es6 everywhere](https://reader030.vdocuments.mx/reader030/viewer/2022021422/58efebe81a28ab93358b45f7/html5/thumbnails/30.jpg)
Config files using ES6 (node 4.2.1)webpack config file
gulpfile
karma config file
etc.
![Page 31: Es6 everywhere](https://reader030.vdocuments.mx/reader030/viewer/2022021422/58efebe81a28ab93358b45f7/html5/thumbnails/31.jpg)
Angular 2 https://github.com/500tech/angular2-webpack-es6
![Page 33: Es6 everywhere](https://reader030.vdocuments.mx/reader030/viewer/2022021422/58efebe81a28ab93358b45f7/html5/thumbnails/33.jpg)
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> ); } }
![Page 34: Es6 everywhere](https://reader030.vdocuments.mx/reader030/viewer/2022021422/58efebe81a28ab93358b45f7/html5/thumbnails/34.jpg)
Node
![Page 35: Es6 everywhere](https://reader030.vdocuments.mx/reader030/viewer/2022021422/58efebe81a28ab93358b45f7/html5/thumbnails/35.jpg)
Node 4.2.1https://nodejs.org/en/docs/es6/ ClassesPromises Arrow functions let & const Template strings more…
![Page 36: Es6 everywhere](https://reader030.vdocuments.mx/reader030/viewer/2022021422/58efebe81a28ab93358b45f7/html5/thumbnails/36.jpg)
Babel-nodeuse for development
$ babel-node server.js
$ babel-node-debug server.js
production
$ babel src —out-dir dist
![Page 37: Es6 everywhere](https://reader030.vdocuments.mx/reader030/viewer/2022021422/58efebe81a28ab93358b45f7/html5/thumbnails/37.jpg)
Express hello world ES6https://github.com/500tech/nodejs-express-es6
![Page 38: Es6 everywhere](https://reader030.vdocuments.mx/reader030/viewer/2022021422/58efebe81a28ab93358b45f7/html5/thumbnails/38.jpg)
Check the slides:
Follow us:http://blog.500tech.com
Keep in touch:
@500techil
Questions?
http://www.slideshare.net/500tech/es6-everywhere
![Page 39: Es6 everywhere](https://reader030.vdocuments.mx/reader030/viewer/2022021422/58efebe81a28ab93358b45f7/html5/thumbnails/39.jpg)
THANK YOU