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.

Not the parent, but I recommend understanding the event loop first: here [0] is a very good talk. Then, read the chapter on promise on javascript.info [1], as it explains the problems Promise set out to solve (callback hell), then as usual the excellent MDN article [2].

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

[1] https://javascript.info/async

[2] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guid...

⬐ garyrob

Just watched that video. Thanks! Excellent resource. Moving on to your other links.

Haha, I'm genuinely intrigued to see the contents of that book. It could certainly be copy/paste from the Mozilla docs, but who knows! I was pleasantly surprised by this video about the JS event loop, although in fairness it is a lecture at a conference rather than a made for youtube video. Regardless, the length of the video made me question how necessary it was but I ended up watching the whole thing and enjoyed it. https://www.youtube.com/watch?v=8aGhZQkoFbQ

This one is my all time favorite - What the heck is the event loop anyway? | Philip Roberts | JSConf EU https://www.youtube.com/watch?v=8aGhZQkoFbQ

⬐ kreetx

This is the classic one I think. (And not saying it's better or anything :))

⬐ 7373737373

Agreed, with its website: http://latentflip.com/loupe/

Yes, something like that.

Like here's David's "Build Your Own Async" [1], which I prefer over Philip's (still extremely good) "What the heck is the event loop anyway?" [2].

It's one thing to tell how something works, but to successfully show what the hell its actually doing under the covers, just conveys much more information.

[1] https://www.youtube.com/watch?v=Y4Gt3Xjd7G8 [2] https://www.youtube.com/watch?v=8aGhZQkoFbQ

I've been using JavaScript professionally for about 12 years.

You're going to have to look for talks and really technical posts. Consider whitepapers and source code for JavaScript engines at this point. You'll probably want to start reading up on the things attached to JavaScript, rather than the language itself. Browser rendering, event loop, V8 things, garbage collection, etc.

I'm sure you've seen it, but things like this: https://www.youtube.com/watch?v=8aGhZQkoFbQ, and this: https://www.youtube.com/watch?v=SmE4OwHztCc

It might be time for you to start writing what you know about JavaScript.

⬐ nujabe

I definitely wouldn't consider the first video 'advanced' material (an excellent talk btw), JavaScript event loop is something beginners should know about and intermediate developers know very well.

⬐ azangru

Ah, but do they know where in the event loop, for example, "microtasks" get executed as opposed to... I forget.. tasks? In other words, how execution of promises is different from the execution of setTimeout?

⬐ mosdl

This. For example, classes are much easier to optimize for than json objects, which really hurts the functional programming and redux crowd.

⬐ quickthrower2

I was lucky enough to see this live - https://v8.dev/blog/elements-kinds - but I recommend watching and reading for anyone. Half because is pretty interesting and accessible at the same time. And half because you might use it .

Also Typescript is well worth learning.

I got to know the nuances of the language by working with it for years and having to figure out why various things didn't work at different points, but it doesn't sound like that's your style.

This isn't comprehensive, but it's probably the most helpful deep-dive I've ever seen about some aspect of JavaScript. It's about the Event Loop, which is one of the biggest differences between JS and comparable languages like Python: https://www.youtube.com/watch?v=8aGhZQkoFbQ

Contrary to what you might think, even though the event loop is in some sense "distinct from the language", it isn't simply an API. You can't really have JavaScript without the event loop; it exists in both the browser and in Node, and is the basis for most of the language's advantages.

An excellent conference video explaining the event loop in Javascript (https://www.youtube.com/watch?v=8aGhZQkoFbQ)

Oh boy, I'm arguing over the Internet. Sorry for that. You do bring good points and I agree upfront that they are indeed JS features that either suck or are not very pedagogical.

1. You don't need to learn about the event loop straight away (or asynchronous programming) by the time you get to that concept, you might as well go to another language that's easier for that. But I do concede that once you get to async programming: JS is not the best language to learn from.

With that said for people who got past the basics, here's an intuitive video about the event loop [1] (note: if you're past the basics, don't watch it while you're still doing the basics xD).

2. Basic objects are easily learnable with JS since you can type them in a literal sense, whereas otherwise you need to instantiate it with a constructor (e.g. Java) or you don't really learn about objects (e.g. C, though I've heared that it does have objects right? Despite it being an obscure feature, anyways, I'm not sure if you should be happy to learn about objects, learning about dictionaries or hashing is cool though). More importantly, when you start out learning programming, primitives + some HTML + simple objects are all you need to know.

3. Yes, try/catch is useless. I wouldn't call that basic though, but I'm already noticing we're differing on definitions (note: my definition was relatively clear, variables, if-statements, for loops and functions). And in coding bootcamps, the concept came long after I taught the basics of programming (e.g. it came in week 5 because of NodeJS). I remember Python being better for this.

Errors in try/catch are as infuriating as segfaults or other memory leaks / coredump issues, they simply seem to happen in C a lot more when you're just starting out with programming (sorry if I mangle terms, C has been a while for me, and I like C, just not as a starter language, just as I used to like Charizard but not as a starter pokémon :D). Later on, it's a different story and I have suffered enough pain from it.

Note: I'm not saying JS is the best language to learn from in the world. I think Python is better suited for that, or in some cases Scratch, or in other cases C# + Unity3D.

I'm simply saying it's better than C (in terms of learning programming basics).

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

⬐ the_gipsy

First, I didn't make it clear that I'm not advocating for introducing types to beginners. I advocate against JavaScript in particular for beginners.

Re: 1, yoy absolutely have to introduce it as soon as you move beyond the most trivial synyax example. Nodejs, browser, whatever you do, the most trivial thing that actually runs somewhere _will_ have callbacks that are run in the event loop queue. Not run in line-order, which is what beginners learn first. Now you have to go down a rabbit whole about the event loop, what and how and when fns gets put on the queue etc etc. Not ideal IMO since it's pretty specific to JS.

2. I buy that it's better than nasty Java, but any weakly typed language applies.

So yea, Python is probably the best in terms of easiness and less paradigm-specific cruft.

⬐ Bahamut

I personally found JS much easier and accessible than Python, but YMMV.

I tried a number of different languages when I first started seriously pursuing a job in dev - C++, PHP, Ruby, Python, and eventually I settled on JS. JS let me quickly get something working while being able to understand what was going on. The other platforms had various barriers that made it difficult to focus on what I wanted to do because I had to know a ton of other things first, or to accept not knowing how something functioned (especially true with Rails).

The only real gotcha I really had struggled with in my first year as a professional dev was reference variables, but that is a gotcha you could run into in most standard languages and not unique to JavaScript.

⬐ the_gipsy

Elm, the language of the article, does not have refs :)

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

1) Watch this: https://www.youtube.com/watch?v=8aGhZQkoFbQ&t=1s 2) Understand how `this` binding works. 3) Understand async/promises. 4) Learn debugging tools (`debugger;`, `$0`, how to turn on/off source maps etc.) 5) You will have to learn compiltion tools (babel and webpack)

⬐ machiaweliczny

As an exercise I recommend implementing most of utility functions from lodash library according to spec. https://lodash.com/docs/ (lodash is popular utility library)

Completely agree. Aside from learning the basics of the language (which if you already know any other "C like" language isn't difficult), gaining a good understanding of async flows (Promises then async/await) is absolutely key in JS and is probably the biggest hangup I see people run into.

Where I work I'm considered the JS "expert", my coworkers consist of a few older seniors that mostly do backend work that think JS is bad/confusing language, and a few juniors that really only have experience with languages they learned in school (which probably doesn't include JS). And 90% of the issues I help them with are caused by a lack of understanding of async JS -- "why is this value undefined?" or "how do I get the data out of a Promise" and for the latter telling them "well, you don't get the data out of a Promise, you would chain it with .then(data => data) to operate/use the data" is usually met with even more confused looks. Though async/await helps a ton with how they use the data from a resolved async operation, you still need to understand promises (at least a little) since it's built on top of them (e.g. in a try/catch async block the lines after the await are essentially the function that gets passed to promise.then() and the lines in the catch block being the function that gets passed to promise.catch()).

Two other things I'd like to mention (which could be under "learning the language") that I think really help with really understanding JS and being able to use it well are:

1. Understand the Event Loop[1]. Learning this will make a lot of JS's oddities make sense, and is something you should learn even before learning about async JS as it will explain how your async function actually works under the hood (i.e. the non-blocking nature of JS).

2. Closures/Scoping

[1] 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.

Philip Roberts: What the heck is the event loop anyway? | JSConf EU 2014 - https://www.youtube.com/watch?v=8aGhZQkoFbQ

Hey there,

I'll start with the disclaimer, as lately HN comments have tendency of becoming toxic - everything I write is my personal opinion.

With that behind us I can start. I'll try to write this for someone who knows very little about JS, but knows her/his way around basic programming/cs.

Firstly I love JavaScript, I have been writing it for 10 years now, but there are bad parts of it as well.

Let's start with good stuff

* It is evolving in the right direction

* You can do a lot of things with it (web apps, games, mobile apps, server...)

* Materials for learning are everywhere

* It will be easy to find a job

Bad stuff

* It is moving at crazy to follow pace

* There are a lot of different ways of doing same things

* As it is very hip thing to do, there is a lot of bu___hit (beware of the hype train)

Learn plain javascript before moving to frameworks. Focus on ES6 and new stuff as it will make your life way easier.

* Someone already mentioned Dr. Axel Rauschmayer, pick any of his books - http://exploringjs.com/

* Another good one is You Dont Know JS - https://github.com/getify/You-Dont-Know-JS

Try to make small app on your own. You'll get into all sort of problems, but that's the fun part I guess. That will help you to understand what frameworks are trying to solve.

Then you can start learning one of the frameworks. React, Vue, Angular are all solid choices. My pick is React, as I know it best. Apply the same mindset as with learning plain JS. Try to write your own stuff on a small scale before importing huge libraries.

Good example is redux, everybody on the internet are screaming that you should always use it, but even Dan Abramov (author of redux) has great read - You might not need redux https://medium.com/@dan_abramov/you-might-not-need-redux-be4...

Try handling state yourself, then if you see that you need big guns, try redux. Same goes for any big library or technology.

So, buckle up, do it thoroughly and try to find fun in doing javascript. And the most important generic advice - do a real pet project instead of just blindly following tutorials.

This will take some time, and if you just want enough knowledge to lend a job, pick a framework, throw yourself into the deep end and swim your way out. This is something I wouldn't recommend but it works for some people.

Hope this helps, cheers! S

P.S.

Random JS talks I like

* Wat - Gary Bernhardt, 2012 https://www.destroyallsoftware.com/talks/wat It never fails to crack me up

* Live React: Hot Reloading with Time Travel - Dan Abramov, 2015 https://www.youtube.com/watch?v=xsSnOQynTHs Classic nowadays, it is a delight to watch Dan Abramov presenting, only thing missing is a mic drop at the end

* What the heck is the event loop anyway? - Philip Roberts, 2014 https://www.youtube.com/watch?v=8aGhZQkoFbQ This is a must watch for every js developer

EDIT: Sorry for the formatting, HN doesn't support markdown

The corner stone of understand async JavaScript code is a deep understanding what happens under the hood with the Event loop. Philip Roberts has a great lecture called what the heck is the event loop anyway? [1] Once that video is watched once, everything else just makes sense.

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

My favourite talk is:

"What the heck is the event loop anyway?" by Philip Roberts

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

Paul Buchheit - Startup School Europe 2014

https://www.youtube.com/watch?v=v5w-0H-hq6E

Anjana Vakil: Learning Functional Programming with JavaScript - JSUnconf 2016

https://www.youtube.com/watch?v=e-5obm1G_FY

Bret Victor - Inventing on Principle

https://vimeo.com/36579366

Philip Roberts: What the heck is the event loop anyway? | JSConf EU 2014

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

⬐ mattste

I definitely recommend Philip Roberts's talk. I watched it a couple of months into learning Javascript and then everything "clicked."

> How do I take, say JS, and learn it to the point where it really clicks to the point where I can visualize what's going on under the hood when I write programs?

Learn how a JS engine works. Any engine will do, although V8 is very discussed on the internet. Here's a few things to get started with:

- How the event loop works (https://www.youtube.com/watch?v=8aGhZQkoFbQ). This show how JS works under the hood, what's part of "JS" and what's extended, how async operations are scheduled on a single thread. After watching this, everything will just "click".

- How objects are represented in V8 (https://thibaultlaurens.github.io/javascript/2013/04/29/how-...). It's v8-specific but nevertheless tells you how objects are represented in memory. Keeping these concepts in mind, you will be able to write efficient code on the get-go.

- ES6 spec (http://www.ecma-international.org/ecma-262/6.0/). Optional reading (if you want to read 500+ pages), but it's a handy reference when in doubt. You can literally slap this thing to a person who doesn't know what they're talking about. Not that you should, but backing evidence is always great.

i cannot believe i didn't have the mental model outlined in this video (the intro video to the site) after developing for the web for so long. https://www.youtube.com/watch?v=8aGhZQkoFbQ ...a great, very simple explanation.