Living in the ES6 Future, Today

1,268 views
1,085 views

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
1,268
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
23
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

×