Almost everything else.

Ah, I'm gonna talk about state machines, meat cooks who knows its machines here.

All right, so, yeah, I know that you're all this.

You gotta step.

Machines are only good things, right?

It has been around for decades on end.

Now we're bringing this old stuff in tow.

React cooks who just Just probably a few months ago, released on the stable fashion off.

So, yeah, I have a family have two kids, and I'm living in Singapore, working as an indifferent working at me, different as front and stuff.

Previously, I was a big n developer, but I just moved to front end for 1.5 years.

And I love freak, and it took Well, look here.

Great.

Okay.

What?

The stock is, uh, here I am goingto give you a very brief introduction to step machines.

So far, you who would just born yesterday?

Who?

Just who never heard off those machines.

Probably unit toe, get some a basic concept of it, and then I'm gonna walk you through to Ah, my personal journey.

When I was working on a feature in In German.

Uh, but the journey is too long.

Toe Graham up in 30 minutes, right.

That's why I graham I cut it down and I simply fight those things.

What you're seeing here is not the real thing that I built.

But it's just a simulation off off my journey at the time, so and since it's a good journey, so there will be a lot off.

So, luckily, this is my This is the first time in the morning.

So I hope we are fresh, enoughto digested more good this morning.

And what the stock is not this.

This is not an introduction to a real cooks.

So I'm not gonna introduce you to any consequence cooks.

And it's not also down the state machines.

One set because it has a lot of concepts.

We if you talk about it, certainly it will take a few days.

So what?

It's technicians?

Well, when I'm mentioning that machines, I am referring to this finance technicians, which is on Wikipedia.

Yeah, it's like this the definition and we have some states and this so and why are we bringing this old stuff in tow, For instance, because you're released that machines are only used in critical systems in alien guest company in Nassau for building the rougher to send to Mars because, ah, they can afford to have editor on the back.

In production like us, we can afford it, right?

We can afford a bag in protection, and we can immediately Ah, push.

I'm caught and deploy it.

But that's not the case for them.

They can't just push a kowtow marsh, right?

Because it take months to get there.

So, uh, but why?

Why bringing this this complicated stuff in the front end?

Uh, there are a lot off.

There are a lot off, uh, explanations.

We just explained by the creator off extra in this talk so you can just go through the accommodation and take a look.

Why is this important?

But the one of the idea that I am getting so out this, uh, because it provides a common language for dissenters and developers.

So let me explain it.

Anybody ever get this kind of float from dissenters are?

Yep.

123 Okay.

So are we the only ones doing the complex stuff?

Ah, so I got I have a pit in in our product in Japan, which is basically a calendar.

So this calendar, you know, on interaction in a calendar is a lot.

Right there could be creating your staff or feeling the staff or feeling the list off items in calendar on.

Since we are stop, we do it lean.

So instead of having all requirements given up at the first place, we we just get the requirements gradually one by one.

So initially I got on leave everyone off this diagram, but then I'm the next minute I get another one, and then I get another one.

Then this diagram getting more and more complex, and it's it's getting harder for me to understand my coat and really might go to this taker.

But luckily, uh, I'm getting Beach Bay this idea so somebody s Oh, when I watch the talk, Yeah, he said that that machine provide a common language for the centers and developers, and I thought it is quite make sense because we're having this, uh, by using some machines, we can actually coat in a way that the diagram is presented to us, and I will show you later that we can do my sources.

So my problem.

Ah, at the time was the complex I flows that I get it.

The wires multiple states.

Uh, but he states Europe, I mean, states in react so I can be in hooks on it can be in the last components with It's basically the REAC states and multiple states are generally the implicit, which means Well, we believe some, let's say we have three states.

Uh, we have a combination of three states on the company, right?

And then we have forced this.

We have permission forthis.

Imagine if your eyes too complex, we can get this ditz exploded and it's getting harder to minute the state's inspected.

Yeah, So those implicit states, uh, for me, it's harder to reason about that's why Buck Skip showing up on production due to this invisible state.

So I thought that I covered all the states, but apparently there's some other combination off states that is not covered yet, and it's appearing in production.

So yeah, let's try using state machines to solve this problem.

So my hypothesis is ah, By using step machines, we can make our state's visible, which means if we have any invisible states means no hidden box anymore.

All right, so let's hope it turns out that way.

You know what?

So I thought it would be a lot of a lot of good.

We're starting to jump into coat.

I will give you a brief streams interaction through the exit.

Maybe so.

This is a simple taco Machine example.

So I'm just importing a machine function from extent, and I passed down.

Ah, conflagration object to the machine.

This confidential reject configuration object should contain at least the first is the initial state.

So we instead that it's, uh, initially on when it started and then all the available states.

So in this case, I have inactive state, and then I have active still as well.

And within those states, we can define state transitions, so we just a wayto move difference between states.

So, in this case, on toggle events, we moved to active state and on and from that lifted on, totally friends to do the same event.

We moved to the active state s.

So this is the bare minimum off station.

So we can try to copy this line, and we can visualize it from the coat.

Yep.

You're this So Now we get our coats with allies like this.

So it looks like the diagram that I showed you before the diagram that I that we got from the designers.

It seems a bit overkill, right?

When yoga stuff, what can be more complex in this?

What?

Why do we need this 7 20 just for throwing stuff?

But we will get to it soon.

So let's start the journey.

Ah, here.

I'm gonna walk you through my journey and I'm gonna split them step by step.

So it's step contests off first, the conference, you know, implementation off.

If using hoops and then next we'll get into this state mission definition and then next we will integrate that state machine into our.

So for the first, let's say imagine this.

We're doing it in sprints and these hours for spring.

So the first feature is simple.

It's just toggle the motor visibility, which I see.

I have bottom and I click.

And most of us and I close and it goes is its simplicity.

This hour bear, uh, component, which uses a button and a model.

And I feel nothing here yet.

So for tracking the visibility step, usually we use Houston on, then we this initiate they're still with force.

An on button click we sedated through on close model.

Click.

You said it.

Plus So this hour implementation it seems simple, right?

Why do innit?

CET machines.

Uh, but let's try doing this simple thing is exhibitions.

So I just I just had an idea here.

So it's easier for us to understand this a machine for this case.

So we have an invisible state as an easier, and then we, uh, put on open even so that it can go toe.

Is it busted?

And this was supposed it has a close event, the invisible state.

So this is our simple machine, which looks like our taco machine before and when we saw like that it has a similar thing.

The different.

The only difference is that we have different events.

The digger.

So by having given events, there is no way for this state.

Let's they were invisible state, and we send close event people do nothing because there's no cross even on this date.

So that's what makes it ah content.

We cannot go to any other state which is not defined here.

So Let's integrate.

That's a machine into our This is the same bourbon up, but I just imported by the stuff Use machines Year is, ah, cooked area custom hooks, which is written in extent.

And you can look at the expression on the recommendation I wouldn't work it through.

And this custom hooks except first the machine itself, the machine definition that we just did and then it, except some options, which is one of them is the left, which means that we can be back.

Our, uh, our our in deducts difficult.

And we accept we get the concert and the scent even send a function toe send.

Even so, for opening the model just simply sent an open even And for crossing the model to simply sound close even.

And here, uh, toe determined it, whether the motor is sure or not.

Instead, off missing physical state before we pass down the current state and the fella off the current state.

And if this is visible, then we display the motor.

Yeah, this is it.

And we still have the same working with our company.

But the difference is we can track it down in you duck.

So we have open even here, standing still visible.

And we have close even here.

Changing Stefan.

Okay, get some simple.

But now let's go to the spirit and the spirit toe government.

We just We have differences between you and edit screens.

But then our motor was just no content.

Right?

But now it is a content, and it has Ah, I didn't buy them when I s Oh, it's feeling the thing here.

And then when you click that it it is editing that thing and it triggered something.

So that's the second gentleman.

This is our old court in conference, you know, hooks.

We have to add another state because we're talking another thing right here.

So we just add anything state and then direct the state's value that we're passing down to the model.

So, uh, we are pressing down this, You and Dad, it's that fellow based on those two states before the feasible and anything.

If it is busy, building isn't everything in this view.

And, yeah, something like this.

And that's for this.

We're getting busted.

And now for a change in the state, we should probably get this the events off clicking or some are off clicking this bettors, though, setting the states.

So right here we we said anything to force when we want.

When we question the motor so it gets to the initial state and then on edit button, we just set it the truth.

So that's our implementation.

It's still many deeper so far.

So why don't we?

But why we better is writing machines, but we do it some useful stuff sometimes.

So Ah, now it's right.

State machines on right here.

I'm going to introduce you to a new concept port here.

Hi, Rocky Coast.

So, uh, here we have a new state, but it's not in is not tumbling off the extinct, But it has to be Children off on existing state because this that is actually inside the visible.

Because this that is only access when the motor is pretty boring.

And we can just add the state's inside it.

So this is called Erica.

Cost three State and inside the PC busted.

We have fused it, which is an energy off.

That and then we can go to the estate, but then from, and it's that we need to go to the parent state right, So there is no the default way When it access to the state, it can only access this.

It's sitting.

Sit.

So how do we access the present state?

Luckily, exit profit away toe.

Do it by defining an I D on parenting or any any state or anywhere on the machine.

And then we can just refer to that idea right this way, putting ah Hoesch in front of it.

So this is our state mission definition.

Then it looks like this one, if you like it so on Invisible Uh, this invisible, invisible thing is the same thing that we have previously.

But then we have two new state inside the physical state.

So when we're on few, we can edit it and we're already too conservative.