Your SlideShare is downloading. ×
Living in the ES6 Future, Today
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Living in the ES6 Future, Today

691
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 …

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
691
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
17
Comments
0
Likes
2
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