Web API 過去與未來（一）前後不分離：MVC 架構
Web API 是連接前後端的管道；因此，討論前後端如何彼此協作的歷史進程，可以帶領我們理解各種前後端協作方式的優缺點。 本文前半部分將以 MVC 架構為緯，從前後端不分離的模板引擎，到 API 的引入導致前後端分離成為可能，再到 RESTful API 如何協助前後端工程師在看待資源方面具備同樣的框架，最後介紹 GraphQL 風格，來精確獲取資源。 本文後半部分將簡介幾種 API 的認證方式，以引出最近在 API 建構中較新的技術：建立 Proxy 以保護 API url。在這樣的技術下，不但能夠大幅提升 API 的安全性，也能夠以在 Client 端進行資料育處理的方式，大幅提高 API 呼叫的效能。
一、前後不分離：MVC 架構
什麼是 MVC？
MVC 是一種軟體架構模式 (Architectural pattern)，由 Model 模型、View 視圖、及 Controller 控制器所組成，這三個部門彼此都有自己要負責處理的部分，例如：
- Model (資料模型)：處理資料庫操作，是系統中負責呈現商業資訊與邏輯 (business data and logic) 的部分。
- View (輸出介面，或稱視圖)：負責將資料傳遞給使用者，並處理畫面的呈現。
- Controller (控制器)：負責接收從外部 (使用者介面) 傳來的訊息，指派工作，是 Model 和 View 的中間人。
圖片取自 alpha camp
由於 Modal 與 Controller 屬於後端範疇，以下先針對 View 進行說明：
View 透過模板引擎(Template Engine)可以動態產出 HTML 文件，以 Ruby On Rails 為例要建立一個 .html.erb 檔案，ERB 是指嵌入式的 Ruby 程式碼 (Embedded Ruby)。其他語言也有類似 ERB 的樣版引擎，以 Javascript 為例有 JADE 跟 EJS。
延伸閱讀：MVC 是一個巨大誤會
模板引擎將資料與範本融合產生 HTML 檔案
樣版引擎範例: EJS
以 EJS 為例：
使用類似 Javascript 語法在 HTML 文件中加上 <% %> 或 <%= %> 標籤。
- <% … %> 代表插入判斷條件，例如以下範例：如果條件 show 為真的話，會顯示文字。
<% if(isShow){ %>
<P> show me what you get </p>
<% } %>- <%= … %> 標籤之間的變數會輸出到瀏覽器，例如：<%= title %> 讓我們能在瀏覽器中看到標題。
<h1><%= title %></h1>無論 ERB 還是 EJS 都是透過 Controller 傳進來的實例變數 (Instance Variable) ，讓後端產生的資料可以出現在前端。
左邊為後端 Express 檔案，右邊為 EJS 檔案，圖片來自 六角學院課程截圖
延伸閱讀：六角學院 EJS 課程
前後不分離有什麼問題呢？
- 專案較難分前後端，通常是全端工程師開發，若是純前端工程師開發，對 Controller 與 Modal 不理解，而純後端工程師對 CSS, Javascript 等內容也不熟悉。
- 開發效率不彰，比如前端寫好 HTML，加入參數還要詢問後端如何取用，開發時需要配置後端環境。
- 隨著 web 應用更廣泛，前後端技術也越來越多元，全端工程師較難同時精通前後端，也不一定對前後端同時感興趣。
最後發現前後端分離，可以解決許多問題，因此成為主流軟體開發模式。
系列文章：
Web API 過去與未來（一）前後不分離：MVC 架構
Web API 過去與未來（二）前後不分離：API 的應用與前後分離
Web API 過去與未來（三）主流的 API 設計風格：RESTful、另一種 API 工具：GraphQL
Web API 過去與未來（四）API 認證方式：Cookie、JWT、OAuth
Web API 過去與未來（五）建立 Proxy 保護 API url
Web API 過去與未來（六）HTTP Caching 增進網站效率
