Living in the ES6 Future, Today

  • 562 views
Uploaded 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 …

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
562
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
14
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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