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.

Workshop JavaScript ES6+

321 views

Published on

A Workshop I Did on Changes in JavaScript ES6 That Drastically Improve Development Speed

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Workshop JavaScript ES6+

  1. 1. Intro to Javascript ES6/7/8 WeWork Amsterdam 21/06/2018
  2. 2. Roy Derks Technical Founder & CTO, SwitchBay @gethackteam #javascriptEverywhere
  3. 3. What is ES? ES is short for ECMAScript “ECMAScript is a standard.” “ECMAScript is standardised JavaScript.” “JavaScript is a dialect of ECMAScript.”
  4. 4. How does the Versioning work? Released in 2015 ES6 = ECMAScript 6 The 6th version of ECMAScript ES2015 = ? ? = ECMAScript 2016 ES8 = ?
  5. 5. 2015? Why is ES6 still “new”? “Depends on how (or where) you use JavaScript.” Short: Browser Support
  6. 6. Also on CodePen http://bit.ly/es678workshop
  7. 7. Also on CodePen
  8. 8. Contents of this Workshop • Importing Modules • Arrow Functions • Spread / Rest Operators • Classes • Let & Constants • Template Literals • Object Literals • Destructuring
  9. 9. Let & Constants var = XX let = XX const = XX // “immutatable variable” http://bit.ly/es678workshop-1
  10. 10. Template Literals var sayHi = 'Hi, my name is ' + variable http://bit.ly/es678workshop-2 const sayHi = `Hi, my name is ${variable}`
  11. 11. Object Literals http://bit.ly/es678workshop-3 Quickly create objects with properties inside curly braces • Short Syntax for Initialising Properties • Short Syntax for Defining Functions • Computed Names for Properties
  12. 12. Destructuring http://bit.ly/es678workshop-4 const { a, b, c } = alphabet var a = alphabet.a, b = alphabet.b, …
  13. 13. Arrow Functions http://bit.ly/es678workshop-5 const doThis = (variable) => { … } function doThis(variable) { return … }
  14. 14. Spread Operator http://bit.ly/es678workshop-6 Combine or Spread elements into collections (Arrays and Objects) const params = [‘param2’, ‘param3’] const combined = [ ‘param1’, …params ]
  15. 15. Rest Parameter http://bit.ly/es678workshop-7 Combine remaining parameters into one single parameter const doThis = (param1, …params) => { … }
  16. 16. Classes http://bit.ly/es678workshop-8 class A { constructor() { … } doThis = () => { …} } Easily create Classes with Inheritance class B extends A { doThis() { …} }
  17. 17. Iterables / Iterators http://bit.ly/es678workshop-9 const iterable { [Symbol.iterator](): iterator { …} } next() { value: …, done: true | false }
  18. 18. Remember? Callback Hell http://callbackhell.com/ doThis(param, function(err, res) { doThis(param, function(err, res) { doThis(param, function(err, res) { // Do Something… }) }) }) })
  19. 19. Solution? Promises new Promise(resolve => { doThis(param).then(a => { doThis(param).then(b => { // Do Something… }) }) }) })
  20. 20. Async / Await http://bit.ly/es678workshop-10 async function doThis() { const waitForThis = await alsoDoThis() return waitForThis } From “Callback Hell” to Promises to Asynchronous
  21. 21. Want to know more? http://es6-features.org @gethackteam #javascriptEverywhere

×