A Use Case for an Async Generator

Photo by Jason Blackeye on Unsplash

I try to keep up with the latest JavaScript features but there are two common reasons why I have a hard time doing it:

1. I’m busy. Really busy. Sigh.
2. It’s easy to read about new things, sometimes even understand them well, but unless you apply those learnings right away they tend to leave your brain in a hurry.

I remember having this experience years ago when I first read about generators: https://babeljs.io/docs/en/learn#generators. It took me a few reads to understand what was going on. Then I asked myself the same question I always have when I read about new features: “How can I use this to write less code?” 🤔

I went searching for generator use cases and was particularly interested in the async ones. As it turns out, a lot of the solutions to problems I read about were already implemented in my favorite frameworks and libraries. I was glad smarter people were already creating things to help me write less code but that left me in a state of: ¯\_(ツ)_/¯ “Maybe some day I’ll need this.”

An Embarrassing Problem Presents a Learning Opportunity

Fast forward a few years to 2018. A teammate and I gave a talk about Ember.js and GraphQL at EmberFest. In the next year we were asked to give the same talk at a frontend web development meetup. Since the audience wasn’t Ember-specific, I decided to record a short video demoing the contents of the talk, including a lot of coding.

I thought it would be nice to share the video with the Ember community but it needed some work beforehand:

1. It had no audio.
2. It could have used more examples.
3. The embarrassing part… my typing. My shameful, frustratingly poor typing.

About #3

I’m not great at typing, at least, not for a developer. I often get frustrated with myself over my inability to type consistently and it gets even worse when I have an audience. But I decided to put my best foot forward and record myself typing as well as I cou… no, wait, stop, abort mission, we have to go back.

Time for a New Plan 🤔

My inability to type well enough for TV led me to a somewhat ridiculous idea: “What if I wrote a plugin for my code editor that could type for me?”

This could spare me the embarrassment of fixing so, so many typos which would probably also keep the video much shorter 😅 But would it be worth the time to create a plugin like this? Yes. My plugin can keep typing for me in any of my future videos.

I Have a Plan. Now What?

Time to implement. First, I needed to learn how to author a plugin for my code editor, Atom. Lucky for me the plugins are written in JavaScript. My plan was to use this plugin in a series of steps:

1. Open a dialog.
2. Accept a file path from the user.
3. Read the file.
4. Automatically type the file’s contents.

Steps 1–3 were easy enough to implement. Step 4 required some thinking…

There and Back and There Again

My plan was actually to use async generators, at first. I would split the file contents into a list of lines. Then, for each line, I would iterate over each character and type it at some realistic interval.

I then thought (too briefly) that I should just try this with promises since I had never used generator functions. I ended up writing something that hilariously didn’t work. Like this:

🤦‍♂️Nope

The result was pretty entertaining. It did type all of the characters from my file but they were all over the place.

The problem with this code is that the callback I’ve given to the forEach loop, though asynchronous, is always called synchronously. Imagine the implementation of forEach as it’s achieved via this polyfill:

I immediately understood that I hadn’t put enough time into thinking about it. Could I make it work with promises? Yes, sure, but I would have to think about it more and I still wanted to try a generator-based solution.

I decided to go back to my original idea and try out async generators. The resulting generator doesn’t end up looking that much different than the previous code I tried but it works and I like it a lot more.

Now I have a solution to my typing-on-video problem and some first-hand experience with async generators. Feel free to share any experiences you’ve had with generator functions, or sympathize with my lousy typing, in the comments.

Thanks for reading.