0X-nordicjs.md

title: real world fp, why and how theme: sudodoki/reveal-cleaver-theme style: https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/zenburn.min.css controls: true

--

real world fp

why and how

Monads, Comonad, Monoids, Setoids, Endofunctors.
Easy to understand, read, test and debug

by Vladimir Starkov
frontend engineer at Nordnet Bank AB

--

disclaimer

### no category theory

--

why FP

• declarative
• composition

--

sync example

• split by comma
• trim array
• reject empty items

--

without FP

const fn = str => {
  const splittedArr = splitByComma(str);
  const trimmedArr = trimArray(splittedArr);
  const withoutEmptyItemsArr = rejectEmptyItems(trimmedArr)
  return withoutEmptyItemsArr;
}

fn('hello, nordicjs') // ["hello", "nordicjs"]

--

with FP

const fn = pipe(
  splitByComma,
  trimArray,
  rejectEmptyItems,
)

fn('hello, nordicjs') // ["hello", "nordicjs"]

--

without FP

const fetchJson = url =>
  fetch(url)
    .then(checkStatus)
    .then(parseJSON)

fn('/api/hello') // { hello: "nordicjs" }

--

with FP

const fetchJson = pipeP(
  url,
  checkStatus,
  parseJSON
)

fn('/api/hello') // { hello: "nordicjs" }

--

debug FP

const tap = fn => val => { fn(val); return val; }
const log = tap(val => console.log(val));

const fn = pipe(
  log, // " hello, ,,  nordicjs"
  splitByComma,
  log, // [" hello", " ", "", "  nordicjs"]
  trimArray,
  log, // ["hello", "", "", "nordicjs"]
  rejectEmptyItems,
  log, // ["hello", "nordicjs"]
)

fn(' hello, ,,  nordicjs') // ["hello", "nordicjs"]

--

summary

• pipe: combine your complexed functions from simple ones
• pipeP: even with async and
• tap: debug in realtime

--

References

• "real world fp" workshop repo https://github.com/iamstarkov/fp-js-workshop
• "why and how" slides https://iamstarkov.com/fp-js-workshop/0X-nordicjs/

--

real world fp

why and how

*In functions we trust*

Sincerely yours Vladimir Starkov
@iamstarkov on github and twitter