Everything is an Actor

David Khourshid - @davidkpiano

👩‍💻

🧔

👩‍🍳

☕️❔

📝

💶❓

💶

📄✅

☕️

👩‍💻

🧔

I would like a coffee...

What would you like?

Actor

I would like a coffee, please.

Actor

💭

💬

Here you go. ☕️

Thanks!

https://en.wikipedia.org/wiki/Eventual_consistency

What is an actor?

Actor 👩‍💻

Actor 🧔

✉️

someActor.send({
  type: 'greet',
  value: 'Hei!',
  from: self
});

// ...

switch (message.type) {
  case 'greet':
    message.from.send({
      type: 'greet',
      value: '...',
      from: self
    });
  // ...
}

Send

Receive

The Actor Model

A Universal Modular ACTOR Formalism for Artificial Intelligence (1973)

Carl Hewitt, Peter Bishop, Richard Steiger

Alan Kay

Coined "OOP"
Emphasized message-passing
Basically the Actor Model

https://en.wikipedia.org/wiki/Actor_model

Rules of actors

🤖 All computation is performed within an actor

📩 Actors can communicate only through messages

💥 In response to a message, an actor can:

📬 Send messages to other actors

👨‍👧‍👦 Create a finite number of child actors

𝑓 (𝑥)

Behavior

State

🎭 Change its state/behavior

Rules of actors

✉️

🤖 All computation is performed within an actor

📩 Actors can communicate only through messages

💥 In response to a message, an actor can:

📬 Send messages to other actors

👨‍👧‍👦 Create a finite number of child actors

🎭 Change its state/behavior

Rules of actors

✉️

🤖 All computation is performed within an actor

📩 Actors can communicate only through messages

💥 In response to a message, an actor can:

📬 Send messages to other actors

👨‍👧‍👦 Create a finite number of child actors

🎭 Change its state/behavior

A → A'

Rules of actors

✉️

🤖 All computation is performed within an actor

📩 Actors can communicate only through messages

💥 In response to a message, an actor can:

📬 Send messages to other actors

👨‍👧‍👦 Create a finite number of child actors

🎭 Change its state/behavior

✉️

Rules of actors

✉️

🤖 All computation is performed within an actor

📩 Actors can communicate only through messages

💥 In response to a message, an actor can:

📬 Send messages to other actors

👨‍👧‍👦 Create a finite number of child actors

🎭 Change its state/behavior

🆕

Behavior

idle

making coffee

delivering coffee

☕️ ordered

☕️ made

☕️ delivered

{
  orders: [/* ... */],
  inventory: {
    // ...
  },
  sales: 134.65
}

Finite State (behavior)

Extended State (data)

Actor System

Root (Guardian) Actor

cafe

cafe/manager1

cafe/manager1/employee1

Address

📫

✉️

state 1

✉️

state 2

✉️

processing...

state ??

Mailboxes

✉️

Mailboxes

✉️

state 1

✉️

Mailboxes

✉️

state 1

✉️

state 2

✉️

Mailboxes

✉️

state 1

✉️

state 2

✉️

state 3

Mailboxes

✉️

state 1

✉️

state 2

✉️

state 3

Mailboxes

✉️

state 4

Location Transparency

✉️→

💻

🛰

ActorRef

✉️

Fault Tolerance

✉️→

💻

ActorRef

✉️

❌

💻

✉️

const popup = window.open(/* ... */);

popup.postMessage(/* ... */);

function receiveMessage(msg) {
  // do something with the message
}

window.addEventListener('message', receiveMessage);

function receiveMessage(msg) {
  // do something with the message

  msg.source.postMessage(/* ... */);
}

window.addEventListener('message', receiveMessage);

const popup = window.open(/* ... */);

popup.postMessage(/* ... */);

function receiveMessage(msg) {
  // do something with the message
}

window.addEventListener('message', receiveMessage);

function receiveMessage(msg) {
  // do something with the message

  msg.source.postMessage(/* ... */);
}

window.addEventListener('message', receiveMessage);

merge(...)

  scan(reducer, initial)

initial

pipe(

)

Behavior

Actors

Actor

Parent

Any event

SEND

RECEIVE

Any event

Actors: Promise

Promise

Parent

Resolved value
Rejected value

AbortController signal

SEND

RECEIVE

Actors: Observable

Observable

Parent

Multiple values
Completion signal
Error signal

Nothing *

SEND

RECEIVE

* RxJS has Subjects for this

https://github.com/tc39/proposal-observable

github.com/davidkpiano/xstate

npm install xstate

xstate.js.org

import { createMachine } from 'xstate';

const machine = createMachine({
  initial: 'idle',
  states: {
    idle: {
      on: { SEARCH: 'searching' }
    },
    searching: {
      on: {
        RESOLVE: 'success',
        REJECT: 'failure',
        SEARCH: 'searching'
      }
    },
    success: {
      on: { SEARCH: 'searching' }
    },
    failure: {
      on: { SEARCH: 'searching' }
    }
  }
});

import { createMachine } from 'xstate';

const machine = createMachine({
  // ...
});

const searchingState = machine
  .transition('idle', 'searching');

searchingState.value;
// => 'searching'

import { createMachine, interpret } from 'xstate';

const machine = createMachine({
  // ...
});

const service = interpret(machine)
  .onTransition(state => console.log(state))
  .start();

service.send('SEARCH');
// State {
//   value: 'searching',
//   ...
// }

import { createMachine, interpret } from 'xstate';
import { from } from 'rxjs';

const machine = createMachine(/* ... */);

const service = interpret(/* ... */).start();

// Services are already subscribable!
const state$ = from(service);

state$.subscribe(/* ... */);

import { createMachine } from 'xstate';

const cafeMachine = createMachine({
  // ...
  states: {
    // ...
    makingCoffee: {
      invoke: {
        id: 'espresso',
        src: espressoMachine,
        onDone: 'deliveringCoffee'
      }
    },
    deliveringCoffee: {
      // ...
    }
  }
});

Invoke a new "actor"

with espressoMachine behavior

"done.invoke.espresso"

import { createMachine } from 'xstate';

const cafeMachine = createMachine({
  // ...
  states: {
    // ...
    makingCoffee: {
      invoke: {
        id: 'espresso',
        src: espressoMachine,
        onDone: 'deliveringCoffee'
      }
    },
    deliveringCoffee: {
      // ...
    }
  }
});

cafeMachine

espressoMachine

done.invoke.espresso

import { createMachine, send } from 'xstate';

const cafeMachine = createMachine({
  // ...
  states: {
    // ...
    makingCoffee: {
      invoke: {
        id: 'espresso',
        src: espressoMachine,
        onDone: 'deliveringCoffee'
      },
      on: {
        CHANGE_ORDER: {
          actions: send((_, event) => event, {
            to: 'espresso'
          })
        }
      }
    },
    // ...
  }
});

cafeMachine

espressoMachine

CHANGE_ORDER

import { createMachine, forwardTo } from 'xstate';

const cafeMachine = createMachine({
  // ...
  states: {
    // ...
    makingCoffee: {
      invoke: {
        id: 'espresso',
        src: espressoMachine,
        onDone: 'deliveringCoffee'
      },
      on: {
        CHANGE_ORDER: {
          actions: forwardTo('espresso')
        }
      }
    },
    // ...
  }
});

cafeMachine

espressoMachine

CHANGE_ORDER

import { createMachine, sendParent } from 'xstate';

const cafeMachine = createMachine({
  // ...
});

const espressoMachine = createMachine({
  // ...
  states: {
    // ...
    broken: {
      entry: sendParent('MACHINE_BROKEN')
    },
    // ...
  }
});

cafeMachine

espressoMachine

MACHINE_BROKEN

import { createMachine, assign, spawn } from 'xstate';

const createOrder = (details) => {/* ... */}

const cafeMachine = createMachine({
  context: {
    orders: []
  },
  // ...
  on: {
    PLACE_ORDER: {
      actions: assign({
        orders: (context, event) => {
          const order = spawn(
            createOrder(event.details),
            event.orderId);
          
          return context
            .orders.concat(order);
        }
      })
    }
  }
});

order 1

order n

cafeMachine

. . .

import { createMachine, send } from 'xstate';

const cafeMachine = createMachine({
  // ...
  on: {
    CANCEL: {
      actions: send('CANCEL', {
        to: (_, event) => event.orderId
      })
    }
  }
});

order 1

order n

cafeMachine

. . .

CANCEL

import { createMachine } from 'xstate';
import { invokeObservable } from 'xstate/invoke';

function createOrder(details) {
  return /* ... */
}

const cafeMachine = createMachine({
  // ...

  invoke: {
    src: invokeObservable(() => /* ... */)
  },
  
  // ...

  on: {
    ORDER: {
      actions: assign({
        orders: (context, event, { spawn }) => {
          const order = spawn.from(
            createOrder(event.details), event.id);
          
          return context.orders
            .concat(order);
        }
      })
    }
  }
});

5.0

(tentative API)

Returns an actor creator

import { createBehavior, createSystem } from 'xactor';


const counter = createBehavior((state, message) => {
  if (message.type === 'add') {
    return {
      count: state.count + 1
    }
  }
  
  return state;
}, { count: 0 });


const counterSystem = createSystem(counter, 'myCounter');


counterSystem.send({
  type: 'add'
});

import { createBehavior, createSystem } from 'xactor';


const createTodo = (title) => createBehavior((state, message) => {
  // ...
}, { title })


const todos = createBehavior((state, message, ctx) => {
  switch (message.type) {
    case 'todo.create':
      const newTodo = ctx.spawn(createTodo(message.title), `todo-${state.todos.length}`);
      
      return {
        ...state,
        todos: [
          ...state.todos,
          newTodo
        ]
      };
  }
}, { todos: [] });


const todoSystem = createSystem(todos, 'myCounter');


todoSystem.send({
  type: 'todo.create',
  title: 'Learn the actor model!'
});

Thank you ReactiveConf!

David Khourshid - @davidkpiano