Reactive Programming

In computing, reactive programming is a declarative programming paradigm concerned with data streams and the propagation of change.

Reactive programming - Wikipedia

以一個框架而言
前端工程師要的
到底是什麼

Data flow

與

資料變化的追蹤

Two-way data binding

Angular?

• Dirty check
  觸發 digest 後檢查 $$watchers 內值有沒有更動
  一直遞迴往下檢查，直到 dirty === false
  最後根據變動的部分 render 到畫面上

Vue?

• Observer
  透過 Object.defineProperty 實現資料攔截
  當資料變化時訂閱者去更新各自的畫面
• Proxy

React?

setState useState

一切都是為了 Performance

• shouldComponentUpdate
• React.PureComponent
• useMemo
• useCallback

沒事不要給我 re-render 很難嗎？

既然講到效能

回歸問題的本質

所以我們為什麼要用 React 呢

• 使用 V-DOM 來避免自己操作 DOM 不小心造成 DOM 效能低落

• JSX 寫起來很直覺，把 HTML 寫進 JS 很潮 (?

• diff 演算法幫我們把複雜度從 O(n^3) 降低到 O(n) (有但書)

• 為了混口飯吃

Svelte

A Compile-Time JS Framework

Svelte 的特色

• Reactive!
• 沒有 V-DOM
• 把大部分該在 Runtime 做的通通搬到 Compile time
• 更小的 bundle size
• 更快的速度

動手玩

https://svelte.dev/

wanna CSS-in-JS?

來個 To-do List 吧

總結一下

優點

1. Bundle size 可以非常小
2. 快！V-DOM diff 再怎麼厲害也不可能比沒有 V-DOM 快
3. Compile time = 靜態分析 = 避免掉很多不確定的 Runtime error

缺點

1. 社群還不夠大、熱絡
2. 不易測試（沒 V-DOM）
3. 隨著網站越來越複雜需要在 runtime 執行的程式碼也會變多，與其他框架的差距就會變小

One more thing...

SSR?