HN Theater @HNTheaterMonth

I've been struggling with wrapping my head around asynchronous programming with callbacks, promises and async/await in JS, however I think it's finally clicking after watching these YouTube videos and creating a document where I explain these concepts as if I'm teaching them to someone else:

* Philip Roberts's What the heck is the event loop anyway? - https://www.youtube.com/watch?v=8aGhZQkoFbQ

* The Story of Asynchronous JavaScript - https://www.youtube.com/watch?v=rivBfgaEyWQ

* JavaScript Callbacks, Promises, and Async / Await Explained - https://www.youtube.com/watch?v=JRNToFh3hxU

* Async Javascript Tutorial For Beginners (Callbacks, Promises, Async Await). - https://www.youtube.com/watch?v=_8gHHBlbziw

* Jake Archibald: In The Loop - setTimeout, micro tasks, requestAnimationFrame, requestIdleCallback, - https://www.youtube.com/watch?v=cCOL7MC4Pl0

Edit... I've been rewatching these videos, reading the MDN docs, the Eloquent JavaScript book, javascript.info, blogs about the subject, etc. This further proves you shouldn't limit yourself to a single resource, and instead fill up the laguna with water from different sources if you will.

⬐ digianarchist

I liked swyx's talk on React Hooks: Getting Closure on React Hooks - https://www.youtube.com/watch?v=KJP1E-Y-xyo

⬐ floppydiskette

I wrote this one over the course of a few months that summarized everything I could think of on the topic - https://www.taniarascia.com/asynchronous-javascript-event-lo...

⬐ luuuzeta

I've your blog bookmarked and I'll be reading it this weekend haha. Thanks for putting it together!

>Callbacks are not asynchronous by nature, but can be used for asynchronous purposes.

Glad you mention this because some people make it since like callbacks are a de-facto asynchronous-based concept. Callbacks are simply anonymous functions or lambdas that you pass to asynchronous functions so you can work with the produced values. Correct me if I'm wrong though.

⬐ microjim

More accurately -

Callbacks are anonymous functions [or references to named functions] that you pass to asynchronous [or synchronous] functions so you can work with the produced values [or do anything else]

⬐ floppydiskette

Thanks! Yeah, the callback thing tripped me up when I was learning because so many articles just glossed over the whole thing so I had to dig a little deeper and play around to understand it more.

⬐ ericbarrett

> creating a document where I explain these concepts as if I'm teaching them to someone else

Tangentially, that is a marvelous way to learn something. I often find that in explaining a complex topic I uncover gaps in my own understanding.

⬐ cudgy

The Montessori model

⬐ luuuzeta

I've realized it's so easy to read or watch something and fool yourself into thinking that you know the topic.

For example, coming up with your examples helps a lot. For instance, I found most of the examples quite underwhelming and confusing so I ended up creating my own asynchronous functions to demonstrate the concepts as I go along.

⬐ electrondood

The event loop one was a must-watch video for anyone who write Javascript. It even secured me a job offer.

⬐ luuuzeta

I'd argue that you cannot understand asynchronous programming in JS without knowing how the call stack in the JS engine, web APIs (provided by the browser or NodeJS as far as I know), the callback/(macro)task queue, microtask queue, and the event loop all fit together. The JS engine is a small component of that entire environment, and not being aware of it is like walking in the dark with dim candle.

The fact I didn't know about these concepts is the reason why I always struggled to understand examples involving setTimeout, setInterval, etc.

Most videos on YouTube, even from well-known personalities in the programming YouTube community, simply jump into things without context at all even when the videos are titled "for beginners". Even some books and docs simply describe the spec without providing context and motivation.

Edit... Forgot to say Philip does an outstanding job in that video. He's even humble enough to admit it took him a few months to grasp what was going on.

⬐ tylermcginnis

So glad you found The Story of Async JS helpful! Appreciate the shout-out.

⬐ luuuzeta

Thanks for your video! After I finished watching it and going to your channel's page, all I could think about was "Wow I hit jackpot".

Funnily enough "The Story of React" started playing right after, and I didn't even notice I was listening to another video.

⬐ thoughtpalette

Commenting for later. Wish you could "favorite" comments.

⬐ baxtr

You absolutely can. But beware: these are public.

⬐ texasbigdata

Seems like a feature.

⬐ baxtr

Yes.

⬐ mandeepj

> Commenting for later. Wish you could "favorite" comments.

Or, you can upvote it (comment)

⬐ NaturalPhallacy

There's also this new fangled thing called "bookmarks". ;)

I have a couple of folders for stuff like this:

SIMWE - Stuff I Might Want Eventually

devel - Programming stuff

⬐ solarmist

You can. Click on the time for the comment. Then you can favorite it.

⬐ thoughtpalette

great tip! thanks!

⬐ luuuzeta

Wow this is well hidden. Thanks for the tip!

⬐ solarmist

Yes, I found it when I noticed the empty comment favorites on my profile.

⬐ deskamess

Yeah, it needs to be pulled out.

⬐ mayankkaizen

I wish someone can suggest me similar links for Python. Asynchronous programming has always been elusive to me.

⬐ tmh88j

Effective Python has a great chapter that goes over concurrency and parallelism using threads, coroutines and subprocesses. There are a lot of non-trivial code examples that the author gradually shows how to improve with more advanced language features over the course of several chapters so it's not all thrown at you at once, enabling you see benefits and pitfalls of approaching problems with different techniques. I highly suggest it even beyond learning async features.

⬐ matheusmoreira

All asynchronous programming is like this, the rest is details. In every single case, there's a processing queue just like the Javascript event loop. That queue's purpose is to run blocks of code one at a time, and the main thread's purpose is to schedule blocks of code for execution.

It's cooperative multitasking by another name. Yielding control is implied by function returns and the order is determined by the processing queue. You can hang the system by enqueueing a long running algorithm: it won't yield and the processing of the queue will stall.

⬐ asicsp

These might help:

* Async Python in real life - https://guicommits.com/async-python-in-real-life/

* Python Concurrency: The Tricky Bits - https://python.hamel.dev/concurrency/

⬐ lawxls

https://superfastpython.com/python-asyncio/ - Python Asyncio: The Complete Guide

⬐ andrewstuart

async programming IS hard to get your head around.

The resources you suggest are spot on.

AND, async programming will really only click when you do lots of it.

Read tons of async resources like the ones above, write lots of async code. One day you'll realise it's second nature.

⬐ luuuzeta

Thanks a lot, I'll keep this in mind and try to write as much async code as possible.

>One day you'll realise it's second nature.

This is great but then the curse of knowledge hits you hard haha

⬐ funcDropShadow

>> write lots of async code.

> Thanks a lot, I'll keep this in mind and try to write as much async code as possible.

Only write async code if the advantages outweigh the downsides, not just by default in order to do some training for yourself. Unless it is in a hobby project where training yourself is part of the goal.

⬐ digitalsushi

i finally got callbacks this year when i pictured someone tossing a yo-yo into an elevator going down a few random floors and rolling out. the elevator leaves but i am still yanking on that yo-yo some random floor.

⬐ thecoppinger

This is my learning goal right now, I can’t thank you enough!

⬐ luuuzeta

You're welcome! Rewatch Philip's video as many times as you need until the concepts sink in, before you move into learning promises and await/async [1]. Similarly for Jake Archibald's video.

Good luck!

[1]: from what I gather asynchronous programming using callbacks isn't used anymore but it might be instructive to start with it, understand the issues with it, and why promises replaced this style.

⬐ TedDoesntTalk

Anything for React (modern versions)?

⬐ waboremo

No because the React team changes their approach every other year anyways.

⬐ tunesmith

The beta docs are really good. I just keep re-reading them, particularly "You might not need an effect", and I still keep finding nuggets that surprise me.

⬐ philip_roberts

Thanks for the shout out! I'm still amazed how well that talk struck a nerve and it's a real kick seeing people getting something out of it 8 (!) years later.

⬐ SquareWheel

I watched the video just recently, and almost immediately put the knowledge to use in a project. Finally the setTimeout(0)'s make sense.

⬐ luuuzeta

Wow small world! Thanks to you for taking the time to explore this topic and putting such a great presentation together. I'd wager it's a must-watch for anyone who keeps asking "what the heck is the event loop anyway?" haha

⬐ jakemauer

That video was the first time I felt like I understood the Javscript stack. Really grateful you put that talk together.

The best primer for the event loop I have found is here:

https://www.youtube.com/watch?v=cCOL7MC4Pl0&vl=en

The speaker (Jake Archibald) has that rare ability to be both likeable and relatable, while also being incredibly knowledgeable and enthusiastic. I wish a lot more talks were like this!

Just rewatched this talk on Monday from last year where Safari was called out for the rAF behavior that was fixed here. Cool to see this change.

https://m.youtube.com/watch?v=cCOL7MC4Pl0

Jake Archibald's "In the Loop", Visual explanation of how the javascript event loop works! Awesome video for every javascript developer.

https://www.youtube.com/watch?v=cCOL7MC4Pl0&t=153s

Jake Archibald talking about the javascript event loop and actually making it both entertaining and easily grokable! https://www.youtube.com/watch?v=cCOL7MC4Pl0

⬐ keyvin

Another event loop talk from Philip Roberts. The tool he created to display the event loop in real time is fantastic. https://www.youtube.com/watch?v=8aGhZQkoFbQ

Be sure to understand the event loop. Javascript as an asynchronous language often comes back to bite beginners. Here are two great talks to help you:

https://www.youtube.com/watch?v=cCOL7MC4Pl0

https://www.youtube.com/watch?v=8aGhZQkoFbQ

Your life will be easier if you learn to use Chrome Dev tools (or the Firefox equivalent) early.

In the beginning, you don't have to worry about browser compatibility - embrace modern JS (ES6+)!

⬐ duxup

> use Chrome Dev tools

I can't imagine not...

⬐ jexah

I second learning the event loop. One of the most important parts of the JS engines, though somehow missed by most commenters.