Building Complex UI with State Machines

When deciding what to talk about in 2024, I wanted to showcase how powerful state machines and XState can be by building something complicated, but not too complicated. That was the balance I was trying to strike. The year before, I had built a little autocomplete dropdown component for my Model Based E2E Testing with State Machines talk, which desipite not being the state machine used in the talk, was implemented with a relatively simple state machine. It seemed like the perfect amount of complexity and asynchronous loading state. I turned it into a nice 30 minute talk, that I was lucky enough to be able to give at CityJS Athens, What The Stack, in Skopye, North Macedonia, React Alicante, and React Africa, in Casablanca, Morocco.

Below I will share some photos of my vists to those places.

Talk

The code can be found on Github.

The state chart.

CityJS – Athens, Greece

The Acropolis at night.

The Temple of Poseidon with Kadi.

All the speakers at the Temple of Poseidon

The Parthenon

React Alicante – Alicante, Spain

Speakers Selfie

Plisplay with Stately

Speakers' Night Out

What The Stack – Skopje, North Macedonia

Statue of Alexander the Great, the most famous Macedonian.

The organizers, Blagica and Darko

React Africa – Casablanca, Morocco

Hassan II Mosque, the must-see building in Casablanca

Interior of the Hassan II Mosque. As a non-muslim, I was not allowed inside.

Colorful grains at the market

We took a speaker trip to Rabat.

I am so grateful to the organizers that invited me to their conferences, Aris, Darko, Victoria, and Aymen; I love you all. 🫶

What a great year! I can't wait to do it all again next year. I've already got my talk planned. Stay tuned...