活版印字

Rethinking Web App Development 重點整理

Posted at 2016-03-14 web app Development 

Hacker Way: Rethinking Web App Development at Facebook

這個影片解釋的非常清楚，為什麼要用 Flux 架構。

另提，我一直誤會 Flux 跟 Redux 是兩個派流，但其實 Flux 是在講一個架構(雖然它也真的有一個框架叫 Flux)，又被騙到了，囧

React : Declarative Views

Flux : 單向資料流(Single directional data flow)

Redux : 有實作 Flux 架構的框架，並增加了 Flux 不足的部分。

MVC -> Flux (10:32)

MVC

Action -> Controller -> Model <-> View

Flux

Flux 架構的出現，是為了解決 MVC 架構所遇到的困難，Model 與 View 的互相關聯，太過複雜。

初步的構想為 Action -> Store -> View，最後 Flux 架構為 Action -> Dispatcher -> Store -> View -> Action

case study (12:38)

聊天功能所遇到的問題，兩個區塊的狀態，同時都有 Chat 的 stat 需要同步。

implement render (22:30)

實作 render 所遇到的困難，傳統做法是用 append 增加新的元素，但這樣要維護 stat 很困難，所以改為 Model 一次 render。

Virtual DOM (29:40)

為了做到區塊 render 又不損失效率，所以有一個虛擬(Virtual) DOM，可只 render 變動的部分。

Flux vs JQuery (41:45)

Flux 幫你維護了 Stat，在 Flux 只需要考慮 Current Stat，而 JQuery 你需要自己維護每個 Stat。

JQuery render

1
2
3
4
5
6
7

<div class="model">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

$('.model').append('<div>4</div>');

Flux render

Flux 的做法是更新 stat，然後 render 整個 model，但有 Virtual DOM，所以實際還是只 render 變動的部分，但我們實作可以更新 Model，其他麻煩事 Flux 會處理好。

1
2
3
4
5

<div class="model">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>