tillbaka till startsidan

48. The Year of State Machines

Lyssna på Spotify lyssna! Lyssna på iTunes

Anton pratar om sin senaste förälskelse XState och gör sitt bästa för att förklara både hur det fungerar och vad dess storhet är för Therése. Det blir state nodes, transitions och events. Ett trafikljus. Ett litet sidospår om useReducer. Hur state machines tillåter en att visualisera och samarbeta kring kodens logik.

Om du gillar podden blir vi väldigt glada för en liten recension i iTunes eller en prenumeration på Spotify. Följ oss och säg hej på @asdfpodden på Instagram eller Twitter (Anton, Therése) <3

Länkar

Avsnittets skämt:

Varför blev det aldrig några typer i frontend?
Fick aldrig till något riktigt flow.
Skrapa här!!
Transkribering
Transkriberingen är gjord av nån "AI-grej". Du kan förbättra den genom att klicka precis här :)
00:00:00
Varför blev det aldrig några typer i frontend?
00:00:03
Jag vet inte.
00:00:05
Du fick aldrig till något riktigt flow.
00:00:09
Okej, det var kul ändå.
00:00:14
Det hade varit roligare.
00:00:17
Jag tänker att det är roligare för de som jobbar med flow.
00:00:20
Ja, kanske.
00:00:22
Är det någon som jobbar med flow?
00:00:24
Jag vet inte.
00:00:25
Facebook har väl kvar det någonstans fortfarande?
00:00:27
Jag tror att React-kodbasen är skriven i Flow fortfarande.
00:00:40
Jag är inte helt 100% men den har varit skriven i Flow i alla fall.
00:00:44
Sen vet jag inte om de har migrerat.
00:00:46
Men jag har inte hört något om det.
00:00:48
Jaja, välkomna till ett nytt avsnitt av ASTF.
00:00:52
Idag är det återigen ett sånt här avsnitt när jag blir kär i någon ny teknik och sen måste få ventilera om den till dig Therese.
00:01:02
– Toppen! Det är så här jag lär mig saker. – Det är de vi älskar allihopa.
00:01:07
Vi har ju något avsnitt väldigt tidigt i poddens historia som heter "Overmind" när jag pratar om statebiblioteket Overmind.
00:01:15
– Med "å" såklart. – Eller "Overmind".
00:01:18
Jag tycker att det ska vara med Åh, det är för svenskat.
00:01:20
Och den kan vi också prata om i ett avsnitt.
00:01:24
Jag kanske har nämnt den en gång, att jag har tappat lite av den.
00:01:27
Men det är också för att den inte maintainas längre så aktivt.
00:01:30
Jag hänger lite på deras Discord och det är väldigt mycket frågor som är där.
00:01:35
Kommer det här biblioteket att uppdateras någon mer?
00:01:38
Men vi får väl se vad som händer.
00:01:41
Jag tror att han som har byggt det från början som heter Christian Alfonis.
00:01:44
Jag tror att det är en norsk som håller på att lämna det över till någon.
00:01:48
Så vi får se vad som händer med det.
00:01:50
Men idag är min senaste förälskelse State Machines.
00:01:58
State Machines i Javascript framförallt.
00:02:00
Och då också bjuder jag på biblioteket X-State.
00:02:04
Du säger herregud.
00:02:06
Så en maskin som trycker ut statusar baserat på informationen den får in?
00:02:14
Typ så ja. Det baseras på något som heter Finite State Machines.
00:02:19
Som är något skitgammalt koncept. Minns inte riktigt exakt när det uppfanns.
00:02:27
Men det finns en massa gamla forskningspapper på hur det här ska fungera.
00:02:31
fungera. Det som det innebär då är att just när det är en finite state-maskin så innebär det att det finns ett
00:02:36
begränsat antal states man kan hamna i.
00:02:39
Så att det liksom inte dynamiskt antal states eller vad man kan gå någonstans
00:02:44
utan allting är specificerat att okej, men från det här statet kan det gå till det här statet och från det statet kan det gå till det nästa statet eller tillbaka eller vad det nu kan vara.
00:02:51
Så att man kan liksom, det går liksom att visualisera
00:02:55
en state-maskin eller en finite state-maskin som en graf till exempel.
00:03:00
Så det är liksom grunden till det hela.
00:03:03
Och sen finns det ju massa saker som bygger ovanpå det här.
00:03:08
Men känner du igen idén så att säga?
00:03:12
Ja, absolut. Den känns väldigt nära någonting bak i bakhuvudet som kom från
00:03:21
hela det här med Alan Turings maskin som var grunden till en dator. Jag vet inte.
00:03:28
Det kan säkert finnas en samband där som jag inte har koll på.
00:03:31
Men det finns ju "Turing Complete" och det skulle säkert kunna vara en state machine.
00:03:36
- Ja, men det där känns väl som en väldigt gammal klassisk grej inom vetenskap och datavetenskap och alla möjliga saker.
00:03:48
Jag greppar ju teorin så att säga.
00:03:53
Inte exakt hur det funkar, men det översiktliga.
00:03:57
Det här pratar vi nog om.
00:03:59
Kanske lite svårt att se vad jag skulle applicera det på i mitt liv.
00:04:05
Dagliga liv.
00:04:07
Det förstår jag, för det är också den frågan jag har fått när jag har pratat om det på andra ställen.
00:04:11
Och man kan ju liksom ta ett litet steg tillbaka.
00:04:19
För det är ju väldigt använt inom spelprogrammering till exempel.
00:04:21
Så finns det väldigt många state machines som bygger på saker.
00:04:24
Det är ett populärt koncept som funnits där jättelänge.
00:04:27
Men har väl inte varit superpoppis inom typ webbprogrammering eller E-React eller vad vi nu kan prata om.
00:04:32
Men om vi tänker att vi har någon komponent.
00:04:34
Vad ska vi ta för exempel här då?
00:04:36
Vi kan ta att vi har en stoppljus, alltså en bil med trafikljus.
00:04:48
Om vi skulle bygga den i React skulle man på ett väldigt naivt sätt kunna säga att vi har tre states.
00:04:58
Vi kör typ "use state" tre gånger.
00:05:00
Så vi har en som är typ "is red", och sen har vi en "is yellow" och sen har vi en "is green" till exempel.
00:05:06
Och sen då skulle man kunna bygga den här maskinen så att när vi, om den är på röd från början, när vi då går från röd till gul,
00:05:15
då sätter man "is red" till "false" och så sätter man "is yellow" till "true" och så vidare.
00:05:20
Och då när man går från gul till grön så sätter man då "is yellow" till "false" och "is green" till "true".
00:05:27
Just det. Och sen kan man konstatera då att när man är på röd så har man bara en väg att gå och det är till gul för du får inte gå till grön.
00:05:36
Precis. Och om vi då skulle modellera det här med "use states" som jag pratade om nu, då skulle det tekniskt sett för det första gå att både gå från att "is red are false" och sen sätter du direkt att "is green are true" utan att hoppa över gula steget så att säga.
00:05:56
Så det är en grej. Plus att du kan hamna i det som kallas för "impossible states", alltså omöjliga scenarion.
00:06:04
Det vill säga att både "is red" är "true" och "is yellow" är "true" om man inte håller tungan rätt i mun när man sitter med sina state-variabler och setters.
00:06:14
Och det är ju för det första inte så nice.
00:06:20
Så här kan man innan man hoppar på Xstate eller state-maskin överlag
00:06:25
så kan man tänka att då gör vi om det här så att istället för att vi har
00:06:29
tre stycken useState-huckar i vår komponent så gör vi om det till en useState-huck
00:06:35
och sedan att den har typ ett sträng värde istället som är red, green, yellow.
00:06:41
Eller en av dem då.
00:06:43
Och då istället för att man ska sätta massa true eller false så sätter vi att
00:06:46
"Okej, men om den är red, då sätter vi den värdet till yellow istället."
00:06:50
Då behöver vi inte tänka på att "Okej, men då kan den vara både red och yellow samtidigt"
00:06:53
utan den kan bara vara ett sträng värde på samma gång.
00:06:56
Och då har vi liksom tagit bort den här möjligheten att den hamnar på en omöjligt state
00:07:02
som inte ens är att kunna vara på, där flera saker är true samtidigt.
00:07:06
Låter det vettigt so far?
00:07:11
Jag är ju mer av en visuell person än en auditiv person när det kommer till kod.
00:07:17
Men jag tror att det är kul att du tar upp det exemplet, för det är ju någonting som kanske man eller jag har gjort automatiskt utan att tänka på att det är därför jag gör det.
00:07:31
Jag använder en sträng istället för att jag inte ska kunna hamna i en situation där jag har två "truths" som inte är tillåtna egentligen.
00:07:39
Det är ett skitbra tips. Även om man ignorerar allt jag kommer säga om statements-
00:07:45
-så är det ett extremt bra tips.
00:07:48
Om man har flera useStates som är booleans-
00:07:52
-så är det oftast mycket bättre att sätta dem till en sträng istället för en sum.
00:07:59
Om inte de här booleansen ska kunna vara true samtidigt, för då blir det annat.
00:08:04
Men oftast är det bättre att ändra till en sträng.
00:08:06
Eller att man kör "use reducer" som gör det lite tydligare vad man ska ändra på.
00:08:10
Så det kan väl vara en varm rekommendation att ta som ett första steg.
00:08:14
Och det man egentligen har gjort är ju just en liten, liten state-maskin. Nästan.
00:08:19
- Alltså det är ju ett sidospår, men jag har ju inte hittat ett case där jag tycker det känns rimligt att använda en "use reducer" heller i mitt liv.
00:08:25
- Nej, men det är ju också lite så här, det är ju typ om man vill uppdatera ett komplext state.
00:08:31
Om du hamnar i en situation där du har flera useState vars värden är relativt relaterade till varann
00:08:38
eller som hänger ihop, så att du kanske, om du kommer på dig själv med att
00:08:42
på flera ställen i din komponent så kör du flera state, alltså useState setters
00:08:47
då kan det vara vettigt att man slår ihop dem till en useReducer och att då
00:08:52
där du tidigare körde flera, där du uppdaterade statet på flera useState-variabler tidigare
00:08:59
Där dispatchar man bara till reducer.
00:09:02
Men som sagt, det kanske är ett cyberspår.
00:09:04
Jag tänker att det skulle kunna vara jättebra när man gör beräkningar.
00:09:07
Ja, förmodligen.
00:09:09
Men som sagt, det beror också lite på...
00:09:11
Jag tänker att det mer beror på hur ditt state är modellerat egentligen.
00:09:15
Alltså om du har en ganska komplex state eller bara ett värde.
00:09:19
Ja, förlåt, cyberspår.
00:09:23
Jag får upp någon så här gammal...
00:09:29
textbaserat äventyrsspel i Python jag gjorde en gång.
00:09:34
För att få upp lite det här att jag stoppade in vilka vägar den här spelen får gå när den har gjort det här.
00:09:39
Och så kommer de här möjliga scenarierna fram.
00:09:42
Ja, jag tycker det är ett superbra exempel.
00:09:44
För det är ju verkligen en state-maskin.
00:09:47
Att du får spesa vilka vägar man kan ta mellan de olika statesen.
00:09:51
Eller rummen om man tänker en dungeon crawler textbaserat spel.
00:09:56
Egentligen är det bara tre saker som en state-maskin består av.
00:10:02
Det ena är state-noderna.
00:10:06
Som i vårt fall skulle kunna vara red, green och yellow.
00:10:09
Det skulle kunna vara våra tre state-noder.
00:10:11
Sen finns det transitions som är vägarna mellan de här state-noderna.
00:10:20
Sen finns det events och det är eventsen som triggar transitions.
00:10:25
Så säger vi att vi har red statet, då kan vi spesa att den tar emot ett event som kanske heter "next"
00:10:34
Bara för att jag inte kom på något bättre
00:10:36
Och då har vi spesat att "next-eventet" triggar en transition till yellow
00:10:42
Så det vill säga att då har vi spesat att från röda statet kan vi gå till det gula statet
00:10:48
Men då har vi också spesat att då finns det ingen möjlighet att gå från röd till grön direkt
00:10:56
Utan då måste man också spesa på gula statet, att den har en transition till det gröna statet
00:11:04
Och att det finns ett event där som triggar den transitionen för att komma vidare
00:11:08
Och det är exakt det du pratar om med ett textbaserat spel, eller vilket spel som helst
00:11:12
Men där man går mellan olika rum och det finns dörrar mellan rummen
00:11:16
Så det tycker jag är ett svinbra exempel.
00:11:19
Det kanske ska vara Snonja som pratar om det här med någon annan.
00:11:22
Okej.
00:11:25
Men känns det som att du hänger med?
00:11:28
Alltså de här tre grejerna.
00:11:29
Du har state noder som är vilka states vi kan stå på.
00:11:32
Sen har du transitions som är övergången mellan dem och event som triggar transitions så att säga.
00:11:38
Ja, alltså jag känner mig hyfsat med på det här.
00:11:41
Och i ärlighetens namn så var det...
00:11:44
Nu är det fan länge sedan, men inte så länge sedan som jag faktiskt kikade lite på det här när en kollega tyckte att det var ett alldeles opportun tillfälle att använda Statement of Achievement,
00:11:55
när vi skulle ta fram olika statisar på objekt. Så då läste jag nog på lite och tänkte att "ja, det här greppar jag nog".
00:12:05
Och sen såg jag kod och rekursiva anrop och grejer.
00:12:09
Och då tror jag att jag backade lite.
00:12:12
Men jag tror han löste det själv som en hjälte.
00:12:14
Och jag bara gick vidare.
00:12:18
- Ja, det kan ju verkligen vara lite avskräckande.
00:12:22
Om man pratar om bara de här tre sakerna som vi pratar om nu så är det ändå ganska straightforward.
00:12:26
Sen finns det ju såklart massa saker runt omkring där också.
00:12:29
Alltså det finns något med state charts som, om jag inte är helt uttryckt här nu,
00:12:33
är att det är när du använder flera state machines och nästlar dem
00:12:39
eller du har hierarkiska state machines eller parallella state machines
00:12:42
eller state machines som skapar upp barnstate machines och sen skapar de upp barnstate machines
00:12:48
och hur de kommunicerar mellan varandra.
00:12:51
Men det kan vi lämna till något fördjupande avsnitt någon gång i framtiden.
00:12:56
Men jag tänker också bara för att man ska fatta vad det kan vara bra för
00:13:00
Ett exempel på en state-maskin som är väldigt enkel att bygga eller som man har stött på är till exempel ett fetch-anrop.
00:13:06
När du kör fetch i din kod så kan det vara att först är det nåt waiting state eller idle state när du inte har gjort din fetch.
00:13:15
Då kan du tänka att det här är ditt promise egentligen.
00:13:18
Sen kan du ha en loading state och det triggas av att du har ett event som triggar det här.
00:13:26
Det är typ "fetch"-eventet som triggar att vi går till "loading" och gör vårt anrop.
00:13:31
Sen kommer den att stå i "loading"-statet tills den har fått ett svar.
00:13:35
Då kan det vara att vi fick ett positivt svar.
00:13:38
Då kanske vi går till ett state som heter "success".
00:13:41
Och så händer det nånting.
00:13:42
Eller om vi fick ett negativt svar, då kanske vi går till ett state som heter "error".
00:13:46
Då triggar det ett event på att anropet inte fungerade.
00:13:51
Sen skulle man då kanske kunna ha att, okej, men om vi är i error-statet så kanske man kan skicka en retry, till exempel.
00:13:57
Ett sånt event till vår maskin då.
00:13:59
Och då kommer den göra anropet en gång till, hamna i loading och sen beroende på om det går bra eller inte så hamnar den i success eller error.
00:14:07
Så det är också ett exempel på en state-maskin som man kanske kan...
00:14:10
Som man har stött på kanske tidigare i någon utan att tänka på att det är en state-maskin just.
00:14:15
Jag får bara upp bilder så här när jag börjar på ett uppdrag.
00:14:20
"Perfekt, jag drar in en states machine!"
00:14:25
Det kanske inte är det första man gör.
00:14:30
Men det finns ändå fall när man vill modellera saker.
00:14:34
Ett exempel på saker som är bra att modellera med states machines är om du har någon typ av flerstegsformulär.
00:14:42
Det brukar vara ett "go to" exempel för många som pratar om state machines.
00:14:47
"Okej, men om vi har ett formulär med flera steg, då kan det vara att i det här statet som är det första
00:14:55
då kan vi ta emot vissa events och de eventsen uppdaterar datan som finns på första steget."
00:15:04
Det är också en grej som kan sägas att våra events behöver inte nödvändigtvis trigga en transition till ett annat state.
00:15:10
Utan maskinen kan ta emot events med data och spara ner information också
00:15:16
På steg 1 kanske vi tar emot att vi har first name och last name på steg 1
00:15:22
Då har vi event som skickas när man fyller i de fälten
00:15:25
Sen finns det kanske en next-knapp på det här formuläret
00:15:29
Då triggas ett event som skickas till nästa state
00:15:32
På den sidan kan man fylla i nästa information som kanske är e-mail eller något
00:15:37
Oerhört dålig UX på det formulärt känner jag när jag pratar om det.
00:15:41
Men det förklarar ändå lite fördelen med att köra det.
00:15:47
För det som händer då är att då kan du se till att innan du har fyllt i first name och last name så kan du inte gå till nästa steg.
00:15:54
Och står du på steg två så kan du inte fylla i first name och last name.
00:15:58
Eller om du står på steg ett så kan du inte ännu fylla i email och så vidare.
00:16:02
Så det är väldigt mycket kontroll över vad man kan göra.
00:16:06
Jag ska säga, för våra lyssnare i Orördrad Radio, men du ser fortfarande väldigt skeptisk ut.
00:16:13
Jag ser ut så här.
00:16:20
Eller vad jag skulle säga.
00:16:23
Jag tror att ditt exempel påminner väldigt mycket om någonting som jag gjorde inte alls för lång tid sedan.
00:16:30
Jag tror att det blir...
00:16:32
Jag förstår grejen och när man väl har implementerat det så är det klart att det lirar väldigt bra.
00:16:38
Jag tror att jag blir...
00:16:40
Känner mig inte skeptisk till det som så.
00:16:46
Jag känner mig skeptisk till hur roddar jag i den här koden?
00:16:50
Går den att förstå? Är den för komplex för min hjärna?
00:16:54
Det är det här som är, i och med att du pratar om att du är en visuell lärare, det här är, och det är kanske nu först vi kommer till det som enligt mig är det absolut coolaste med state machines.
00:17:08
För om vi tittar på Xstate då, som är det här populäraste JavaScript-biblioteket för state machines. Där visualiserar du hela din maskin och vilka states den har, vilka events den har, hur du går emellan dem.
00:17:21
Allting är egentligen bara ett javskript objekt.
00:17:23
Så du behöver inte skriva någon egen kod på hur du hanterar de här.
00:17:29
Alltså hur du går mellan dem.
00:17:30
Eller du behöver inte skriva någon egen kod på hur du faktiskt interagerar med maskinen.
00:17:36
Utan du skriver en specifikation som är typ så här.
00:17:39
Du ger den ett id.
00:17:40
Du säger något initial state som du vill ha.
00:17:42
Och sen så finns det en states property.
00:17:46
Och på den så skriver du vilka states du har.
00:17:48
Vi hade kunnat skriva "red", "yellow", "green" till exempel som tre properties.
00:17:53
De i sin tur är objekt och i de objekten spesar man "on" som är en property.
00:17:59
Och sedan spesar man i den vilka event den kan ta emot och vilket state ska gå till när det händer.
00:18:05
Och det är egentligen allt man behöver göra.
00:18:08
Så att skapa den här "red", "yellow", "green"-maskinen kanske är...
00:18:14
Jag skulle säga 15 rader av ett JavaScript-objekt,
00:18:18
som du sen skickar in till XState och sen sköter den allting åt dig.
00:18:23
Är det här vi äntligen ser den totala vinningen i att ha paket?
00:18:30
Gud ja, det är det definitivt.
00:18:32
Jag skulle aldrig vilja implementera allt som finns i XState själv.
00:18:36
Det är det som är lite coolt.
00:18:39
Det som är ännu mer coolt är att eftersom den är en finite state-maskin som vi pratade om i början.
00:18:49
Det vill säga att det finns ett begränsat antal states man kan hamna i.
00:18:52
Man kan tänka sig att det är som en graf.
00:18:54
Om du har sett ett flowchart någon gång.
00:18:56
Man ritar upp sitt yellow, eller red, så är det en pil till yellow.
00:19:01
Sen är det en pil till green från den.
00:19:03
Sen kanske en pil tillbaka till red från green.
00:19:07
Då finns det verktyg för att ta din XState-maskin och visualisera den.
00:19:12
Du kan klicka på ett VSCode-extension där du får upp en knapp bredvid din maskindefinition.
00:19:20
Där står det "Open Visual Inspector".
00:19:23
Klickar du på den öppnas det ett fönster bredvid din kod där du ser exakt hur din maskin ser ut.
00:19:29
Du ser alla pilar mellan alla olika states.
00:19:31
Du ser hur de går mellan varandra.
00:19:32
Du ser vad eventen heter och hur de triggar varandra.
00:19:36
Plus att du då också kan klicka på simulate.
00:19:39
Och då kan du i din visuella bild av det här,
00:19:44
då kan du klicka på dina events och se vilka states du hoppar till.
00:19:47
Du kan se hur det går mellan dem.
00:19:49
Du kan sitta och klicka runt i din maskin och se hur funkar logiken.
00:19:53
Och det gör ju då att helt plötsligt så är all logik i din applikation
00:19:57
som är byggd med state-machines kan du sitta och titta på och klicka runt i och se hur den funkar
00:20:02
utan att behöva köra själva applikationen egentligen.
00:20:06
Det låter ju extremt nice om det är en bra gränssnittsupplevelse och horribelt om det är bara brus.
00:20:20
Gud vad jävla pessimistiskt det är.
00:20:23
Det får det vara. Vi är tillbaka till avsnitt ett. Det är pepp och depp.
00:20:29
Jag tycker att det funkar extremt bra.
00:20:32
För det som också är att du kan även till exempel aktivera DevTools med XState.
00:20:39
Som gör att när du kör din maskin eller din app i browsern.
00:20:43
Till exempel, jag bygger ju det här Gameshow-projektet och där använder jag State Machines.
00:20:48
Så när jag kör min Gameshow, då kan jag ta upp ett fönster bredvid där jag ser min maskin.
00:20:52
Som är implementerad.
00:20:54
Och jag kan då klicka runt i den och liksom så här, om jag skickar det här eventet.
00:20:58
Då ska jag gå till det här statet.
00:21:00
Då synkar den med min applikationsstate.
00:21:04
Så när jag klickar runt i den visuella bilden av min statemaskin så uppdateras även statet i min app.
00:21:11
Så jag kan istället för att klicka runt i GUI, så kan jag klicka runt i den visuella bilden av maskinen och se hur det påverkar GUI.
00:21:18
Det är också extremt coolt.
00:21:21
- Ja, det är lite som att trycka in CSS-attribut i domen.
00:21:25
- Ja.
00:21:27
Exakt, alltså det är liksom att göra det direkt i browsern liksom och så fast du kan
00:21:30
Nu kan du göra det, det är liksom att du har visualiserat logiken istället för att bara visualisera
00:21:34
Gud kan man säga
00:21:36
Och den sista coola grejen som kom bara härom veckan
00:21:40
Från, det är ett företag som heter Stately
00:21:43
Som han som har byggt Xstate har grundat
00:21:46
Och de släppte då en ny version av sitt VS Code Extension i veckan
00:21:51
Kanske var förra veckan
00:21:53
Där de har gjort en visuell editor
00:21:56
Istället för att du skriver det här javskrivt objektet själv
00:22:01
Så kan du drag and droppa ut dina states, events, transitions och allt annat som man kan lägga på ovanpå
00:22:10
Så helt plötsligt behöver man inte ens kunna skriva kod för att kunna skriva logiken till en app
00:22:16
Så det är en väldigt "no code" grej
00:22:20
Men att du kan liksom...
00:22:22
Egentligen skulle man kunna sitta tillsammans med en produktägare eller en UXare och visualisera hur det ska funka.
00:22:28
"Jamen när vi sitter på det här steget i det här flödet, då ska vi kunna gå dit."
00:22:32
Och så kan man sitta och titta och så kan man sitta och klicka igenom det här och se så här.
00:22:35
"Ja men funkar det bra? Känns det bra? Är logiken vettig?"
00:22:37
"Åh nej, här hade vi inte tänkt på det där."
00:22:39
Och då kan vi fixa det direkt liksom.
00:22:41
Och sen kan man då...
00:22:42
Och sen synkar det direkt till din kod.
00:22:44
Och då kan man liksom bara köra det rakt upp och ner.
00:22:48
Men tänker du att det är så pass, vad heter det, jag vill säga simplifierat men så pass tydligt att en person som inte har kodkunskap kan göra det också?
00:23:03
Ja det tror jag.
00:23:05
Ja.
00:23:07
Det beror ju inte så mycket på det.
00:23:09
Jag tror verkligen det.
00:23:11
Jag tror att 2022 är "the year of the state machine".
00:23:18
Jag tror att det kommer att få en riktig boom när det här nya verktyget som de släppte nu kommer och folk kan drag-and-droppa det.
00:23:28
Man måste lära sig vilka properties som finns på det här jagskriptobjektet som man kan definiera maskinen med.
00:23:35
Betyder det att vi kommer ha en massa state machines där vi inte hade behövt state machines?
00:23:40
Ja, garanterat. Det är väl alltid så när det blir en high.
00:23:44
Du pressar in state machines var än vi ens kan.
00:23:49
Ja, så kommer det till 100% bli.
00:23:54
Men då undrar jag lite, är du liksom, vad är det du tycker är så himla nice?
00:24:02
Är du liksom intresserad av att de facto bygga en state machine eller resultatet state machinen producerar åt dig?
00:24:10
Nej, alltså det som gör mig förälskad i det är ju just det här att logiken kan visualiseras och liksom formaliseras på ett annat sätt.
00:24:19
Jag vet inte, som sagt, om vi tar min gameshow som ett exempel.
00:24:23
Bakgrunden är att man har en gameshow, den kan ha flera segment. Varje segment kan innehålla flera frågor.
00:24:34
Det kan vara olika typer av segment. Vissa innehåller frågor, vissa gör andra saker.
00:24:39
Frågorna kan vara på olika sätt. Vissa kanske är att du visar upp en bild.
00:24:43
Vissa kanske är alternativfrågor där du ska klicka i olika alternativ.
00:24:47
Någon är bara att man ska trycka snabbast på knappen, eller vad det nu kan vara
00:24:51
Och det som jag kan göra då med Statemachine är att jag kan definiera logiken för alla de här olika sakerna
00:24:58
Och bygga samman den logiken till en enda stor klump, i brist på bästa ord
00:25:06
Och att jag också kan, sagt och sagt, se den här logiken
00:25:10
För jag vet liksom inte ens om jag skulle lyckas tänka igenom hur allt det här skulle funka
00:25:15
Om jag inte kunde spesa det i en state-maskin.
00:25:19
Jag hade ju liksom...
00:25:20
Det som jag hade behövt göra är att rita upp en massa flödesscheman.
00:25:23
"Ja men okej, om jag står på den här frågan och ska gå till nästa fråga"
00:25:27
"då ska det här hända, då ska det här statet uppdateras."
00:25:29
Nu får jag det gratis istället via state-maskinen.
00:25:32
Så han säger att "ja men då säger jag att okej"
00:25:34
"från den här frågan ska jag bara kunna gå till nästa fråga"
00:25:36
"och då ska det här hända"
00:25:37
"och då kommer det inte kunna ske någonting annat med mitt state."
00:25:39
Alltså jag behöver liksom inte oroa mig så mycket att jag har kodat fel.
00:25:42
så länge min lilla visuella bild av logiken ser rätt ut.
00:25:46
Fan, umella loss lite bara.
00:25:50
[Skratt]
00:25:51
Nej, skoja bara.
00:25:51
[Skratt]
00:25:52
Ja, men det är väl typ liksom så här,
00:25:53
det sitter man med umellgrejer och sen ska du liksom göra om det till implementation
00:25:59
och däremellan blir det ju ofta mycket missförstånd och förvirring.
00:26:03
Ja, nej men jag förstår, alltså det är väl svinbra att kunna få liksom en
00:26:08
tydlig representation av vad man håller på med.
00:26:11
Det gäller ju det mesta tycker jag.
00:26:13
Bara en sån sak som när den här Bundle Size Visualizer kom.
00:26:18
Ja, exakt.
00:26:19
Har du egentligen ditt projekt?
00:26:20
Alltså sådana delar.
00:26:21
Så det är väl alltid bra att kunna se vad som finns här egentligen.
00:26:25
Ja, så jag kan varmt rekommendera alla att i alla fall testa lite.
00:26:32
Eller kolla på de exemplen som finns.
00:26:33
För det finns ju extremt många exempel på sådana här maskiner.
00:26:35
I alla fall på deras hemsida som är stately.ai tror jag.
00:26:39
eller xstate.js.org
00:26:43
Det är ju ändå lite intressant, för du är mer intresserad av produkten du får ut
00:26:50
än du är av att göra en state machine själv.
00:26:54
Ja, absolut.
00:26:56
Det hade inte behövt vara en state machine om det gav mig samma fördelar.
00:27:00
Men jag vet inte om det finns någon annan alternativ.
00:27:04
Nej, det är bara jag som fastnade vid en tweet som jag ville se om jag kunde fortsätta applicera på livet.
00:27:12
Jag tror det var någonting i stil med att min pappa är en audiofil så han bryr sig om högtalare.
00:27:21
Det spelar ingen roll vad det är för musik eller ljud utan det är bara högtalaren som betyder någonting.
00:27:26
Så kan du vara som utvecklare också.
00:27:29
Du kan antingen bry dig om musiken eller tekniken.
00:27:33
Och musiken skulle då vara produkten.
00:27:36
Ja, den tweeten gillar jag.
00:27:39
Ja, jo, jo.
00:27:43
Men det finns saker att känna med den tweeten som jag kanske inte ska gå in på nu.
00:27:48
Men jag håller med.
00:27:51
Det jag tycker är väldigt bra om jag ska formulera mig extremt kort och koncis så är det liksom att
00:27:56
Xstate eller State Machines låter mig skriva ganska buggfri kod.
00:28:04
För att den sköter så mycket i bakgrunden åt mig och att det blir tydliga gränser mellan olika states och tydliga vägar mellan dem.
00:28:15
Passa oft.
00:28:17
Så nu, till nästa avsnitt, då har du också blivit såld på State Machines när du bara har testat lite. Det är perfekt.
00:28:24
Ja, det får jag absolut göra. Jag ska väl bygga en superfetch, tänkte jag.
00:28:29
Ja, exakt. Du kan komma till ditt team och säga "Du, jag har byggt en fetch här med en state-maskin i bakgrunden".
00:28:35
Jag ska också säga, innan vi avrundar, det finns ju också en massa saker som hur du använder Xstate i typ Vue eller React eller andra bibliotek.
00:28:43
Alltså i React så är det en hook som heter "use machine" och så skickar du in din maskin-definition.
00:28:49
Och sen spottar den ut sig i statet som du är på och en send-funktion för att skicka events till den.
00:28:55
Så det är också extremt simpelt.
00:28:58
Men man kan också använda det utan ramverk och du kan använda det, det finns massa olika varianter på det.
00:29:03
Så det kanske är det sista jag har att säga.
00:29:05
Ja, alltså jag tycker att det låter jäkligt cool och jäkligt...
00:29:10
Cool?
00:29:11
Coolt?
00:29:12
Jäkligt nice.
00:29:13
Och på något sätt så känns det ändå som att...
00:29:16
En del av mig vill känna att det har kommit något nytt och coolt.
00:29:19
Fast det bygger på så extremt gamla principer.
00:29:22
Så det är inte nytt.
00:29:24
Det är bara en ny take på det.
00:29:26
Så jag är egentligen lite spänd på att testa det.
00:29:30
Men också trött.
00:29:35
Det får vi se.
00:29:35
Det förstår jag.
00:29:37
Man ska hellre vila än testa X-Tate.
00:29:42
Eller?
00:29:45
Men toppen.
00:29:47
Vi säger så. Vi finns som vanligt på lite olika sociala medier och sånt där.
00:29:52
Det är bara att höra av sig om man har några frågor.
00:29:54
Annars så tackar vi för oss.
00:29:59
Ja, så hörs vi om två veckor.
00:30:01
Det gör vi. Säg så.
00:30:02
Bye bye.
00:30:03
Hej.
00:30:04
[Outromusik]
Tillbaka upp