ES2015, an introduction
By Andrea Stagi, full-stack deveLover @ Nephila
Transpile the code.. again?
Yes, but... this is the future!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/299675/images/1859844/Emmett_Brown_1885.png)
Bye Bye Coffeescript?
Introducing
http://babeljs.io/
![](https://s3.amazonaws.com/media-p.slid.es/uploads/299675/images/1860892/9637642.png)
Babel is a transpiler for JavaScript best known for its ability to turn ES2015 into code that runs in your browser today
const input = [1, 2, 3];
console.log(
input.map(item => item + 1)
);
var input = [1, 2, 3];
console.log(input.map(
function (item) {
return item + 1;
}
));
![](https://s3.amazonaws.com/media-p.slid.es/uploads/299675/images/1860892/9637642.png)
TRANSPILE
github.com/DjangoBeer/es6samples
![](https://s3.amazonaws.com/media-p.slid.es/uploads/299675/images/1859825/687474703a2f2f6f63746f6465782e6769746875622e636f6d2f696d616765732f66726f6e742d656e642d636f6e66746f6361742e706e67.png)
Classes
class Person {
constructor(firstName, lastName, age=18) {
this._firstName = firstName;
this._lastName = lastName;
this._age = age;
}
getIdentityCard() {
// ....
}
}
class FriendlyGuy extends Person {
constructor(firstName, lastName, age=18) {
super(firstName, lastName, age);
this._friends = [];
}
getIdentityCard() {
// ....
}
addFriend(friend) {
// ....
}
}
Generators
// .....
pullEar() {
let that = this;
var pullEarActions = {
[Symbol.iterator]: function*() {
for (let i = 1; i <= that._age; i++) {
yield i;
}
}
};
return pullEarActions;
}
// .....
Install BABEL CORE
npm install babel --save-dev
<script src="node_modules/babel/polyfill.js">
</script>
OR USING MODULES IMPORT... (COMING SOON)
Template Strings
console.log(`I am ${this._firstName} !`);
ARROWS
// ......
showFriends() {
this._friends.forEach(f =>
console.log(
// Use this._firstName and
// f._firstName
)
);
}
// .......
NOTE: Unlike functions, arrows share the same lexical ""this"" as their surrounding code
Shorthand object literals
// .....
getIdentityCard() {
let name = this._firstName;
name += ' ' + this._lastName;
let age = this._age;
return {name, age}
}
// .....
{ name: 'Andrea', AGE: 28 }
Modules
export class Person {
// .....
}
person.es6.js
import {Person} from './person.es6';
import '../node_modules/babel/polyfill'
export class FriendlyGuy extends Person {
// ....
}
friendlyguy.es6.js
import {FriendlyGuy} from './friendlyguy.es6';
export function main() {
let andrea = new FriendlyGuy('Andrea', 'Stagi', 28);
let mark = new FriendlyGuy('Mark', 'Iozz', 27);
let matt = new FriendlyGuy('Matt', 'Lap', 29);
andrea.addFriend(mark);
andrea.addFriend(mark);
andrea.showFriends();
mark.showFriends();
for (var age of andrea.pullEar()) {
// truncate the sequence at 15
if (age == 15) {
break;
}
console.log(`${age}!!`);
}
console.log(mark.getIdentityCard());
}
window.main = main;
ES5
BABELIFY
ES2015 CODE with IMPORT
Browserify
Building & LintinG
https://github.com/DjangoBeer/es6samples/blob/master/gulpfile.js
![](https://s3.amazonaws.com/media-p.slid.es/uploads/299675/images/1863091/resized_business-cat-meme-generator-business-can-wait-now-it-s-time-for-your-questions-e5d61c.jpg)
Twitter: @4stagi
Github: github.com/astagi
Email: a.stagi@nephila.it
![](https://s3.amazonaws.com/media-p.slid.es/uploads/andreastagi/images/1224435/537363.png)
ES2015
By Andrea Stagi
ES2015
A fantastic step forward for the JavaScript language.
- 2,715