小馬過河——前後端是怎麼分家的？

事實上，我們剛剛走出前後端合一的時代沒幾年，直到今天仍然有大量系統是前後端合一的。那麼，為什麼前後端分離成為了一種趨勢？前後端分離之後又有什麼好處呢？

越來越刁的用戶口味

我曾經歷過電話撥號上網的時代，那時候的網速只有每秒幾k位元組。凡能上網的，皆有無比的耐心。然而，技術日新月異，終於有一天，人們連幾百k的速度都不能忍了，他們期待更快的速度 —— 就像在本地運行的原生程序一樣。

這時候，GMail橫空出世了。它採用的方案是讓代碼完全在瀏覽器中運行，只有需要調用遠端API時，才去找伺服器。這樣一來，用戶終於不用任何操作都不得不從伺服器繞一圈了，用戶體驗有了本質性的提升。這種劃時代的體驗升級，正是讓GMail風靡全球的重要因素之一。

後來，有人把這種方式命名為：AJAX（非同步JavaScript與XML），於是風靡一時。當然，現在的API大都放棄了XML格式，而是以JSON格式為主了。

百花齊放的上網設備

如果說，升級用戶體驗是前後端分離的第一推動，那麼讓前後端分離開始流行的另一項重大推力，就是移動時代的到來。來到移動時代之後，人們的上網設備不再局限於PC，手機上網很快趕超了PC，佔據了半壁江山。

這種局面就帶來了一項重大挑戰：就算在你的業務中用戶體驗並不是最重要的，但你總不能看著移動市場的用戶被對手搶走吧？但PC端和移動端，不僅僅是解析度的差異，在用戶的使用習慣、導航設計等方面都有顯著的區別。你會如何解決這個問題？把所有網站都寫成一個PC端和一個移動端嗎？那樣做的話，需要架構師有相當的水平，並且維護成本也會相當高。

但前後端分離的架構，卻天然可以解決這個問題，因為真正承載著業務邏輯的後端只需要寫一份，而前端邏輯可以寫兩份，並且可以非常輕量級的隨著用戶需求而變化。

日趨成熟的基礎設施

在 NodeJS（相當於JS領域的JRE或JDK）推出之前，前端幾乎沒有什麼好用的工具。而NodeJS的推出，為前端帶來了兩個重大利好。首先是基於 NodeJS 的前端工具出現了井噴，如果沒有這次井噴，前端之路會走得更加艱難。其次是基於JS的第三方庫也隨之爆發起來。NodeJS 原本的定位是服務於後端開發領域，但事實上，除了一些和本地原生API有關的部分之外，NodeJS中一些常用到的JS庫，特別是演算法庫，也同樣可以應用於前端領域。除此之外，NodeJS 還帶來了一個事實性的模塊化標準 CommonJS，它也被後來的 Webpack 等工具當做了前端模塊化的標準。

萬事俱備，只欠東風

在 jQuery 時代，前端代碼很難獨立出來，因為 jQuery 的編程模型讓程序員捲入了太多的細節（雖然已經比原生JS開發少了很多），所以工程化很成問題，特別是在涉及到大規模、長周期、多人協作的領域，缺乏對工程化的支持是一個致命傷。

在2009年，一個原本準備用來建軟體原型的框架誕生了，幾年後，它意外火了起來，那就是AngularJS。事實上，今天仍然有很多基於 AngularJS 的程序運行在生產環境中，特別是在國外。如果你看到這樣的系統，應該向 AngularJS 致敬，因為它是一個 8 歲高齡的框架，這在號稱每六個月翻新一次的前端領域是很難想像的。

當然，在現在的技術條件下，AngularJS確實老了，它的歷史包袱太重，需要做的兼容性工作太多。於是，2014年，官方開發組在 Google 的支持下開始了一項雄心勃勃的計劃：甩掉一切歷史包袱，完全重寫 Angular 。

在一段時間之後，Angular 所用的語言換成了當時尚在襁褓中的 TypeScript 。Angular 與 TypeScript 的合作可謂是雙贏。TypeScript 為 Angular 帶來了超強的工程性，這個由 Anders（Delphi和C#的作者）親自操刀的新語言，兼具動態類型的靈活與靜態類型的嚴謹，註定有一天要走上王座。而在 Angular 的需求驅動下，TypeScript 也快速成熟起來，並且 Angular 也成了 TypeScript 的一個著名案例。如果說當今世界誰在 TypeScript 的工程實踐上經驗最豐富，那麼估計連微軟內部能超過 Angular項目組 的也沒幾個。

但是，Angular開發組裡面可能是處女座太多了，處處透露著對完美的追求，以至於一直開發了兩年半才終於推出。這期間，Angular 一直在錘鍊各種介面的設計，甚至到了 RC 階段都在大改，讓外界不禁嘲笑 Angular 開發組 "重新定義了RC"。當然，RC 階段的付出終於換來了回報，在正式推出之後，Angular 開發組對外宣布了一個版本發布計劃，那就是嚴格遵循語義化版本（semver）規範。這種規範就像是 NodeJS 的升級，除標記為試驗性的 API 之外，都會在兩個相鄰版本之間保持完全的兼容，廢棄的 API 會像 Java 一樣標記為已廢棄，提醒你修改，等到第三個版本才會正式移除。

這種嚴謹、可預測的版本計劃，讓使用者可以放心的不斷跟隨最新版本升級，也就是說，對基於 Angular 的項目來講，最佳的策略是跟隨官方的每一個 Release 版本，一推出就立即跟進。這樣，你的程序仍然可以正常編譯，只是編譯的時候會給你一些 "廢棄" 提示，你可以有非常寬裕的半年時間來把它們改成新的方式。

周雖舊邦，其命維新。這就是新的 Angular ！一個具有很高工程性的現代化框架，並且會一直跟隨技術潮流進行演化。

關於本文

作者：@汪志成

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！

本站內容充實豐富，博大精深，小編精選每日熱門資訊，隨時更新，點擊「搶先收到最新資訊」瀏覽吧！

請您繼續閱讀更多來自 前端早讀課 的精彩文章: