The document presents an overview of ES6 features, including classes, inheritance, promises, modules, and arrow functions, explained by Adam Klein, an experienced developer. It discusses the use of transpilers for compatibility and demonstrates practical coding examples with ES6 syntax, particularly in the context of Angular and React. Additionally, it emphasizes the integration of tools like Babel and Webpack for development and debugging in modern JavaScript applications.

1. ES6
Everywhere
Adam Klein

2. The “future” is here
Classes & Inheritance
Promises
Modules
Arrow functions
Default parameters
and more…

3. ES 2015

4. Adam Klein
- Developing for >18 years
- Development, Consulting & Training
in Angular, React & Node
- International clients
CTO @ 500Tech

5. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa

6. Browser Compatibility
Meaningless
Transpilers will always precede the slowest browser
http://kangax.github.io/compat-table/es6/

7. Babel JS transpiler
Compatibility
Speed
Debugging
Plugins
JSX
Output code

8. 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

9. ES6

10. Classes
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
move(x, y) {
this.x += x;
this.y += y;
}
}

11. Inheritance
class AxisPoint extends Point {
constructor(x) {
super(x, 0);
}
move(x) {
super.move(x, 0);
}
}
transpiled code

12. modules
// tree.ctrl.js
import BaseCtrl from ‘base';
class TreeCtrl extends BaseCtrl {
}
// base.ctrl.js
export default class BaseCtrl {
}

13. 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;
});
}

14. people.map(function(p) {
return p.name;
});
people.map(p => p.name);
Sugar!

15. Default parameters
http(url, method='GET', headers={})
http(url, method, headers) {
method = method || 'GET';
headers = headers || {};
}

16. More cool features
I bet you didn’t know

17. 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];

18. “Named” parameters
function connect(
{host = ‘localhost',
port = 9000,
username,
password} = {})
connect({port: 9002, username: ‘adam'});
connect();

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

20. string templates
(String Interpolation)
let name = 'Adam Klein'
template = `<div>
<h1>Hello ${name}</h1>
<a>Have a good day!</a>
</div>
`

21. ES6 in Angular

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

23. Registering with Angular
import { Auth } from './auth';
import angular from 'angular';
angular.module('Demo.services', [])
.service('Auth', Auth);

24. 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});

25. Destructuring
{$scope, $q, $timeout, Auth, Modal} ==
{
$scope: $scope,
$q: $q,
$timeout, $timeout,
Auth: Auth,
Modal: Modal
}

26. Webpack
simple config file
super fast dev server (in-memory transpilation)
import whatever (js, css, html, json)
possibility to pack chunks for lazy loading

27. ‘Kick’ - Angular best practices
Great 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

28. Debugging
source maps
debug in inspector normally

29. Tests using ES6
webpack + karma
configured in kick
share mocks between dev & unit-tests & integration tests

30. Config files using ES6 (node 4.2.1)
webpack config file
gulpfile
karma config file
etc.

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

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

33. Component = class
import 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>
);
}
}

34. Node

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

36. Babel-node
use for development
$ babel-node server.js
$ babel-node-debug server.js
production
$ babel src —out-dir dist

37. Express hello world ES6
https://github.com/500tech/nodejs-express-es6

38. Check the slides:
Follow us:
http://blog.500tech.com
Keep in touch:
@500techil
Questions?
http://www.slideshare.net/500tech/es6-everywhere
adam@500tech.com

39. THANK YOU