Hi there, my name is Kevin. I'm Seth from change engineer in Brazil and I'm here today at Conf 42 DevOps 2024. And and first of all, happy new year for all of us and I'm very happy, excited and a little bit nervous because this is my first international talk and my first english talk. So ignore this fact. But I'm grateful to be here talking about web workers and how we can handle with have processing on the client side. So let's begin and just to introduce myself and how I said before, my name is Kevin Uehara. I'm Stefan Change engineer at iFut. I will be talking about ifut in the next slide. I'm from Brazil, Sao Paulo. I'm a speaker and tech content creator at YouTube. You can find me there. I'm a community partner at Nodebr, that is Node Brazil community. I'm organizer of campiness from change. Campiness is the city where I live. One of my hobbies is trying to play cs contrast, but always I remember that I'm very bad and I didn't play it CSQ yet. I'm developer for about nine years and focused on the front chain for about five years and I'm very, very typescript somalier. I love it. So talking about ifuT, the current company where I work today, ifood is the most big tech food delivery in Brazil. I work in the ifood logistics tribal. I work in two chains, location areas and location gel. Together these two chains are called by Maps platform. We work with gel processing, geolocation, partner delivery areas, deliver routes and much more. Okay, so let's begin what I will be talking in this presentation I want to introduce you what is web workers? I want to show some application that I built and see how we can use webworkers, the results and if the time allow us. Let's write some code and let's finish with my contacts. So the application overview let's create application first without using web workers and then we will implement it and visualize the application performance. And after that we will refact the entire application using web workers and compare the results and the performance. Okay, so what is web Workers? Web workers is an API provided by the browser. By default we know that JavaScript itself, the vanilla JavaScript is single thread without going to the merits of node js with Lab UV. However, we note that we have the image loop callback query stack and this entire architecture is provided by engine V eight. And we can say that JavaScript can handle a synchronous process on demand. Okay, so the browser offers a series of API that can be used by development team like storage for example session storage, local storage, indexDB workers, PWe performance monitoring, lighthouse devtools and a lot of more of features. And one of the topics I want to address in this talk is web worker and how do they live, how do they survive, how do they reproduce? I'm kidding. But why to use what is the benefits? So let's see. Web worker are mechanisms that allow operations, usually large populations or huge operations to be executed from the main thread, making sure the main thread is not blocked. What I want is for a function to perform certain have processing that will block integrations with the page, the UI. So imagine that you have web app and you are making large or huge processing but you don't want your page is blocked. So the user can't interact with your page because you are making this large operation in the main thread. Okay, so this is a problem and how we can resolve this using web workers is one of the solutions that we can use. Okay, so I want to introduce you this API. I wrote this article where I did dive in the same topic and this concept that is web workers so you can search in Dev Chio by Kevin we had or introducing JavaScript web worker and how I said I deep dive in this same concept and the same example that I will reproduce with you. Okay, so let's choose the app. So the shown the code. So for our demo project we will not use any framework or lib. We're going to use just vanilla js to do this we will create our workspace with the following files, the index HTML, the index js and some styles for our application, okay, simple styles, okay, because I'm from James I'm kidding but we have the script files, okay and ignore this code here. But we have this extension here called live server. That is extension. If you don't know live server is extension of this code you can use just to provide a server. And we have the hot reload, okay so to the HTML we have this simple HTML here. We are importing the style here and the Javascript here. Okay, so I'm using async import. You can use defer or async. But for this example we need to use async. Okay important. So we have three elements here, two buttons. The first button will start a large operation and the second button will change the background color of our page. And this pretext is where I will print the result of the large operation. Okay, so this css I'm resetting the full styles and adding some styles for our button the paging background preserve. So that's it easy. Okay, so the Javascript file the index js we have this first function here, we have three functions. The first function will simulate the large operation. So we have the valley starting with zero and we going to increment this valley using the loop and start with zero and using the four until 1 million, I think that is one and eight zeros, okay, and multiplying by 30 and I return this value here. Okay and we have this two event listeners here. The first we will start the large process and call this function here just to simulate a large operation in the main thread. Okay. And console log here processing the value. And the second button will change the background color of our page. So if it's white I will change to dark and if it's dark I will change to white. Okay, so let's see the result of this application without using web worker. So notice that I will click in the first button that we will start the large operation and I will try to click on the second button that will change the background color, but I can't click because the main thread is blocked. So let's see, I clicked on the first button and I can't click on the second button because the main thread is blocked until the large process is finished and the main thread is free. Okay, so to resolve this problem I will use the web worker, so I will create this fileworker js. Okay, so I will change something here, I will move that function, handle large operation that was in the index HTML to here in the webworkers js. And we have this function here, this anonymous function called omessage that we receive as parameter the event, and we are comparing the name of our operation that I name it as operation. You can give any name you want, but I give operation and if I receive operation I will call the handle large operation function. And after that I will post message with the value, okay, so that's it, this is the file and let's refact the index js. Okay, so here I'm instantiating the worker and processing the path of our file, okay, worker js. So I create the worker and instantiation. And here I'm just creating this before and after just to bring the time in seconds. And here I'm calling the function of web worker, that is post message processing the name of the operation that I give operation. So it's the same name here, and after that I call this o message that will be listening if the large process, it will be created on worker from Maingrad and after the process on the worker is finished, it will call it callback. And this all message to print and you can use the data that you process it. Okay, and I'm getting the data here and printing in the text content tag, that is the pre tag. Okay, so this is the change that we have. Okay, so the result, I click it on the start button, large operation, but we can change the background color and the user can interact with your page without being blocked. So the main thread is not blocked. Okay, so this is one of the benefits to use the web worker you can use without blocking the UI. So that's it. This is our example. For large or huge operations you can use web workers and this is one of millions of solutions that you can use. Okay, so that's it in oh my YouTube channel. If you want to know me more, I have the YouTube channel, you can find me there by Kevin Mujara how I said before, I'm content creator, we have a lot of courses but I'm speaking Portuguese but you can use the captions. We have courses like Ratchi state management and lot of more of content. Okay, so you can find me there. And remember I have this article on dev tube that I did diving in this concept, the same example, but I explain in more details. Okay, so here are my contacts, okay, my linkaging, my Instagram, my twitter, I don't call x, so I call twitter, my GitHub, my dev co where I post some articles there, my YouTube channel and the SKR quote that you be redirect to my link tree that will have all my social medias here. So you can scan this QR code, okay, and let's hands on on the code, let's write this same example, okay, so I will open my terminal, I will create this directory and I will open my vs code, okay, so I will change my tab here and that's it. Close something here and let's create our files. So my index HTML, the index JS and the style CSS. So the HTML we have this autocomplete here, HTML five. So let's create the title with web worker example and let's add our elements, bottom start large process and the second button change background color and the pretext with IG output. Okay, so I will accelerate my desktop and using the copy paste just to be quickly because it's not so important. Okay, so we have this import of our style here and the index js, okay so for our index js, let's create our function here. So this function handle large operation and with the value starting with zero and increment this value and return it. Okay so let's add the elements here. So let's get the elements by id. So the BTN large operation and BTN change color and the output and I forgot, sorry, I forgot to add the class and the id for these elements here. So let's add and let's add for the second button. Okay so just adding the style here. So we have this body style and I'm resetting the css and adding some styles for our button. Okay so in the index going back to our index js, let's add the event listener for the second button. So if the background color is white I will change to black to dark, or if it's white I will change, if it's dark I will change white and if it white I will change to dark. Let's add another event listener here that will start this is a spoiler. So let's remove and just print a const valuable and receive the handle large operation here and print on text content the value. Okay so that's it. Let's start our application, use the live server. So I will click here and start the server and it will open my application. So there's two buttons, okay so I can change the background color but if I click on start sludge process, you can see that I'm clicking in the change background color but I can't change until the process is finished. So now I can change the background but if I click again I can click on the background color. So let's refact our application. So I will create the worker file, I will get this function here and move to worker and we have the function that call all message that will receive an event. And if event data equals for example, I will give another name, for example large and I will get the value calling the handle large operation and post calling the function post message with the value easy busy. Okay, and we finish our workers and let's refact our index js. So now let's remove this function of here and let's instantiate worker. Let's instantiate our web worker. So let's call worker and pass the path of our file that is worker js. So we are going call the the post message function with the same name large and we are going to called the all message function that we will receive I event and just calling the output text content with the event data. So that's it. Okay, let's see if it's working. I can change the background color but if I start the large process we can interact with our page while our large process is being executed on the web worker and the main thread is free to the user interact with your page. Okay so guys that's it. This is our example and how we can use the webhook worker. It's simple applications but that's it. It's very simple to use this API so you can use for your applications and again this is one of solutions. Okay so guys, thank you so much and I say in every video that I created so stay well always. Okay? So thank you so much. I appreciate if you like it and if you like it give me some feedback in my social medias okay? Here in my linkaging, Instagram, Twitter however and I hope you like it. Okay can thank you so much and see you soon.