前端技術發展史，關注點分離的辯證 —— 模板語言到 React 與 Vue

每個框架的設計，背後都反映了作者對問題或世界的看法。本篇我想從「關注點分離（SoC)」這ㄧ個概念出發，探討不同時代前端框架的對於同樣SoC的看法是如何不同並且實踐。

本篇會討論

1. 什麼是關注點分離（Separation of concerns, SoC）?
2. 傳統模板語言（例如：handlebars) 是如何看待 SoC ?
3. 新型態的前端框架 React ，如何反對傳統的 SoC 觀點？
4. 前端框架 Vue 又如何的兼容傳統與新型態的 SoC 觀點？

什麼是關注點分離？

關注點分離（Separation of concerns, SoC）是一個程式中重要的概念

意思是「每一模組各自有獨立關注焦點」，這樣切分程式的好處是，開發時

1. 只需要專注在一個焦點上，不需要被不同的概念或問題分心
2. 只需要專注在一個焦點上，不需要到分散的檔案中進行修改

早期前端框架：以「技術單位」為主的關注點分離

最早期前端框架對於「關注點分離」的看法，傾向讓「技術單位」分離

• 例如 handlebars，把 template 語言 (view) ＆ js 語言 (data) 分開，然後再合成。

• 例如 Angular 框架，把 html / css / js 的技術語言切開放置在不同檔案

這種把不同的技術語言獨立放置的原則，就是希望開發者可以一次只關注一種技術概念就好。

React：以「視覺結構」為主軸的關注點分離

後來，React （Facebook) 提出了 JSX 的概念，它讓 html 可以跟 JS 混在一起寫，並且組成所謂的 component。

這種 component 的概念對於 React / Vue 開發者來說，相當的習以為常。但其實，JSX 概念出現時，也是受到許多質疑，人們會說 「嘿！怎麼可以讓不同的技術語言混在一起寫？這違反了 SOC。」

但 React 認為 過去技術分離的設計模式才違反了SOC 。

想想看，html / css / js 在前端的意義其實就是為了一個目的———協助『畫面視覺的呈現』

• 但在使用傳統的 handlebars-like 的模板語言架構時，工程師為了要更改特定區塊的視覺呈現（例如：一個表單區塊），卻常跑去多個分散的檔案更改程式碼。
• 因此，模板語言並沒有讓『真正重要』的視覺關注點分離，他們只是「讓技術分離（separation of technology)」

所以 React 強調 component 的概念，每個 component （視覺元件）就是我們每次最應該關注的對象。我們應該關注視覺單位，而不是關注技術單位

Vue：同樣以視覺單位為主軸，在檔案之內恢復讓技術分離

到了 Vue 框架， 我認為 Vue 的優點是

• 同樣繼承了關注「視覺單位」的架構哲學，強調了以 component 為中心概念，把視覺呈現、資料等元素，放在單一檔案中。

• 但更近一步的，它又在檔案單一層次恢復了「技術分離」的傳統。例如：以下 html / js / css 的結構是被 template / script / style 切開的。

讓每個 vue 檔案中不同的技術區塊（html / css / js ）在不同位置中被切分清楚，降低初學者在學 JSX 時會有的困惑，「蛤？為什麼 html 和 JS 寫在一起？ 」、「我是誰？我在幹嘛？」的挫折感。

因此我認為 Vue 在

• high-level 達成了「關注元件」的 SOC
• low-level 的層次達成了「關注技術」的 SOC

但這邊並不是說所以 Vue 比 React 來得好（雖然我真的比較喜歡 Vue)，我只是單就以 SoC 這單一個概念來討論兩者框架詮釋方法的差異，除了 Soc 之外還有無數的概念是可以比較的

總結

從不同框架對於「關注點分離（SoC)」這ㄧ個概念的詮釋和實作，我們可以看到不同框架背後是如何在理解 Soc 這件事。

• 早期前端框架 (handlebars / Angular），認為應該以「技術為主軸」，進行關注點分離
• 後期的前端框架 (React / Vue)，認為應該以「視覺元件為主軸」，進行關注點分離

最後，世界觀沒有好壞，選擇一個自己認同的哲學觀，並搭著那種思考方式順暢的實作即可

參考內容

• Pete Hunt：React：重新思考 best practices — JSConf EU
• Rethinking Separation of Concerns with React