SegmentFault 技術週刊 Vol.3 - 先後端分離與前端工程化

小編：聽了這麼多先後端分離，今天小編就來和各位好好聊一聊。
編小：請問小編，先後端分離是什麼？爲何要這麼作？具體怎麼作？
小編：咳咳，先後端分離的問題啊。簡單的說，就是前端負責瀏覽器端用戶交互界面和邏輯等，顯示數據；後端負責數據的處理和存儲等，提供數據。要詳細說……仍是要具體到項目裏理解，再編就編不下去了 仍是看咱們這一期的週刊吧。

本期週刊，是社區的小夥伴關於先後端分離的內容，包括何爲先後端分離，先後端分離的意義，以及各家在先後端分離上作過的嘗試等。咱們從前端技術發展，來看這幾年愈來愈成熟的前端工程，組件化和模塊化的大勢所趨，或許會更好地理解爲什麼先後端分離愈來愈重要。

先後端分離探索之路

n͛i͛g͛h͛t͛i͛r͛e͛ - 先後分離架構的探索之路

探索先後分離並非像不少旁觀者說的「爲了分離而分離」，反而是「爲了更好的理解 web 開發這回事而分離。」

勞卜 - 咱們爲何要嘗試先後端分離

• 項目一開始製做前端頁面的時候，我再也不須要後臺給我配置服務器環境了

• 項目的前端文件能夠在須要調用後臺接口的時候丟進服務器就行了，徹底不須要事先放進去

• 增長一個項目頁面須要配置路由的時候再也不須要讓後臺同事給我加了，本身前端搞定

• 頁面跳轉比以前更加流暢了，局部渲染局部加載很是快速

• 頁面模板能夠重複使用了，前端組件化開發提升了開發效率

• ……

好處太多了。

戴嘉華 - Web 先後端分離開發思路

在原始的先後端分工下，會常常有這樣的疑惑：既然前端數據是由後端提供，那麼後端數據接口尚未完成，前端是否就沒法進行編碼？怎麼樣才能作到先後端獨立開發？

你會說，能夠本地先後端鏈接一下，使用 API 模擬數據請求，那又出現新的問題，難道每寫一個 API 都要把先後端鏈接測試一遍嗎？並且，我若是須要測試某個 API，而你的這個 API 還沒寫好，那我這個功能模塊的進度就「阻塞」了。

後面還有那麼多 API 須要寫，因此不能這麼作。

arccode - 先後端徹底分離之 API 設計

先後端徹底分離後，前端和後端如何交互呢？答案是，經過雙方協商好的 API。本文詳細介紹 API 的設計及異常處理。

Justin_lu - 先後端分離實踐 — 如何解決跨域問題

「後端提供 API，前端消費 API」。而即便這樣讓分工更專一，跨域也仍是一個須要解決的重要問題，本文就來講說如何解決跨域。

更多閱讀：

• wilee - 趣店前端團隊基於 koajs 的先後端分離實踐

• 將就 - Vue.js + LeanCloud（node.js）先後端分離開發樣板

• 飛龍 - 我談先後端分離

還有前端工程呢

「如今的前端早已不是幾年前的前端，不再是 jQuery 加一個插件就能解決問題的時代。」

kuitos - 前端工程化知識要點回顧&思考

「一套好的工程化解決方案，能在提升開發效率（包括代碼編寫的溫馨度及多人協做）的同時，確保整個系統的伸縮性（各類不一樣的部署環境）及健壯性（安全），同時在性能上又能有一個很優異的表現（主要上各類緩存策略加載策略等），並且這套方案又應該是對工程師無感知（或感知很小）趨於自動化的一套方案。」

lixiang - 公司前端開發架構改造

統一多端的問題、組件化開發、模塊化開發和打包、自動更新緩存……看做者如何利用 Gulp 和 Webpack 這兩個工具，對公司前端開發進行改造，對團隊整個開發的思想與模式進行改造。

keelii - 京東單品頁前端開發那些不得不說的事兒

以京東單品頁的前端開發爲例，從前端發展歷史提及，介紹了單品頁前端模塊的結構與劃分、前端的技能樹、前端工程化的應用、程序設計以及產品等多塊知識，這是一篇不可錯過的前端學習圖譜。

dmyang - 基於 webpack 搭建前端工程解決方案探索

• 提供開發所需的一整套運行環境，這和 IDE 做用相似

• 資源管理，包括資源獲取、依賴處理、實時更新、按需加載、公共模塊管理等

• 打通研發鏈路的各個環節，debug、mock、proxy、test、build、deploy 等

• ……

前端工程，起碼須要這些基本開發環節的問題，本文以開發一個多頁面型 Web App 爲例，介紹 webpack 的基本原理，以及基於 webpack 搭建純靜態頁面型前端項目工程化解決方案的思路，給出以上問題的解決方案。

xiaoyann - 使用 webpack + react + redux + es6 開發組件化前端項目

標題就能看出來，這是一篇真·實戰，文章最後還有對使用 webpack 的問題及性能優化做出的總結。

fwon - gulp + webpack 構建多頁面前端項目

這篇是最近很流行的工程中工具化的表明，使用 gulp 和 webpack 工程化構建多頁面項目，還有比這適用性更高的麼？

kuitos - 基於 git hooks 的前端代碼質量控制解決方案

當前的 code review 過程老是不盡人意，你是否嘗試過基於 git 的 hook 功能來作一些自動化的事情呢？做者就想這個辦法，經過 git hooks 裏配置預處理腳本，讓每次提交代碼時作 code check，若是沒有經過直接拒絕接收 push。（是否是夠狠…

更多閱讀：

• kuitos - 2015前端生態發展回顧

• 歐雷 - 前端工程優化之路、團隊中的 Node.js 實踐

• 題葉 - 以 Flux 角度從頭考慮後端架構

（本期完）

往期週刊傳送門：Vol.1 - Vue.js 起手式 | Vol.2 - 666，ES6

---

# SegmentFault 技術週刊 #

「技術週刊」是社區特別推出的技術內容系列，一週一主題。週刊篩選的每篇內容，是做者的獨到看法，踩坑總結和經驗分享。

每週二更新，歡迎「關注」或者「訂閱」。你們也能夠在評論處留言本身感興趣的主題，推薦主題相關的優秀文章。