0
Living in the ES6 Future

TODAY
What is

ES6?
ECMAScript

==
JavaScript
ES5

Array.forEach
Function.bind
Object.create

Object.defineProperty
ES6
ES6

arrow functions
ES6

arrow functions
classes
ES6

arrow functions
classes
rest parameters
ES6

arrow functions
classes
rest parameters
for ... of
ES6
iterators

arrow functions
classes
rest parameters
for ... of
ES6
iterators
generators

arrow functions
classes
rest parameters
for ... of
ES6

arrow functions
classes

iterators rest parameters
generators
destructuring
for ... of
unicode support
arrow functions

ES6

classes

iterators rest parameters
generators
destructuring
for ... of
unicode support
arrow functions

ES6

classes

iterators rest parameters
generators
destructuring
for ... of
block-scoped ...
unicode support
arrow functions
WeakMaps
classes

ES6

iterators rest parameters
generators
destructuring
for ... of
block...
unicode support
arrow functions
WeakMaps
classes
proxies
iterators rest parameters
generators
destructuring
for ... of
blo...
unicode support
arrow functions
WeakMaps
classes
proxies
iterators rest parameters
generators spread operator
destructurin...
unicode support
arrow functions
WeakMaps
classes
proxies
iterators rest parameters
generators spread operator
destructurin...
What does all that

MEAN?
:(
ES6 is Nigh
ES6 The Awesome Parts
ES6 The Refined Parts
The Subtleties of ES6
The Future of JavaScript
rest parameters
function log(level) {
var args =
[].slice.call(arguments,1);
}
rest parameters
function log(level, ...args) {
}
default parameters
function log(message, prefix) {
prefix = prefix || "> ";
console.log(prefix + message);
}
default parameters
function log(message, prefix) {
if (prefix === undefined) {
prefix = "> ";
}
console.log(prefix + messa...
default parameters
function log(message, prefix = "> ") {
console.log(prefix + message);
}
block-scoped vars
console.log(i);
if (false) {
var i = 10;
}
block-scoped vars
var i;
console.log(i);
if (false) {
i = 10;
}
block-scoped vars
console.log(i); // ReferenceError:
if (false) {
// i is not defined
let i = 10;
}
block-scoped vars
if (false) {
let i = 10;
}
console.log(i); // ReferenceError:
// i is not defined
block-scoped vars
for (let i = 0; i < 10; i++) {
// do something
}
console.log(i); // ReferenceError:
// i is not defined
arrow functions
[1, 2, 3].map(function(i) {
return i * i;
});
arrow functions
[1, 2, 3].map(i => i * i);
arrow functions
{
i: 1,
printWithDelay: function() {
setTimeout(function() {
console.log(this.i);
}, 100);
}
}
arrow functions
{
i: 1,
printWithDelay: function() {
var self = this;
setTimeout(function() {
console.log(self.i);
}, 100)...
arrow functions
{
i: 1,
printWithDelay: function() {
setTimeout(function() {
console.log(this.i);
}.bind(this), 100);
}
}
arrow functions
{
i: 1,
printWithDelay: function() {
setTimeout(_.bind(function() {
console.log(this.i);
}, this), 100);
}...
arrow functions
{
i: 1,
printWithDelay: function() {
setTimeout( () => {
console.log(this.i);
}, 100);
}
}
improved literals
return {
name: name,
age: age,
height: height
};
improved literals
return { name, age, height };
improved literals
{
doAThing: function() {
// ...
},
doAnotherThing: function() {
// ...
}
}
improved literals
{
doAThing() {
// ...
},
doAnotherThing() {
// ...
}
}
classes
class Demo {
constructor() {
this.i = 1;
}
print() {
console.log(this.i);
}
}
classes
class Parent {
//
}
class Child extends Parent {
constructor(name) {
super();
this.name = name;
}
}
Much, much more
let { top, left } = e.getClientRect();
function* gen() { yield 1; yield 2; }
for (i of gen()) { log(i); }
...
I have software
to ship to

REAL USERS
Coming Soon(er)
node.js
FirefoxOS

browser plugins
Windows 8
What are my
options?
What can we
use today?
kangax.github.io/es5-compat-table/es6/
If we have
If we have
CoffeeScript --> JavaScript
If we have
CoffeeScript --> JavaScript
IcedCoffeeScript --> JavaScript
If we have
CoffeeScript --> JavaScript
IcedCoffeeScript --> JavaScript
TypedScript --> JavaScript
If we have
CoffeeScript --> JavaScript
IcedCoffeeScript --> JavaScript
TypedScript --> JavaScript
ClojureScript --> JavaSc...
Why not?

JavaScript --> JavaScript
Why not?
JavaScript.next
-->
JavaScript.now
Traceur
Traceur
JavaScript --> JavaScript
Traceur
JavaScript --> JavaScript
...written in JavaScript
Demo
Time
WAIT!
what about modules?
square/es6-module-transpiler
import { foo, bar } from "foobar";
function fooTheBar() {
return foo + bar;
}
export default ...
ES6 all the
things?
Thanks!
@JeremyMorrell
http://rathercurio.us
http://github.com/jmorrell
Living in the ES6 Future, Today
Upcoming SlideShare
Loading in...5
×

Living in the ES6 Future, Today

845

Published on

ES6 is rapidly approaching standardization, but it's going to be years before enough browsers support the new features to use it in production. Should we sit around and wait for browsers, or can we start taking advantage of these new standards now?

In this talk I'll go over some of the new standards and see how we can start to use them in our applications today using transpilers.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
845
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
21
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Living in the ES6 Future, Today"

  1. 1. Living in the ES6 Future TODAY
  2. 2. What is ES6?
  3. 3. ECMAScript == JavaScript
  4. 4. ES5 Array.forEach Function.bind Object.create Object.defineProperty
  5. 5. ES6
  6. 6. ES6 arrow functions
  7. 7. ES6 arrow functions classes
  8. 8. ES6 arrow functions classes rest parameters
  9. 9. ES6 arrow functions classes rest parameters for ... of
  10. 10. ES6 iterators arrow functions classes rest parameters for ... of
  11. 11. ES6 iterators generators arrow functions classes rest parameters for ... of
  12. 12. ES6 arrow functions classes iterators rest parameters generators destructuring for ... of
  13. 13. unicode support arrow functions ES6 classes iterators rest parameters generators destructuring for ... of
  14. 14. unicode support arrow functions ES6 classes iterators rest parameters generators destructuring for ... of block-scoped variables
  15. 15. unicode support arrow functions WeakMaps classes ES6 iterators rest parameters generators destructuring for ... of block-scoped variables
  16. 16. unicode support arrow functions WeakMaps classes proxies iterators rest parameters generators destructuring for ... of block-scoped variables ES6
  17. 17. unicode support arrow functions WeakMaps classes proxies iterators rest parameters generators spread operator destructuring for ... of block-scoped variables ES6
  18. 18. unicode support arrow functions WeakMaps classes proxies iterators rest parameters generators spread operator destructuring for ... of block-scoped variables ES6m d n ! e r o a
  19. 19. What does all that MEAN?
  20. 20. :(
  21. 21. ES6 is Nigh ES6 The Awesome Parts ES6 The Refined Parts The Subtleties of ES6 The Future of JavaScript
  22. 22. rest parameters function log(level) { var args = [].slice.call(arguments,1); }
  23. 23. rest parameters function log(level, ...args) { }
  24. 24. default parameters function log(message, prefix) { prefix = prefix || "> "; console.log(prefix + message); }
  25. 25. default parameters function log(message, prefix) { if (prefix === undefined) { prefix = "> "; } console.log(prefix + message); }
  26. 26. default parameters function log(message, prefix = "> ") { console.log(prefix + message); }
  27. 27. block-scoped vars console.log(i); if (false) { var i = 10; }
  28. 28. block-scoped vars var i; console.log(i); if (false) { i = 10; }
  29. 29. block-scoped vars console.log(i); // ReferenceError: if (false) { // i is not defined let i = 10; }
  30. 30. block-scoped vars if (false) { let i = 10; } console.log(i); // ReferenceError: // i is not defined
  31. 31. block-scoped vars for (let i = 0; i < 10; i++) { // do something } console.log(i); // ReferenceError: // i is not defined
  32. 32. arrow functions [1, 2, 3].map(function(i) { return i * i; });
  33. 33. arrow functions [1, 2, 3].map(i => i * i);
  34. 34. arrow functions { i: 1, printWithDelay: function() { setTimeout(function() { console.log(this.i); }, 100); } }
  35. 35. arrow functions { i: 1, printWithDelay: function() { var self = this; setTimeout(function() { console.log(self.i); }, 100); } }
  36. 36. arrow functions { i: 1, printWithDelay: function() { setTimeout(function() { console.log(this.i); }.bind(this), 100); } }
  37. 37. arrow functions { i: 1, printWithDelay: function() { setTimeout(_.bind(function() { console.log(this.i); }, this), 100); } }
  38. 38. arrow functions { i: 1, printWithDelay: function() { setTimeout( () => { console.log(this.i); }, 100); } }
  39. 39. improved literals return { name: name, age: age, height: height };
  40. 40. improved literals return { name, age, height };
  41. 41. improved literals { doAThing: function() { // ... }, doAnotherThing: function() { // ... } }
  42. 42. improved literals { doAThing() { // ... }, doAnotherThing() { // ... } }
  43. 43. classes class Demo { constructor() { this.i = 1; } print() { console.log(this.i); } }
  44. 44. classes class Parent { // } class Child extends Parent { constructor(name) { super(); this.name = name; } }
  45. 45. Much, much more let { top, left } = e.getClientRect(); function* gen() { yield 1; yield 2; } for (i of gen()) { log(i); } [ for (let i of [1, 2, 3]) i * i ]; var sq = ( for (let i of [1, 2, 3]) i * i ); for (let i of sq) { log(i); }
  46. 46. I have software to ship to REAL USERS
  47. 47. Coming Soon(er) node.js FirefoxOS browser plugins Windows 8
  48. 48. What are my options?
  49. 49. What can we use today?
  50. 50. kangax.github.io/es5-compat-table/es6/
  51. 51. If we have
  52. 52. If we have CoffeeScript --> JavaScript
  53. 53. If we have CoffeeScript --> JavaScript IcedCoffeeScript --> JavaScript
  54. 54. If we have CoffeeScript --> JavaScript IcedCoffeeScript --> JavaScript TypedScript --> JavaScript
  55. 55. If we have CoffeeScript --> JavaScript IcedCoffeeScript --> JavaScript TypedScript --> JavaScript ClojureScript --> JavaScript
  56. 56. Why not? JavaScript --> JavaScript
  57. 57. Why not? JavaScript.next --> JavaScript.now
  58. 58. Traceur
  59. 59. Traceur JavaScript --> JavaScript
  60. 60. Traceur JavaScript --> JavaScript ...written in JavaScript
  61. 61. Demo Time
  62. 62. WAIT! what about modules?
  63. 63. square/es6-module-transpiler import { foo, bar } from "foobar"; function fooTheBar() { return foo + bar; } export default = fooTheBar;
  64. 64. ES6 all the things?
  65. 65. Thanks! @JeremyMorrell http://rathercurio.us http://github.com/jmorrell
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×