Jean-Jacques Dubray是一名資深工程師，他最近引入了一個新的模式：狀態-行為-模（State-Action-Model，SAM）。SAM是一個函式式反應型的程式設計模式，它致力於簡化資料Model和View之間的互動。它究竟有何優點值得作者棄用MVC呢？

話題起因

在我最近的工作中，最讓人抓狂的就是為前端開發人員設計API。我們之間的對話大致就是這樣的：

開發人員：這個頁面上有資料元素x,y,z…，你能不能為我建立一個API，響應格式為{x: , y:, z: }我：好吧

我甚至沒有進行進一步的爭論。專案結束時會積累大量的API，這些API與經常發生變化的頁面是關聯在一起的，按照“設計”，只要頁面改變，相應的API也要隨之變化，而在此之前，我們甚至對此毫不知情，最終，由於形成因素眾多且各平臺之間存在些許差異，必須建立非常多的API來滿足這些需求。

Sam Newman甚至將這種制度化的過程稱之為BFF模式，這種模式建議為每種裝置、平臺當然還包含APP版本開發特定的API。 Daniel Jacobson在接受InfoQ的採訪時曾指出，Netflix頗為勉強地將“體驗式API”與“臨時API（Ephemeral API）”劃上了等號。 唉……

幾個月前，我開始思考是什麼造成了現在的這種現象，該做些什麼來應對它，這個過程使我開始質疑應用架構中最強大的理念，也就是MVC，我感受到了函式式反應型程式設計（reactive）的強大威力，這個過程致力於流程的簡化，並試圖消除我們這個行業在生產率方面的膨脹情緒。我相信你會對我的發現感興趣的。

MVC的輝煌過去與現存問題

在每個使用者介面背後，我們都在使用MVC模式，也就是模型-檢視-控制器（Model-View-Controller）。MVC發明的時候，Web尚不存在，當時的軟體架構充其量是胖客戶端在原始網路中直接與單一資料庫會話。但是，幾十年之後，MVC依然在使用，持續地用於OmniChannel應用的構建。

Angular 2正式版即將釋出，在這個時間節點重估MVC模式及各種MVC框架為應用架構帶來的貢獻意義重大。

我第一次接觸到MVC是在1990年，當時NeXT剛剛釋出Interface Builder（讓人驚訝的是，現在這款軟體依然發揮著重大的作用）。當時，我們感覺Interface Builder和MVC是一個很大的進步。在90年代末期，MVC模式用到了HTTP上的任務中（還記得Struts嗎？），現在，就各個方面來講，MVC是所有應用架構的基本原則。

MVC的影響十分深遠，以致於React.js在介紹他們的框架時都委婉地與其劃清界限：“React實現的只是MVC中檢視（View）的部分”。

當我去年開始使用React的時候，我感覺它在某些地方有著明顯的不同：你在某個地方修改一部分資料，不需要顯式地與View和Model進行互動，整個UI就能瞬間發生變化（不僅僅是域和表格中的值）。這也就是說，我很快就對React的程式設計模型感到了失望，在這方面，我顯然並不孤獨。我分享一下Andre Medeiros的觀點：

React在很多方面都讓我感到失望，它主要是通過設計不佳的API來載入程式員[…]將多項關注點混合到一個元件之中。

作為服務端的API設計者，我的結論是沒有特別好的方式將API呼叫組織到React前端中，這恰恰是因為React只關注View，在它的程式設計模型中根本不存在控制器。

到目前為止，Facebook一直致力於在框架層面彌合這一空白。React團隊起初引入了Flux模式，不過它依然令人失望，最近Dan Abramov又提倡另外一種模式，名為Redux，在一定程度上來講，它的方向是正確的，但是在將API關聯到前端方面，依然比不上我下面所介紹的方案。

Google釋出過GWT、Android SDK還有Angular，你可能認為他們的工程師熟知何為最好的前端架構，但是當你閱讀Angular 2設計考量的文章時，便會不以為然，即便在Google大家也達成這樣的共識，他們是這樣評價之前的工作成果的：

Angular 1並不是基於元件的理念構建的。相反，我們需要將控制器與頁面上各種[元素]進行關聯（attach），其中包含了我們的自定義邏輯。根據我們自定義的指令如何對其進行封裝（是否包含isolate scope？），scope會進行關聯或繼續往下傳遞。

基於元件的Angular 2看起來能簡單一點嗎？其實並沒有好多少。Angular 2的核心包本身就包含了180個語義（semantics），整個框架的語義已經接近500個，這是基於HTML5和CSS3的。誰有那麼多時間學習和掌握這樣的框架來構建Web應用呢？當Angular 3出現的時候，情況又該是什麼樣子呢？

在使用過React並了解了Angular 2將會是什麼樣子之後，我感到有些沮喪：這些框架都系統性地強制我使用BFF“頁面可替換模式（Screen Scraping）”模式，按照這種模式，每個服務端的API要匹配頁面上的資料集，不管是輸入的還是輸出的。

棄用MVC之後怎麼走？

此時，我決定“讓這一切見鬼去吧”。我構建了一個Web應用，沒有使用React、沒有使用Angular也沒有使用任何其他的MVC框架，通過這種方式，我看一下是否能夠找到一種在View和底層API之間進行更好協作的方式。

就React來講，我最喜歡的一點在於Model和View之間的關聯關係。React不是基於模板的，View本身沒有辦法請求資料（我們只能將資料傳遞給View），看起來，針對這一點進行探索是一個很好的方向。

如果看得足夠長遠的話，你會發現React唯一的目的就是將View分解為一系列（純粹的）函式和JSX語法：

<V params={M}/>

它實際上與下面的格式並沒有什麼差別：

V = f( M )

例如，我當前正在從事專案的Web站點， Gliiph，就是使用這種函式構建的：

圖1：用於生成站點Slider元件HTML的函式

這個函式需要使用Model來填充資料：

圖2：支撐slider的Model

如果用簡單的JavaScript函式就能完成任務，我們為什麼還要用React呢？

虛擬DOM（virtual-dom）？如果你覺得需要這樣一種方案的話（我並不確定有很多的人需要這樣），其實有這樣的可選方案，我也期望開發出更多的方案。

GraphQL？並不完全如此。不要因為Facebook大量使用它就對其產生誤解，認為它一定是對你有好處的。GraphQL僅僅是以宣告的方式來建立檢視模型。強制要求Model匹配View會給你帶來麻煩，而不是解決方案。React團隊可能會覺得使用“客戶端指定查詢（Client-specified queries）”是沒有問題的（就像反應型團隊中那樣）：

GraphQL完全是由View以及編寫它們的前端工程師的需求所驅動的。[…]另一方面，GraphQL查詢會精確返回客戶端請求的內容，除此之外，也就沒什麼了。

GraphQL團隊沒有關注到JSX語法背後的核心思想：用函式將Model與View分離。與模板和“前端工程師所編寫的查詢”不同，函式不需要Model來適配View。

當View是由函式建立的時候（而不是由模板或查詢所建立），我們就可以按需轉換Model，使其按照最合適的形式來展現View，不必在Model的形式上新增人為的限制。

例如，如果View要展現一個值v，有一個圖形化的指示器會標明這個值是優秀、良好還是很差，我們沒有理由將指示器的值放到Model中：函式應該根據Model所提供的v值，來進行簡單的計算，從而確定指示器的值。

現在，把這些計算直接嵌入到View中並不是什麼好主意，使View-Model成為一個純函式也並非難事，因此當我們需要明確的View-Model時，就沒有特殊的理由再使用GraphQL了：

V = f( vm(M) )

作為深諳MDE之道的人，我相信你更善於編寫程式碼，而不是元資料，不管它是模板還是像GraphQL這樣的複雜查詢語言。

這個函式式的方式能夠帶來多項好處。首先，與React類似，它允許我們將View分解為元件。它們建立的較為自然的介面允許我們為Web應用或Web站點設定“主題”，或者使用不同的技術來渲染View（如原生的方式）。函式實現還有可能增強我們實現反應型設計的方式。

在接下來的幾個月中，可能會出現開發者交付用JavaScript函式包裝的基於元件的HTML5主題的情況。這也是最近這段時間，在我的Web站點專案中，我所採用的方式，我會得到一個模板，然後迅速地將其封裝為JavaScript函式。我不再使用WordPress。基本上花同等的工夫（甚至更少），我就能實現HTML5和CSS的最佳效果。

這種方式也需要在設計師和開發人員之間建立一種新型的關係。任何人都可以編寫這些JavaScript函式，尤其是模板的設計人員。人們不需要學習繫結方法、JSX和Angular模板的語法，只掌握簡單的JavaScript核心函式就足以讓這一切運轉起來。

有意思的是，從反應型流程的角度來說，這些函式可以部署在最合適的地方：在服務端或在客戶端均可。

但最為重要的是，這種方式允許在View與Model之間建立最小的契約關係，讓Model來決定如何以最好的方式將其資料傳遞給View。讓Model去處理諸如快取、懶載入、編配以及一致性的問題。與模板和GraphQL不同，這種方式不需要從View的角度來直接傳送請求。

既然我們有了一種方式將Model與View進行解耦，那麼下一個問題就是：在這裡該如何建立完整的應用模型呢？“控制器”該是什麼樣子的？為了回答這個問題，讓我們重新回到MVC上來。

蘋果公司了解MVC的基本情況，因為他們在上世紀80年代初，從Xerox PARC“偷來了”這一模式，從那時起，他們就堅定地實現這一模式：

圖3：MVC模式

Andre Medeiros曾經清晰地指出，這裡核心的缺點在於， MVC模式是“互動式的（interactive）”（這與反應型截然不同）。在傳統的MVC之中，Action（Controller）將會呼叫Model上的更新方法，在成功（或出錯）之時會確定如何更新View。他指出，其實並非必須如此，這裡還有另外一種有效的、反應型的處理方式，我們只需這樣考慮，Action只應該將值傳遞給Model，不管輸出是什麼，也不必確定Model該如何進行更新。

那核心問題就變成了：該如何將Action整合到反應型流程中呢？如果你想理解Action的基礎知識的話，那麼你應該看一下TLA+。TLA代表的是“Action中的邏輯時序（Temporal Logic of Actions）”，這是由Dr. Lamport所提出的學說，他也因此獲得了圖靈獎。在TLA+中，Action是純函式：

data’ = A (data)

我真的非常喜歡TLA+這個很棒的理念，因為它強制函式只轉換給定的資料集。

按照這種形式，反應型MVC看起來可能就會如下所示：

V = f( M.present( A(data) ) )

這個表示式規定當Action觸發的時候，它會根據一組輸入（例如使用者輸入）計算一個數據集，這個資料是提交到Model中的，然後會確定是否需要以及如何對其自身進行更新。當更新完成後，View會根據新的Model狀態進行更新。反應型的環就閉合了。Model持久化和獲取其資料的方式是與反應型流程無關的，所以，它理所應當地“不應該由前端工程師來編寫”。不必因此而感到歉意。

再次強調，Action是純函式，沒有狀態和其他的副作用（例如，對於Model，不會包含計數的日誌）。

反應型MVC模式很有意思，因為除了Model以外，所有的事情都是純函式。公平來講，Redux實現了這種特殊的模式，但是帶有React不必要的形式，並且在reducer中，Model和Action之間存在一點不必要的耦合。Action和介面之間是純粹的訊息傳遞。

這也就是說，反應型MVC並不完整，按照Dan喜歡的說法，它並沒有擴充套件到現實的應用之中。讓我們通過一個簡單的樣例來闡述這是為什麼。

假設我們需要實現一個應用來控制火箭的發射：一旦我們開始倒計時，系統將會遞減計數器（counter），當它到達零的時候，會將Model中所有未定的狀態設定為規定值，火箭的發射將會進行初始化。

這個應用有一個簡單的狀態機：

圖4：火箭發射的狀態機

其中decrement和launch都是“自動”的Action，這意味著我們每次進入（或重新進入）counting狀態時，將會保證進行轉換的評估，如果計數器的值大於零的話，decrement Action將會繼續呼叫，如果值為零的話，將會呼叫launchAction。在任何的時間點都可以觸發abort Action，這樣的話，控制系統將會轉換到aborted狀態。

在MVC中，這種型別的邏輯將會在控制器中實現，並且可能會由View中的一個計時器來觸發。

這一段至關重要，所以請仔細閱讀。我們已經看到，在TLA+中，Action沒有副作用，只是計算結果的狀態，Model處理Action的輸出並對其自身進行更新。這是與傳統狀態機語義的基本區別，在傳統的狀態機中，Action會指定結果狀態，也就是說，結果狀態是獨立於Model的。

在TLA+中，所啟用的Action能夠在狀態表述（也就是View）中進行觸發，這些Action不會直接與觸發狀態轉換的行為進行關聯。換句話說，狀態機不應該由連線兩個狀態的元組（S1, A, S2）來進行指定，傳統的狀態機是這樣做的，它們元組的形式應該是（Sk, Ak1, Ak2,…），這指定了所有啟用的Action，並給定了一個狀態Sk，Action應用於系統之後，將會計算出結果狀態，Model將會處理更新。

當我們引入“state”物件時，TLA+提供了一種更優秀的方式來對系統進行概念化，它將Action和view（僅僅是一種狀態的表述）進行了分離。

我們樣例中的Model如下所示：

model = {

counter: ,

started: ,

aborted: ,

launched:

}

系統中四個（控制）狀態分別對應於Model中如下的值：

ready = {counter: 10, started: false, aborted: false, launched: false }

counting = {counter: [0..10], started: true, aborted: false, launched: false }

launched = {counter: 0, started: true, aborted: false, launched: true}

aborted = {counter: [0..10], started: true, aborted: true, launched: false}

這個Model是由系統的所有屬性及其可能的值所指定的，狀態則指定了所啟用的Action，它會給定一組值。這種型別的業務邏輯必須要在某個地方進行實現。我們不能指望使用者能夠知道哪個Action是否可行。在這方面，沒有其他的方式。不過，這種型別的業務邏輯很難編寫、除錯和維護，在沒有語義對其進行描述時，更是如此，比如在MVC中就是這樣。

讓我們為火箭發射的樣例編寫一些程式碼。從TLA+角度來講，next-action斷言在邏輯上會跟在狀態渲染之後。當前狀態呈現之後，下一步就是執行next-action斷言，如果存在的話，將會計算並執行下一個Action，這個Action會將其資料交給Model，Model將會初始化新狀態的表述，以此類推。

圖5：火箭發射器的實現

需要注意的是，在客戶端/伺服器架構下，當自動Action觸發之後，我們可能需要使用像WebSocket這樣的協議（或者在WebSocket不可用的時候，使用輪詢機制）來正確地渲染狀態表述。

我曾經使用Java和JavaScript編寫過一個很輕量級的開源庫，它使用TLA+特有的語義來構造狀態物件，並提供了樣例，這些樣例使用WebSocket、輪詢和佇列實現瀏覽器/伺服器互動。在火箭發射器的樣例中可以看到，我們並非必須要使用那個庫。一旦理解了如何編寫，狀態實現的編碼相對來講是很容易的。

新模式——SAM模式

對於要引入的新模式來說，我相信我們已經具備了所有的元素，這個新模式作為MVC的替代者，名為SAM模式（狀態-行為-模型，State-Action-Model），它具有反應型和函式式的特性，靈感來源於React.js和TLA+。

SAM模式可以通過如下的表示式來進行描述：

V = S( vm( M.present( A(data) ) ), nap(M))

它表明在應用一個Action A之後，View V可以計算得出，Action會作為Model的純函式。

在SAM中，A（Action）、vm（檢視-模型，view-model）、nap（next-action斷言）以及S（狀態表述）必須都是純函式。在SAM中，我們通常所說的“狀態”（系統中屬性的值）要完全侷限於Model之中，改變這些值的邏輯在Model本身之外是不可見的。

隨便提一下，next-action斷言，即nap()是一個回撥，它會在狀態表述建立完成，並渲染給使用者時呼叫。

圖6：狀態-行為-模型（SAM）模式

模式本身是獨立於任何協議的（可以不費什麼力氣就能在HTTP上實現）和客戶端/伺服器拓撲結構的。

SAM並不意味著我們必須要使用狀態機的語義來獲取View的內容。如果Action是由View觸發的，那next-action斷言就是一個空函式。不過，這可能是一個很好的實踐，它清晰暴露了底層狀態機的控制狀態，因為根據（控制）狀態的不同，View看起來可能也是不同的。

另一方面，如果你的狀態機涉及到自動化的Action，那麼Action和Model都不可能做到純粹的不包含next-action斷言：有些Action將會變得有狀態，或者Model必須要觸發Action，而這本來並不是它的角色。順便提一下，也許並不那麼直觀，狀態物件並沒有持有任何的“狀態”，它同樣也是純函式，它會渲染View並計算next-action斷言，這兩者都來源於Model的屬性值。

這種新模式的好處在於，它清晰地將CRUD操作從Action中分離了出來。Model負責它的持久化，將會通過CRUD操作來實現，通過View是無法進行訪問的。尤其是，View永遠不會處於“獲取”資料的位置，View所能做的唯一的事情就是請求系統中當前的狀態表述並通過觸發Action初始化一個反應型流程。

Action僅僅代表了一種具有許可權的通道，以此來建議Model該怎樣進行變更。它們本身（在Model方面）並沒有什麼副作用。如果必要的話，Action會呼叫第三方的API（同樣，對Model沒有副作用），比如說，修改地址的Action可能會希望呼叫地址校驗服務，並將服務返回的地址提交到Model中。

如下就是“修改地址”Action該如何進行實現，它會呼叫地址校驗的API：

圖7：“修改地址”的實現

模式中的元素，包括Action和Model，可以進行自由地組合：

函式組合

data’ = A(B(data))

端組合（Peer）（相同的資料集可以提交給兩個Model）

M1.present(data’)

M2.present(data’)

父子組合（父Model控制的資料集提交給子Model）

M1.present(data’,M2)

function present(data, child) {

// 執行更新

…

// 同步Model

child.present(c(data))

}

釋出/訂閱組合

M1.on(“topic”, present )

M2.on(“topic”, present )

或

M1.on(“data”, present )

M2.on(“data”, present )

有些架構師可能會考慮到System of Record和Systems of Engagement，這種模式有助於明確這兩層的介面（圖8），Model會負責與systems of record的互動。

圖8：SAM組合模型

整個模式本身也是可以進行組合的，我們可以實現執行在瀏覽器中的SAM例項，使其支援類似於嚮導（wizard）的行為（如ToDo應用），它會與伺服器端的SAM進行互動：

圖9：SAM例項組合

請注意，裡層的SAM例項是作為狀態表述的一部分進行傳送的，這個狀態表述是由外層的例項所生成的。

會話檢查應該在Action觸發之前進行（圖10）。SAM能夠啟用一項很有意思的組合，在將資料提交給Model之前，View可以呼叫一個第三方的Action，並且要為其提供一個token和指向系統Action的回撥，這個第三方Action會進行授權並校驗該呼叫的合法性。

圖10：藉助SAM實現會話管理

從CQRS的角度來講，這個模式沒有對查詢（Query）和命令（Command）做特殊的區分，但是底層的實現需要進行這種區分。搜尋或查詢“Action”只是簡單地傳遞一組引數到Model中。我們可以採用某種約定（如下劃線字首）來區分查詢和命令，或者我們可以在Model上使用兩個不同的present方法：

{ _name : ‘/^[a]$/i’ } // 名字以A或a開頭{ _customerId: ‘123’ } // id=123的customer

Model將會執行必要的操作以匹配查詢，更新其內容並觸發View的渲染。類似的約定可以用於建立、更新或刪除Model中的元素。在將Action的輸出傳遞給Model方面，我們可以實現多種方式（資料集、事件、Action……）。每種方式都會有其優勢和不足，最終這取決於個人偏好。我更喜歡資料集的方式。

在異常方面，與React類似，我們預期Model會以屬性值的形式儲存異常資訊（這些屬性值可能是由Action提交的，也可能是CRUD操作返回的）。在渲染狀態表述的時候，會用到屬性值，以展現異常資訊。

在快取方面，SAM在狀態表述層提供了快取的選項。直觀上來看，快取這些狀態表述函式的結果能夠實現更高的命中率，因為我們現在是在元件/狀態層觸發快取，而不是在Action/響應層。

該模式的反應型和函式式結構使得功能重放（replay）和單元測試變得非常容易。

SAM模式完全改變了前端架構的正規化，因為根據TLA+的基礎理念，業務邏輯可以清晰地描述為：

Action是純函式CRUD操作放在Model中狀態控制自動化的Action

作為API的設計者，從我的角度來講，這種模式將API設計的責任推到了伺服器端，在View和Model之間保持了最小的契約。

Action作為純函式，能夠跨Model重用，只要某個Model能夠接受Action所對應的輸出即可。我們可以期望Action庫、主題（狀態表述）甚至Model能夠繁榮發展起來，因為它們現在能夠獨立地進行組合。

藉助SAM模式，微服務能夠非常自然地支撐Model。像Hivepod.io這樣的框架能夠插入進來，就像它本來就在這層似得。

最為重要的是，這種模式像React一樣，不需要任何的資料繫結或模板。

我發現這個旅程將會帶來一定的革新性：在過去的幾十年中，面向物件似乎無處不在，但它已經一去不返了。我現在只能按照反應型和函式式來進行思考。我藉助SAM所構建的東西及其構建速度都是前所未有的。另外，我能夠關注於API和服務的設計，它們不再遵循由前端決定的模式。