Slides for talk I was giving at meet.js Lublin 03.09.2015. I covered the very basics of ES6 features with examples of how they can be mixed with AngularJS framework in it's 1.x versions. Interactive version can be found here: https://github.com/IShotTheSheriff/es2015

1. ES2015
ENHANCEANGULAR1.XAPPLICATIONS
Ernest Nowacki

2. AGENDA
What?
Why?
How?
Raw meat!

3. WHAT?
ES2015 is a significant and the first update to the
language since ES5 was standardized in 2009

4. FEATURES
let + const arrows classes
enhanced object literals modules promises
template strings destructuring default + rest + spread
iterators + for..of generators subclassable built-ins
map + set + weakmap + weakset proxies symbols
math + number + string + array + object APIs binary and octal literals tail calls
unicode

5. WHY?
This Ecma Standard has been adopted by the General
Assembly of June 2015.

7. PROS
Backward compatibility
Less boilerplate
Better maintainability
Better preparation for Angular 2.0
Easier for newcomers
Staying current

8. Slide from Jafar Husain's talk: ES7 evolution of JS

9. CONS
Browser compatibility
Require transpilation
No established best practises
New things to learn

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

11. HOW?
http://babeljs.io

12. SIMPLEINTEGRATION
var gulp = require("gulp");
var babel = require("gulp­babel");
gulp.task("default", function () {
return gulp.src("src/app.js")
.pipe(babel())
.pipe(gulp.dest("dist"));
});

13. ONLINEPLAYGROUND
http://babeljs.io/repl

14. WEBPACK
http://webpack.github.io

15. JUMPSTARTWEBPACK+BABEL+
ANGULAR:GULP-ANGULAR
yo gulp­angular

16. DIVEDEEP

17. LET,CONST,BLOCKSCOPE
let a = 2;
{
let a = 3;
console.log( a ); // 3
}
console.log( a ); // 2
{
const a = 2;
console.log( a ); // 2
a = 3; // TypeError!
}

18. BLOCKSCOPINGES5VSES2015
if (true) {
function weather() {
console.log( "Sun" );
}
} else {
function weather() {
console.log( "Rain" );
}
}
weather();

19. ES5
var funcs = [];
for (var i = 0; i < 5; i++) {
funcs.push( function(){
console.log( i );
});
}
funcs[3](); // 5
ES2015
var funcs = [];
for (let i = 0; i < 5; i++) {
funcs.push( function(){
console.log( i );
});
}
funcs[3](); // 3

20. TEMPORALDEADZONE
(TDZ)

21. TEMPORALDEADZONE(TDZ)
console.log( a ); // undefined
console.log( b ); // ReferenceError!
var a;
let b;
if( typeof a === 'undefined' ){
console.log('a is ok');
}
if( typeof b === 'undefined' ){ //ReferenceError!
console.log('b is ok');
}
let b;
*it's not an issue when using babel

22. (NOTSO)CONST
const arr = ['dog', 'cat', 'snake'];
arr.push('fish');
console.log(arr); // ['dog', 'cat', 'snake', 'fish'];

23. EVOLUTIONOFCONTROLLERS

24. BEGINING
'use strict';
angular.module('app').controller('TodoCtrl', function($scope){
$scope.todos = [];
$scope.newTodo = '' ;
$scope.addTodo = function(todo){
$scope.todos.push(todo);
}
$scope.removeTodo = function (todo) {
$scope.todos.splice($scope.todos.indexOf(todo), 1);
};
});

25. <div ng­controller="TodoCtrl">
<input type="text" ng­model="newTodo">
<button type="button" ng­click="addTodo(newTodo)"></button>
<ul>
<li ng­repeat="todo in todos">
{{todo}}
<button type="button" ng­click="removeTodo(todo)"></button>
</li>
</ul>
</div>

26. SMALLIMPROVEMENTS
(function (){
'use strict';
angular.module('app').controller('TodoCtrl', TodoCtrl);
function TodoCtrl($scope){
$scope.todos = [];
$scope.newTodo = '' ;
$scope.addTodo = function addTodo(todo){
$scope.todos.push(todo);
}
$scope.removeTodo = function removeTodo(todo) {
$scope.todos.splice($scope.todos.indexOf(todo), 1);
};
}
});

27. controllerAs
<div ng­controller="TodoCtrl as ctrl">
<input type="text" ng­model="ctrl.newTodo">
<button type="button" ng­click="ctrl.addTodo(newTodo)"></button>
<ul>
<li ng­repeat="todo in ctrl.todos">
{{todo}}
<button type="button" ng­click="ctrl.removeTodo(todo)"></button
</li>
</ul>
</div>

28. (function (){
'use strict';
angular.module('app').controller('TodoCtrl', TodoCtrl);
function TodoCtrl(){
this.todos = [];
this.newTodo = '' ;
this.addTodo = function addTodo(todo){
this.todos.push(todo);
}
this.removeTodo = function removeTodo(todo) {
this.todos.splice(this.todos.indexOf(todo), 1);
};
}
});

29. ALMOSTTHEREBUT..

30. FINALFORM
(function (){
'use strict';
angular.module('app').controller('TodoCtrl', TodoCtrl);
function TodoCtrl(){
var vm = this;
vm.todos = [];
vm.newTodo = '' ;
vm.addTodo = addTodo;
vm.removeTodo = removeTodo;
function addTodo(todo){
vm.todos.push(todo);
}
function removeTodo(todo) {
vm.todos.splice(vm.todos.indexOf(todo), 1);

31. ES6CLASSES
'use strict';
class TodoCtrl{
constructor(){
this.todos = [];
this.newTodo = '';
}
addTodo(todo){
this.todos.push(todo);
}
removeTodo(todo) {
this.todos.splice(this.todos.indexOf(todo), 1);
};
}
angular.module('app').controller('TodoCtrl', TodoCtrl);

32. ORLY?

33. ES5PROTOTYPES
function TodoCtrl(){
this.todos = [];
this.newTodo = '';
}
TodoCtrl.prototype.addTodo = function(todo){
this.todos.push(todo);
}
TodoCtrl.prototype.removeTodo = function(todo) {
this.todos.splice(this.todos.indexOf(todo), 1);
};
angular.module('app').controller('TodoCtrl', TodoCtrl);

34. SETTERSANDGETTERS
class MyClass {
constructor(){
this._prop = 0;
}
get prop() {
console.log('getter');
return this._prop;
}
set prop(value) {
console.log('setter: ' + value);
this._prop = value;
}
}
let inst = new MyClass();
inst = 123; // setter + 123
inst.prop; // getter //123

35. EASYEXTENDING
class Foo {
constructor(a,b) {
this.x = a;
this.y = b;
}
gimmeXY() {
return this.x * this.y;
}
}
class Bar extends Foo {
constructor(a,b,c) {
super( a, b );
this.z = c;
}
gimmeXYZ() {

36. CLASSSUMMARY
Must be used with new operator, unlike ES5
Foo.call(obj);
It's not hoisted!
Can not declare properties outside of constructor
(except ES7 private proposal)
Can not access super properties in constructor
Constructor is optional

38. HANDLINGDI
class Ctrl{
constructor(Service, AnotherService){
this.Service = Service;
this.AnotherService = AnotherService;
}
doSomething(){
this.Service.doSomething();
}
}

39. MYPREFERREDWAY
let internal;
class Ctrl{
constructor(Service, AnotherService){
internal = {Service, AnotherService};
}
doSomething(){
internal.Service.doSomething();
}
}

40. BECAREFULWITHGETTERS
<span ng­repeat="n in ctrl.items100 track by $index">
{{e2Ctrl.test}}
</span>
class Ctrl{
constructor(){
this.items100 = new Array(100);
this._test = 'some test value';
}
get test(){
console.log('test');
return this._test;
}
}
//100x test + in digest cycles

41. COMMONLOGICINSERVICES
class StateAware{
constructor(){
this.state = {
current: 'init'
};
}
load(){
this.state.current = 'loading';
return this.loadData()
.then((resp) => {
this.data = resp;
})
.finally(() = > {
this.state.current = 'ready';
});
}
}

42. HOWABOUTDIRECTIVES?

43. class Sample {
constructor() {
this.restrict = 'E';
this.scope = {};
this.controller = 'SampleCtrl';
this.controllerAs = 'ctrl';
this.templateUrl = 'sample.html';
this.bindToController = {
info: '='
};
}
}
angular.module('app').directive('sample', () => new Sample());

44. MODULES

45. KEEPINGITSIMPLE
console.log('This will fire on import');
var globalVariable = "This looks bad";
class Ctrl{
something(){
return 'something';
}
}
angular.module('app').controller('Ctrl', Ctrl);
angular.module('app', []);
import 'Ctrl';
console.log(globalVariable);
//This will fire on import
//undefined

46. BEINGMORESPECIFIC
class Service{
something(){
return 'something';
}
}
export default Service;
import Service from './services/Service';
angular.module('app', []).service('Service', Service);

47. BEINGPICKY
class Component{
constructor(){
//.. standard DDO
this.controller = 'Ctrl';
this.controllerAs = 'ctrl';
this.bindToController = true;
this.template = '<div>{{ctrl.something}}</div>';
}
}
class Ctrl{
constructor(){
this.something = 'Some text';
}
}
export { Component, Ctrl };
import {Component, Ctrl} from 'componentDirective';
angular.module('app', [])
.controller('Ctrl', Ctrl)
.directive('component', () => new Component());

48. IMPORTINGWITHALIAS
export function helperFunction(){ // ..}
export function getSomething(){ // ..}
export var randomVariable = 'o_O';
import * as lib from 'helpers';
lib.helperFunction();
console.log(lib.randomVariable);

49. WHYMODULES?
Standarized syntax
Better code organization
Avoid pollution of global namespace

51. let data = [
{id: 1, name: 'John Snow', deleted: true},
{id: 2, name: 'Ned Stark', deleted: true},
//.. far far down ..
{id: 60, name: 'Aria Stark', deleted: false}
];
Standard function
data.filter(function(person){
return !person.deleted;
});
Arrow function
data.filter(person => !person.deleted);

52. USAGEINCALLBACKS
function Clickable(){
this.clicks = 0;
$('.elem').on('click', () => {
this.clicks++;
console.log(this.clicks);
});
}

53. MULTIPLEARGUMENTCALLS
data.forEach((person, index) => {
console.log(`${index}. ${person.name}`);
});

54. SYNTAXGOTCHA
let returnItem = id => ({id: id, name: 'Some name'});

55. SUMMARY
1. Lexical this
2. Can't change this
3. Can't be used with new
4. Don't have arguments array-like object

56. TEMPLATESTRINGS
let name = "Ice Cube";
let greeting = `Hello ${name}!`;
console.log(greeting); //Hello Ice Cube
var text =
`This is
more then one
line!`;
console.log( text );
//This is
//more then one
//line!

57. TAGGING
let message = Currency`You should pay ${value} @currency@ discount.`;
function Currency(templateData, ...args){
return templateData.map((part, index) => {
let str = part;
if( args[index] ){
str = part + String(args[index]);
}
return str.replace('@currency@', 'PLN');
}).join('');
}

58. setOptions(0, 500); //500, 500, blur
DEFAULT,SPREAD,REST
ES5
function setOptions(debounce, interval, event){
debounce = debounce || 500;
interval = interval || 100;
event = event || 'blur';
console.info(debounce, interval, event);
}
setOptions(); //500, 100, blur
setOptions(200); //200, 100, blur
setOptions(undefined, null, 'change'); //500, 100, change

59. setOptions(undefined, null, 'change'); //500, 0, change
ES2015
function setOptions(debounce = 500, interval = 100, event = 'blur'){
console.info(debounce, interval, event);
}
setOptions(); //500, 100, blur
setOptions(200); //200, 100, blur
setOptions(0, 500); //0, 500, blur

60. SPREAD
ES5
function foo(x,y,z) {
console.log( x, y, z );
}
foo.apply( null, [1,2,3] ); // 1 2 3
ES2015
function foo(x,y,z) {
console.log( x, y, z );
}
foo( ...[1,2,3] ); // 1 2 3

61. ANOTHERUSAGEOFSPREAD
let a = [2,3,4];
let b = [ 1, ...a, 5 ];
console.log( b ); // [1,2,3,4,5]

62. REST
function foo(x, y, ...z) {
console.log( x, y, z );
}
foo( 1, 2, 3, 4, 5 ); // 1 2 [3,4,5]

63. ES5
function test(){
var args = Array.prototype.slice.call( arguments );
//do sth
}
ES2015
function test(...args){
//do sth
}

64. DESTRUCTURING,PROPERTYASSIGN
SHORTCUTS
ES5
function data(){
return [1, 2, 3];
}
let tmp = data();
let a = tmp[0], //a = 1
b = tmp[1], //b = 2
c = tmp[2]; //c = 3
ES2015
function data(){
return [1, 2, 3];
}
let [a,b,c] = data(); // a = 1, b = 2, c = 3

65. DESTRUCTURINGOBJECTS
function data(){
return {
firstName: 'John',
lastName: 'Snow',
occupation: 'Lord Commander of the Night's Watch'
};
}
var {firstName, lastName: a, occupation: b} = data();
//firstName = 'John',
//a: 'Snow',
//b: 'Lord Commander of the Night's Watch'

66. UNIVERSITYCLASSIC-VARIABLESWAP
var x = 10, y = 20;
[ y, x ] = [ x, y ];
console.log( x, y ); // 20 10

67. DESTRUCTURENULLORUNDEFINED=
ERROR!
let {x, y} = null;
let {a, b} = undefined;
HOWEVERUNEXISTINGVARIABLES
AREOK
let options = {
a: 1,
b: 2
};
let {a, c} = options;
console.log(a); // 1
console.log(b); //undefined
console.log(c); //undefined

68. SYNTAXGOTCHA
let person = {
id: 1,
address: {
street: 'Przy parku',
city: 'Warszawa'
}
};
let id;
let address;
{id, address} = person; //Error
({id, address} = person); //Ok!

69. OBJECTSANDARRAYSARE
DESTRUCTUREDASREFERENCES!
let color = {
name: 'white',
rgb: [255, 255, 255]
};
let {name: colorName, rgb} = color;
console.log(colorName); //'white'
console.log(rgb); //[255, 255, 255]
console.log(rgb === color.rgb); // true

70. DESTRUCTUREFUNCTIONPARAMS
ES5
function setCookie(name, value, options){
options = options || {};
let secure = options.secure;
let path = options.path;
let domain = options.domain;
//....
}
setCookie('presentation', 'es2015', {
secure: false;
});

71. DESTRUCTUREFUNCTIONPARAMS
ES2015
function setCookie(name, value, {secure, path, domain} = {}){
//...
}
setCookie('presentation', 'es2015', {
secure: false;
});

72. PROMISES

73. ES2015PROMISESYNTAX
var promise = new Promise((resolve, reject) => {
setTimeout(resolve, 1000);
});

74. REMOVINGCALLBACKLEGACYCODE
import LegacyLib from 'LegacyLib';
let internal;
class LegacyLibDecorator{
constructor($q){
internal = {$q};
}
loadData(){
let deferred = $q.defer();
LegacyLib.loadData(
result => deferred.resolve(result),
error => deferred.reject(error)
);
return deferred;
}
}

75. REFACTORUSINGPROMISESYNTAX
import LegacyLib from 'LegacyLib';
let internal;
class LegacyLibDecorator{
constructor($q){
internal = {$q};
}
loadData(){
return $q((resolve, reject) => {
LegacyLib.loadData(
result => resolve(result),
error => reject(error)
);
});
}
}

77. Mozilla Hacks: ES6 in depth
ExploringJS
Feature overview
Babel learn-es6
Great talk to go to next
http://hacks.mozilla.org/category/es6-in-depth
http://exploringjs.com/es6/
http://github.com/lukehoban/es6features
http://babeljs.io/docs/learn-es2015/
https://www.youtube.com/watch?v=DqMFX91ToLw