language become
When one
of
just one tool…
dependent
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
Pedro Nauck
FRONTEND DEVELOPER
@pedronauck
pedronauck.com
Slide 23
Slide 23 text
Agenda
…
Slide 24
Slide 24 text
A loooot
of code
Slide 25
Slide 25 text
HISTORY
A lit bit about
Slide 26
Slide 26 text
1994
1989
First proposal of World Wide Web
by Tim Bernes Lee
Born Netscape as the first real webbrowser
Slide 27
Slide 27 text
1994
1989
First proposal of World Wide Web
by Tim Bernes Lee
Born Netscape as the first real webbrowser
Slide 28
Slide 28 text
1995
INTERNACIONAL
1997
Works in the creation of the
first version of what will be
Javascript in the future
Javascript is submitted to ECMA International
Brendan Eich
Slide 29
Slide 29 text
1995
MochaScript
LiveScript
Javascript
Slide 30
Slide 30 text
Influences
SCHEME SELF JAVA
Dialecto of Lisp
Funcional Programming
Dialect of Smalltalk
Prototype Based
Dinamically Type
Just-in-time Compilation
Syntax and name
1995
Slide 31
Slide 31 text
10days
after
Slide 32
Slide 32 text
1995
✓ Imperative and Structured (Have a lot of things about C. Except scope)
✓ Weakly typed and Dynamic typed
✓ Object and Event based (Asyncronous)
✓ Functional Language (Callback, closures, function scoping)
✓ Prototype Based with constructors. Non-classical OOP.
Characteristics
JS
Slide 33
Slide 33 text
1995
1997
INTERNACIONAL
Javascript is submitted to ECMA International
Works in the creation of the
first version of what will be
Javascript in the future
Brendan Eich
Slide 34
Slide 34 text
1997
✓ Attempts to standardize (IE Sucks)
✓ Netscape submitted JS to ECMA Internacional
✓ ECMAScript was created (ECMA-262 Edition 1)
Script
Slide 35
Slide 35 text
1998
1999
ES2
ES3
Start to work with RegExp
Better strings handling
Exception suport with Try/Catch block
Just some editorial changes to
meet ISO requirements.
Slide 36
Slide 36 text
1998
1999
ES2
ES3
Start to work with RegExp
Better strings handling
Exception suport with Try/Catch block
Just some editorial changes to
meet ISO requirements.
Slide 37
Slide 37 text
2000
2002
JSON
EX4, Classes, Iterators, Generators, Block Scope
Suport with Flash/ActionsScript
Was abandoned in 2004
Simple object-based structure
To explore Ajax capabilities
ES4
Slide 38
Slide 38 text
2000
2002
JSON
EX4, Classes, Iterators, Generators, Block Scope
Suport with Flash/ActionsScript
Was abandoned in 2004
Simple object-based structure
To explore Ajax capabilities
ES4
Slide 39
Slide 39 text
2006
2009
A better way to manipulate DOM
and Ajax methods
Ryan Dahl introduces NodeJS at JSConf EU conference
Javascript in the server side using V8
Slide 40
Slide 40 text
2006
2009
A better way to manipulate DOM
and Ajax methods
Ryan Dahl introduces NodeJS at JSConf EU conference
Javascript in the server side using V8
Slide 41
Slide 41 text
2011
2013
ES5 Strict mode
Native JSON support
Function.prototype.bind
A better Array and Object suport
ES6
Fix all these things!
Slide 42
Slide 42 text
2011
2013
ES5 Strict mode
Native JSON support
Function.prototype.bind
A better Array and Object suport
ES6
Fix all these things!
For Of
Replaces for-in
New iterator (other, yeah!)
Works fine with Array and Object
Slide 60
Slide 60 text
For Of
var student = {
name: 'John',
age: 23,
city: 'Miami'
};
for (var prop in student) {
console.log(prop) // name, age, city
}
for (var prop of student) {
console.log(prop) // John, 23, Miami
}
Slide 61
Slide 61 text
For Of
var student = {
name: 'John',
age: 23,
city: 'Miami'
};
for (var prop in student) {
console.log(prop) // name, age, city
}
for (var prop of student) {
console.log(prop) // John, 23, Miami
}
Slide 62
Slide 62 text
For Of
var student = {
name: 'John',
age: 23,
city: 'Miami'
};
for (var prop in student) {
console.log(prop) // name, age, city
}
for (var prop of student) {
console.log(prop) // John, 23, Miami
}
Slide 63
Slide 63 text
For Of
var student = {
name: 'John',
age: 23,
city: 'Miami'
};
for (var prop in student) {
console.log(prop) // name, age, city
}
for (var prop of student) {
console.log(prop) // John, 23, Miami
}
Slide 64
Slide 64 text
For Of
// ES6
var names = ['John', 'Peter', 'Michael'];
for (var name of names) {
console.log(name) // John, Peter, Michael
}
Slide 65
Slide 65 text
For Of
// ES5
var students = [
{ name: 'John', age: 16 },
{ name: 'Peter' age: 23 },
{ name: 'Michael', age: 25 }
];
var adults = students.filter(function(student) {
return student.age > 18;
});
Array Comprehensions
Slide 66
Slide 66 text
For Of Array Comprehensions
// ES6
var students = [
{ name: 'John', age: 16 },
{ name: 'Peter' age: 23 },
{ name: 'Michael', age: 25 }
];
var adults = [for (s of students) if (s.age > 18)];
Slide 67
Slide 67 text
For Of Array Comprehensions
// ES6
var students = [
{ name: 'John', age: 16 },
{ name: 'Peter' age: 23 },
{ name: 'Michael', age: 25 }
];
var adults = [for (s of students) if (s.age > 18)];
Slide 68
Slide 68 text
The new var
Fix hoisting problems
Let (Block Scoping)
Slide 69
Slide 69 text
Let (Block Scoping)
// ES5
(function() {
})();
var message = 'hello world';
console.log(message); // hello world
Slide 70
Slide 70 text
Let (Block Scoping)
// ES5
(function() {
})();
var message = 'hello world';
console.log(message); // hello world
Slide 71
Slide 71 text
Let (Block Scoping)
// ES6
(function() {
console.log(message); // ReferenceError
let message = 'hello world';
})();
Slide 72
Slide 72 text
Let (Block Scoping)
// ES5
var handlers = [];
for (var count = 0; count < 3; count++) {
handlers[count] = function () {
console.log(count);
}
}
handlers[0](); // "2"
handlers[1](); // "2"
handlers[2](); // "2"
Slide 73
Slide 73 text
Let (Block Scoping)
// ES5
var handlers = [];
for (var count = 0; count < 3; count++) {
(function (i) {
handlers[i] = function () {
console.log(i)
};
})(count);
}
handlers[0](); // "0"
handlers[1](); // "1"
handlers[2](); // "2"
Template Literal
Allows string literals with embedded expressions
Multiline suport
Slide 89
Slide 89 text
Template Literal
Slide 90
Slide 90 text
Template Literal
// ES5
var name = 'John';
var age = 23;
console.log('My name is ' + name + '. I\'m ' + age + '.');
Slide 91
Slide 91 text
Template Literal
// ES6
var name = 'John';
var age = 23;
console.log(`My name is ${name}. I\'m ${age}`);
Slide 92
Slide 92 text
Template Literal
// ES6
var name = 'John';
var age = 23;
console.log(`My name is ${name}. I\'m ${age}`);
Slide 93
Slide 93 text
Template Literal
// ES5
var className = 'myClass';
var content = 'Hello world';
var div = '
' +
'
' + content + '
' +
'
';
Slide 94
Slide 94 text
Template Literal
// ES6
let className = 'myClass';
let content = 'Hello world';
let div = `
${content}
`;
Slide 95
Slide 95 text
Default Parameters
Slide 96
Slide 96 text
// ES5
var isApproved = function(grades, base) {
base = base || 7;
var average = grades.reduce(function(sum, num) {
return sum + num;
}) / grades.length;
return average >= base;
};
Default Parameters
Slide 97
Slide 97 text
// ES5
var isApproved = function(grades, base) {
base = base || 7;
var average = grades.reduce(function(sum, num) {
return sum + num;
}) / grades.length;
return average >= base;
};
Default Parameters
Slide 98
Slide 98 text
Default Parameters
// ES6
let isApproved = (grades, base = 7) => {
let len = grades.length;
let avg = grades.reduce((sum, num) => {
return (sum + num) / len;
};
return avg >= base;
};
Slide 99
Slide 99 text
Default Parameters
// ES6
let isApproved = (grades, base = 7) => {
let len = grades.length;
let avg = grades.reduce((sum, num) => {
return (sum + num) / len;
};
return avg >= base;
};
Slide 100
Slide 100 text
Rest Parameters
Allow functions with variable number of params
Spread Operator
Allow to spread variables into parameters
Slide 107
Slide 107 text
Spread Operator
// ES5
var calcAverage = function(x, y, z) {
return (x + y + z) / 3;
};
var grades = [70, 80, 85];
calcAverage.apply(null, grades);
Slide 108
Slide 108 text
Spread Operator
// ES5
var calcAverage = function(x, y, z) {
return (x + y + z) / 3;
};
var grades = [70, 80, 85];
calcAverage.apply(null, grades);
Slide 109
Slide 109 text
Spread Operator
// ES5
var calcAverage = function(x, y, z) {
return (x + y + z) / 3;
};
var grades = [70, 80, 85];
calcAverage.apply(null, grades);
Slide 110
Slide 110 text
Spread Operator
// ES6
let calcAverage = (x, y, z) => (x + y + z) / 3;
let grades = [70, 80, 85];
calcAverage(...grades);
Slide 111
Slide 111 text
Spread Operator
// ES6
let calcAverage = (x, y, z) => (x + y + z) / 3;
let grades = [70, 80, 85];
calcAverage(...grades);
Slide 112
Slide 112 text
Spread Operator
// ES6
let names = ['Peter', 'John', ‘Michael'];
let firstArr = [];
let secondArr = [];
firstArr.push(...names);
secondArr.push(names);
console.log(firstArr.length); // 3
console.log(secondArr.length); // 1
Slide 113
Slide 113 text
Spread Operator
// ES6
let names = ['Peter', 'John', ‘Michael'];
let firstArr = [];
let secondArr = [];
firstArr.push(...names);
secondArr.push(names);
console.log(firstArr.length); // 3
console.log(secondArr.length); // 1
Slide 114
Slide 114 text
Spread Operator
// ES6
let names = ['Peter', 'John', ‘Michael'];
let firstArr = [];
let secondArr = [];
firstArr.push(...names);
secondArr.push(names);
console.log(firstArr.length); // 3
console.log(secondArr.length); // 1
Slide 115
Slide 115 text
Spread Operator
// ES6
let names = ['Peter', 'John', ‘Michael'];
let firstArr = [];
let secondArr = [];
firstArr.push(...names);
secondArr.push(names);
console.log(firstArr.length); // 3
console.log(secondArr.length); // 1
Slide 116
Slide 116 text
Spread Operator
// ES6
let names = ['Peter', 'John', ‘Michael'];
let firstArr = [];
let secondArr = [];
firstArr.push(...names);
secondArr.push(names);
console.log(firstArr.length); // 3
console.log(secondArr.length); // 1
Slide 117
Slide 117 text
Destructuring Assigment
Use data-structure to declare elements
Functions with multiple returns
Slide 118
Slide 118 text
Destructuring Array
// ES5
var name = 'John';
var city = 'California';
var age = 23;
// ES6
let [name, city, age] = ['John', 'California', 23];
Slide 119
Slide 119 text
Destructuring Array
// ES5
var name = 'John';
var city = 'California';
var age = 23;
// ES6
let [name, city, age] = ['John', 'California', 23];
Slide 120
Slide 120 text
Destructuring Array
// ES5
var foo = function(a, b) {
return [ a + 1, b + 2 ];
};
var a = foo()[0];
var b = foo()[1];
// ES6
let foo = (a, b) => [a + 1, b + 2];
let [a, b] = foo();
Slide 121
Slide 121 text
Destructuring Array
// ES3, ES5
var foo = function(a, b) {
return [ a + 1, b + 2 ];
};
var a = foo()[0];
var b = foo()[1];
// ES6
let foo = (a, b) => [a + 1, b + 2];
let [a, b] = foo();
Slide 122
Slide 122 text
Destructuring Object
// ES5
var location = document.location;
var protocol = location.protocol;
var hostname = location.hostname;
var port = location.port;
// ES6
let { protocal, hostname, port } = document.location;
Slide 123
Slide 123 text
Destructuring Object
// ES5
var location = document.location;
var protocol = location.protocol;
var hostname = location.hostname;
var port = location.port;
// ES6
let { protocal, hostname, port } = document.location;
Slide 124
Slide 124 text
Destructuring Object
// ES5
var foo = function() { return 'foo'; }
var bar = function() { return 'bar'; }
module.exports = {
foo: foo,
bar: barr
};
// ES6
let foo = () => 'foo';
let foo = () => 'bar';
module.exports = { foo, bar };
Slide 125
Slide 125 text
Destructuring Object
// ES5
var foo = function() { return 'foo'; }
var bar = function() { return 'bar'; }
module.exports = {
foo: foo,
bar: barr
};
// ES6
let foo = () => 'foo';
let foo = () => 'bar';
module.exports = { foo, bar };
Slide 126
Slide 126 text
Destructuring Object
// ES5
var foo = function(opts) {
var bar = opts.bar;
var baz = opts.baz;
return bar + baz;
};
// ES6
let foo = ({bar, baz}) => bar + baz;
// ES6
let foo = ({b1: bar, b2: baz}) => b1 + b2;
Slide 127
Slide 127 text
Destructuring Object
// ES5
var foo = function(opts) {
var bar = opts.bar;
var baz = opts.baz;
return bar + baz;
};
// ES6
let foo = ({bar, baz}) => bar + baz;
// ES6
let foo = ({b1: bar, b2: baz}) => b1 + b2;
Slide 128
Slide 128 text
Destructuring Object
// ES5
var foo = function(opts) {
var bar = opts.bar;
var baz = opts.baz;
return bar + baz;
};
// ES6
let foo = ({bar, baz}) => bar + baz;
// ES6
let foo = ({b1: bar, b2: baz}) => b1 + b2;
Slide 129
Slide 129 text
Generators
Better way to manage flows
Yield token allow control returns
Slide 130
Slide 130 text
delivery
by part
Slide 131
Slide 131 text
Generators
let idMaker = function* () {
let index = 0;
while(true) {
yield index++
}
};
let gen = idMaker();
console.log(gen.next()) // { value: 1, done: false }
console.log(gen.next()) // { value: 2, done: false }
console.log(gen.next()) // { value: 3, done: false }
Slide 132
Slide 132 text
Generators
let idMaker = function* () {
let index = 0;
while(true) {
yield index++
}
};
let gen = idMaker();
console.log(gen.next()) // { value: 1, done: false }
console.log(gen.next()) // { value: 2, done: false }
console.log(gen.next()) // { value: 3, done: false }
Slide 133
Slide 133 text
Generators
let idMaker = function* () {
let index = 0;
while(true) {
yield index++
}
};
let gen = idMaker();
console.log(gen.next()) // { value: 1, done: false }
console.log(gen.next()) // { value: 2, done: false }
console.log(gen.next()) // { value: 3, done: false }
Slide 134
Slide 134 text
Generators
user.tasks = (function* () {
let a = yield $.ajax('http://get/user');
let b = yield $.ajax('http://process/user', a);
yield $.ajax('http://save/user', b);
})();
Slide 135
Slide 135 text
Generators
user.tasks.next() // gets the user
.then(user => {
// we do something with the user and then...
return user.tasks.next(user);
})
.then(user => {
// we do something else after the user
// has been processed and then...
return user.tasks.next(user);
})
.then(user => {
// final operations here
});
Slide 136
Slide 136 text
Generators
user.tasks.next() // gets the user
.then(user => {
// we do something with the user and then...
return user.tasks.next(user);
})
.then(user => {
// we do something else after the user
// has been processed and then...
return user.tasks.next(user);
})
.then(user => {
// final operations here
});
Slide 137
Slide 137 text
Generators
user.tasks.next() // gets the user
.then(user => {
// we do something with the user and then...
return user.tasks.next(user);
})
.then(user => {
// we do something else after the user
// has been processed and then...
return user.tasks.next(user);
})
.then(user => {
// final operations here
});
Slide 138
Slide 138 text
Generators
user.tasks.next() // gets the user
.then(user => {
// we do something with the user and then...
return user.tasks.next(user);
})
.then(user => {
// we do something else after the user
// has been processed and then...
return user.tasks.next(user);
})
.then(user => {
// final operations here
});
Slide 139
Slide 139 text
Generators
user.tasks.next() // gets the user
.then(user => {
// we do something with the user and then...
return user.tasks.next(user);
})
.then(user => {
// we do something else after the user
// has been processed and then...
return user.tasks.next(user);
})
.then(user => {
// final operations here
});
Slide 140
Slide 140 text
Classes
Classical OOP
Allow single inheritance
Slide 141
Slide 141 text
Classes
class Vehicle {
constructor(name, year) {
this.name = name;
this.year = year;
}
get name() {
return `This is a ${this.name}`;
}
get year() {
return `Year of manufacture: ${this.year}`;
}
set name(name) {
this.name = name.toTitleize();
}
}
Slide 142
Slide 142 text
Classes
class Vehicle {
constructor(name, year) {
this.name = name;
this.year = year;
}
get name() {
return `This is a ${this.name}`;
}
get year() {
return `Year of manufacture: ${this.year}`;
}
set name(name) {
this.name = name.toTitleize();
}
}
Slide 143
Slide 143 text
Classes
class Vehicle {
constructor(name, year) {
this.name = name;
this.year = year;
}
get name() {
return `This is a ${this.name}`;
}
get year() {
return `Year of manufacture: ${this.year}`;
}
set name(name) {
this.name = name.toTitleize();
}
}
Slide 144
Slide 144 text
Classes
var fusca = new Vehicle('Fusca', 1976);
fusca.name = 'fuxxca';
// Fuxxca
console.log(fusca.name);
// This is a Fuxxca
console.log(fusca.year);
// Year of manufacture: 1976
Slide 145
Slide 145 text
Classes
class Car extends Vehicle {
constructor(name, brand, year) {
super(name, year)
this.brand = brand;
}
}
let fusca = new Car('Fusca', 'volkswagen', 1976);
Slide 146
Slide 146 text
Classes
class Car extends Vehicle {
constructor(name, brand, year) {
super(name, year)
this.brand = brand;
}
}
let fusca = new Car('Fusca', 'volkswagen', 1976);
Modules
Native way to build app with a modular approach
Slide 152
Slide 152 text
Modules
// foobar.js
var foo = 'foo';
var bar = 'bar';
export { foo, bar };
// app.js
import { foo, bar } from 'foobar';
console.log(foo); // foo
Named Exports
Slide 153
Slide 153 text
Modules Default Exports
// car.js
export default class Car() {
constructor(name) {
this.name = name;
}
}
// main.js
import Car from 'car';
let fusca = new Car('Fusca');
Slide 154
Slide 154 text
Modules All Exports
// foobar.js
let foo = 'foo';
let bar = 'bar';
export { foo, bar };
// main.js
module foobar from ‘foobar';
console.log(foobar.foo) // 'foo'
console.log(foobar.bar) // 'bar'
Slide 155
Slide 155 text
How can I use
today?
ES6
Modern browser supports partially
NodeJS supports many features (—harmony flag)
Transpilers and polyfills
June 2015
Slide 156
Slide 156 text
transpiler
6to5
Have a lot of features implemented
CLI-Tool working as a Node REPL
Have a good integration with Gulp/Grunt
github.com/sebmck/6to5
Slide 157
Slide 157 text
var gulp = require('gulp');
var to5 = require('gulp-6to5');
gulp.task('default', function () {
return gulp.src('src/app.js')
.pipe(to5())
.pipe(gulp.dest('dist'));
});
github.com/sindresorhus/gulp-6to5