I hate worrying about performance. It's the least fun part of development. It's hard enough writing code that works, are we really expected to make it work well on all devices?
In my app Daily Nanny, there's a feature that allows nannies and parents to manage the nanny's hours. In one of the views, it lists all their shifts in history, and I do some pretty complex data operations before I display the array:
I use moment.js to do some date related operations, like figuring out how long the shift was in minutes and hours based on a Date object for start time and end time, then do a bunch of math to calculate the amount earned based on their hourly rate, if any overtime pay should be applied, assemble shifts into weeks with a header including aggregate data, all based on an array of simple shift objects I get back from my API.
There's plenty of documentation on workers, but I found none of it went beyond the most basic example, so I'm writing this to provide a little more context. Let's get into the code.
Create a folder in your
app folder called
workers (or whatever you want), and create a file for your operation. In my case, I am processing shifts, so I called it
process-shifts.js. In that file, throw this code in there:
require('globals') is necessary to get this working on a new thread. Then
global.onmessage is what receives a message from your main thread. The terminology here is that the threads are communicating with each other through "messages". I find it helpful to think of it like a Promise. You do something, and when that thing is done, your code continues executing in the
.then method. In the context of Workers,
postMessage is like calling resolve() in a Promise.
So that receives data from your main thread in the message. In the above code, workerMsg.data contains the data you send to the worker from the main thread. Then it sends a message back to the main thread with postMessage. So let's look at how to call this from the main thread:
I'm using the worker to do the heavy lifting, and it returns an array with all the data that I need, then I just set the Observable Array that's the source for my ListView to the response from the worker.
When the heavy lifting is done, kill the background process using worker.terminate()
This approach is crucial for apps that do some computationally complex operations. It's not always necessary, but don't be afraid to employ workers. In my case, when developing the app I didn't really experience any lag because I wasn't yet working with a large data set. But since my app has a bunch of users now generating a bunch of data, it's more important to think about what operations may slow down the UI as the app scales.
Reach out to me with any questions/comments, and thanks for reading!