Name: Race Conditions in JavaScript Apps by Thai Pangsakulyanont | JSConf.Asia 2019
Uploaded: 2020-03-28T17:27:07.000Z
Duration: 27 min 55 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

Future simple

So today I'm going to talk about race conditions in JavaScript caps on dhe.

Today, I'm going to talk about other things as well.

Maybe other age cases that are not strictly rest conditions.

But you may encounter them when you write, I think, when this coat.

So before I begin to talk, I would like to share a bit off story before like how this talk came to be so I first got the idea off for this talk.

Um, on one day on that day, I went to ah local meet up in Thailand, and after the talks are done, it's like networking time.

And my friend approached me and asked me, Hey, Ty, is it hot to do with race conditions in JavaScript?

So I answered, Well, is actually pretty easy.

She gives me a bit off confused look, and I was like, Hey, I'm totally serious here.

So I got my laptop and start courting, showing him some examples on dhe.

Before long, it turned into a really deep discussion.

So after that discussion, my friend told me Well, this could have bean Ah, food talk.

Ah, why don't you make a top outfit and somebody to just con for something?

And a big shout out goes to game for giving me the inspiration for this talk.

So next time you have deep technical discussion, maybe you can tell your friend to, like consider something a talk.

So this makes it my second time speaking here at just con facia.

So Ah, big, big things to Thomas and all the organizer's involved in running this conference.

It's really great on Thank you for having me once again.

So today I'm going to show you two stories for my experience dealing with race conditions and stuff.

So I hope you can learn something out off these stories that I did.

By the way, my name is tie in from Thailand.

And if you have any feedback about this talk, please send it to me and I would really appreciate it.

I'm currently working at Tasco as their front an architect, and I'll get back to that later.

The first story on this story involves a little search box.

So in this search, boss aside, type of key word is going to show the source result on dhe.

It's going to show the result instantly, so I don't have to press enter or anything.

It's like glucose auto suggests, so let's build this real quick.

So, yes, I'm going to use a section for the rapper than doesn't input boss right there and then list containing the result.

Next we going to add some interactivity, and for that I'm going to use real Js.

So let's start with the data model for our state.

First, we need to start there so security that they use the type and we can buy that today input boss, using the we model directive.

Then we also need to start the first result to be displayed on the list here on Dhe.

To do that, we can use the wi for directive to do the biting, and finally we buy the content off its result into the respective elements so that the data and the dumb they're now kept in sync.

So when the user enters the test, Curie in Tudor input feel is going to update the text right here on dhe.

We can wash for when it changes and when it changes, we can perform in a synchronous curie by calling the thirst function right there.

And once the result arrived, reserve it into the state, which will be displayed onto you.

Ah, so the result shows up, and that's good, but it seems that door is so that I see here doesn't have anything to do with react.

But this time I built an inspector on the right so that we can see what's going on.

Ah, you can see here that dirty thought I I want to see is overwritten by the results off the requests that I made earlier but it finished later.

You know, this kind of makes sense because the shorter the curie, maybe it will return modest out.

So you cannot depend on the other off the request to correspond to the order of the response.

So you can think off and I think function as they ah, function that spawns the trade.

So, you know, when dealing with shot mutable state, we have to be Cafu.

So let's come back to this coat when we face problem like this one off.

The common opposed I see very often is to do Ah, the bounce.

And what I mean by de bouncing Is that inside off doing the search right away?

We're going to wait a bit until the use of has finished typing.

And after that period off in activity, then we do the search as usual.

It seems to work because now it only performs a single request.

But, you know, even with the bounce, it still doesn't guarantee the order off the response so I could do something like this.

So let's step back and look at this court again.

The real problem here Is that why we're waiting for the results to arrive?

And in this case, when the result did arrive, it might not make sense to use that anymore.

Because now I I have already triggered another third.

But first, I'm going to get rid off the D bounce because it didn't work.

Ah, Instead, I'm going to generate a unique I d for his request.

Then keep track off the letters request I d here.

And when we after we await, Maybe this not let us request I d could have changed.

We're holding onto doesn't correspond to the letters request will just discard the result.

And let's see, Okay, now it works on dhe because we only care about the results off the lettuce request.

But here now I am searching really slowly and you can see that, uh, until I finish typing.

I get no feedback whatsoever from the search boss on DDE That makes me feel that the search boss is a bit unrest conceived.

Ah, because you know, before Derbysoft could alive, I type another letter.

Do we thought that, uh, the interim rethought?

But if we compare that to Coco even on a very slow Internet, I still get the result as I type when?

If it lacks behind by several characters.

So it's clear that they are not totally this regarding the result that it's not the lettuce.

Subtitles ListPlay Video

Race Conditions in JavaScript Apps by Thai Pangsakulyanont | JSConf.Asia 2019

trigger

experience

dumb

previous