WEBVTT 1 00:00:04.120 --> 00:00:06.799 Hey everybody, and welcome to another episode of React Round Up. 2 00:00:07.080 --> 00:00:09.679 This week, on our panel we have Paige na dream House, 3 00:00:09.960 --> 00:00:15.199 Hey everybody, Carl Mungazi Hello, he tj Ventl. Hey everyone, 4 00:00:15.599 --> 00:00:18.000 I'm Charles Maxwood from dev chat dot TV. And this 5 00:00:18.039 --> 00:00:20.559 week we have a special guest. It's Madjid. Do you 6 00:00:20.640 --> 00:00:23.280 want to just introduce yourself and let us know who 7 00:00:23.280 --> 00:00:24.879 you are and why you're important? 8 00:00:25.559 --> 00:00:29.359 Hi? Everyone, So my name is Majid. I am a 9 00:00:29.399 --> 00:00:34.240 software engineer based in Oslo, Norway. I am very important, 10 00:00:34.600 --> 00:00:41.880 I think so maybe for some people I'm very important, 11 00:00:41.920 --> 00:00:46.679 for some I'm not. But apart from a joke, I 12 00:00:46.960 --> 00:00:52.119 do a lot of contribution to community, especially JavaScript and 13 00:00:52.439 --> 00:00:57.399 dart community, and I try to share my knowledge and 14 00:00:57.439 --> 00:01:01.719 experience as much as I can, so by doing public 15 00:01:01.880 --> 00:01:07.280 speaking or writing or like blogging and those kinds of things. 16 00:01:07.439 --> 00:01:11.280 So that's what I really like. Apart from that, I 17 00:01:11.400 --> 00:01:19.000 also organize a few meetups and several conferences, especially in JavaScript, 18 00:01:19.040 --> 00:01:24.159 Word for example ng Vikings you may know or you 19 00:01:24.239 --> 00:01:28.560 have heard about it or Mobile Era in Nordic countries. 20 00:01:29.239 --> 00:01:36.239 So I am very passionate about two particularly like word 21 00:01:36.519 --> 00:01:40.159 of development, JavaScript and art nice. 22 00:01:40.439 --> 00:01:45.319 So you gave a talk at React Days Berlin talking 23 00:01:45.319 --> 00:01:49.719 about parallel computing and React JS and yeah, you know 24 00:01:49.760 --> 00:01:52.560 your discussion points talk about like web workers and stuff 25 00:01:52.599 --> 00:01:54.120 like that. Do you want to just give us sort 26 00:01:54.159 --> 00:01:56.879 of the two minute rundown of what the talks about 27 00:01:56.879 --> 00:01:59.239 and the major points and then we can dive in 28 00:01:59.359 --> 00:02:00.359 and get the tales. 29 00:02:00.879 --> 00:02:03.680 Well, the idea of the talk came to my mind 30 00:02:03.760 --> 00:02:07.959 when I was actually implementing a lot of features in 31 00:02:08.080 --> 00:02:11.199 my recent project, and I figure out that there are 32 00:02:11.319 --> 00:02:15.280 lots of new APIs in the browsers which helps us 33 00:02:15.360 --> 00:02:20.639 to improve and boost user experience, and in particular actually 34 00:02:20.719 --> 00:02:25.000 in React we can actually we can leverage using these 35 00:02:25.039 --> 00:02:32.560 APIs and kind of a wide disrupting user by poor 36 00:02:32.639 --> 00:02:37.080 performance or JANKI frames on the browsers. Right, So in 37 00:02:37.120 --> 00:02:40.240 particular we have like web work heres and a few 38 00:02:40.360 --> 00:02:47.199 new APIs like web assembly or worklets or even service 39 00:02:47.240 --> 00:02:52.560 workt which doesn't have directly something related to the main thread, 40 00:02:52.639 --> 00:02:57.479 but still it can improve something, which I had an 41 00:02:57.479 --> 00:03:00.840 example in my talk and I talked about it, people 42 00:03:01.000 --> 00:03:06.120 very liked it. So that's that was the whole things 43 00:03:06.159 --> 00:03:09.360 that I actually talked about in this start, Like these 44 00:03:09.560 --> 00:03:13.199 four different APIs in the browsers very cool. 45 00:03:13.719 --> 00:03:15.240 So let's just start with the first one. 46 00:03:15.520 --> 00:03:20.639 Yeah. Sure. So the first one, which is probably the 47 00:03:20.680 --> 00:03:25.719 most underutilized one, is webworker. And web workers are around 48 00:03:25.879 --> 00:03:30.039 for quite some time, so maybe twelve years or more 49 00:03:30.159 --> 00:03:35.439 ten years. It's been around for a while and all 50 00:03:35.599 --> 00:03:41.240 the major browsers actually supported but it it well maybe 51 00:03:41.400 --> 00:03:45.719 maybe many of us don't. Actually it doesn't use it. 52 00:03:46.159 --> 00:03:49.759 So when I in my I gave this like several times, 53 00:03:50.439 --> 00:03:53.479 and when I asked in the room, like who is 54 00:03:53.680 --> 00:03:58.120 using a webworker? Who knows the web worker, like around 55 00:03:58.120 --> 00:04:01.719 one hundred percent of attendee say yes, we know, but 56 00:04:01.800 --> 00:04:03.719 you know. But when I asked, okay, who is using 57 00:04:03.759 --> 00:04:07.960 that in production? And like maybe less than five person. 58 00:04:09.080 --> 00:04:13.080 The reason is, like we all know web workers, we 59 00:04:13.240 --> 00:04:16.560 know that they are cool, but there is something with 60 00:04:16.680 --> 00:04:20.759 web workers the way that it is implemented. Actually the 61 00:04:20.839 --> 00:04:25.120 API we are post messaging, you know, the post messaging API. 62 00:04:25.720 --> 00:04:30.399 So it makes it a little bit maybe difficult to 63 00:04:30.480 --> 00:04:35.800 work with, and so many of us try not to 64 00:04:36.040 --> 00:04:40.519 deal with it unless we really need it, you know, 65 00:04:40.680 --> 00:04:44.040 in the application. So that was the idea. So I 66 00:04:44.079 --> 00:04:47.040 started with the basic of the web workers, like what 67 00:04:47.120 --> 00:04:48.800 they are. So I'm not going to talk about it 68 00:04:48.839 --> 00:04:52.279 here because I guess like many of us, even our audiences, 69 00:04:52.360 --> 00:04:55.560 like right now, they know and I and probably they 70 00:04:55.600 --> 00:04:58.800 also know that it works. We are post messaging, like 71 00:04:58.920 --> 00:05:03.120 you have the say PI. You send an object message 72 00:05:03.120 --> 00:05:07.360 to your worker thread and do something and then you 73 00:05:07.399 --> 00:05:10.360 can get back another message and then deal with it 74 00:05:10.399 --> 00:05:14.160 in the main threat. Right. But when I found a 75 00:05:14.319 --> 00:05:20.920 new library actually done by Surma developer advocate in Google. 76 00:05:22.959 --> 00:05:29.120 The library name called a com link. The actually reimplemented 77 00:05:29.319 --> 00:05:33.040 the way that we can use web worker. So it's 78 00:05:33.240 --> 00:05:38.040 it's pretty neat and easy. If you download the library 79 00:05:38.079 --> 00:05:41.360 and start using this library in your application, you're going 80 00:05:41.439 --> 00:05:44.759 to have you're gonna have like a very simple API. 81 00:05:45.480 --> 00:05:48.800 I'll get to the API also, but then after using 82 00:05:48.839 --> 00:05:53.079 the API, you will get actually a promise, very very simple, 83 00:05:53.199 --> 00:05:57.600 so you directly talk to the worker threat and you 84 00:05:57.720 --> 00:06:01.360 have a promise, so you can simply wait, send something 85 00:06:01.399 --> 00:06:05.600 to this thread, call some kind of function and then 86 00:06:05.720 --> 00:06:08.639 wait for it and then you know. It's the way. 87 00:06:09.079 --> 00:06:12.319 It's a very natural way of programming in Java scrit 88 00:06:12.439 --> 00:06:16.079 if you start using this library. And that's that's the reason. 89 00:06:17.279 --> 00:06:23.879 So I again started talking about these web workers with 90 00:06:24.720 --> 00:06:28.319 conving because it gives you as a developer a pleasant 91 00:06:28.360 --> 00:06:34.279 way to deal with a worker thread and to implement 92 00:06:34.360 --> 00:06:39.519 in your application. So maybe I should explain too simple 93 00:06:39.560 --> 00:06:41.680 API of this library. 94 00:06:42.000 --> 00:06:44.000 Yeah, I think as quick explanation would be good. 95 00:06:44.480 --> 00:06:49.759 Yeah, okay, So when actually you have common link installed 96 00:06:49.800 --> 00:06:55.519 and instantiated, you get to function one is wrap function 97 00:06:55.639 --> 00:06:58.920 and another one is exposed you want to use exposing 98 00:06:59.040 --> 00:07:04.120 your threat or your web worker javas profile, and you 99 00:07:04.199 --> 00:07:07.639 expose your function or your object, your services like all 100 00:07:07.720 --> 00:07:10.199 of those functions that needs to be exposed to the 101 00:07:10.240 --> 00:07:13.120 main threat, right, and then you have the wrap function 102 00:07:13.279 --> 00:07:16.519 which you will also wrap the web worker in extensions 103 00:07:17.319 --> 00:07:20.480 or the constructor actually in the main threat. And then 104 00:07:20.639 --> 00:07:24.439 with only these too as like maybe sufficient to start. 105 00:07:24.800 --> 00:07:28.600 So with only these too, then when you construct or 106 00:07:28.600 --> 00:07:32.319 instanceship this worker, then you get a promise with those 107 00:07:32.360 --> 00:07:34.800 services that you are exposing to the main threat. So 108 00:07:34.839 --> 00:07:39.160 you simply just call your method and then wait for 109 00:07:39.399 --> 00:07:42.199 the result, and then you can also do something with it, 110 00:07:42.240 --> 00:07:46.240 like in particular in React as I had an example. 111 00:07:47.160 --> 00:07:49.360 So I had an example actually in Michael, let me 112 00:07:49.399 --> 00:07:55.480 talk about that. So I implemented a list of users, 113 00:07:55.959 --> 00:08:01.759 and on purpose, my list of users was around three 114 00:08:01.839 --> 00:08:07.120 thousand like items, right, so I implemented like a short 115 00:08:07.639 --> 00:08:11.279 array function in the thread, and also I implemented like 116 00:08:11.319 --> 00:08:15.720 an animation in the main threat. So I showed to 117 00:08:15.879 --> 00:08:19.439 the audiences actually in my talk that when you call 118 00:08:19.759 --> 00:08:22.680 this sort array and you want to sort this array 119 00:08:22.720 --> 00:08:27.639 by for instance, age user by age, you can get 120 00:08:27.680 --> 00:08:32.080 a list of three thousand items sorted by age. You 121 00:08:32.080 --> 00:08:35.200 can do that in main thread of course, but then 122 00:08:35.399 --> 00:08:38.759 it will block these main thread for a while because 123 00:08:38.799 --> 00:08:41.639 it takes time, you know. And then when you see 124 00:08:41.679 --> 00:08:45.399 actually the animation, when you were seeing the animation, the 125 00:08:45.440 --> 00:08:48.960 animation was blocked until you get the respond in the 126 00:08:48.960 --> 00:08:52.759 main threat, while when I was actually calling the third 127 00:08:52.879 --> 00:08:56.399 method in the web worker thread, the animation was working 128 00:08:56.639 --> 00:08:59.919 very smostly no problem, nothing blocked. You can interact with 129 00:09:00.080 --> 00:09:03.960 the app and then once you get the respond back 130 00:09:04.080 --> 00:09:09.440 from the main worker threat, you could simply set the 131 00:09:09.519 --> 00:09:12.759 state and react and then rerend their old like the 132 00:09:12.879 --> 00:09:17.000 least again and show whatever user asked for before, you know. 133 00:09:17.799 --> 00:09:22.159 So that was that was a very very well received 134 00:09:22.240 --> 00:09:25.360 example by user because it's like a very this is 135 00:09:25.440 --> 00:09:28.279 something that you deal with it in your daily work. 136 00:09:28.480 --> 00:09:29.919 Every day you need this, you know. 137 00:09:30.519 --> 00:09:32.559 Well, so actually that gives me I have sort of 138 00:09:32.600 --> 00:09:35.440 a broader question because I think I fall into the 139 00:09:35.440 --> 00:09:37.879 persona that you described at your talks as someone that 140 00:09:38.399 --> 00:09:42.240 I've known web workers for dealing with like tasks that 141 00:09:42.320 --> 00:09:45.159 you need really high performance for some sort of familiar 142 00:09:45.200 --> 00:09:47.039 with them, but I've I've never shipped them in a 143 00:09:47.039 --> 00:09:50.399 production app ever, And part of it is because, like 144 00:09:51.000 --> 00:09:53.039 to me, at least, maybe you can tell me why 145 00:09:53.080 --> 00:09:55.360 this might be a wrong perception of like I have 146 00:09:55.480 --> 00:09:57.679 always seen web workers, it's something I need if I'm 147 00:09:57.679 --> 00:10:01.759 building something that's doing something really heavy in terms of processing, 148 00:10:01.960 --> 00:10:04.279 like I'm doing something where I'm like building an image 149 00:10:04.320 --> 00:10:08.720 manipulation map or doing something really hardcore like running some 150 00:10:08.799 --> 00:10:13.639 super cool algorithms. But for the average like banking, insurance, 151 00:10:14.240 --> 00:10:16.639 financial apps that I might work on in like a 152 00:10:16.720 --> 00:10:20.879 rank and file job, what are some like pragmatic ways 153 00:10:20.919 --> 00:10:25.360 where web workers could actually benefit, like say your average developer, Like. 154 00:10:25.279 --> 00:10:28.200 You said, you know we're working and you haven't used it, 155 00:10:28.320 --> 00:10:33.600 so that's probably was also my case. I knew that 156 00:10:33.840 --> 00:10:38.159 I haven't used it so because of many reasons. But 157 00:10:38.639 --> 00:10:41.960 these days. You know, sometimes when you have these heavy 158 00:10:42.000 --> 00:10:44.960 processing and stuff like you said, maybe an image processing 159 00:10:45.039 --> 00:10:49.519 or something, some developers even decide to just move this 160 00:10:49.679 --> 00:10:52.320 process to the back end and instead of like this 161 00:10:52.720 --> 00:10:57.360 doing this in front and right. And maybe that is 162 00:10:57.399 --> 00:11:00.600 also a good solution. But think of it five years 163 00:11:00.639 --> 00:11:06.080 ago or six years ago, eight years ago, how browsers 164 00:11:06.360 --> 00:11:10.080 were working and nowadays how they are working with the 165 00:11:10.159 --> 00:11:14.919 different APIs that they are providing pluts with a lot 166 00:11:14.960 --> 00:11:19.440 of those improvement, which maybe because of the perception that 167 00:11:19.480 --> 00:11:21.759 we have in our mind from the previous from the 168 00:11:21.840 --> 00:11:24.320 past is still stick to it and we are not 169 00:11:24.559 --> 00:11:27.840 using that, you know. And also think of these days 170 00:11:28.039 --> 00:11:34.519 mobile developing for mobile, like maybe a responsive website or 171 00:11:34.639 --> 00:11:39.240 you know, particularly optimize everything for mobile. It's very crucial, 172 00:11:39.440 --> 00:11:43.480 right we are all going for mobile. It's very very 173 00:11:43.519 --> 00:11:48.159 important that we can for the browser. When we are 174 00:11:48.240 --> 00:11:54.120 talking about like utilizing different options including web workers, we 175 00:11:54.639 --> 00:11:59.440 are maybe one of our most important use cases is 176 00:11:59.639 --> 00:12:03.399 mobile optimization for our users. It doesn't matter what is 177 00:12:03.440 --> 00:12:07.720 your application, so it's a banking application or is anything else, 178 00:12:08.320 --> 00:12:11.240 as long as you're optimizing for a mobile which has 179 00:12:11.279 --> 00:12:18.200 a very maybe uh low CPU or RAM or you know, 180 00:12:18.919 --> 00:12:22.679 it is very important to optimize in different ways in 181 00:12:22.720 --> 00:12:27.960 the browsers for these particular devices that users can can 182 00:12:28.279 --> 00:12:33.240 feel like they should they should use application and the 183 00:12:33.279 --> 00:12:36.399 mobile there is moose. There should not be any difference 184 00:12:36.519 --> 00:12:39.960 between your mobile application, I mean not mobile applications, mobile 185 00:12:40.360 --> 00:12:45.879 optimization of your website and the desktop version of it. Right, 186 00:12:46.519 --> 00:12:51.200 So that brings us to the point now that we 187 00:12:51.279 --> 00:12:56.399 should think maybe differently nowadays. So even for very small 188 00:12:56.480 --> 00:13:00.200 things that probably we can do in main thread, but 189 00:13:00.279 --> 00:13:04.480 you know, many of those may block user to interact 190 00:13:04.559 --> 00:13:08.399 it with the application immediately. Maybe we should hold off 191 00:13:08.440 --> 00:13:14.240 those things to the worker threat, you know, especially nowadays 192 00:13:13.879 --> 00:13:17.879 with a lot of improvement also on top of the 193 00:13:18.039 --> 00:13:21.320 workers by differentias, like let's imagine we will get to 194 00:13:21.360 --> 00:13:24.480 it about web assembly and other stuff too, but you 195 00:13:24.600 --> 00:13:29.519 have also those other options, so you can also implement 196 00:13:30.080 --> 00:13:33.120 other things on top of the workers by different APIs, 197 00:13:33.159 --> 00:13:37.440 like maybe well somebody for instance, you know, we should think, 198 00:13:37.639 --> 00:13:41.360 I guess it's twenty twenty, right, we should think a 199 00:13:41.360 --> 00:13:46.399 bit differently. So perhaps that's my opinion though. 200 00:13:46.679 --> 00:13:49.759 So I've got a point to pick about. Contigious points. 201 00:13:50.080 --> 00:13:53.320 I actually first came across coummlink when I had a 202 00:13:53.360 --> 00:13:59.039 podcast where that Soma was talking about it, and he 203 00:13:59.320 --> 00:14:02.320 spoke about how you could you use it, for example, 204 00:14:02.399 --> 00:14:06.440 in a React application to handle your Reducs store. 205 00:14:07.000 --> 00:14:09.879 So my question was, when it comes to. 206 00:14:10.159 --> 00:14:13.720 Let's say, using Angular reacts with you all these frameworks 207 00:14:13.720 --> 00:14:15.679 and then you can maybe do stuff like putting your 208 00:14:16.000 --> 00:14:17.120 state management in the. 209 00:14:17.159 --> 00:14:19.039 Worker, how does that work? 210 00:14:19.080 --> 00:14:21.799 Because when I first heard that, I was excited about it, 211 00:14:21.840 --> 00:14:24.480 but I thought, okay, cool, Now that's an option where 212 00:14:24.519 --> 00:14:27.919 if my store it's too big for some reason, I 213 00:14:27.919 --> 00:14:32.039 can actually offload some of that storage to the worker, 214 00:14:32.120 --> 00:14:35.000 as well as doing other logic on the worker as well. 215 00:14:35.440 --> 00:14:38.559 But in terms of juggling reacts, I've got Reducs, I've 216 00:14:38.559 --> 00:14:40.559 got the worker. How could that make that work in 217 00:14:41.120 --> 00:14:41.679 an application? 218 00:14:42.320 --> 00:14:46.360 Well, first of all, let me explain this way. So, 219 00:14:46.759 --> 00:14:50.960 for instance, in Angular or many of these frameworks, so 220 00:14:51.360 --> 00:14:55.840 you may not necessarily use cumb link because they all 221 00:14:55.919 --> 00:15:02.039 have some sort of they own a APIs for web workers. 222 00:15:02.039 --> 00:15:06.000 For instance, Angela has its own like support for webwork here, 223 00:15:06.120 --> 00:15:09.519 or maybe React with a new api is like Concurrent 224 00:15:09.600 --> 00:15:11.960 and those kinds of things. But the thing is that 225 00:15:13.480 --> 00:15:17.639 when you say how can we use that, Like, I 226 00:15:17.639 --> 00:15:20.960 don't see any difference between an Angle application or like 227 00:15:21.039 --> 00:15:25.679 in this case, an Angular application and a React application. 228 00:15:25.759 --> 00:15:28.120 Let's say, because they are at the end of the day, 229 00:15:28.240 --> 00:15:33.120 they are a JavaScript you know library, right to just 230 00:15:33.440 --> 00:15:38.559 provide different APIs, and some developers like this one, some 231 00:15:39.200 --> 00:15:42.559 like like Angular one, and some likes maybe I don't 232 00:15:42.559 --> 00:15:47.279 know React, you know, different APIs for different developers to 233 00:15:47.480 --> 00:15:51.120 make maybe to make our life a little bit easier 234 00:15:51.159 --> 00:15:53.240 when we develop the web application. Right, So at the 235 00:15:53.279 --> 00:15:54.799 end of the day they are there are there are 236 00:15:54.919 --> 00:15:59.320 javascreet applications, there are JavaScript framework, right, so we can 237 00:15:59.440 --> 00:16:03.279 use any library. So I don't see any any like 238 00:16:04.120 --> 00:16:08.120 blocking point here that if you are using, for instance, 239 00:16:08.159 --> 00:16:10.919 this library, you are not able to use like coummblink 240 00:16:10.960 --> 00:16:15.919 for instance. If I understood the question actually correctly, Yeah, so. 241 00:16:15.879 --> 00:16:18.240 I guess in o case, do you prefer using that 242 00:16:18.279 --> 00:16:21.200 in both stuff for me, say Angler or comblin. What's 243 00:16:21.240 --> 00:16:23.720 your preference then in terms of your use World podcast. 244 00:16:24.240 --> 00:16:27.159 Well, when I came to the comblink and I started 245 00:16:27.279 --> 00:16:29.399 using that, I guess I'm going to stick to the 246 00:16:29.399 --> 00:16:33.159 comb link. The thing is that first of all, the 247 00:16:33.200 --> 00:16:37.360 library is very tiny. I think after Jesus is like 248 00:16:37.559 --> 00:16:41.919 one point wind club bite or something or even some 249 00:16:42.600 --> 00:16:45.360 like browser needs. For instance, if you need a policy 250 00:16:45.519 --> 00:16:49.240 for proxy, it adds maybe one more club Eye. But 251 00:16:49.279 --> 00:16:52.720 it's a very very tiny library and the API is 252 00:16:52.919 --> 00:16:57.879 very simple, and I like the way that it promisify everything, 253 00:16:58.559 --> 00:17:04.960 so it makes it is very easy to use, like 254 00:17:05.079 --> 00:17:09.359 this promise apart from other APIs, you know, I think 255 00:17:09.480 --> 00:17:14.480 I like to stick on commelink unless those APIs from 256 00:17:14.519 --> 00:17:18.279 the frameworks they change also to h you know, they 257 00:17:18.319 --> 00:17:19.359 have a similar APA. 258 00:17:20.200 --> 00:17:20.480 Cool. 259 00:17:21.319 --> 00:17:24.680 I've got a question for you, I Majid, can you 260 00:17:24.839 --> 00:17:28.799 explain the difference between web workers and service workers because 261 00:17:28.799 --> 00:17:31.559 I've heard both, I've heard them used interchangeably, and I'd 262 00:17:31.599 --> 00:17:34.279 love to get a better understanding of which one. 263 00:17:34.160 --> 00:17:38.119 Absolutely, which absolutely. First of all, let me explain this. 264 00:17:39.119 --> 00:17:43.680 The web workers the service worker are a type of 265 00:17:43.720 --> 00:17:49.839 web workers. So essentially, service worker are like a JavaScript 266 00:17:49.920 --> 00:17:54.720 file that they run in a different threat and back 267 00:17:55.039 --> 00:18:00.839 in background. And what they do is they they act 268 00:18:01.079 --> 00:18:04.480 like a proxy in your application between the network and 269 00:18:04.519 --> 00:18:08.680 your application. What does that mean? That means you can 270 00:18:08.759 --> 00:18:14.000 intercept all the network requests in service worker, right, So, 271 00:18:14.240 --> 00:18:19.559 and they are. They're great for doing things like cashing 272 00:18:19.920 --> 00:18:24.359 or delivering push messages for an instance. So there are 273 00:18:24.440 --> 00:18:28.000 different actually cashing strategy which I have a full time 274 00:18:28.119 --> 00:18:30.079 like about an hour. And also I have a book 275 00:18:30.119 --> 00:18:34.359 about it, so which we can reference maybe to the chat, 276 00:18:34.960 --> 00:18:38.880 so you can go through it and read about these strategies. 277 00:18:39.039 --> 00:18:45.880 How does the state strategies help us to make our 278 00:18:45.920 --> 00:18:51.559 application offlying? This is very very cool? Or think of 279 00:18:51.640 --> 00:18:54.200 it like service worker when we are talking about a 280 00:18:54.279 --> 00:18:57.440 proxy between your application and a network request. Is that 281 00:18:58.240 --> 00:19:00.920 I said, you intercept all the requests, right, So you 282 00:19:01.039 --> 00:19:05.160 send a request by maybe fetching an image, let's say, 283 00:19:05.599 --> 00:19:09.079 and then the request comes to service worker first if 284 00:19:09.079 --> 00:19:11.920 you have a registered service worker a javascried file as 285 00:19:11.920 --> 00:19:18.400 I explained. And then this is you now to decide 286 00:19:19.000 --> 00:19:21.640 where should I get the response? Should I go to 287 00:19:21.680 --> 00:19:25.240 the network and ask from sever about this or should 288 00:19:25.240 --> 00:19:30.039 I go to the cash and respond? So and here 289 00:19:30.519 --> 00:19:34.240 is I think it's service workers are so powerful. Here 290 00:19:34.359 --> 00:19:37.839 is where you can actually manipulate the respond So that 291 00:19:38.039 --> 00:19:42.000 was an example which I gave in the talk. So 292 00:19:42.279 --> 00:19:46.400 imagine like three years or two three years ago, there 293 00:19:47.039 --> 00:19:52.559 was not a support for web p like image extension 294 00:19:53.200 --> 00:19:57.920 in many browsers. So a friend of mine actually created 295 00:19:59.359 --> 00:20:05.880 webs an version of BMP encoder from c library and 296 00:20:05.920 --> 00:20:09.599 then he added to the service workers. So he used 297 00:20:09.680 --> 00:20:13.400 web p in the web page. But of course web 298 00:20:13.440 --> 00:20:17.119 P images cannot be shown on those browsers that didn't 299 00:20:17.240 --> 00:20:22.559 have support, right, so the solution was okay service worker. 300 00:20:22.920 --> 00:20:25.680 There was support for service worker though in all the 301 00:20:25.759 --> 00:20:29.000 browsers at that time, so it was a great time. 302 00:20:29.079 --> 00:20:32.599 So why not using salvice worker to intercept this request 303 00:20:33.119 --> 00:20:37.799 and then send it to this web assembly encoder get 304 00:20:37.920 --> 00:20:41.960 another type of you know, image back, like a BMP 305 00:20:42.119 --> 00:20:44.319 maybe or something or gift I think at the end 306 00:20:44.440 --> 00:20:48.680 he did and respond a gift version to the user 307 00:20:48.759 --> 00:20:52.880 so user can see this image. This is fantastic, so 308 00:20:53.039 --> 00:20:56.680 imagine how powerful it could be and also maybe dangurious. 309 00:20:56.960 --> 00:20:59.400 I mean, it's not in a bad way because you know, 310 00:21:00.440 --> 00:21:04.079 casing is always a challenge in software engineering, right, so 311 00:21:04.119 --> 00:21:08.559 we all know that I'm thinking about caching when I 312 00:21:08.599 --> 00:21:09.440 say dangerous. 313 00:21:09.799 --> 00:21:12.359 So I got one related question. So when I've used 314 00:21:12.440 --> 00:21:15.720 service workers, my biggest problem with them is that debugging 315 00:21:15.799 --> 00:21:18.640 is occasionally kind of a nightmare because you are working 316 00:21:18.720 --> 00:21:22.400 on a separate thread. So I'm curious as like, if 317 00:21:22.440 --> 00:21:26.680 you're advocating for moving more and more code into service workers, 318 00:21:26.720 --> 00:21:29.799 does that become like, considering I haven't done any of this, 319 00:21:30.079 --> 00:21:34.680 does it make debugging trickier? Like are the browser developer 320 00:21:34.680 --> 00:21:37.160 tools smart enough to say, like, if I'm running some 321 00:21:37.240 --> 00:21:39.720 algorithm in my bit of code, can I like jump 322 00:21:39.759 --> 00:21:41.720 over to the other thread and then jump back to 323 00:21:41.759 --> 00:21:44.119 continue sort of my step debugging sort of thing. I'm 324 00:21:44.160 --> 00:21:45.519 just sort of curious how that works. 325 00:21:46.079 --> 00:21:49.759 Yeah, exactly, so very good question. So two three years 326 00:21:49.799 --> 00:21:54.079 ago or maybe four years ago, when PWA Progressive Web 327 00:21:54.119 --> 00:21:58.279 Apps and service worker were introduced, browser didn't have a 328 00:21:58.400 --> 00:22:03.119 very good support at that time. But nowadays most of 329 00:22:03.160 --> 00:22:07.400 the browsers is, especially Chrome, they have a very very 330 00:22:07.400 --> 00:22:11.400 good support for debugging for service worker and web simbly 331 00:22:11.440 --> 00:22:13.799 also because you can use web simbly also in service 332 00:22:13.799 --> 00:22:17.279 work here, So I think these days this is not 333 00:22:17.359 --> 00:22:20.119 a big problem. Also, if you have let me also 334 00:22:20.160 --> 00:22:24.039 mention this, if you have a concern of writing your 335 00:22:24.079 --> 00:22:27.160 own service working and getting to a trap to debug 336 00:22:27.359 --> 00:22:30.480 or find out other what's wrong right now or how 337 00:22:30.519 --> 00:22:34.079 can I improve something in my service work here? There 338 00:22:34.119 --> 00:22:37.599 are also good solutions for that. You may have heard 339 00:22:37.640 --> 00:22:45.119 about workbox jas it's a library from Chrome Team or 340 00:22:45.920 --> 00:22:51.319 like here Google and what it does. Actually, it does 341 00:22:51.319 --> 00:22:53.720 a lot of things, but the most important thing is 342 00:22:53.759 --> 00:22:57.279 that it generates service worker for you based on what 343 00:22:57.640 --> 00:23:05.039 you are telling to this library to do. So cashing, 344 00:23:05.079 --> 00:23:08.119 for instance, you know that you should know the different 345 00:23:08.240 --> 00:23:12.960 strategies for casing and service working, and that's not very difficult. 346 00:23:13.039 --> 00:23:15.400 You can go through it maybe in I don't know, 347 00:23:15.559 --> 00:23:18.400 ten to fifteen minutes, and then once you know, then 348 00:23:18.680 --> 00:23:23.440 you should go to the work box documentation and start 349 00:23:23.640 --> 00:23:28.200 learning the API for how like how I can use 350 00:23:28.279 --> 00:23:31.880 this strategy, like how can I use cash only strategy? 351 00:23:32.039 --> 00:23:37.319 Or how can I use cash network only strategy or 352 00:23:37.319 --> 00:23:40.319 something like that, and they're therefore all of those strategies. 353 00:23:40.359 --> 00:23:44.680 There is an API in workman in working box. So 354 00:23:45.359 --> 00:23:50.559 simply you write your simple service worker file and then 355 00:23:50.960 --> 00:23:57.799 workbox help helps you to generate your maybe very difficult 356 00:23:58.079 --> 00:24:02.839 and very complex, let's say, service worker file at the 357 00:24:02.960 --> 00:24:07.359 end of the day. So I strongly recommend you, if 358 00:24:07.400 --> 00:24:10.960 you're going to write your service worker file for your 359 00:24:11.079 --> 00:24:17.319 website or wel application, start using workbox instead of writing 360 00:24:17.400 --> 00:24:22.359 yourself because that will help you when the service worker 361 00:24:22.480 --> 00:24:26.519 gets bigger and bigger and bigger and more complex, then 362 00:24:26.680 --> 00:24:29.359 you will find out the power of using this library. 363 00:24:29.759 --> 00:24:35.680 There's also a bunch of like logger and logging stuff 364 00:24:35.720 --> 00:24:39.039 in Workbox. You can enable them and you can find 365 00:24:39.119 --> 00:24:43.119 out okay, where you can exactly see how you are 366 00:24:43.160 --> 00:24:47.279 interacting with your service worker, how fetch is working, how 367 00:24:47.319 --> 00:24:51.039 my network requesce is coming, what is the respond response 368 00:24:51.160 --> 00:24:54.599 and those kind of things. It's very very handy. There's 369 00:24:54.640 --> 00:24:58.359 also a bunch of plugins for workbox that makes it 370 00:24:58.400 --> 00:25:02.119 even easier to gener right other stuff to handle, maybe 371 00:25:02.200 --> 00:25:06.400 push into vacation or to handle different things. 372 00:25:06.759 --> 00:25:09.960 So I had a question in terms of if I'm 373 00:25:10.000 --> 00:25:13.160 trying to get into this using workers, I have a 374 00:25:13.200 --> 00:25:17.119 sales as the world workers, what's the best way to 375 00:25:17.160 --> 00:25:21.640 approach it. So let's say I want to improve my 376 00:25:21.680 --> 00:25:26.200 application and have a much smoother UI experience. How can 377 00:25:26.240 --> 00:25:29.960 I decide which part of the application needs it? How 378 00:25:30.000 --> 00:25:33.559 do I go about learning that and maybe having a 379 00:25:33.680 --> 00:25:36.160 concept to show to my team and trying to get 380 00:25:36.319 --> 00:25:39.240 and get buying from the managers and my coworkers as well. 381 00:25:39.759 --> 00:25:44.200 Yeah, very good question. I explain my approach this is 382 00:25:44.200 --> 00:25:49.200 what I do. Usually I put my I usually think 383 00:25:49.240 --> 00:25:52.720 that I'm customer, which I'm going to use this website. Right, 384 00:25:53.079 --> 00:25:58.160 Let's start using this website and a very low performance device, 385 00:25:58.400 --> 00:26:02.880 maybe very tiny mobile device or something which I usually 386 00:26:02.880 --> 00:26:05.880 have at home, like I have a very old phone 387 00:26:05.960 --> 00:26:09.359 from maybe eight years old. And then I start using 388 00:26:09.359 --> 00:26:13.440 the application. Wherever I see that the application is lagging 389 00:26:13.720 --> 00:26:18.200 or it blocks me to continue and work with application, 390 00:26:18.640 --> 00:26:20.920 these are the places that I need to think about it, 391 00:26:21.119 --> 00:26:23.480 like how can I improve this? And I need to 392 00:26:23.559 --> 00:26:30.440 go and check which part of my application is actually 393 00:26:30.519 --> 00:26:33.279 blocking user to work with other parts of the application. 394 00:26:33.400 --> 00:26:39.000 So I need to hold of those things to the workers. 395 00:26:39.599 --> 00:26:43.160 So this is usually what I do. So start with 396 00:26:43.240 --> 00:26:47.599 a very low performance device like a mobile device especially 397 00:26:47.720 --> 00:26:54.319 and maybe also you know, I know that we may 398 00:26:54.440 --> 00:26:58.319 have a very high speed internet all of us. But 399 00:26:59.279 --> 00:27:02.000 when I start, when I when I'm trying to find 400 00:27:02.000 --> 00:27:05.480 out where which part of the application I can prove 401 00:27:06.240 --> 00:27:12.240