a + b

const add = (a, b) => a + b;

const add
  : (a: number, b: number) => number
  = (a, b) => a + b;

a + b (callback)

const add = (a, b, cb) => cb(a + b);

const add
  : (a: number, b: number, cb: (c: number) => void) => void
  = (a, b, cb) => cb(a + b);

continuation passing style

a + b (callback and currying)

const add
  : (a: number) => (b: number) => (cb: (c: number) => void) => void
  = a => b => cb => cb(a + b);

Cont<number>

type Cont<T> = (cb: (x: T) => void) => void;
 
const add
  : (a: number) => (b: number) => Cont<number>
  = a => b => cb => cb(a + b);

adding different things

// XXX: type error
const result = add(add(3, 4), add(5, 6));

我要怎麼 add 其他 add 的結果？

adding Cont<number>s

const pure
  : <T>(x: T) => Cont<T>
  = x => cb => cb(x);
 
const add
  : (a: Cont<number>) => (b: Cont<number>) => Cont<number>
  = a => b => cb => a(x => b(y => cb(x + y)));
  
const result = add(
  add(pure(3), pure(4)),
  add(pure(5), pure(6)),
);

adding Promise<number>s

const add
  : (a: Promise<number>, b: Promise<number>) => Promise<number>
  = (a, b) => a.then(x => b.then(y => x + y));

Anime<T>

type Anime<T> = (time: number) => T;
  
const three: Anime<number> = (time) => 3;
const twice: Anime<number> = (time) => 2 * time;
  
const add
    : (ax: Anime<number>) => (ay: Anime<number>) => Anime<number>
    = ax => ay => time => ax(time) + ay(time);

用熟悉的方式處理新資料

巢狀的 Promise

const a = Promise.resolve(3);
const b = Promise.resolve(4);
const c = a.then(x => b.then(y => x + y));

async/await - 語言層級的 CPS 變換

const a = Promise.resolve(3);
const b = Promise.resolve(4);
const c = await a + await b;

React Hooks - UI lib 層級的 CPS 變換

const [a = 0] = usePromise(Promise.resolve(3));
const [b = 0] = usePromise(Promise.resolve(4));
const c = a + b;

讓巢狀的程式碼變好讀

Functional Reactive Programming

• Functional reactive animation(Conal Elliott & Paul Hudak, 1997)
  • 把事件流轉換成畫面流
  • 描述怎麼組裝它們
• Arrows, Robots, and Functional
  Reactive Programming(Yale Haskell Group, 2002)
  • 用更好懂的方式組裝它們

React

• Flux - 單向資料流
• Om - immutable value 的好處
• Elm - 用 FRP 做網站
• Redux - Elm 的 JS 複製品？

redux-thunk

type ThunkAction<Args extends any[], U> =
  (d: Dispatch, s: GetState) => (...args: Args) => Promise<U>

redux-saga

type Saga<Args extends any[] = any[]> =
  (...args: Args) => IterableIterator<any>

redux-observable

interface Epic<
  Input extends Action = any,
  Output extends Input = Input,
  State = any,
  Dependencies = any
> {
  (
    action$: Observable<Input>,
    state$: StateObservable<State>,
    dependencies: Dependencies
  ): Observable<Output>;
}

• 程式語言理論？可以吃嗎？
• 不懂編譯器、直譯器
• 沒有系統化地比較過不同的程式設計典範

• transpile to JavaScript
• WebAssembly

• Server-side MVC (Model2) 很好
• 以元件為單位分工
• 留下升級空間