1. Matters of State
Using Symfony’s Event Dispatcher to
turn your application into a simple state machine

2. Photo by jeff_golden
Bon anniversaire Symfony!

3. About me
• Portland
• twitter.com/kriswallsmith
• github.com/kriswallsmith
• kriswallsmith.net

5. React
Nicolas Raymond

7. var HelloWorld = React.createClass({
render: function() {
return (
<div>Hello World</div>
)
}
})

8. var HelloWorld = React.createClass({
render: function() {
return (
<div>Hello World</div>
)
}
})
JSX

9. Just the view

10. (there is no MVC to violate)

11. One-way data flow

12. (everything flows from state)

13. Virtual DOM

14. (DOM changesets)

15. “React thinks of UIs as simple state machines. By
thinking of a UI as being in various states and rendering
those states, it's easy to keep your UI consistent.”
https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#components-are-just-state-machines

16. var Analytics = React.createClass({
getInitialState: function() {
return { clicks: 0 }
},
incrementClicks: function() {
var clicks = this.state.clicks;
this.setState({ clicks: ++clicks });
},
render: function() {
var clicks = this.state.clicks;
return (
<button onClick={this.incrementClicks}>
{clicks} click{clicks == 1 ? '' : 's'}
</button>
)
}
})

17. var Analytics = React.createClass({
getInitialState: function() {
return { clicks: 0 }
},
incrementClicks: function() {
var clicks = this.state.clicks;
this.setState({ clicks: ++clicks });
},
render: function() {
var clicks = this.state.clicks;
return (
<button onClick={this.incrementClicks}>
{clicks} click{clicks == 1 ? '' : 's'}
</button>
)
}
})

18. <button id="click_button">
0 click(s)
</button>

19. $('#my_button').click(function() {
var $btn = $(this);
var clicks = $btn.text().match(/d+/)[0];
var text = clicks + ' click';
if (clicks != 1) text += 's';
$btn.text(text);
})

20. $('#my_button').click(function() {
var $btn = $(this);
var clicks = $btn.text().match(/d+/)[0];
var text = clicks + ' click';
if (clicks != 1) text += 's';
$btn.text(text);
})
oops…

21. var Analytics = React.createClass({
getInitialState: function() {
return { clicks: 0 }
},
incrementClicks: function() {
var clicks = this.state.clicks;
this.setState({ clicks: ++clicks });
},
render: function() {
var clicks = this.state.clicks;
return (
<button onClick={this.incrementClicks}>
{clicks} click{clicks == 1 ? '' : 's'}
</button>
)
}
})

22. Paradigm shift

23. Imperative vs. Declarative Photo by

24. Imperative programming

25. (code that explains how
to reach your goal)

26. Declarative programming

27. (code that describes
what your goal is)

28. Take the next right
• Depress the gas pedal and increase your speed to 10mph
• Engage your right turn signal
• As you approach the intersection, remove your foot from the gas
pedal and gently apply the brake
• Check for pedestrians crossing the intersection
• Check your mirrors and blind spot for bicyclists
• Lift your foot from the brake and slowly increase speed by
depressing the gas pedal
• Turn the steering wheel to the right

29. Take the next right
• Depress the gas pedal and increase your speed to 10mph
• Engage your right turn signal
• As you approach the intersection, remove your foot from the gas
pedal and gently apply the brake
• Check for pedestrians crossing the intersection
• Check your mirrors and blind spot for bicyclists
• Lift your foot from the brake and slowly increase speed by
depressing the gas pedal
• Turn the steering wheel to the right
declarative

30. Take the next right
• Depress the gas pedal and increase your speed to 10mph
• Engage your right turn signal
• As you approach the intersection, remove your foot from the gas
pedal and gently apply the brake
• Check for pedestrians crossing the intersection
• Check your mirrors and blind spot for bicyclists
• Lift your foot from the brake and slowly increase speed by
depressing the gas pedal
• Turn the steering wheel to the right
imperative

31. $('#my_button').click(function() {
var $btn = $(this);
var clicks = $btn.text().match(/d+/)[0];
var text = clicks + ' click';
if (clicks != 1) text += 's';
$btn.text(text);
})

32. var Analytics = React.createClass({
getInitialState: function() {
return { clicks: 0 }
},
incrementClicks: function() {
var clicks = this.state.clicks;
this.setState({ clicks: ++clicks });
},
render: function() {
var clicks = this.state.clicks;
return (
<button onClick={this.incrementClicks}>
{clicks} click{clicks == 1 ? '' : 's'}
</button>
)
}
})

33. How vs. What

34. SELECT * FROM users WHERE username="kriswallsmith";

35. PHP controllers

36. public function registerAction(Request $request)
{
$form = $this->createForm('user');
$form->handleRequest($request);
if ($form->isValid()) {
$user = $form->getData();
$message = Swift_Message::newInstance()
->setTo($user->getEmail())
->setSubject('Welcome!')
->setBody($this->renderView(
'AppBundle:Email:welcome.html.twig',
['user' => $user]
));
$mailer = $this->get('mailer');
$mailer->send($message);
$em = $this->get('doctrine')->getManager();
$em->persist($user);
$em->flush();
return $this->redirectToRoute('home');
}
return $this->render(
'AppBundle:User:register.html.twig',
['form' => $form->createView()]
);
}

37. public function registerAction(Request $request)
{
$form = $this->createForm('user');
$form->handleRequest($request);
if ($form->isValid()) {
$user = $form->getData();
$mailer = $this->get('app.mailer');
$mailer->sendWelcomeEmail($user);
$em = $this->get('doctrine')->getManager();
$em->persist($user);
$em->flush();
return $this->redirectToRoute('home');
}
return $this->render(
'AppBundle:User:register.html.twig',
['form' => $form->createView()]
);
}

38. public function registerAction(Request $request)
{
$form = $this->createForm('user');
$form->handleRequest($request);
if ($form->isValid()) {
$user = $form->getData();
$mailer = $this->get('app.mailer');
$mailer->sendWelcomeEmail($user);
$em = $this->get('doctrine')->getManager();
$em->persist($user);
$em->flush();
return $this->redirectToRoute('home');
}
return $this->render(
'AppBundle:User:register.html.twig',
['form' => $form->createView()]
);
}
declarative!

39. Why stop there?

40. public function registerAction(Request $request)
{
$form = $this->createForm('user');
$form->handleRequest($request);
if ($form->isValid()) {
$em = $this->get('doctrine')->getManager();
$em->persist($form->getData());
$em->flush();
return $this->redirectToRoute('home');
}
return $this->render(
'AppBundle:User:register.html.twig',
['form' => $form->createView()]
);
}

41. Excuse me Kris,
but what about the email?

42. Photo by

43. Event Dispatcher
Photo by rhodesj

44. The Event Dispatcher component provides
tools that allow your application components
to communicate with each other by
dispatching events and listening to them.
symfony.com

45. public function addListener(
$eventName,
$listener,
$priority = 0
);
public function dispatch(
$eventName,
Event $event = null
);

46. $dispatcher->dispatch('user.create');

47. $dispatcher->dispatch(
'user.create',
new UserEvent($user)
);

48. $dispatcher->dispatch(
UserEvents::CREATE,
new UserEvent($user)
);

49. $dispatcher->addListener(
UserEvents::CREATE,
function(UserEvent $event) {
echo "Welcome, {$event->getUserName()}!";
}
);

50. $dispatcher->addListener(
UserEvents::CREATE,
[$listener, 'onUserCreate']
);

51. Something just happened
or is about to happen

52. Photo by Simon Law
Reactive Listeners

53. class UserListener
{
public function onUserCreate(UserEvent $event)
{
$user = $event->getUser();
$this->mailer->sendWelcomeEmail($user);
}
}

54. class ActivityFeedListener
{
public function onUserCreate(UserEvent $event)
{
$user = $event->getUser();
$this->feed->logRegistration($user);
}
}

55. class ActivityFeedListener
{
public function onFollow(UserUserEvent $event)
{
$user = $event->getUser();
$otherUser = $event->getOtherUser();
$this->feed->logFollow($user, $otherUser);
}
}

56. Testable

57. Reusable

58. Readable

59. State Events

60. Where do they come from?

61. Option 1: Controller dispatch

62. public function registerAction(Request $request)
{
$form = $this->createForm('user');
$form->handleRequest($request);
if ($form->isValid()) {
$user = $form->getData();
$dispatcher = $this->get('event_dispatcher');
$dispatcher->dispatch(UserEvents::CREATE, new UserEvent($user));
$em = $this->get('doctrine')->getManager();
$em->persist();
$em->flush();
return $this->redirectToRoute('home');
}
return $this->render(
'AppBundle:Register:register.html.twig',
['form' => $form->createView()]
);
}

63. Option 2: Service dispatch

64. class UserManager
{
public function persistUser(User $user)
{
$this->em->persist($user);
$this->dispatcher->dispatch(
UserEvents::CREATE,
new UserEvent($user)
);
}
}

65. Option 3: Flush dispatch

66. class FlushListener
{
public function preFlush(PreFlushEventArgs $event)
{
$em = $event->getEntityManager();
$uow = $em->getUnitOfWork();
foreach ($uow->getIdentityMap() as $class => $objects) {
if (User::class === $class) {
foreach ($objects as $user) {
if ($uow->isScheduledForInsert($user)) {
$this->dispatcher->dispatch(
UserEvents::CREATE,
new UserEvent($user)
);
}
}
}
}
}
}

67. a simple state machine

68. Cool, but…

69. That flush listener is ugly…

70. …and imperative!

71. What if…
Photo by Jared Cherup
What if…

72. /** @OnCreate(UserEvents::CREATE) */
class User
{
}

73. /** @OnChange(UserEvents::CHANGE) */
class User
{
}

74. /** @OnDestroy(UserEvents::DESTROY) */
class User
{
}

75. /**
* @OnCreate(UserEvents::CREATE)
* @OnUpdate(UserEvents::UPDATE)
* @OnDestroy(UserEvents::DESTROY)
*/
class User
{
}

76. Property events

77. class User
{
/** @OnChange(UserEvents::USERNAME_CHANGE) */
private $username;
}

78. class User
{
/**
* @OnAdd(UserEvents::FAVORITE)
* @OnRemove(UserEvents::UNFAVORITE)
*/
private $favorites;
}

79. Conditional events

80. class User
{
/**
* @OnAdd(
* UserEvents::FIRST_FAVORITE,
* unless="old_value()"
* )
*/
private $favorites;
}

81. Custom event objects

82. class User
{
/**
* @OnAdd(
* UserEvents::FOLLOW,
* class=UserUserEvent::class,
* arguments="[object, added_value()]"
* )
*/
private $follows;
}

83. Event dependencies

84. class User
{
/**
* @OnAdd(
* UserEvents::FOLLOW,
* before=ActivityEvents::CREATE
* )
*/
private $follows;
}

85. kriswallsmith/state-events

86. (coming soon)

87. Merci!