deck.mdx

import { CodeSurfer, CodeSurferColumns, Step } from "code-surfer" import { nightOwl, duotoneDark, shadesOfPurple } from "@code-surfer/themes"

import { themes } from 'mdx-deck' export const theme = { ...themes.yellow, styles: { h1: { margin: "10px 0" }, h2: { margin: "5px 0" }, h3: { margin: "5px 0" }, p: { margin: "5px 0" }, li: { margin: "10px 0" } } }

Write your own monad

in 15 minutes

<small style={{ position: "absolute", right: "15px", bottom: "15px" }}> Source: https://github.com/pricingmonkey/write-your-own-monad

---

Pawel Badenski

CTO @ Pricing Monkey

Twitter: @pbadenski

Email: [email protected]

Mentor @ Meet-a-Mentor

<small style={{ position: "absolute", right: "15px", bottom: "15px" }}> *) shameful plug - we're looking for talented programmers!

---

Three parts

1. Write a monad in JavaScript
2. Extend the monad
3. Q&A

Each part should be around 15 minutes long.

---

Before we begin

• Let's take 1 minute - send me a private message saying:
  • what do you expect from this workshop
  • what puzzles you about monads

---

How

• We'll be using JSFiddle
• Each step starts with a test
• Steps are designed to be really small
• Making test pass should take around 2-4 minutes
• After each step I will share an updated solution

---

Flow

• I share a test with you
• You get 2-5 minutes to write implementation
• I will share the time left at around half through the step
• If you're struggling send me a private message and I will send you a hint
• After time is up I will share my implementation with you
• Rinse and repeat

---

Step 1: The simplest monad

Follow JSFiddle link on the chat.

---

Functor:     map

Applicative: map, ap

Monad:       map, ap, flatMap

---

const ap = (box, boxedFn) => {
  return map(box, boxedFn.value);
}

---

const flatten = (box) => {
  return box.value;
}

const flatMap = (box, fn) => {
  return flatten(map(box, fn));
}

---

Step 2: Option aka Maybe monad

Follow JSFiddle link on the chat.

---

<CodeSurferColumns themes={[nightOwl, shadesOfPurple]}>

const x;

if (x === undefined) {
  sendToDatabase(inc(x));
} else {
  console.error("nothing written to database");
}

...

if (x === undefined) {
  sendToExternalService(dec(x));
} else {
  console.error("nothing written to the service");
}

const x;

if (x === undefined) {
  sendToDatabase(inc(x));
} else {
  console.error("nothing written to database");
}

...

if (x === undefined) {
  sendToExternalService(dec(x));
} else {
  console.error("nothing written to the service");
}

const fold = (option, onSomeFn, onNoneFn) => ...;

fold(
  map(maybeX, inc),
  value => sendToDatabase(value),
  () => console.error("nothing written to database")
)

fold(
  map(maybeX, inc),
  value => sendToExternalService(value),
  () => console.error("nothing sent to external service")
)

const x;

if (x === undefined) {
  sendToDatabase(inc(x));
} else {
  console.error("nothing written to database");
}

...

if (x === undefined) {
  sendToExternalService(dec(x));
} else {
  console.error("nothing written to the service");
}

const fold = (option, onSomeFn, onNoneFn) => ...;

fold(
  map(maybeX, inc),
  value => sendToDatabase(value),
  () => console.error("nothing written to database")
)

fold(
  map(maybeX, inc),
  value => sendToExternalService(value),
  () => console.error("nothing sent to external service")
)

---

Other popular monads

• Array/List
• Either (monadic error handling)
• Task/Async (monadic Promise)
• Reader
• Writer
• State

---

JS implementations

• Beginner friendly: Crocks
• Intermediate: fp-ts
• For hackers: Fantasy land

---

Thank you!

Questions, comments?