SlideShare a Scribd company logo

JS awesomeness or how will ES6 help me build better apps ?

•Download as PPTX, PDF•
•
Пламен Стоев
Пламен Стоев

The document provides an overview of new features in ECMAScript 6 (ES6). It begins with a brief history of JavaScript and reasons for a new version. It then discusses environments for running ES6 like Node.js, browsers, and transpilers. The bulk of the document focuses on new language features in ES6 like arrow functions, let/const variables, generators, destructuring, and Object.observe. It concludes with links to resources for learning more about ES6.

Related slideshows

セミナー資料150208
セミナー資料150208セミナー資料150208
セミナー資料150208
 
エシカルアワード２０１１授賞式での紹介資料
エシカルアワード２０１１授賞式での紹介資料エシカルアワード２０１１授賞式での紹介資料
エシカルアワード２０１１授賞式での紹介資料
 
Uihfrs paula.
Uihfrs paula.Uihfrs paula.
Uihfrs paula.
 
1 of 24
CONFIDENTIAL © MobCon Bulgaria. All rights reserved.
CONFIDENTIAL © MobCon Bulgaria. All rights reserved. JS awesomeness! or How will ES6 help me build better apps ? 2 Plamen Stoev Senior Front-end Developer @ MentorMate @pstoevPlamen Stoev April 4, 2015
CONFIDENTIAL © MobCon Bulgaria. All rights reserved. Agenda  Brief history of JavaScript  Why EcmaScript 6 ?  Environments to run ES6  Give me the new stuff ? 3 April 4, 2015
CONFIDENTIAL © MobCon Bulgaria. All rights reserved. Brief History of JavaScript Notable figures Brendan Eich - Co-founder of Mozilla Foundation - CTO @ Mozilla (resigned) - CEO @ Mozilla (resigned) - Creator of JavaScript - 1995 4 April 4, 2015
CONFIDENTIAL © MobCon Bulgaria. All rights reserved. Brief History of JavaScript Notable figures Douglas Crockford aka (The JavaScript Guy) - JSON - JSLint 5 April 4, 2015
CONFIDENTIAL © MobCon Bulgaria. All rights reserved. Brief History of JavaScript Glossary EcmaScript – synonym for JavaScript Ecma International – standards organization Ecma-262 – The official EcmaScript specification EcmaScript5 – 5th edition of Ecma-262 Timeline: EcmaScript 3 – Dec 1999 EcmaScript 5 - Dec 2009 EcmaScript 6 (ES.next) – Publication process starts March 2015 EcmaScript 7 (TBA) 6 April 4, 2015
CONFIDENTIAL © MobCon Bulgaria. All rights reserved. Brief History of JavaScript Why “Harmony” ? What is “Harmony” ? 7 April 4, 2015 Photo by Alberto Giorgio A superset of ES6
CONFIDENTIAL © MobCon Bulgaria. All rights reserved. Why EcmaScript 6 ? Overview Why a new version ? What problem does it solve ? “The purpose of a programming language is to aid programmers in producing error-free programs” -- D. Crockford 8 April 4, 2015
CONFIDENTIAL © MobCon Bulgaria. All rights reserved. Agenda So far  Brief history of JavaScript  Why EcmaScript 6 ?  Environments to run ES6  So what’s new ? 9 February 13, 2015
CONFIDENTIAL © MobCon Bulgaria. All rights reserved. Environments to run ES6 Overview  Server-side environments  Client-side environments  Transpilers Note: ES6 currently runs in strict mode only 10 April 4, 2015
CONFIDENTIAL © MobCon Bulgaria. All rights reserved. Environments to run ES6 Server-side 11 April 4, 2015 node –-harmony app.js
CONFIDENTIAL © MobCon Bulgaria. All rights reserved. Environments to run ES6 Client-side 12 April 4, 2015 chrome://flags/
CONFIDENTIAL © MobCon Bulgaria. All rights reserved. Environments to run ES6 Transpilers 13 April 4, 2015 npm install babel Check out the online transpiler!
CONFIDENTIAL © MobCon Bulgaria. All rights reserved. So what’s new ? Overview  Arrow function syntax  Operators let, const  Weak maps  Generators  Destructuring  Object.observe  Other interesting ES6 features 14 April 4, 2015
CONFIDENTIAL © MobCon Bulgaria. All rights reserved. So what’s new ? Arrow function syntax Note: ‘this’ is preserving context of the containing method 15 April 4, 2015
CONFIDENTIAL © MobCon Bulgaria. All rights reserved. So what’s new ? let, const Operators let and const – the new ‘var’. They are “visible” in the current block scope only Prevents hoisting and global scope pollution 16 April 4, 2015
CONFIDENTIAL © MobCon Bulgaria. All rights reserved. So what’s new ? Weak maps Weird naming :) 17 April 4, 2015
CONFIDENTIAL © MobCon Bulgaria. All rights reserved. So what’s new ? Generators 18 April 4, 2015  Allows function execution to be “paused”  You write synchronous code
CONFIDENTIAL © MobCon Bulgaria. All rights reserved. So what’s new ? Destructuring - Arrays 19 April 4, 2015
CONFIDENTIAL © MobCon Bulgaria. All rights reserved. So what’s new ? Destructuring - Objects 20 April 4, 2015
CONFIDENTIAL © MobCon Bulgaria. All rights reserved. So what’s new ? Object.observe It’s a ES7 feature! 21 April 4, 2015
CONFIDENTIAL © MobCon Bulgaria. All rights reserved. So what’s new ? Other features worth mentioning  More object-related methods – String.includes, parseInt goes in Number, Array.from, more Math.* methods for precise computing  Default values for params – i.e. function(foo, bar = 7, baz = true);  Rest params: function(foo, bar, …everythingElse)  Template strings (multi-line strings)  Modules  Promises  Proxies  Tail calls  Class syntax 22 April 4, 2015
CONFIDENTIAL © MobCon Bulgaria. All rights reserved. Useful Links Overview  http://wiki.ecmascript.org  https://developer.mozilla.org/en- US/docs/Web/JavaScript/New_in_JavaScript  http://kangax.github.io/compat-table/es6/  http://babel.io/  http://iojs.org/  https://google.github.io/traceur-compiler/demo/repl.html 23 April 4, 2015
CONFIDENTIAL © MobCon Bulgaria. All rights reserved. Thank you! Plamen Stoev Questions? Senior Front-end Developer MentorMate @pstoevPlamen Stoev 24 April 4, 2015

More Related Content

JS awesomeness or how will ES6 help me build better apps ?

  • 1. CONFIDENTIAL © MobCon Bulgaria. All rights reserved.
  • 2. CONFIDENTIAL © MobCon Bulgaria. All rights reserved. JS awesomeness! or How will ES6 help me build better apps ? 2 Plamen Stoev Senior Front-end Developer @ MentorMate @pstoevPlamen Stoev April 4, 2015
  • 3. CONFIDENTIAL © MobCon Bulgaria. All rights reserved. Agenda  Brief history of JavaScript  Why EcmaScript 6 ?  Environments to run ES6  Give me the new stuff ? 3 April 4, 2015
  • 4. CONFIDENTIAL © MobCon Bulgaria. All rights reserved. Brief History of JavaScript Notable figures Brendan Eich - Co-founder of Mozilla Foundation - CTO @ Mozilla (resigned) - CEO @ Mozilla (resigned) - Creator of JavaScript - 1995 4 April 4, 2015
  • 5. CONFIDENTIAL © MobCon Bulgaria. All rights reserved. Brief History of JavaScript Notable figures Douglas Crockford aka (The JavaScript Guy) - JSON - JSLint 5 April 4, 2015
  • 6. CONFIDENTIAL © MobCon Bulgaria. All rights reserved. Brief History of JavaScript Glossary EcmaScript – synonym for JavaScript Ecma International – standards organization Ecma-262 – The official EcmaScript specification EcmaScript5 – 5th edition of Ecma-262 Timeline: EcmaScript 3 – Dec 1999 EcmaScript 5 - Dec 2009 EcmaScript 6 (ES.next) – Publication process starts March 2015 EcmaScript 7 (TBA) 6 April 4, 2015
  • 7. CONFIDENTIAL © MobCon Bulgaria. All rights reserved. Brief History of JavaScript Why “Harmony” ? What is “Harmony” ? 7 April 4, 2015 Photo by Alberto Giorgio A superset of ES6
  • 8. CONFIDENTIAL © MobCon Bulgaria. All rights reserved. Why EcmaScript 6 ? Overview Why a new version ? What problem does it solve ? “The purpose of a programming language is to aid programmers in producing error-free programs” -- D. Crockford 8 April 4, 2015
  • 9. CONFIDENTIAL © MobCon Bulgaria. All rights reserved. Agenda So far  Brief history of JavaScript  Why EcmaScript 6 ?  Environments to run ES6  So what’s new ? 9 February 13, 2015
  • 10. CONFIDENTIAL © MobCon Bulgaria. All rights reserved. Environments to run ES6 Overview  Server-side environments  Client-side environments  Transpilers Note: ES6 currently runs in strict mode only 10 April 4, 2015
  • 11. CONFIDENTIAL © MobCon Bulgaria. All rights reserved. Environments to run ES6 Server-side 11 April 4, 2015 node –-harmony app.js
  • 12. CONFIDENTIAL © MobCon Bulgaria. All rights reserved. Environments to run ES6 Client-side 12 April 4, 2015 chrome://flags/
  • 13. CONFIDENTIAL © MobCon Bulgaria. All rights reserved. Environments to run ES6 Transpilers 13 April 4, 2015 npm install babel Check out the online transpiler!
  • 14. CONFIDENTIAL © MobCon Bulgaria. All rights reserved. So what’s new ? Overview  Arrow function syntax  Operators let, const  Weak maps  Generators  Destructuring  Object.observe  Other interesting ES6 features 14 April 4, 2015
  • 15. CONFIDENTIAL © MobCon Bulgaria. All rights reserved. So what’s new ? Arrow function syntax Note: ‘this’ is preserving context of the containing method 15 April 4, 2015
  • 16. CONFIDENTIAL © MobCon Bulgaria. All rights reserved. So what’s new ? let, const Operators let and const – the new ‘var’. They are “visible” in the current block scope only Prevents hoisting and global scope pollution 16 April 4, 2015
  • 17. CONFIDENTIAL © MobCon Bulgaria. All rights reserved. So what’s new ? Weak maps Weird naming :) 17 April 4, 2015
  • 18. CONFIDENTIAL © MobCon Bulgaria. All rights reserved. So what’s new ? Generators 18 April 4, 2015  Allows function execution to be “paused”  You write synchronous code
  • 19. CONFIDENTIAL © MobCon Bulgaria. All rights reserved. So what’s new ? Destructuring - Arrays 19 April 4, 2015
  • 20. CONFIDENTIAL © MobCon Bulgaria. All rights reserved. So what’s new ? Destructuring - Objects 20 April 4, 2015
  • 21. CONFIDENTIAL © MobCon Bulgaria. All rights reserved. So what’s new ? Object.observe It’s a ES7 feature! 21 April 4, 2015
  • 22. CONFIDENTIAL © MobCon Bulgaria. All rights reserved. So what’s new ? Other features worth mentioning  More object-related methods – String.includes, parseInt goes in Number, Array.from, more Math.* methods for precise computing  Default values for params – i.e. function(foo, bar = 7, baz = true);  Rest params: function(foo, bar, …everythingElse)  Template strings (multi-line strings)  Modules  Promises  Proxies  Tail calls  Class syntax 22 April 4, 2015
  • 23. CONFIDENTIAL © MobCon Bulgaria. All rights reserved. Useful Links Overview  http://wiki.ecmascript.org  https://developer.mozilla.org/en- US/docs/Web/JavaScript/New_in_JavaScript  http://kangax.github.io/compat-table/es6/  http://babel.io/  http://iojs.org/  https://google.github.io/traceur-compiler/demo/repl.html 23 April 4, 2015
  • 24. CONFIDENTIAL © MobCon Bulgaria. All rights reserved. Thank you! Plamen Stoev Questions? Senior Front-end Developer MentorMate @pstoevPlamen Stoev 24 April 4, 2015