Unlimited Power: ES6 Generators

For JSConf China 2015.

Transcript

1. U N L I M I T E D P O W E R
   E S 6 G E N E R A T O R S
   B R I A N H O LT
   T W I T T E R : H O LT B T
   G I T H U B : B T H O LT
   

   View Slide

2. E S 6 ?
   • ECMAScript 6. The latest version of JavaScript.
   • More correctly known as ES2015.
   • Includes features such as arrow functions, symbols, classes, enhanced
   object literal syntax, template strings, and …
   

   View Slide

3. G E N E R AT O R S
   • Generators are a new construct to JavaScript that enables new patterns of
   asynchronous programming that looks synchronous.
   • Can greatly reduce the complexity of some problems.
   • Can be confusing due to their versatility in how they handle input and
   output
   

   View Slide

4. C A N I U S E I T N O W ?
   • Yes!
   • An engineer formerly of Facebook and currently of Meteor named
   Benjamin Newman emulated generator behavior using ES5, giving us the
   opportunity to use it now!
   • Babel uses Regenerator under the hood to give generator support. If
   you’re not using Babel now, you really should. Babel is a JS preprocessor
   that allows you to process ES6 files into ES5 compatible files.
   • iojs works out of the box with no preprocessing.
   

   View Slide

5. L O L O K , W H AT I S A G E N E R AT O R ?
   • A generator is a function that returns a generator object. This object is an
   iterable; that is, you can iterate over it.
   • Generators can generate output, process input, or both; however I would
   suggest where possible to either process input or generate output. It
   simplifies things a lot.
   • Let’s look at a few examples.
   

   View Slide

6. View Slide

7. View Slide

8. O K AY, B I G D E A L . N O W S H O W M E S O M E T H I N G
   C O O L
   • co is the name of a library put out by TJ Holowaychuk (same guy as Stylus,
   Mocha, Express, Koa, and half the other things you use.)
   • co allows you to simulate ES7’s async/await functionality today using
   generators. async/await is going to change the way we do a lot of things
   with JavaScript.
   

   View Slide

9. View Slide

10. View Slide

11. Y I E L D *
    • I heard you like generators so now you can call generator functions from
    your generator functions.
    • yield* is a keyword that calls another generator and adds all its content to
    the current generator.
    

    View Slide

12. View Slide

13. G E N E R AT O R S A S O B S E R V E R S
    • Think of a function you can call a bunch of times with different parameters
    and preserve the state between calls.
    • Can be done other ways but a large point of generators to simplify code
    and make it look more synchronous despite being asynchronous.
    

    View Slide

14. View Slide

15. L O L O K , N O W D O S O M E T H I N G C O O L
    • Ideal for situations where you can receive input multiple times at
    asynchronous intervals.
    • Conducive to reactive (ie RxJS, Bacon, etc) programming.
    • Awesome for WebSockets / polling
    

    View Slide

16. View Slide

17. G E N E R AT O R S A S C O - R O U T I N E S
    • As I was saying earlier, I prefer to take generators and compose them into
    either data producing or data consuming, not both.
    • Seeing a generator both produce and consume takes the advantage of
    generators away for me: simplifying asynchronous code.
    

    View Slide

18. . T H R O W ( ) , . R E T U R N ( ) , T RY, C AT C H , A N D F I N A L LY
    • Calling `.return()` (instead of `.next()`) executes a return at where ever your
    generator is paused. This can be useful if you need to terminate your
    generator.
    • Calling `.throw()` is similar: it throws an error there and allows you to deal
    with it using a `catch` statement.
    • `finally` statements are interesting because if you `.return()` you can clean
    up your generator by putting code into a finally block.
    • `.return()` doesn’t work out-of-the-box with iojs.
    

    View Slide

19. View Slide

20. B U T WA I T ! I WA S N ’ T D O N E !
    

    View Slide

21. View Slide

22. T H R O W W O R K S A B O U T T H E S A M E B U T W I L L J U S T
    H I T T H E ` C AT C H ` B L O C K I N S T E A D
    

    View Slide

23. View Slide

24. T L ; D R
    • Generators make async easy by making your async code look synchronous.
    • Generators can accept input, give output, or both.
    • Generators can be used to model things like observables, iterables, csp,
    lazily evaluated infinite arrays, and much more fun stuff.
    • Use generators. They give you power.
    

    View Slide

25. B R I A N H O LT
    T W I T T E R : H O LT B T
    G I T H U B : B T H O LT
    G I T H U B . C O M / B T H O LT / G E N E R AT O R - E X A M P L E S
    U N L I M I T E D P O W E R :
    E S 6 G E N E R AT O R S
    

    View Slide