The Future is Now: JavaScript, ES6, and Babel JS

ConFoo, Feb. 2015

http://babeljs.io

Transcript

1. The Future Is Now! JavaScript, ES6 and Traceur @tgriesser
2. The Future Is Now! JavaScript, ES6 and Traceur @tgriesser ^6-to-5
3. The Future Is Now! JavaScript, ES6 and @tgriesser
4. JavaScript isn't the best language…
6. "Future proof" convenience
7. What? How? Why?
8. babeljs.io
9. Terminology
10. Transpile: Source-to-Source Compilation
12. Transform: Simple syntax conversion
13. Transform:
14. Transform:
15. Polyfill: Providing language features that would expect to be available natively
17. IE8: Object doesn’t support property or method ‘indexOf’
19. IE8: // 1
20. Some New Features • Arrow Functions • Strings / Template Strings • Default Parameters • Rest / Spread Params • Destructuring Assignment • Object literal extensions • Modules • Classes • Symbols • Iterators • Generators • Promises
21. Arrow Functions
22. Arrow Functions
23. Arrow Functions
24. Arrow Functions
25. Arrow Functions
26. Arrow Functions
27. Arrow Functions
28. Arrow Functions
29. New String Functions
30. New String Functions str.codePointAt: unicode codepoint str.normalize: unicode normalization, not polyfilled by default - github.com/walling/unorm
31. Template Strings
32. Template Strings
33. Default Parameters
34. Default Parameters
35. Rest arguments
36. Spread Arguments
37. Destructuring Assignment
38. Object Literal Extensions
39. Object Literal Extensions
40. Object Literal Extensions
41. Object Literal Extensions
42. const
43. let
44. let
45. Modules • Unify the experience of separating & including code from multiple files (modules) • Similar to CommonJS • Can work with various module formats (UMD, AMD)
48. Class Syntax • Syntax "Sugar" to Prototype Classes • Sets up proper inheritance chain • Reference inherited methods with super.methodName() • Cannot have prototype or static props
49. • No static or prototype properties • Getters & setters will only work in IE 9+ Class Syntax
50. Class Syntax • No static or prototype properties • Getters & setters will only work in IE 9+
51. Symbol() • New primitive type, unique • Access control for property state • Also used for new protocols "Symbol.iterator"
52. Symbols • No static or prototype properties • Getters & setters will only work in IE 9+
53. Symbols • No static or prototype properties • Getters & setters will only work in IE 9+
54. Iterators • Ability to treat any value as a collection with a standard API • Allows for use with for-of loop
55. Iterators
56. Iterators
57. Iterators
58. Promises, Generators • Simplify Async (callback hell)
59. Promises, Generators • Simplify Async (callback hell)
60. Promises, Generators • Simplify Async (callback hell) • Promises: like async try / catch in JavaScript • Generators: Async / Await • Utilize iterators
61. Kangax compat table
62. How to Get Started?
63. Try it out
64. In the Browser
65. Node.js
67. Suggestions for Adoption • Introduce into test suites • Gradually introduce different new features • Check support if you have questions
68. Support:
69. June 18, 2015 "…when the ECMA General Assembly will vote on and approve the 6th edition of Ecma-262 and usher in the next era of JavaScript." http://bocoup.com/weblog/stabilizing-es6/
71. @tgriesser Questions?