JS awesomeness or how will ES6 help me build better apps ?

JS awesomeness!
or How will ES6 help me build better apps ?
2
Plamen Stoev
Senior Front-end Developer @ MentorMate
@pstoevPlamen Stoev
April 4, 2015

Agenda
 Brief history of JavaScript
 Why EcmaScript 6 ?
 Environments to run ES6
 Give me the new stuff ?
3 April 4, 2015

Brief History of JavaScript
Notable figures
Brendan Eich
- Co-founder of Mozilla Foundation
- CTO @ Mozilla (resigned)
- CEO @ Mozilla (resigned)
- Creator of JavaScript - 1995
4 April 4, 2015

Notable figures
Douglas Crockford
aka (The JavaScript Guy)
- JSON
- JSLint
5 April 4, 2015

Glossary
EcmaScript – synonym for JavaScript
Ecma International – standards organization
Ecma-262 – The official EcmaScript specification
EcmaScript5 – 5th edition of Ecma-262
Timeline:
EcmaScript 3 – Dec 1999
EcmaScript 5 - Dec 2009
EcmaScript 6 (ES.next) – Publication process starts March 2015
EcmaScript 7 (TBA)
6 April 4, 2015

Why “Harmony” ?
What is “Harmony” ?
7 April 4, 2015
Photo by Alberto Giorgio
A superset of ES6

Why EcmaScript 6 ?
Overview
Why a new version ?
What problem does it solve ?
“The purpose of a programming language is to aid programmers in
producing error-free programs”
-- D. Crockford
8 April 4, 2015

Agenda
So far
 Brief history of JavaScript
 Why EcmaScript 6 ?
 Environments to run ES6
 So what’s new ?
9 February 13, 2015

Environments to run ES6
Overview
 Server-side environments
 Client-side environments
 Transpilers
Note: ES6 currently runs in strict mode only
10 April 4, 2015

Server-side
11 April 4, 2015
node –-harmony app.js

Client-side
12 April 4, 2015
chrome://flags/

Transpilers
13 April 4, 2015
npm install babel
Check out the
online transpiler!

So what’s new ?
Overview
 Arrow function syntax
 Operators let, const
 Weak maps
 Generators
 Destructuring
 Object.observe
 Other interesting ES6 features
14 April 4, 2015

So what’s new ?
Arrow function syntax
Note: ‘this’ is preserving context of the containing method
15 April 4, 2015

So what’s new ?
let, const
Operators let and const – the new ‘var’.
They are “visible” in the current block scope only
Prevents hoisting and global scope pollution
16 April 4, 2015

So what’s new ?
Weak maps
Weird naming :)
17 April 4, 2015

So what’s new ?
Generators
18 April 4, 2015
 Allows function execution to be “paused”
 You write synchronous code

So what’s new ?
Destructuring - Arrays
19 April 4, 2015

So what’s new ?
Destructuring - Objects
20 April 4, 2015

So what’s new ?
Object.observe
It’s a ES7 feature!
21 April 4, 2015

So what’s new ?
Other features worth mentioning
 More object-related methods – String.includes, parseInt goes in Number,
Array.from, more Math.* methods for precise computing
 Default values for params – i.e. function(foo, bar = 7, baz = true);
 Rest params: function(foo, bar, …everythingElse)
 Template strings (multi-line strings)
 Modules
 Promises
 Proxies
 Tail calls
 Class syntax
22 April 4, 2015

Useful Links
Overview
 http://wiki.ecmascript.org
 https://developer.mozilla.org/en-
US/docs/Web/JavaScript/New_in_JavaScript
 http://kangax.github.io/compat-table/es6/
 http://babel.io/
 http://iojs.org/
 https://google.github.io/traceur-compiler/demo/repl.html
23 April 4, 2015

Thank you!
Plamen Stoev
Questions?
Senior Front-end Developer
MentorMate
@pstoevPlamen Stoev
24 April 4, 2015

JS awesomeness or how will ES6 help me build better apps ?

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (16)

Similar to JS awesomeness or how will ES6 help me build better apps ?

Similar to JS awesomeness or how will ES6 help me build better apps ? (20)

Recently uploaded

Recently uploaded (20)

JS awesomeness or how will ES6 help me build better apps ?