Tweet
Tweet

Slide 1

Slide 1 text

THE STATEFUL ELEPHPANT RICK KUIPERS / @RSKUIPERS @PHPSTORMTIPS

Slide 2

Slide 2 text

THE STATEFUL ELE ANT PHP C# RUBY PYTHON SCALA JAVA JAVASCRIPT GO PASCAL

Slide 3

Slide 3 text

++++++++++[>+++++++>++++++++++>+++>+<<<<-]>+ +.>+.+++++++..+++.>++.<<+++++++++++++++.>.++ +.------.--------.>+.>. HAI 1.2 CAN HAS STDIO? VISIBLE "HAI WORLD!" KTHXBYE

Slide 4

Slide 4 text

TOPICS ! STATE ! STATE DIAGRAM ! STATE MACHINES ! STATE PATTERN

Slide 5

Slide 5 text

STATE

Slide 6

Slide 6 text

THE GAME

Slide 7

Slide 7 text

STATE DIAGRAM

Slide 8

Slide 8 text

ini#al state 10101 accep#ng state ✅ 01110 DETERMINISTIC FINITE AUTOMATON state transi#on ACCEPTOR

Slide 9

Slide 9 text

DETERMINISTIC FINITE AUTOMATON TRANSDUCER MEALY

Slide 10

Slide 10 text

DETERMINISTIC FINITE AUTOMATON TRANSDUCER MEALY

Slide 11

Slide 11 text

FINITE STATE ACCEPTOR

Slide 12

Slide 12 text

STATUSES PENDING NEW COMPLETED CANCELED REFUNDED

Slide 13

Slide 13 text

DETERMINISTIC FINITE AUTOMATON ACCEPTOR

Slide 14

Slide 14 text

$order = $this->getOrder(); $order->setStatus(Order::STATUS_COMPLETED);

Slide 15

Slide 15 text

[ 'transitions' => [ 'create' => [ 'from' => ['new'], 'to' => 'pending', ], 'cancel' => [ 'from' => ['new', 'pending'], 'to' => 'canceled', ], 'complete' => [ 'from' => ['pending'], 'to' => 'completed', ], 'refund' => [ 'from' => ['completed'], 'to' => 'refunded', ], ], ];

Slide 16

Slide 16 text

$order = $this->getOrder(); $stateMachine = $stateMachineFactory->get($order); $stateMachine->apply('complete');

Slide 17

Slide 17 text

$order = $this->getOrder(); $stateMachine = $stateMachineFactory->get($order); $stateMachine->apply('complete'); $stateMachine->apply('cancel'); PHP FATAL ERROR: UNCAUGHT SM\SMEXCEPTION: TRANSITION "CANCEL" CANNOT BE APPLIED ON STATE "COMPLETED" OF OBJECT "ORDER" WITH GRAPH "DEFAULT"

Slide 18

Slide 18 text

Complete Refund Cancel $sm->can('cancel'); true $sm->can('refund'); false $sm->can('complete'); true

Slide 19

Slide 19 text

Complete Refund Cancel $sm->can('cancel'); false $sm->can('refund'); true $sm->can('complete'); false

Slide 20

Slide 20 text

Complete Refund Cancel $sm->can('cancel'); false $sm->can('refund'); false $sm->can('complete'); false

Slide 21

Slide 21 text

[ 'callbacks' => [ 'after' => [ 'refund' => [ ['Inventory\Callback\Refund', 'onRefund'], ], ], ], ];

Slide 22

Slide 22 text

THE STATE PATTERN

Slide 23

Slide 23 text

if (cursors.left.isDown) { player.body.velocity.x = -150; player.scale.x = 1; player.animations.play('left'); if (player.body.touching.down) { state.text = 'running'; } } else if (cursors.right.isDown) { player.body.velocity.x = 150; player.scale.x = -1; player.animations.play('right'); if (player.body.touching.down) { state.text = 'running'; } } else { player.animations.stop(); player.frame = 2; if (player.body.touching.down) { state.text = 'idling'; } } if (game.input.keyboard.isDown(Phaser.Keyboard.SPACEBAR) && player.body.touching.down) { player.body.velocity.y = -350; state.text = 'jumping'; }

Slide 24

Slide 24 text

THE GAME WITH STATE PATTERN

Slide 25

Slide 25 text

var Elephpant = function(player) { this.state = new Idling(this, player); this.shoot = function() { // Shoot gigantic fireball }; this.transitionTo = function(state) { this.state = state; }; this.handle = function(input) { this.state.process(input); this.state.display(input); }; };

Slide 26

Slide 26 text

var Idling = function(elephpant, player) { this.display = function() { player.body.velocity.x = 0; player.animations.stop(); player.frame = 2; }; this.process = function(input) { if (input.left.isDown || input.right.isDown) { elephpant.transitionTo(new Running(elephpant, player)); return; } if (input.up.isDown) { elephpant.transitionTo(new Jumping(elephpant, player)); return; } if (input.space.isDown) { elephpant.shoot(); } }; };

Slide 27

Slide 27 text

var Jumping = function(elephpant, player) { this.display = function() { if (player.body.touching.down) { player.body.velocity.y = -350; } }; this.process = function(input) { if (!input.up.isDown && player.body.touching.down) { elephpant.transitionTo(new Idling(elephpant, player)); } }; };

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

THE STATE STRATEGY PATTERN?

Slide 30

Slide 30 text

STRATEGY PATTERN ! Tries to achieve similar result for input ! Strategies can’t transition to other
 strategies ! Strategy processes the input and gives
 output to the caller STATE PATTERN ! Result can be completely different ! States can trigger transitions to other
 states ! State controls the behaviour of its
 wrapper

Slide 31

Slide 31 text

WHY SHOULD WE CARE?

Slide 32

Slide 32 text

CHECKOUT PAYMENT DETAILS REVIEW

Slide 33

Slide 33 text

EXAMPLE

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

RECAP FINITE STATE ACCEPTOR STATE PATTERN ! Monolith ! Acceptor (pa9ern matching) ! Is this a valid transi#on? ! Transi#ons are set in stone ! Callbacks are easy to implement ! Object Oriented ! Transducer (controlling) ! Different behaviour per state ! Reduces the amount of condi#onals

Slide 37

Slide 37 text

PACKAGES DON’T REINVENT THE WHEEL ! https://github.com/winzou/state-machine ! https://github.com/Sylius/SyliusFlowBundle ! https://github.com/rskuipers/stateful-elephpant ! https://github.com/rskuipers/stateful-elephpant-talk ! https://github.com/rskuipers/stateful-elephpant-expressive

Slide 38

Slide 38 text

4 @RSKUIPERS RICK KUIPERS QUESTIONS? [email protected] HTTPS://JOIND.IN/TALK/26C09