I would like to synchronize data and assets to my server without blocking the user experience. In order to do so, I’ve built an in-memory queue - basically just a sorted javascript array of upload tasks.
What I would like to do is to execute these tasks in a “low priority” manner, so that they never block the main UI thread and hinder the user experience.
Note that I am NOT currently looking into background execution, e.g. the app can remain open while the transfer is ongoing and when the app is closed, the transfer can be aborted.
Do you do a lot of pre-or-post processing in JavaScript on this data? If all you’re doing it is uploading it, I don’t think you’ll have a problem. All network requests execute asynchronously. They don’t block the JavaScript thread any longer than it takes to fire off the request. They will execute on native threads other than the native UI thread, so they shouldn’t bog down the UI on that end, either.
If it’s a lot of data, you’ll probably want to be more aware of not taking up too much bandwidth/ battery before you worry about bogging down the UI. To that end, you could regulate the frequency of how often you fire requests (e.g., sleep X seconds/ minutes between requests).
Thanks, solid advice. If uploading images through a REST-request doesn’t block the JS thread, I don’t think I’ll be in trouble. I’ve also rearranged (denormalized) the data a bit so that reads run more quickly when the processes need to do their work.
Still wonder how you would go about heavy client-side processing, such as image manipulation. Not an urgent concern anymore though.
If you mean stuff you would do with ImageManipulator (ImageManipulator - Expo Documentation), that’s also executed asynchronously, handled on another native thread.
Even if it’s custom, anything related to actual image manipulation, you’ll probably want to write native code for that, so you have access to libraries that can help you manipulate images that are baked into the OS, or available as third party native code libraries. There’s just not much you have access to in JavaScript other than the base64 image data. Even “pure JS” image manipulation libraries tend to rely on HTML canvas, which isn’t available in React Native.
For pure data manipulation in JavaScript, I suppose over a large data set, you could run into some performance issues (React figuring out the next render is in itself sometimes a large dataset worked on synchronously in JavaScript, and the only source of JS-thread performance issues I’ve ever experienced). If you can chunk your data into smaller bits that can be worked independently, you can execute each bit as an async function and wait for them all to resolve with Promise.all(). Additionally, there are libraries like https://github.com/devfd/react-native-workers, which requires ejecting (if you’re looking at custom image manipulation, you’re already likely considering ejecting, though).