Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Intro to ES6 / ES2015

444 views

Published on

Talk on some of the new features available now in ES6/ES2015.

Published in: Software
  • Be the first to comment

Intro to ES6 / ES2015

  1. 1. INTRO TO ES6/2015 MEAN STACK NYC | INTRO TO ES6/2015 Jamal O’Garro Software Engineer + Instructor
  2. 2. WHAT’S BEING COVERED TODAY • Let and Const • Block Scoping • Template Strings • Iterators • Fat Arrow Syntax • Class Syntax • Promises • Generators MEAN STACK NYC | INTRO TO ES6/2015
  3. 3. BRIEF HISTORY OF JAVASCRIPT • Created by Netscape as a browser scripting language • Node.js allows JS to be run on the server • ES6 standard is announced MEAN STACK NYC | INTRO TO ES6/2015
  4. 4. WHAT IS ECMASCRIPT? • Specification that JavaScript is developed against MEAN STACK NYC | INTRO TO ES6/2015
  5. 5. WHAT IS ES6? • Most recent version of the ECMAScript specification • Introduces powerful new features and new syntax • Is available for use now in most modern browsers MEAN STACK NYC | INTRO TO ES6/2015
  6. 6. WHY USE ES6? • Allows us to write “safer” JavaScript • Get to use a “nicer” syntax • It’s the future and the future is now! MEAN STACK NYC | INTRO TO ES6/2015
  7. 7. NEW LANGUAGE FEATURES MEAN STACK NYC | INTRO TO ES6/2015
  8. 8. LET + CONST MEAN STACK NYC | INTRO TO ES6/2015
  9. 9. LET + CONST RECAP • “let” and “const” allow us to have block scoping • “const” allows us to create immutable data • We also have the ability to create blocks on-the-fly MEAN STACK NYC | INTRO TO ES6/2015
  10. 10. TEMPLATE STRINGS MEAN STACK NYC | INTRO TO ES6/2015
  11. 11. TEMPLATE STRINGS RECAP • Allow us to perform string interpolation in JavaScript • Prevents us from having to concat strings • Get a performance boost over string concatenation MEAN STACK NYC | INTRO TO ES6/2015
  12. 12. FAT ARROW FUNCTIONS MEAN STACK NYC | INTRO TO ES6/2015
  13. 13. FAT ARROW RECAP • Provide a new syntax to represent lambda functions • Give us a lexical “this” in functions that aren’t direct properties of objects MEAN STACK NYC | INTRO TO ES6/2015
  14. 14. NEW OBJECT SYNTAX MEAN STACK NYC | INTRO TO ES6/2015
  15. 15. NEW OBJECT SYNTAX RECAP • Syntactic sugar for creating properties of objects MEAN STACK NYC | INTRO TO ES6/2015
  16. 16. CLASSES MEAN STACK NYC | INTRO TO ES6/2015
  17. 17. CLASSES RECAP • Syntax “sugar” for constructor functions • Easy inheritance • Super keyword • Clean way to create static methods MEAN STACK NYC | INTRO TO ES6/2015
  18. 18. NEW DATA TYPES MEAN STACK NYC | INTRO TO ES6/2015
  19. 19. ITERATORS MEAN STACK NYC | INTRO TO ES6/2015
  20. 20. ITERATOR VS. ITERABLE • Iterator - allows us to produce a sequence of values (Generators, etc.) • Iterable - Means an object can be iterated (String, Array, Map, Set, etc.) MEAN STACK NYC | INTRO TO ES6/2015
  21. 21. PROMISES MEAN STACK NYC | INTRO TO ES6/2015
  22. 22. PROMISE RECAP • Allow us to work with Promises natively in the language MEAN STACK NYC | INTRO TO ES6/2015
  23. 23. GENERATORS MEAN STACK NYC | INTRO TO ES6/2015
  24. 24. WHY ARE GENERATORS USEFUL? • Allow us to pause a function • Control of the function’s execution externally • Can pass data to the paused execution • Can be used for asynchronous coding that “looks” synchronous MEAN STACK NYC | INTRO TO ES6/2015
  25. 25. SUMMARY MEAN STACK NYC | INTRO TO ES6/2015
  26. 26. WHAT DID WE NOT COVER TODAY? • Symbols • Maps • Weak Maps • Sets • Weak Sets • Some features that are not ready (at least not in V8 and Node) MEAN STACK NYC | INTRO TO ES6/2015
  27. 27. WHAT’S CURRENTLY NOT AVAILABLE? • Destructured assignment • Parameter Default Values • Rest • Spread • Modules • Proxies • Typed Array MEAN STACK NYC | INTRO TO ES6/2015
  28. 28. HOW TO USE WHAT’S NOT READY? • Polyfills • Transpilers • Babel.js • Tracuer • TypeScript MEAN STACK NYC | INTRO TO ES6/2015
  29. 29. THANK YOU!!! Jamal O’Garro Software Engineer + Instructor MEAN STACK NYC | INTRO TO ES6/2015

×