Web Workers: Handling Heavy Processing on the Client Side

And hi everyone, my name is Kevin Wehara, and first of all, I'm very happy to be here participating in the JS Nation West edition, and I'm so glad to be here and thank you so much for watching my presentation. And today I'm here to talk about web workers and how we can handle with large processing on the client side. So in this talk, I want to introduce you what is web worker. OK, so let's begin.

And how I said before, my name is Kevin Wehara, I'm a staff engineer at iFood. I'm going to talk about iFood in the next slides. But I'm here in Brazil, I'm a Microsoft MVP, speaker and content tech creator on YouTube, you can find me there. I'm a Prochain Campinas organizer. Prochain is a Prochain event here in Campinas. Campinas is the city where I live today. I'm NodeBR and GDG Campinas collaborator. NodeBR is Node Brazil, and GDG is Google Developer Group. OK. And I'm from Brazil, Sao Paolo, and one of my hobbies is play CS2, but I'm very bad and I give up. I'm a software developer for around nine years and focus on front for around five years. And I'm familiar of a good TypeScript. Some curiosity of me. And I work in the iFood Logistics rival. iFood is the biggest food delivery company here in Brazil today. I work in location, location is the name of my team. In addition to other internal projects here, the context what I work today is geoprocessing, geolocation, partner delivery areas, delivery routes, and much more. OK.

So what I'm going to talk and what I'm going to cover in this talk? I want to introduce you what is WebWorker. I want to show some examples with the shown the codes and the hands of the code on hands on the codes. So let's see some examples and see the benchmark, the tradeoffs. Let's see the results. And let's finish with the context of my context. So the application overview, let's create an application without using WebWorkers and then we're going to implement it and visualize the application performance. OK, so we're going to create an application with WebWorkers and another without WebWorkers. OK, so with these two applications, we're going to compare and see those results with the benchmark.

OK, so what is WebWorker? The WebWorker is an API provided by the browser by default. We know that JavaScript itself is single thread without going to the merits of Node.js with libuv. However, with the image loop, callback query, stack architecture, we can say that JavaScript can handle a synchronous process on demand. OK? And the browser offers a series of APIs that can be used by development teams. For example, storage is like session storage and local storage, indexed DB, workers, PWA, performance monitoring, performance monitoring, sorry, lighthouse. And one of the topics I want to address in this talk is WebWorker and how do they live, how do they survive, how do they reproduce. I'm kidding. But why use, what is the benefits to use WebWorkers? OK, when use and when not use. So WebWorkers are mechanisms that allow operations, usually larger calculations or huge operations to be executed from the main thread, making sure the main thread is not blocked. And what I want is for a function to perform certain heavy processing that will block integration of the page, the UI. To be more clear, I'm going to show some examples, OK? And before I show the example, I want to say that I wrote this article about WebWorkers and you can find on dev.io. So just in this article, I did dive on this concept. So you can find in the dev.io, searching by Kevin O'Hara or searching by introducing JavaScript WebWorkers, OK? So let's continue. Just show me the code, the best part. OK. So for demo projects, I will not use any framework or lib, for example, React, Angular, Vue, Velt. I'm going to just use VanillaJS, OK, the pure JavaScript. And to do this, I'm going to create our workspace with the following files, the index.html, the index.js, and our style, OK, CSS. So here, this is our files. So in principle, don't pay attention to this code here. I want to show you this extension here, the live server. OK. The live server is an extension of VS Code. So you can install just to use a server in your local hosts and we have the hot reloads and this is going to facilitate our lives, OK. So the HTML here is very, very simple. So here, we have our import with our style, the script with the index.js. I'm using a sync import. And here, I have this three elements the button to start a large operation and the second button will change the background color. And here, I have this three tag just to the output, OK, the time of the processing, OK. And easy-peasy.

That's it, OK, the HTML. And the CSS here, I'm resetting the CSS. Here, adding some styles for our button. So that's it with the background color blue. And when hover, I change, OK. So that's it. And the JavaScript here in the first function, I have a large operation. I'm going to simulate a large operation. So here, I have a loop with this big number here and give a huge value, OK. And after that, I'm going to increment this value here and I'm just returning this value after I finish the loop.

In the second function here, is an event lister function. I just call the first function when click on the start large operation, OK, here. And when I click, I'm going to call the handle large operations, OK. And the second and the third function here is another event lister just to change the background color, OK. So I get the body and if the background color is dark, I change to white. If it's white, I change to dark, OK.

The result without web workers, OK. So I want you that, I want you to pay attention in this example. So I'm going to click. First, I'm going to click in the first button to start the large operation and you can see that I can't click on the second button because the main thread is blocked, OK. So let's see. So I'm going to click start large operation and I can't click on the second button because the main thread is blocked, OK. So after the process finish, so the main thread is free, I can click to change the background color, OK. So this is some problem that we need to resolve. So how we can resolve? Using web worker. And let's create another file called worker.js, OK. And here, I change the function that was previously in the index.js. Now it's in, it is in the web worker file, OK. So I get the handler operation that was in the index.js, show worker.js. And here, we have this function here, the all message that represents all message that we received in the web worker and based on that, perform some operation.

So if the event dot data, that is the name of the operation, I call operation. But I can name with, I don't know, I'm very bad, I'm sorry. But I don't know, jsnation event name, OK. So just I put here and this is going to be the name of our event, OK. So if the name of our event equals event.data equals operation, I just call the handler operation and I post the value here. So when I return, I'm going to post the message with the the value, OK. So note that I remove the processing have function for worker.js. So I don't have the handler operation function here.

And now we need to instantiate the worker API with new worker here, OK. So I'm going to instantiate the web worker, OK. So I'm going to call pass as parameter, the name of our file. And here, I have some before, I'm going to get the date now. And here, I'm going to call the operation name here of our event, OK. The same name, OK. And here, I'm going to call the all message function. And here, I'm calling after with the date now. And here, I'm going to create the when we receive the message here, the post message here. I'm going to just print the time, OK. And I'm going to create, put on the pre-tag, the text content with the value, OK. The event.date. So here, this is the timestamp, OK.

And the event listener to change the background color, don't change, OK. So I just changed the event listener to click, OK. And when I click, so I just call the operation name of our event. And after we finish the work, we will, it's going to receive the message, OK, with the value. So let's see the example here. I start, I click, so it's, I click on the start large operation. And when I click on the start large operation, I can click on the change background color. And after the process is finished, the value will be printed here, OK. And with the web workers and start having process, the UI is not blocked due to the main thread, OK.

So, guys, that's it in short. OK. I know that probably this is going to be confused. I don't know. But you can find me on YouTube, oh, it is. Oh, my God. I'm kidding. You can find my channel on YouTube. So I have some courses with React, about React, state management, tools, and Rectories. So you can find me on YouTube. And I end on the .io where I wrote some articles. I write some articles, sorry. So you can find me there too. OK. So in the same example, and the same concept of Web Workers, I wrote this article. So you can find there where I did dive in this concept, OK, with more details. So here is my QR code. You can find me, my social medias, my LinkedIn, Instagram, Twitter, GitHub, and Dev.io and my YouTube channel. OK. Thank you so much. And I'm very, again, I'm very, very happy to be here. This is my, it's a privilege to be here representing my country. And I'm so happy to be here. Thank you so much, everyone, to watch my presentation. OK. And, oh, I, right. We have some error here. So thank you so much. And I say in this all my videos and stay well always. OK. Thank you so much. And see you soon.