DEV Community

Discussion on: Write cool stateful animations with js-coroutines

Collapse
 
jwp profile image
John Peters

Mike;
Just wondering about the term co-routine. Are you using it as defined by React? I understand a co-routine to be an uninterruptible ''function" which keeps it's own stack. We see the async await pattern able to do this, but we are not able to interrupt at will with that pattern.

Collapse
 
miketalbot profile image
Mike Talbot ⭐ • Edited

Hey John,

I'm using the definition from back in my Unity programming days.

So I think your description is right, it's very like async/await which are coroutines by my definition, just the resumption criteria is "the next tick after something happened". My implementation here does 1 of 2 things. An update coroutine is being called back by requestAnimationFrame - so guaranteed every tick presuming the system isn't under heavy load. js-coroutines also does requestIdleCallback to run things in the "gaps" - in this when you yield it checks how much time is left and if there is enough, you get to go again straight away.

In Unity coroutines are called every game loop (so the Unity equivalent of requestAnimationFrame). I've just built a library to use that and the other principle, in conjunction with generator functions.

My implementation of both allows for termination because the promise returned by run or update has a terminate method that will stop it on the next time it's called.

I detail the actual code that runs the coroutines and a bit of a broader description in this article.

I am building examples in React, but it's all just plain Javascript and should work anywhere. It is the basic principle behind the upcoming Concurrent mode in React I believe - though not sure they'll be exposing the underlying power of the technique or wrapping it in other structures on top.