Talk presented at JSDay.es 2016

1. Carlos Blé
@carlosble
Thanks to the help provided by my colleague…
Alfredo Casado!
ES6 Simplified

2. Why ES6? (Also known as ES2015)
➔ Is the standard since June 2015!
➔ Gets rid of common and annoying gotchas
➔ Preserves all the good parts
➔ Syntactic sugar improves readability
➔ Powerful tools and libraries
➔ ES5 is still deployed into production
@carlosble

3. Simplicity
➔ Among all ES6 features we favor those that are
powerful yet simple. We like simple code:
◆ Pass all tests
◆ Clear, expressive & consistent
◆ Duplicates no behavior
◆ Small - Minimal methods & modules
Kent Beck

4. It’s all about the context!
Developing applications is not like
developing a library or a framework
Cost of understanding/maintaining code
VS
Cost of changing client code
Adapt your practices to the context
@carlosble

5. Power lies in the functions
@carlosble
1 export default {add, subtract};
2 // export default {add: add,
subtract: subtract};
3
4 function add(a + b){…}
5 function subtract(a + b){…}
Usage:
import calculator from ‘./m.js’;
calculator.add(1,1);
Modules (singletons):
1 export default {calculator};
2 // export default {calculator:
calculator};
3 function calculator(){
4 return {add, subtract};
5 }
6 function add(a + b){…}
7 function subtract(a + b){…}
Usage:
import buildCalculator from ‘./f.js’
let calculator = buildCalculator();
calculator.add(1,1);
Factory functions:
No need for IIFE anymore!

6. Do you really need to save memory?
Syntactic sugar for prototypes
class Person {
constructor(name) {
this.name = name;
}
hello() {
return `hi ${this.name}`;
}
}
function Person(name) {
this.name = name;
}
Person.prototype.hello = function()
return "hi " + this.name;
}
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
Warning: We avoid classes as much as we can
@carlosble

7. Aur revoir var!
@carlosble
1
2
3
4
5
6
7
8
9
10
11
Welcome let & const
function useLetInstead(){
const items = ['cat','dog'];
const len = items.length;
const f = [];
for (let i = 0; i < len-1; i++){
f.push(() => items[i]);
}
console.log(f[0]());
}
useLetInstead();
function doNotUseVar(){
var items = ['cat','dog'];
var len = items.length;
var f = [];
for (var i = 0; i < len-1; i++){
f.push(function(){
return items[i];
});
}
console.log(f[0]());
}
doNotUseVar();
1
2
3
4
5
6
7
8
9
10
11

8. Destructuring
const book = {
"author": {
"name": "Bob Sponge",
"email": "bob@gmail.com"
},
"title": "Under the sea",
"other": "stuff"
}
let {author: {name,email}, title} = book
console.log(name); // “Bob Sponge”
console.log(email); // “bob@gmail.com”
console.log(title); // “Under the sea”
var name = book.author.name;
var email = book.author.email;
var title = book.title;
console.log(name); // “Bob Sponge”
@carlosble

9. Simulating named parameters
function errorMessage({
message,
width = 300,
height = 300,
icon = ‘error.png’}){
...
}
function errorMessage(options){
options = options || {};
var width = options.width || 300;
var height = options.end || 300;
var icon = options.icon || ‘error.png’;
...
}
1
2
3
4
5
6
7
1
2
3
4
5
6
7
errorMessage({ message: ‘Ups! sorry’, icon: ‘other-icon.png’});
@carlosble

10. Destructuring + default values
function sum({x = 0, y = 0} = {}){
return x + y;
}
function destruct({a: {x}, b = 1}){
return x + b;
}
sum({x:5});
sum();
destruct();
destruct({a:{x:1}, b: 5});
destruct({a:{x:1}});
destruct({b:1});
1
2
3
4
5
6
7
8
9
10
11
12
13
@carlosble

11. Simulating mandatory parameters
function mandatory() {
throw new Error('Missing parameter');
}
function foo(mustBeProvided = mandatory()) {
return mustBeProvided;
}
function foo(mustBeProvided) {
if (arguments.length < 1) throw ...
if (mustBeProvided === undefined) ...
}
1
2
3
4
5
6
7
1
2
3
4
@carlosble

12. Rest operator
function calculate(multiplier, ...numbers) {
let sum = numbers.reduce(
(accumulator, num) => accumulator + num
);
return multiplier * sum;
}
function calculate() {
var numbers = Array.prototype.slice.call(arguments)
var multiplier = numbers.shift()
var sum = numbers.reduce(
function(accumulator, num){ return accumulator + num;}
)
return multiplier * sum;
}
1
2
3
4
5
6
1
2
3
4
5
6
7
8
@carlosble

13. Promises
function sendFeedback(customer, phone, answers) {
const promises = [];
for (let answer of answers) {
promises.push(new Promise((resolve) => {
answer.send(customer, phone, resolve);
}));
}
return promises;
}
const promises = sendFeedback(customer, phone, answers);
Promise.all(promises).then(() => showSuccessMessage());
1
2
3
4
5
6
7
8
9
10
11
12
@carlosble

14. Babel
@carlosble

15. Tools
➔ Gulp (workflow automation)
➔ Babel (compile to ES5)
➔ Browserify (require in the browser)
➔ ESLint (linter)
➔ Karma (test runner)
➔ Nodemon (manage node servers)
➔ Jasmine (unit tests)
➔ PhantomJs (unit & integration tests)
➔ Nightwatch (end2end tests)
@carlosble

16. Good stuff & References
@carlosble
★ ES6 Katas
http://es6katas.org/
★ Tests end2end con Nightwatch [es] http://miguelviera.com/blog/testing-e2e-con-
nightwatch-js-y-browserstack/
★ Tests de integracion: Gulp+Karma+Jasmine+Nodemon [es]
http://miguelviera.com/blog/integration-tests-con-gulp-karma-jasmine-phantomjs-y-nodemon/
★ Writing a Gulpfile [en]
http://www.carlosble.com/2015/09/es6-browserify-babel-gulp-jasmine/
★ How to fix de ES6 class keyword [en] https://medium.com/javascript-scene/how-to-fix-the-
es6-class-keyword-2d42bb3f4caf#.x4qojp84n
★ Let and Const [en]
https://medium.com/javascript-scene/javascript-es6-var-let-or-const-ba58b8dcde75#.pliox5rso
★ Let and Const in Depth [en]
https://hacks.mozilla.org/2015/07/es6-in-depth-let-and-const/

17. Books! read books!
@carlosble
● Implementation Patterns - Kent Beck
● JavaScript Allongé - Reginald Braithwaite
● JavaScript The Good Parts - Douglas Crockford
● 4 Rules of Simple Design - Corey Haines
More books: http://www.carlosble.
com/2011/02/books-you-should-read/

18. Bonus Track

19. Do you really need inheritance?
@carlosble
1
2
3
4
5
6
7
8
9
10
Template method implemented with functional inheritance:
function childClazz(){
const self = baseClazz({
compute: () => 3
});
return self;
}
console.log(
childClazz().template());
function baseClazz(methods = {}){
let compute = () => 2;
compute = methods.compute ||
compute;
return {
template : () => compute() + 1
};
}
console.log(
baseClazz().template());
1
2
3
4
5
6
7
8
9