HomeAbout Me

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

By Nissen Yeh
Published in Software philosophy
May 21, 2021
1 min read

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

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

本篇會討論

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

什麼是關注點分離?

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

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

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

SOC

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

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

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

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

Angular_SoC

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

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

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

React_SoC

這種 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_SoC

讓每個 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),認為應該以「視覺元件為主軸」,進行關注點分離

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

參考內容


Previous Article
從工程師到圖片管理工具 Eagle 的獨立開發者—— 專訪創辦人 Augus

Nissen Yeh

Software Engineer

Topics

Software philosophy

Web development

Project

Free talk

Related Posts

Web(World Wide Web)的起源:為什麼 Tim Berner-lee 想要設計 Web?
April 20, 2022
3 min
© 2022, All Rights Reserved.

Quick Links

Advertise with usAbout Us

Social Media