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
   

   View Slide

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

   View Slide

3. 3
   Promises
   

   View Slide

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

   View Slide

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.
   

   View Slide

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
   

   View Slide

7. 7
   Callback Example
   

   View Slide

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

   View Slide

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
   

   View Slide

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.
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

14. 14
    Promise Example
    

    View Slide

15. 15
    Chaining Promises
    A Promise is an Object. 

    Promise Prototype has .then() and .catch() methods

    These methods return promises

    You can chain promises
    

    View Slide

16. 16
    Chaining Promise Example
    

    View Slide

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

    or the .catch()
    

    View Slide

18. 18
    Error Handling Example
    

    View Slide

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.
    

    View Slide

20. 20
    Promise.all Example
    

    View Slide

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.
    

    View Slide

22. 22
    Promise.race Example
    

    View Slide

23. View Slide

24. 24
    Generators
    

    View Slide

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

    View Slide

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.
    

    View Slide

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
    

    View Slide

28. 28
    Generator Example
    

    View Slide

29. View Slide

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

    View Slide

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.
    

    View Slide

32. 32
    h8ps://goo.gl/mdlkkP
    

    View Slide

33. 33
    h8ps://goo.gl/mdlkkP
    h8p://www.jenniferbland.com
    h8ps://github.com/ratracegrad/
    ratracegrad@gmail.com
    @ratracegrad
    

    View Slide