by Jennifer Bland ES6 Promises & Generators

2 Who am I? Senior So/ware Engineer Hearst Autos h8p://www.jenniferbland.com h8ps://github.com/ratracegrad/ [email protected] @ratracegrad

3 Promises

4 Background “It all started with the callbacks” It was the best of Kmes. It was the worst of Kmes.

5 What is a callback? Callback is a way of telling your code to execute this code when this other piece of code completes.

6 JavaScript & Asynch Code •JavaScript event loop is single threaded. •Asynch code immediate return •Code executes in another loop •When finish event loop returns callback

7 Callback Example

8 Challenges with Callbacks •Easy to create callback hell •Error handling is easy to miss •Difficult to understand

9 Promises Background •Prior to ES6 we had Promise libraries like Bluebird & q •Promises are naKve in ES6 •Based off the Promises/A+ open standard

10 What is a Promise? A Promise represents the eventual result of some type of operaKon which may be available now, or in the future, or never. Provides same funcKonality as callbacks but are more powerful because they are composable.

11 Lifecycle of a Promise? 1. Promise object is created 2. Code inside promise runs 3. Promise resolves or rejects 4. Promise emits change event

12 Promises have states 1. Pending - have not fulfilled or rejected the Promise 2. Fulfilled - promise succeeded 3. Rejected - promise failed 4. Se8led - fulfilled or rejected

13 CreaKng a Promise 1. In ES6 a Promise is a constructor 2. Inside Promise we supply what is called the
 executor which is run when Promise is instanKated 3. Executor takes two arguments - resolve and reject 4. Promise calls its resolve funcKon when it succeeds
 and reject funcKon otherwise

14 Promise Example

15 Chaining Promises A Promise is an Object. 
 Promise Prototype has .then() and .catch() methods
 These methods return promises
 You can chain promises

16 Chaining Promise Example

17 Error Handling If a Promise fails then its reject() funcKon is called
 or the .catch()

18 Error Handling Example

19 Promise.all 1. Has an iterable as an argument 2. Returns a promise that resolves when all the
 promises in the iterable argument have
 resolved, or rejects with the reason of the first
 promise that rejects.

20 Promise.all Example

21 Promise.race 1. Has an iterable as an argument 2. Returns a promise that resolves or rejects as
 soon as one of the promises in the iterable
 resolves or rejects.

22 Promise.race Example

23

24 Generators

25 Background •FuncKons run to compleKon •FuncKons receive data once •FuncKons return data once

26 What is a Generator? •A generator looks like a funcKon but behaves like
 an iterator. •It pauses it’s execuKon between calls. •It generates many values over Kme by returning 
 an object which can be iterated over.

27 CreaKng a Generator 1. Generator funcKon starts with funcKon* 2. Generator funcKon creates an iterator which is
 executed with iterator.next() method is called 3. Inside a Generator funcKon, have yield keyword
 which suspends execuKon of Generator 4. Generator can yield any number of Kmes by 
 calling the next() method 5. The done properly indicates whether or not the
 Generator has yielded its last value

28 Generator Example

29

30 Tweet •Please tweet about presentaKon •Use #devnexus and #wwcatl

31 We Are Hiring! •More than 12 MM unique visitors per month •More than 100MM pages viewed per month •More than 2MM followers on Facebook Tech Stack is Node, Express, Angular 2, Docker Benefits of working for a startup but financed by one of the largest media publishing companies in the world.

32 h8ps://goo.gl/mdlkkP

33 h8ps://goo.gl/mdlkkP h8p://www.jenniferbland.com h8ps://github.com/ratracegrad/ [email protected] @ratracegrad