Hey everybody, and welcome to another episode of React Round Up. This week, on our panel we have Paige na dream House, Hey everybody, Carl Mungazi Hello, he tj Ventl. Hey everyone, I'm Charles Maxwood from dev chat dot TV. And this week we have a special guest. It's Madjid. Do you want to just introduce yourself and let us know who you are and why you're important?
Hi? Everyone, So my name is Majid. I am a software engineer based in Oslo, Norway. I am very important, I think so maybe for some people I'm very important, for some I'm not. But apart from a joke, I do a lot of contribution to community, especially JavaScript and dart community, and I try to share my knowledge and experience as much as I can, so by doing public speaking or writing or like blogging and those kinds of things.
So that's what I really like. Apart from that, I also organize a few meetups and several conferences, especially in JavaScript, Word for example ng Vikings you may know or you have heard about it or Mobile Era in Nordic countries. So I am very passionate about two particularly like word of development, JavaScript and art nice.
So you gave a talk at React Days Berlin talking about parallel computing and React JS and yeah, you know your discussion points talk about like web workers and stuff like that. Do you want to just give us sort of the two minute rundown of what the talks about and the major points and then we can dive in and get the tales.
Well, the idea of the talk came to my mind when I was actually implementing a lot of features in my recent project, and I figure out that there are lots of new APIs in the browsers which helps us to improve and boost user experience, and in particular actually in React we can actually we can leverage using these APIs and kind of a wide disrupting user by poor
performance or JANKI frames on the browsers. Right, So in particular we have like web work heres and a few new APIs like web assembly or worklets or even service workt which doesn't have directly something related to the main thread, but still it can improve something, which I had an example in my talk and I talked about it, people very liked it. So that's that was the whole things that I actually talked about in this start, Like these four different APIs in the browsers very cool.
So let's just start with the first one.
Yeah. Sure. So the first one, which is probably the most underutilized one, is webworker. And web workers are around for quite some time, so maybe twelve years or more ten years. It's been around for a while and all the major browsers actually supported but it it well maybe maybe many of us don't. Actually it doesn't use it. So when I in my I gave this like several times, and when I asked in the room, like who is
using a webworker? Who knows the web worker, like around one hundred percent of attendee say yes, we know, but you know. But when I asked, okay, who is using that in production? And like maybe less than five person. The reason is, like we all know web workers, we know that they are cool, but there is something with web workers the way that it is implemented. Actually the API we are post messaging, you know, the post messaging API.
So it makes it a little bit maybe difficult to work with, and so many of us try not to deal with it unless we really need it, you know, in the application. So that was the idea. So I started with the basic of the web workers, like what they are. So I'm not going to talk about it here because I guess like many of us, even our audiences, like right now, they know and I and probably they also know that it works. We are post messaging, like
you have the say PI. You send an object message to your worker thread and do something and then you can get back another message and then deal with it in the main threat. Right. But when I found a new library actually done by Surma developer advocate in Google. The library name called a com link. The actually reimplemented the way that we can use web worker. So it's
it's pretty neat and easy. If you download the library and start using this library in your application, you're going to have you're gonna have like a very simple API. I'll get to the API also, but then after using the API, you will get actually a promise, very very simple, so you directly talk to the worker threat and you have a promise, so you can simply wait, send something to this thread, call some kind of function and then wait for it and then you know. It's the way.
It's a very natural way of programming in Java scrit if you start using this library. And that's that's the reason. So I again started talking about these web workers with conving because it gives you as a developer a pleasant way to deal with a worker thread and to implement in your application. So maybe I should explain too simple API of this library.
Yeah, I think as quick explanation would be good.
Yeah, okay, So when actually you have common link installed and instantiated, you get to function one is wrap function and another one is exposed you want to use exposing your threat or your web worker javas profile, and you expose your function or your object, your services like all of those functions that needs to be exposed to the main threat, right, and then you have the wrap function which you will also wrap the web worker in extensions
or the constructor actually in the main threat. And then with only these too as like maybe sufficient to start. So with only these too, then when you construct or instanceship this worker, then you get a promise with those services that you are exposing to the main threat. So you simply just call your method and then wait for the result, and then you can also do something with it, like in particular in React as I had an example. So I had an example actually in Michael, let me
talk about that. So I implemented a list of users, and on purpose, my list of users was around three thousand like items, right, so I implemented like a short array function in the thread, and also I implemented like an animation in the main threat. So I showed to the audiences actually in my talk that when you call this sort array and you want to sort this array by for instance, age user by age, you can get
a list of three thousand items sorted by age. You can do that in main thread of course, but then it will block these main thread for a while because it takes time, you know. And then when you see actually the animation, when you were seeing the animation, the animation was blocked until you get the respond in the main threat, while when I was actually calling the third method in the web worker thread, the animation was working
very smostly no problem, nothing blocked. You can interact with the app and then once you get the respond back from the main worker threat, you could simply set the state and react and then rerend their old like the least again and show whatever user asked for before, you know. So that was that was a very very well received example by user because it's like a very this is something that you deal with it in your daily work. Every day you need this, you know.
Well, so actually that gives me I have sort of a broader question because I think I fall into the persona that you described at your talks as someone that I've known web workers for dealing with like tasks that you need really high performance for some sort of familiar with them, but I've I've never shipped them in a production app ever, And part of it is because, like to me, at least, maybe you can tell me why this might be a wrong perception of like I have
always seen web workers, it's something I need if I'm building something that's doing something really heavy in terms of processing, like I'm doing something where I'm like building an image manipulation map or doing something really hardcore like running some
super cool algorithms. But for the average like banking, insurance, financial apps that I might work on in like a rank and file job, what are some like pragmatic ways where web workers could actually benefit, like say your average developer, Like.
You said, you know we're working and you haven't used it, so that's probably was also my case. I knew that I haven't used it so because of many reasons. But these days. You know, sometimes when you have these heavy processing and stuff like you said, maybe an image processing or something, some developers even decide to just move this process to the back end and instead of like this doing this in front and right. And maybe that is
also a good solution. But think of it five years ago or six years ago, eight years ago, how browsers were working and nowadays how they are working with the different APIs that they are providing pluts with a lot of those improvement, which maybe because of the perception that we have in our mind from the previous from the past is still stick to it and we are not using that, you know. And also think of these days mobile developing for mobile, like maybe a responsive website or
you know, particularly optimize everything for mobile. It's very crucial, right we are all going for mobile. It's very very important that we can for the browser. When we are talking about like utilizing different options including web workers, we are maybe one of our most important use cases is
mobile optimization for our users. It doesn't matter what is your application, so it's a banking application or is anything else, as long as you're optimizing for a mobile which has a very maybe uh low CPU or RAM or you know, it is very important to optimize in different ways in the browsers for these particular devices that users can can feel like they should they should use application and the
mobile there is moose. There should not be any difference between your mobile application, I mean not mobile applications, mobile optimization of your website and the desktop version of it. Right, So that brings us to the point now that we should think maybe differently nowadays. So even for very small things that probably we can do in main thread, but you know, many of those may block user to interact
it with the application immediately. Maybe we should hold off those things to the worker threat, you know, especially nowadays with a lot of improvement also on top of the workers by differentias, like let's imagine we will get to it about web assembly and other stuff too, but you have also those other options, so you can also implement other things on top of the workers by different APIs, like maybe well somebody for instance, you know, we should think,
I guess it's twenty twenty, right, we should think a bit differently. So perhaps that's my opinion though.
So I've got a point to pick about. Contigious points.
I actually first came across coummlink when I had a podcast where that Soma was talking about it, and he spoke about how you could you use it, for example, in a React application to handle your Reducs store.
So my question was, when it comes to.
Let's say, using Angular reacts with you all these frameworks and then you can maybe do stuff like putting your state management in the.
Worker, how does that work?
Because when I first heard that, I was excited about it, but I thought, okay, cool, Now that's an option where if my store it's too big for some reason, I can actually offload some of that storage to the worker, as well as doing other logic on the worker as well. But in terms of juggling reacts, I've got Reducs, I've got the worker. How could that make that work in an application?
Well, first of all, let me explain this way. So, for instance, in Angular or many of these frameworks, so you may not necessarily use cumb link because they all have some sort of they own a APIs for web workers. For instance, Angela has its own like support for webwork here, or maybe React with a new api is like Concurrent
and those kinds of things. But the thing is that when you say how can we use that, Like, I don't see any difference between an Angle application or like in this case, an Angular application and a React application.
Let's say, because they are at the end of the day, they are a JavaScript you know library, right to just provide different APIs, and some developers like this one, some like like Angular one, and some likes maybe I don't know React, you know, different APIs for different developers to make maybe to make our life a little bit easier
when we develop the web application. Right, So at the end of the day they are there are there are javascreet applications, there are JavaScript framework, right, so we can use any library. So I don't see any any like blocking point here that if you are using, for instance, this library, you are not able to use like coummblink for instance. If I understood the question actually correctly, Yeah, so.
I guess in o case, do you prefer using that in both stuff for me, say Angler or comblin. What's your preference then in terms of your use World podcast.
Well, when I came to the comblink and I started using that, I guess I'm going to stick to the comb link. The thing is that first of all, the library is very tiny. I think after Jesus is like one point wind club bite or something or even some like browser needs. For instance, if you need a policy
for proxy, it adds maybe one more club Eye. But it's a very very tiny library and the API is very simple, and I like the way that it promisify everything, so it makes it is very easy to use, like this promise apart from other APIs, you know, I think I like to stick on commelink unless those APIs from the frameworks they change also to h you know, they have a similar APA.
Cool.
I've got a question for you, I Majid, can you explain the difference between web workers and service workers because I've heard both, I've heard them used interchangeably, and I'd love to get a better understanding of which one.
Absolutely, which absolutely. First of all, let me explain this. The web workers the service worker are a type of web workers. So essentially, service worker are like a JavaScript file that they run in a different threat and back in background. And what they do is they they act like a proxy in your application between the network and your application. What does that mean? That means you can intercept all the network requests in service worker, right, So,
and they are. They're great for doing things like cashing or delivering push messages for an instance. So there are different actually cashing strategy which I have a full time like about an hour. And also I have a book about it, so which we can reference maybe to the chat, so you can go through it and read about these strategies. How does the state strategies help us to make our application offlying? This is very very cool? Or think of it like service worker when we are talking about a
proxy between your application and a network request. Is that I said, you intercept all the requests, right, So you send a request by maybe fetching an image, let's say, and then the request comes to service worker first if you have a registered service worker a javascried file as I explained. And then this is you now to decide where should I get the response? Should I go to the network and ask from sever about this or should I go to the cash and respond? So and here
is I think it's service workers are so powerful. Here is where you can actually manipulate the respond So that was an example which I gave in the talk. So imagine like three years or two three years ago, there was not a support for web p like image extension in many browsers. So a friend of mine actually created webs an version of BMP encoder from c library and then he added to the service workers. So he used
web p in the web page. But of course web P images cannot be shown on those browsers that didn't have support, right, so the solution was okay service worker. There was support for service worker though in all the browsers at that time, so it was a great time.
So why not using salvice worker to intercept this request and then send it to this web assembly encoder get another type of you know, image back, like a BMP maybe or something or gift I think at the end he did and respond a gift version to the user so user can see this image. This is fantastic, so imagine how powerful it could be and also maybe dangurious.
I mean, it's not in a bad way because you know, casing is always a challenge in software engineering, right, so we all know that I'm thinking about caching when I say dangerous.
So I got one related question. So when I've used service workers, my biggest problem with them is that debugging is occasionally kind of a nightmare because you are working on a separate thread. So I'm curious as like, if you're advocating for moving more and more code into service workers, does that become like, considering I haven't done any of this,
does it make debugging trickier? Like are the browser developer tools smart enough to say, like, if I'm running some algorithm in my bit of code, can I like jump over to the other thread and then jump back to continue sort of my step debugging sort of thing. I'm just sort of curious how that works.
Yeah, exactly, so very good question. So two three years ago or maybe four years ago, when PWA Progressive Web Apps and service worker were introduced, browser didn't have a very good support at that time. But nowadays most of the browsers is, especially Chrome, they have a very very good support for debugging for service worker and web simbly also because you can use web simbly also in service work here, So I think these days this is not
a big problem. Also, if you have let me also mention this, if you have a concern of writing your own service working and getting to a trap to debug or find out other what's wrong right now or how can I improve something in my service work here? There are also good solutions for that. You may have heard about workbox jas it's a library from Chrome Team or
like here Google and what it does. Actually, it does a lot of things, but the most important thing is that it generates service worker for you based on what you are telling to this library to do. So cashing, for instance, you know that you should know the different strategies for casing and service working, and that's not very difficult.
You can go through it maybe in I don't know, ten to fifteen minutes, and then once you know, then you should go to the work box documentation and start learning the API for how like how I can use this strategy, like how can I use cash only strategy? Or how can I use cash network only strategy or something like that, and they're therefore all of those strategies.
There is an API in workman in working box. So simply you write your simple service worker file and then workbox help helps you to generate your maybe very difficult and very complex, let's say, service worker file at the
end of the day. So I strongly recommend you, if you're going to write your service worker file for your website or wel application, start using workbox instead of writing yourself because that will help you when the service worker gets bigger and bigger and bigger and more complex, then you will find out the power of using this library. There's also a bunch of like logger and logging stuff
in Workbox. You can enable them and you can find out okay, where you can exactly see how you are interacting with your service worker, how fetch is working, how my network requesce is coming, what is the respond response and those kind of things. It's very very handy. There's also a bunch of plugins for workbox that makes it even easier to gener right other stuff to handle, maybe push into vacation or to handle different things.
So I had a question in terms of if I'm trying to get into this using workers, I have a sales as the world workers, what's the best way to approach it. So let's say I want to improve my application and have a much smoother UI experience. How can I decide which part of the application needs it? How do I go about learning that and maybe having a concept to show to my team and trying to get and get buying from the managers and my coworkers as well.
Yeah, very good question. I explain my approach this is what I do. Usually I put my I usually think that I'm customer, which I'm going to use this website. Right, Let's start using this website and a very low performance device, maybe very tiny mobile device or something which I usually have at home, like I have a very old phone from maybe eight years old. And then I start using
the application. Wherever I see that the application is lagging or it blocks me to continue and work with application, these are the places that I need to think about it, like how can I improve this? And I need to go and check which part of my application is actually blocking user to work with other parts of the application. So I need to hold of those things to the workers.
So this is usually what I do. So start with a very low performance device like a mobile device especially and maybe also you know, I know that we may have a very high speed internet all of us. But when I start, when I when I'm trying to find out where which part of the application I can prove I usually three showed my internet to three G, you know.
And then let's start using the application. And then then that when I start using with those configurations like tree G and mobile device, then I see and I can feel it myself oh this part, this part is very very lagging, so I need to think about it, you know. That is my approach usually I do, and it works pretty well.
Have you ever had any pushback from the team to say, maybe right now, for us, performance is not a priority and trying to navigate those discussions about when execut actually spend time making application performance because maybe it could be that it is important, but at the moment you've got X weeks to implement, but then you no performance is part of that features.
That's absolutely I think all of us has this situation at work.
So especially when you are working in a JI well and maybe a startup, then they are forcing you to just give stuff out because they want to see it, they want to deliver it to the customer, right, and then you have less and less time to spend on.
Your application to debark and find out or maybe improve the performance. You know. So I had definitely this situation, and I would say what we do then? What I try to convince my team usually is that you know, we have a very high priority fixing issues for performance, and we have like nice to have features like high priority are those that they give our user absolutely terrible experience, right,
let's say initial loading of the application, for instance. So if it takes twenty second to load the application, who is going to wait for that or ten second? Who is going to work? Who is going to wait for this application to be loaded?
No?
One, Right, you cannot like let the business come to you and say no, we have to shift this. At the end of the day. They will come back to you maybe a month. I say, okay, we are not selling, so I told you it's ten seconds, So we need to spend time. Right, So we should have start convincing. We should start telling like business, hey, this is crucial to improve. We should spend time on it. We should
fix this part. But then also we have maybe some part of application that well, you click on something and then maybe for three second or two second while user cannot do anything. Well, maybe you can bear with it. Maybe it's a setting page, and well, of course you can wait for it for for the for the sprint. That you have time to spend on this part and
improve the performance, I think you should. We should categorize these performance issues and then start fixing those that they are absolutely important for our customers and visitors to when they are coming to our website. Or web applications. Just I believe we should respect our customer. I am also a customer of millions of web pages. Right If I'm
not treated very well, so I don't feel very well. Right, so I should have the exact same feeling when a customer is coming to my website when I'm enveloping that. So I think that it is very important to give our user a pleasant experience. So this is very important, I guess to my opinion.
And I know something that's worked for me in the past is if you can put the put these things in business terms as well. They're they're a study showing page low time speed times actually improve business business metrics, click through rates, you know, whatever it is your business
is measuring. So sometimes you can approach it as a like, if we spent a week on this, let's see if we can improve our You know, don't necessarily your manager, your boss's boss might not care about the user experience directly, but I'm guarantee you they care how many people click a certain button in your app that you really want people to get into some system. So oftentimes you're the incentive of making your app faster, and the businesses like end goal are usually in sync.
If you can plug some metrics into it, right, So you have some analytics that you put in, you do an A B test, right, and then at the end of the day, it's not that much work to add in the web worker and have it take on, you know, the most expensive thing that's going on on the page. A lot of times you can make the case that TJ is making just with a really quick example that only took you a couple hours to put in.
Yeah, make sure the email you send your boss has a lot of acronyms, like the ctrs are going to go through the roof and you know, really really business it up.
Mentioned Google analytics while you're at it.
Well, if you can, you can put up the theory right and put that stuff in. But at the end of the day, I mean, if you can put in dollars, right, this is dollars that we made that we wouldn't have made because it's loading faster now.
It's the ultimate metric.
Yeah, but you actually mentioned a very good point. Always measure. So even when I'm talking about like web workers and you know, some real assembly and those kinds of things I mentioned, I think in my tight maybe a few times that always measure, measure, measure, and make sure that what you are doing actually worth it. You know, so you just don't do it because you've heard that this
is awesome, this is cool. You know you should you should measure every time and every time that it makes sense and you can measure it, especially in this case for the business. Like you mentioned, it is very good idea to turn the numbers to dollars. Like you said,
measure and you know, this is a loading time. We had these number of visitors and then by doing this, which take took me maybe a day maybe by most, we increased the number of visitors to this number, which at the end is like maybe ten percent of sales or maybe increasonment in the cells, you know, or something like that. This is very important to show to the business. If we can do this like continuously, they will believe in us and then they will actually ask us even
to spend more time to do this and stuff. You know, this happened, This happened to me in my previous shot. There was some blocking forces from the business side that you cannot do that you should not spend time on this. Just deliver these features and then at the end we did some stuff, and then we measure and then send the report back to the business for a few times, and I think after after a few months, I remember that the product owner came to us and said that, okay,
we need to prioritize this optimization. This is very important for business to get the revenue higher at this season. And we were all shocked. Okay, so okay, we will do for sure.
Yeah.
Yeah, it's interesting too because you brought up the number of visitors and the site speed is now taken into account by Google and other search engines, and so if you're doing any kind of search engine optimization, yeah, how fast your page loads and works is definitely.
A metric that they're looking at too.
So it does affect not only your click through through the effectiveness of your current traffic, but it also affects your incoming traffic as well.
Web from search engines.
Absolutely, so.
Is there an easy way to get started with this stuff? I mean, you've mentioned the commlink library a few times. Is that super approachable or are there other ways to tie all this stuff in that just make it a breeze.
Well, I think it's starting with commbling. Is the best things that you can do because it's very easy to start with. The API is very simple, and at the end it's very familiar with what you are doing in a daily basis. So for web workers, I strongly recommend using this library if you haven't used that before, and compare it to if you have done that also compared to what you've done, and see, like how easier and
better is that? You know, maybe you feel that, Okay, this is fantastic, so I should maybe start using that after all. You know.
I had a question regarding mob assembly and how it kind of fits into this world and from a perspective right now, what can actually do a production with it?
Or is it not yet there?
Well, I think there are lots of web assembly examples nowadays on the web. Maybe some of these, like I think one of the best examples is Figima. If you know which software it is, Yeah, yeah, yeah, it's I think they're using web assembly, so so already, Yeah, it's
a very very cool example of using web assembly. So I'm not a web assembly expert, but what I tried to explain in the touch was how easy you can start with web assembly because I can I can actually question right now and you can answer when I say web assembly, what is coming to your mind? First? The first thing that it comes to your.
Mind gaming.
White code?
I think exactly see or maybe performance right fast. This is interesting because these are the things that we are exposed to our outer work. We are developers, right, We read blogs, we watch videos, and we are hearing about all of these things around us. Okay, see web assembly only works with C or no, maybe also works bit ross. You know. This is what I was interested about and
I talked about. Also, is that when I'm talking about web assembly, usually you are not going to try it because you say, okay, this is something with C and oh, I'm not a C developer and I don't know even how to use C or how to start with CE. Right, So I brought it up in the tie and said, no,
that's that this is not the case. You have maybe simpler option to start with web assembly and start learning this at least, because it seems like this is going to be some kind of future like more and more games apps web apps are coming to web from different languages via a web assembly, so we should know this, right, we should start.
Learning this and and then and the language or or the framework that I introduced was probably many of us also know right now is assembly script.
Have you heard about assembly script? No? Assembly script actually is uh, it's more or less like a compiler. It's it compiles a strict subset of type of script to web assembly. So if you if you are familiar with type script, and if you go and learn web assembly typing, then you are good to go. You can start writing your web assembly right now. So you can go to assembly script, simply download it from MPM and then initialize
your project with one command only you have everything. Start writing your type script like functions but with web assembly typing, and then with one command compile it to wasen and you have a loader from this library. Very easy start like using your vasm file or instantiate your vasum file into your main application. I had an example of a very simple example which may not have a real even use case, but I he wrote a function in both
web assembly and JavaScript in the React application. And the function was supposed to calculate the fibonacci number right, so and I passed a very high number. So I ran it with web assembly and I also run it with the JavaScript one. This is when this is exactly when I say that we need to measure. I measure it, and the web assembly version when I was executed, it was seven times faster, and it was very surprising. There was no optimization for the function though exactly the same
but different implementation in web assembly and JavaScript. Then when I ran it for the second time, the function then it actually the execution time was exactly the same. So why, I mean, people ask me in the room, like when I was talking, why is that the case? So we thought that web assembly is going to be faster and also be faster always, and that is true. If web assembly execute something in one particular let's say time, it
is also stay in that time forever. If you execute this function, you probably get the same performance of same number every time you execute. So. But in JavaScript, for the first time, because there was no optimization from WEM for when you're running this function, then of course it takes a little bit longer. But then the second time when you execute that there was optimization in WM right like in v eight JavaScript and gene, then the time
was pretty similar. So that is why we have to ask, okay, should I actually take this part of the application right now to wether assembly or not? That is the question we should ask. So this is also we discussed in the talk and in the fa Q section of the talk. Like use cases are very different, so you need to think about your use cases and then measure it and see if it works for you. That was the use
case for a websent. I think it was fun. It was fun in this case that you know that if the web assembly runs in a performance way or line, it will stay in that line. It is always performance if it runs on that level. So while JavaScript it tries to optimize itself. Let's say it was an interesting finding.
So from a developer perspective, if you have web assembly code, does it? So it certainly sounds like you can just designate a chunk of your code that I want this to be like in web assembly, whether that's with assembly script or whatever. Is when is like when you run the bulk of your application code, Is that just like a synchronous call in the web assembly land to like do some task and get a result? Like how does like the API experience compared to like web workers?
So if you want to understand ship with the browser API LASM file, it's a bit of worn. So I'm not going to explain that and then why I'm explaining assembly script though, because it simplifies those APIs into only one API, which is a promisified version of that. So you have your lasom file after you compile, you can use this loader actually without using assembly skip. You can use just assembly loader from assembly script. Then when you instantiate this vasom file, it's just one line of code.
There is one function in the assembly script loader you pass a promise version of Let's say you pass a fetch a function which is fetching the VASM to this function, and then it instantiated those it will actually do all of those things that needs to be done in the browser, and then it exposed to you the method that you already exported in web assembly or assembly script sorry, or if you have done it already in other languages, you already exported some function for instance, to be accessible in
the JavaScript or main for it, right, so you will get access to that. So it's that easy.
And then you can just use those functions as if they're just like all the other JavaScript functions.
Okay, exactly exactly. You just call those functions whenever you want.
Nice.
There are lots of examples with assembly script, right, now, so you can go and find out that people wrote games purely in an assembly script or the are a lot of different encoders or decoders for images or audios or those kinds of things that they are available as a plug in and you can use that. So there are there are cool stuff that you can probably download and experiment with. I strongly recommended, especially as a web developer.
Who you are. We usually you know, in a daily basis, we usually are a great javas created a paper spree, you know, or so if we can have a tool similar to what we are using, it's fairly easier to start learning these new technologies, right, So sometimes we are we we kind of stop ourselves from learning because it's very different from what we are using in a daily basis. And I like those tools that are helping us to have to bring these familiar APIs to us, and I really like them nice.
So one other question that I have is I'm assuming that your web workers or your assembly script or anything else, you know, as you put the stuff together, it's just calling functions. So testing is just like testing any other piece of JavaScript, right Exactly.
You may need to like moke some API or something but testing is like similar with other JavaScript testings. We also missed and other things which probably I need to talk about it a little bit. Worklets. Any of you actually have heard about worklift before?
I have not, so I've heard about it, but only in the context of sexswini.
Yeah, because that is the most available one more. Yeah, so let's talk about it because that is going to be something very cool in the near future. May this year, So many many browsers are implementing work let's APIs. So what is worklet or what are worklets? Worklets are a light version of web workers again, so you see that many of these APIs, new APIs are evolving kind of on top of web workers. So let's let's talk about it. So what what does what do they do? Like these worklets?
The main point of having worklets is to have access to very low level part of the rendering pipeline in the browser. What does that mean? Well, that means you can you can have access to the graphic rendering or audio processing of the rendering engine pipeline in the browser, which is very very performant because it's very very low level. Okay, so give me an example matchically, Okay, I'll give you
an example. The example is, let's imagine you want to implement a QR code painter and you want to actually repaint this QR code whenever user is interacting with some kind of input or button or something. Right with work lets, what you can do you can write your own JavaScript to design to design this QR code, for instance, and then register it with I'm talking about one particular example of worklet, which is css wudin as you mentioned card,
and you register this with CSS paint API. Once you register, then you have access it via CSS. So then you can call this function actually in the CSS and you can start repainting this whenever you call this function. So I had an example in the talk. And also I have a life on my website that you can interact with this QR code without bothering the main threat because that is, like I said, it's kind of on top
of the web workers, so it's a different threat. So it's dealing with this painting even though you have like an example that I had, I had an animation, it was working and I was actually repainting this QR code. It was very complex and very fast, and there was no blocking nothing in the main threat so the animation was working very smoothly. Why I was working with this repainting and stuff. This is going to be very very powerful in the future. You can think of it. What
can you do? You know a lot of use cases that you may think of it. Another simple example, very simple example, was to paint a chess or checkboard background. So well, we can do it different with the different ways.
But one way that you can do you can actually write your own Java script to generate this checkboard and register your JavaScript with CSS pain and then call this to the body for instance, with background and the name of this cess pain, and then you will get this checkboard in the background, which is actually rendering in a different threat. So this is very powerful, very very interesting, but unfortunately many browsers right now don't support it. C s a Skudini or paint work let. It's it has
a better support in different browsers. That's why we are hearing about this API more and more. But other worklets, we have four different work lets. We have paint cs as withinia as I just explained, animation, layout and audio worklet's so but the rest are they don't have a good support. It's only Chrome I think right now, or maybe Edge new version because it's also based on the Chrome. But the rest of the browsers they don't have a
good support for these APIs. But what I know is that they're working on it to make this or to put this API into their browsers very soon, maybe this year. So we should be ready for these APIs very soon.
Awesome, very cool, Yeah, totally cool, more stuff to play with.
Oh.
I had a question because when I last heard about Rudini, the way that I was explained was it's going to be most likely used by authors or frameworks and libraries, and less so by your average developer.
I mean from my experience. And you know is that TRIU imagined?
Well, I disagree somehow. First of all, we are all awesome developers, all of us, so I don't think there is a difference. We all can use this API. So while we at some point we all of us can be a CSSs sorry, a library, a maintaeniner, right, we can also write our own library. So why should why you should not use this API? No, you have to
use it. You will get Actually, you will see a lot of use cases for these APIs, So I think we should learn it because it's very very beneficial for us, very empowering.
Yep, anything else we should jump on before we do picks.
I can make add One thing is that don't scare of the new APIs and just experiment and work with them. It is very important if you are especially a front and developer, let's say, or a JavaScript developer dealing with browsers these days, you have a lot to take on. It's a lot to learn, but at the same time, it's a lot of fun. You know a lot of cool things that we were not able to do in the past, but now we are able to do, and it's so empowering. So just use it and experiment.
Awesome, all right, Well let's go ahead and do some picks. TJ. Do you want to start us off with picks?
Sure, I've just got one. There's this farm I'm actually not sure it is, but they've started up this service called goat to meeting and it's especially exactly like the name implies. Basically, you can pay and this farm will bring a goat into a zoom call for you, essentially, and they have a rate they charge for this a goat to show up. And I think actually a more interesting thing is there. They do something along the lines
of classrooms tours. So like if you had like a class of kids that isn't at school now, you could arrange a zoom call for a class and they'll give you a like a tour of the farm, just digitally, just to give kids something to do that are probably if there are anything like mine, going a little bit stir crazy. Having been inside for a few weeks at this point, Well.
That might work, yeah for my kids. I was thinking people were just zoom bombing anyway, So I.
Yeah, I think so. I think there they'll either you could just have a goat show up or I don't know, interesting new economics like opportunity from this situation.
Nice. That reminds me a talk to a guy that runs is it goat milk stuff? I think?
But anyway, they make like soaps and food items and all kinds of stuff out of goat's milk.
This is a legit business. But yeah, it was.
It was pretty interesting to talk to them and see kind of how they run things with So I'll throw a goat pick into I haven't tried any other stuff so but but Jim's a good guy anyway, Carl, do you have some picks for us.
Yeah, the only pick that I've got really is what our referenced earlier on the podcast where does.
So my thinks name is?
Spoke about Kamlik and you spoke about it in kind of depth, how to use world workers in your application, as well as potential use cases for handling your statement men as well.
So that's the pick I'm going to choose today.
Awesome page. Do you have some picks for us?
I do.
My first one is completely unrelated to anything that we've spoken about. It's actually the Dji Phantom for drone. Since none of us can really go anywhere, this might give you the feeling that you're actually at least getting outside a little bit by flying this drone from your driveway or your porch or something. It's great. It's really one of the best ones I've seen, even for people who
are not very proficient applying drones, myself included. I haven't managed to crash it yet, so I would say it's a really good starter drone if you've got a little bit of money to spend right now. Second pick would be the show Ozark on Netflix. It's in its third season, just came out and it's really it's a great one to binge watch through because there's a lot of stuff happening from moment one, and you know, as soon as the episode ends, you just can't wait to see what's going to happen next.
Awesome. I've got a couple of picks.
One of the first picks I have I found this stopwatch app on for my iPhone, and what I was looking for is just to kind of give people an idea. So I've gotten rather involved in the Utah County Republican Party, and all of the county officials here in Utah County are Republicans, so if you want to say you kind of have to go to the convention.
Otherwise you're just kind of.
Voting in the primary ballot and then voting in the general election and whoever, by then they've already been picked.
So I've gotten involved early, and somehow.
I wound up running the debate, and so I needed a stop watch or a timer on my phone that would count down, but it had to be in landscape mode so that I could put it on a tripod in front of my camera so that the candidates could see it. And it's surprisingly difficult to find one, So I did wind up finding one. I was super happy with it, and I'll put a link to it in the show notes because I can't remember exactly what it's
called right now, but that just made me happy. Another one I'm going to pick is I have this tripod. It's a RIFFG tripod. It's really small, it'll sit on your desk, and then it has the phone spring loaded attachment on top that I pulled off of a selfie stick that I have never used, and so yeah, I'm really liking that, So I'm going to pick that. And then finally, I've been working on getting the word out for jas remote comp that's going to be in May
and Carl's going to be speaking at it. I'm looking for sponsors, so if you work for a company that might want to sponsor, I would appreciate that. But besides that, I've been playing with Canva as a way to get all of my social media images together. And you can just build a template and then I can just literally go in and put different text in for the talk title and the speaker and the you know.
Their headshot in the whole nine yards.
And so I've been working on getting that stuff together to play with and so I've been pretty happy with that. So those are kind of things that have made my life a little bit better these days. And then I also just want to shout out about our meetups. Page has agreed to speak at our next React meetup, and that's going to be as we record this in a.
Couple of weeks.
I'm not sure about the timing of this coming out, but I'm planning on doing this for the next several months, just because even if they start sending people back to work and you know, we can kind of get back to normal without getting all the way back to normal. You know, we're still taking precautions for people's health. I think conferences and meetups are just going to be in a weird spot through the end of the year, and so I'm hoping to run these meetups and give people
a place to go. So you go to devchat, dot tv, Slash meetup or meetups sorry, and that will list all of the upcoming meetups. I'm doing it for JavaScript, Angular View, React, and Ruby at this point. If somebody wants to help me run some of the other ones for some of the other shows, I am happy to work on that as well. I guess I'm going to throw one last thing out, and that is that I am putting up
as we speak today, the React Native Remote Conference. So I've had a lot of people asking about that chain React got canceled, so I just basically stole their dates at the end of July. So if you're interested in speaking, we'll have a CFP open and if you want to come, you can buy a ticket, and yeah, we'll just kind of move ahead that way.
Majid, what are your picks?
I think I want to pick a book called Deep Work. You may have heard about it, book called with by call Newport. So it is an amazing book. I read it like maybe three years ago when when I was in a different country action not in Norway, and it had a big impact in my life. So I still use those methods and I still follow those rules, and I think I could done a lot more after reading
this book. So I strongly recommend and recommend reading this book, especially those parts that he is talking about shallow work and deep work and what is the difference, And you will figure out that like most of the time in the day, even at work, we may actually doing shallow work and not deep work, and that's why we always think that why I cannot get these things done? You know, so strongly recommend that Deep Work by Carl Newport.
Yeah, that's a terrific book, Magid.
If people want to reach out to you or get in touch, ask you questions, get involved in the conferences you organize, anything like that, how do they do that?
I am very active on twater with my handler M fetch A d A, I L Y so, and also you can find me on LinkedIn, So I think the best place to reach me out is on Tweter. My message is open. You can always send me a message. I read all the messages and I try to answer all of them. So I get a lot of messages and emails. But I may be a little bit slow to respond, but I definitely respond. So reach me out with this handler on tweater.
All right, very cool. Well let's go ahead and wrap this up. Thanks for our panel. Thanks again, Majid, Thank you until next time, Max out everybody,