up to you. Can I start? Okay. Can you hear me? Okay. I am Gabriele Falazca, a front-end
developer working in a company called Surzents and located in Rome. And if you don't understand,
I will speak to you about a finite set machine with some example inspired by retro game and
arcade games of the 90s. Let's start with this slide that is very clear and self-explanatory.
A finite set machine is an abstract machine that can be exactly in one of finite states
at any given time. It can change from a state to another in response to some inputs. This is
the Wikipedia definition of finite state machine. And it's very theoretical definition. But now
we will see how to apply that pattern in programming. For a representative finite state
machine, you can use the state charts that are a sort of graphs where the states, the nodes are
called the states. And the links between the nodes are called the transitions. This is the state
charts of an application that made a fetch call. So we have the state of the application is idle,
loading, such as, and failure. And the events that trigger the transition are fetch event that
trigger the transition from idle to loading. Reactive event that trigger the transition from
loading to failure. Retrievent that triggers the transition from failure to loading. And resolve
event that trigger the transition from loading to such as. Another state chart is this, a little
bit complex. This is an elevator. An elevator starts in idle state. When a user called the
elevator, he passes to state prepared up or prepared down, based on the floor where is it in that
moment. When the user select the floor, elevator passing state moving until it reaches the right
floor. After it reaches the right floor, elevator passing in state door opening. And when the user
left the cabin, elevator returns to idle state. Now let's create a state chart. Yes, we are going
to create the state chart of this animation. Okay, the chart take off his panties, make military
grids, and return to idle. So the states of the state chart are idle state. When a waiting,
panty state, and military state. Before defining transition, I think I give you some context
about this chart there. If you don't know, this chart there is called Yaku Taro Chimori,
is a side chart of a famous arcade game in the 90s called Metaslag. He triggered this
animation when the main character, Marco, worked near to him, and he made this animation for
dropping bombs, a reward for the main character. So the first event that linked the idle state
with the panty state is Marco is near. Second event that connect the panty state with the military
state is a reward drop. Because after drop the reward, he redress his panties and grids Marco
with military grids. And after, when Marco is far, he returns to idle state. Now let's see this
event live, but before, I want to show you the simplest code of finite state machine. It's a
JavaScript, because here we are in a room called JavaScript Debrum. But you can apply this pattern
in every modern programming language. It's a simple ES6 class with two methods. One for setting
a state, and the other one for executing the routine of the current state. This machine live
we can see here. This is a little part of Metaslag game in the browser. I made for demo. When you
press the arrow right and left, Marco walks back and forward, and when he's near Yakutaro,
in very big screen, there are a lot of iterations. Yakutaro plays his animation, take off the
panties and grids Marco. When Marco returns far, he returns to idle state. Let's see the code of
this demo. We have, you see, I have to zoom. Okay. Okay, this is the HTML page. It's very simple.
It has a sheen, that's the sheen, and two images that are the sprites of two charters. Now, we
have a simple entry point of the application that has a demo list for the arrow keys, and
initialize the script for Marco and Yakutaro. Our machine is the same, so in the slide.
And the two script for Marco and Yakutaro. Marco is a simple script as just two methods for going
back and forward. And Yakutaro script is as the finished machine as brain. So it has the three
methods that are the states we have defined before, and another utility method for observing
Marco and trigger the events for changing the states of the machine. And it's just this code.
Return to slide. Another type of machine, a bit optimized from this, is the stack-based
finite state machine. This kind of machine has not a single active state, but as a stack of state,
and consider active the state on top of the stack. So in this model, you can navigate through the
states back and forward way. Think the history of the browser like our finite state machine,
where think to the web pages as the states, and the back and forward event of the browser,
the events that trigger the transition. Okay, it's clear. This is the code of stack-based
finite state machine. It's very similar to the previous one, but we have the stack of the states
instead of the active state, and three utility for pushing and popping the state in the stack.
Very simple. If you have to develop a more complex machine, there are various tools and
frameworks. In JavaScript, the most famous is Xstate. That is a series of utility for
finite state chart and finite state machine. This is the code of a machine created with Xstate.
It's a very functionally way. We have got utility for creating the machine, all configuration
based, and a toggle service for defining and sending the event, and define the transitions.
My goal in this talk is not to show you a single framework, because you can choose one
study by yourself. I want to explain the theory and the pattern, and how to apply it to real life.
I introduced Xstate, because it has a cool tool called XstateVidz, that can help you to test
your machine. The tool is this. I don't know if you see. This is the same state chart of our
previous event, and it's interactive. You can trigger the events directly from the chart,
and see what's happened. On the sidebar, you have three tabs. In the first one,
you can put the code of your machine in Xstate way. The second tab is the state that contains
all information of the current state of the machine. From the third tab, you can programmatically
send the event for testing your machine. As you can see, I can send the event directly from here.
You can reset the machine. My talk is finished. Have you got any questions?
Who has the first question? And do raise the hands.
Hello. Thank you for your presentation. What happens to your state if an event is triggered
that you can't handle? What happens to your state if an event is triggered that you can't
handle at that state? If they are not connected to a transition, nothing happens, because the
machine doesn't respond to this event. This depends on the implementation that you use.
In Xstate, the most famous implementation, this thing is safe. It depends on which machine
you use and how you have implemented. Okay? Next question, raise your hand very high,
please. While you think about it, thank you for the video team up there with the green
T-shirt. They'll hear it after. Don't worry. They hear everything.
How is the animation graphically that we see on the screen is handled with regard to the
state machine because there is some delay. It has some time of duration. Thank you.
The animation is how it's made. Okay. I have just the three sprites and every state of
the machine set the correct sprite in the image tag and prepare the machine for the
next state. Observe Marco is updated the state and run the routine of every state.
Next question. Okay. Will you be around? Will you be around? Will you be in the deaf room
or outside? There are no more questions. Thanks again.
Okay. Thanks for the fish.