DEV Community

Cover image for 60fps JS while sorting, mapping and reducing millions of records (with idle-time coroutines)

60fps JS while sorting, mapping and reducing millions of records (with idle-time coroutines)

Mike Talbot ⭐ on May 24, 2020

js-coroutines GitHub I had a Eureka moment earlier after reading something very interesting on dev.to - gave me an idea - and wow did i...
Collapse
 
miketalbot profile image
Mike Talbot ⭐

So github is now public and I've improved the docs and included es6 version in the dist folder of the npm package.

Collapse
 
jonrandy profile image
Jon Randy 🎖️

GitHub link is 404?

Collapse
 
miketalbot profile image
Mike Talbot ⭐

Sorry, late night, forgot to make the repo public...

Collapse
 
gollyjer profile image
Jeremy Gollehon

Do you expect this would work with React Native?

Collapse
 
miketalbot profile image
Mike Talbot ⭐

I wouldn't have thought so the way it is at the moment as it relies on requestIdleCallback which is a browser thing. Though clearly it could be adapted to work in that environment either by estimating the time per frame (using whatever the RN tick is) or if RN has actually got something to tell us.

I have only dabbled in React Native - would this be useful do you think? Very happy to do a version for it if it would help?

Collapse
 
gollyjer profile image
Jeremy Gollehon

We have a ton of data we must manipulate client side to put in charts. Parallel animations have been a challenge. Something like js-coroutines would potentially provide a much better user experience.

Thread Thread
 
miketalbot profile image
Mike Talbot ⭐

Ok cool - I looked after your comment. It appears that I can do something with the timers. I'm just not sure how much time it will need when reverting to native after the JS. But definitely looks possible. I'm excited to try if you'll find it useful. Will give it a look.

Thread Thread
 
miketalbot profile image
Mike Talbot ⭐ • Edited

Ok, it works :)

js-coroutines 2.1.40 - very recent version of React Native (but I think I've polyfilled requestIdleCallback for older versions)

Demo

Thread Thread
 
gollyjer profile image
Jeremy Gollehon

Sweet! I think I'll be in a place to test this out next week. 👍

Collapse
 
miketalbot profile image
Mike Talbot ⭐

This library has been updated to support JSON and a whole bunch of helper Async functions to make coding easier. There is more detail available in this article: dev.to/miketalbot/60fps-javascript...

Collapse
 
rahulbhanushali profile image
Rahul Bhanushali

404 on the github link.

Collapse
 
miketalbot profile image
Mike Talbot ⭐

Now made it public - link is github.com/miketalbot/js-coroutines

Collapse
 
joshuaaron_ profile image
Josh Reynolds

This is really sweet! Might be asking for a few of us here, but do you think you could possibly delve into how this works, and how you came to these answers?

Collapse
 
miketalbot profile image
Mike Talbot ⭐

Good point, I definitely will write on that. I'm going to add JSON parsing as a coroutine and then when that's done (hopefully tomorrow) I'll write about the core principles. Should have done it at the start!

Collapse
 
joshuaaron_ profile image
Josh Reynolds

Awesome, can't wait to read it!

Thread Thread
 
miketalbot profile image
Mike Talbot ⭐

Hey Josh

I've posted the updated library info and the description of the process here.

M

Thread Thread
 
joshuaaron_ profile image
Josh Reynolds

Hey Mike, that is a brilliant write up, super in-depth and well explained!

Thank you again for this.

Collapse
 
thejayhaykid profile image
Jake Hayes

That is impressive! Well done man

Collapse
 
gabrielctroia profile image
Gabriel C. Troia

This is really really cool. I'm sure I'll find use-cases for it in the next future. Probably sooner than later for chessroulette.org 🤔