前後端技術分離

01-25

不知不覺半年過去了，當初鼓吹的 vue 實現的 webapp 由於多方面原因暫時不能開源共享了，不過另外有個更有意思的東西可以分享給大家。

恩...想了半天，我們還是從前後端技術分離開始說起

首先，前後端技術分離並非討論的是 rest-api + webapp 類型的業務。主要指展示類，如：CMS、電商之類，嚴重依賴 SEO 類型的業務。這類業務，頁面需要伺服器渲染，因此，後端程序員需要參與到前端的頁面中，前後端的職責重疊，耦合度大，對於前端複雜的項目，後端整合會帶來不可預期的問題，前端人員需要審核後端整合的成果，由此，前端需要懂後端，後端需要懂前端，除非整個公司都是 fullstack，不然後期的返工或維護簡直就是災難。項目的溝通、維護、管理成本大大加大。也正因為此，大家紛紛開始討論前後端技術分離，在過去的很長一段時間裡，我也在構思如何在團隊里更好的實踐前後端技術分離，但是實際上過去的兩三年里，前後端分離的有點尷尬，直到...

先上乾貨，分享一張架構圖：

知乎上圖失敗，看不見圖，點此預覽

以上技術架構，專註前端，後端開放，可以帶來更為優質的客戶。

前端

由 Metalsmith 負責前端數據模板分離，銜接 Data + View 生成預覽頁面，Data 數據可以通過工具導入數據源。
模板引擎採用 jinja2/twig/nunjucks 可跨平台兼容的模板引擎，通過一些約束，可以用在不同平台上。
打通前端工具鏈，Webpack 負責前端模塊載入。
對於一些 Landing Page 不再需要後端參與，metalsmith 生成 html 頁面即可用，數據和模板分離，並不需要過分擔心後續的維護問題。

後端（也可以是中間層）

Controller/Router 靈活性處理。
主攻 Model，數據源可以多樣化（直接 Database 或者 3rd party）。可以爭對性的對 Model 部分數據進行緩存處理。
跨平台模板引擎帶來的好處，可以和任何使用 nunjucks、twig 或 jinja2 模板的公司合作，有助於小團隊的業務推廣。中間層如果是 nodejs 可以採用新一代的組件服務端渲染方案（不在本篇討論範圍）。

數據端

可以直接和成型的 CMS、E-commerce 對接，初始化數據通過工具直接導入前端測試數據即可。
第三方平台，通過 API 交互。