Promises and Generators in ES6

All JavaScript programmers know two things – Asynchronous programming using callbacks is a required skill and all functions run to completion. ES6 introduced Promises and Generators. Promises address the significant shortcomings of callbacks. Generators are functions that can pause itself in mid-execution and can be resumed either right away or at a later time. In this session I will discuss the impact of these two new features in ES6.

Transcript

1. by Jennifer Bland ES6 Promises & Generators
2. 2 Who am I? Senior So/ware Engineer Hearst Autos h8p://www.jenniferbland.com h8ps://github.com/ratracegrad/ ratracegrad@gmail.com @ratracegrad
3. 3 Promises
4. 4 Background “It all started with the callbacks” It was the best of Kmes. It was the worst of Kmes.
5. 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. 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. 7 Callback Example
8. 8 Challenges with Callbacks •Easy to create callback hell •Error handling is easy to miss •Difficult to understand
9. 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. 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. 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. 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. 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. 14 Promise Example
15. 15 Chaining Promises A Promise is an Object. 
 Promise Prototype has .then() and .catch() methods
 These methods return promises
 You can chain promises
16. 16 Chaining Promise Example
17. 17 Error Handling If a Promise fails then its reject() funcKon is called
 or the .catch()
18. 18 Error Handling Example
19. 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. 20 Promise.all Example
21. 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. 22 Promise.race Example
24. 24 Generators
25. 25 Background •FuncKons run to compleKon •FuncKons receive data once •FuncKons return data once
26. 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. 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. 28 Generator Example
30. 30 Tweet •Please tweet about presentaKon •Use #devnexus and #wwcatl
31. 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. 32 h8ps://goo.gl/mdlkkP
33. 33 h8ps://goo.gl/mdlkkP h8p://www.jenniferbland.com h8ps://github.com/ratracegrad/ ratracegrad@gmail.com @ratracegrad