changed 5 years ago  
Published Linked with GitHub

現代網頁前端與型別系統

caasih

型別系統讓我們可以⋯⋯

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);

用熟悉的方式處理新資料

ECMAScript 6 讓我們可以⋯⋯

巢狀的 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;

讓巢狀的程式碼變好讀

過度簡化的 React, Redux 歷史

Functional Reactive Programming

React

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

現代網頁前端的工作流程

用像 DSL 的結構來描述應用程式行為

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) 很好
  • 以元件為單位分工
  • 留下升級空間

謝謝大家

一起寫 web

Q&A

What are React Hooks anyway?

更多 FRP

Select a repo