<b>本文講的是[譯] 2017 年了，這麼多前端架構，你會怎樣選擇？，</b>
<b></b>
過去七年來，前端架構生态系統發展蓬勃。我們已經學了很多關于建構和維護大型應用的知識。我們看到了很多新想法的出現。其中一些新想法改變了我們建構 Web 應用的方式，而其他想法被廢棄，因為它們起不到什麼作用。
在這個過程中，我們看到很多炒作和沖突的觀點，選擇一個架構變得困難重重。當您為長期維護一個應用的組織挑選架構時，更是難上加難。
在本文中，我想描述我們對如何建構現代 Web 應用的了解的演變，并提出一種如何在多種技術中進行選擇的方法。
在開始前，我想先回顧一下，回到第一個使建構網絡應用更像程式設計的庫。 Backbone.js 于 2010 年 10 月釋出，2013 年 3 月達到 1.0 版本。它是第一個廣泛使用的采用模型與視圖之間相分離的 JavaScript 庫。
Backbone.js 的 Model 表示資料和業務邏輯。它們觸發視圖層的變化。當改變事件觸發的時候，顯示模型資料的視圖負責将該更改應用于 DOM。Backbone 并不知道您首選 HTML 模闆的方法，需要開發者自行編寫 render 函數解決如何更新 View 到 DOM。
在 Backbone 1.0 誕生的時候，Angular.js 被釋出并開始普及。它不像 Backbone 那樣側重于模型，而是側重于使視圖做的更好。
Angular.js 采用了編譯模闆以使 HTML 動态化的想法。它允許使用指令将行為注入到 HTML 元素中。您可以将模型與視圖進行綁定，并且當模闆改變的時候，視圖會自動更新。
Angular.js 的流行度迅速增長，因為你很容易将 Angular.js 添加到任何項目中，并且上手簡單。許多開發人員被 Angular.js 所吸引，因為它是由 Google 開發的，這賦予 Angular.js 天生的可靠度。
大約在同一時間，Web 元件規範承諾使開發人員可以建立與其上下文分離的，并且易于與其他元件進行組合的可重用元件。
HTML 模闆 — 為元件提供 HTML 标記
自定義元素 — 提供了一種建立自定義 HTML 元素的機制
Shadow DOM — 将元件的内部與渲染它的上下文隔進行離
HTML 導入 — 使将 Web 元件加載到頁面中成為可能
Google 的一個團隊建立了一個更新檔庫，為當時所有浏覽器提供 Web 元件。這個庫被稱為 Polymer，并于 2013 年 11 月開源。
Polymer 是第一個使通過組合元件建構互動式應用成為可能的庫。早期使用者受益于可組合性，但發現性能問題還是需要用架構來解決。
同時，一小群開發人員受到 Ruby on Rails 思想的啟發，希望建立一個基于約定的社群驅動的開源架構來建構大型 Web 應用。
他們開始基于 SproutCore 2.0 進行開發。SproutCore 2.0 是一個基于 MVC 的架構，在模型、控制器和視圖之間有明顯的分隔。這個新架構叫做 Ember.js。
建立基于約定的架構的第一個挑戰是找到大型 Web 應用的通用模式。 Ember.js 團隊檢視了大型 Backbone 應用，以找到相似之處。
他們發現應用的某些部分是一緻的，而其他部分會有些改動。在這種地方就需要嵌套視圖。
他們還将 URL 視為 Web 應用架構中的關鍵角色。他們結合了嵌套視圖的想法和 URL 的重要性，建立一個路由系統，作為入口點進入應用并控制初始視圖呈現。
Ember 社群在 Ember.js 核心團隊的上司下，于 2013 年 8 月釋出了 Ember.js 1.0。它具有 MVC 架構，強大的路由系統和可編譯模闆的元件。像 Angular.js 和 Polymer 一樣，Ember.js 主要依靠雙向綁定來保持視圖與狀态同步。
在 2014 年的年中，一個新的庫開始引起開發者的注意。Facebook 為他們的平台建立了一個架構，并以 “React” 的命名釋出。
在其他的架構都依賴于對象突變和屬性綁定的時候，React 引入了将諸如純函數群組件參數之類的元件作為函數參數來處理的想法。
當一個參數的值改變時，元件的 <code>render</code> 函數被調用并傳回一個新的元件樹。 React 将傳回的元件樹與虛拟 DOM 樹進行比較，以确定如何更新真實的DOM。這種重新渲染所有内容并将結果與虛拟 DOM 進行比較的技術經實踐證明是非常有效的。
Angular.js 開發人員面臨着 Angular.js 變更檢測機制引發的性能問題。Ember 社群正在學習如何解決維護依賴于雙向綁定和觀察者模式的大型應用的挑戰。
React 主攻的是 Polymer 所未能解決的問題。React 顯示了如何提高元件架構的性能。 React 在基準測試中打敗了 Ember 和 Angular.js。一些較有嘗試新技術精神的 Backbone 開發人員将 React 作為視圖添加到其應用中，以解決他們遇到的性能問題。
為了應對 React 的威脅，Ember 核心團隊制定了一項計劃，将 React 提出的想法納入 Ember 架構。他們認識到需要提升向後相容性，并建立了一個版本更新的途徑，允許現有應用更新到包含新 的 React-inspired 渲染引擎的 Ember 版本。
在 4 個次要版本的更新過程中，Ember.js 已棄用 Views，将社群遷移到基于 CLI 的建構過程，并将基于元件的架構作為 Ember 應用開發的基礎。逐漸對架構進行重要的重構的過程被稱為“穩定無停滞”，成為 Ember 社群的基本宗旨。
在 2015 年上半年，Angular.js 的核心團隊得出結論，他們的架構正在進入一個進化的死胡同。Google 需要一個開發人員可以用來建構強大的應用的工具，而 Angular.js 不能成為這個工具。他們開始研究一個新的架構，這将是 Angular.js 的精神繼承者。 與 Angular.js 不同，Angular.js 在谷歌不是很支援的情況下流行了起來，而這個新架構完全由 Google 支援。Google 分出了超過 30 多位開發人員，來開發這個被稱為 Angular.js 精神繼承者的架構。
新架構的範圍遠遠大于 Angular.js。Angular 團隊将新架構稱為平台，因為他們計劃提供專業開發人員建構 Web 應用所需的一切。像 Ember 和 React 一樣，Angular 使用基于元件的架構，但它是使 TypeScript 成為其預設程式設計語言的第一個架構。
TypeScript 提供類，子產品和接口。它支援可選的靜态類型檢查，它對 Java 和 C＃ 的開發人員來說是一個非常棒的語言。具有 Visual Studio Code 編輯器對 TypeScript 代碼提供了很棒的智能支援功能。
Angular 是高度結構化和以公共标準為基礎的，然而仍然存在配置機制的問題。它有一個強大的路由器。Angular 團隊正在努力為 Google 開發人員從專業開發環境的角度提供一個全新的架構。對完整性的關注對整個 Angular 社群都非常有好處。
在 2017 年 5 月，Polymer 2.0 改進了綁定系統，減少了對 <code>heavy polyfills</code> 的依賴，并與最新的 JavaScript 标準保持一緻。新版本引入了一些突破性變化，并為使用者更新到新版本提供了詳細的計劃。新的 Polymer 配備了一個指令行工具來幫助建構和部署 Polymer 項目。
截至 2017 年 6 月，所有頂級架構都将元件架構作為開發範例。每個架構都提供路由作為将應用分解為邏輯塊的一種手段。所有架構都可以使用像 Redux 這樣的狀态管理技術。React、Ember 和 Angular 都允許伺服器端渲染 SEO 和快速初始啟動。
那麼你怎麼知道用什麼工具來建構一個現代的 Web 應用呢？我建議你看看各個組織的人口統計資料，以确定哪個架構最适合。
React 是一個類似于拼圖的一塊的庫。React 提供一個薄視圖層，并将其留給開發人員選擇其餘的架構。盒子裡沒有任何東西，是以你的團隊可以完全控制你使用的一切。如果你有一個經驗豐富的 JavaScript 開發人員團隊，他們對于功能程式設計和不可變資料結構都很滿意，那麼 React 是一個不錯的選擇 React 社群在使用 Web 技術方面處于創新的前沿。如果你的組織需要使用相同的代碼庫來跨平台，那麼你應該知道 React 允許你使用 React Native 編寫本地的 Web，使用 ReactVR 編寫 VR 裝置。
Angular 是一個非常适合有 Java 或 C＃ 背景的企業開發人員的平台。TypeScript 和 Intellisense 的支援将使這些開發人員感覺到非常熟悉。雖然 Angular 是新的，但它已經有很多第三方元件庫了，公司可以立即購買并立即開始使用。Angular 團隊承諾要快速疊代架構，使之更好，而不會再次破壞向後相容性。Angular 可用于使用 NativeScript 建構高性能原生應用。
Ember.js 是一個優化小團隊和技能水準較高的獨立開發者的生産力架構。其對配置上的約定，為新開發人員群組織長期維護大型項目提供了極好的起點。承諾的“穩定無停滞”已被證明是維護大型應用的有效方法，而不需要在最佳實踐改變時進行重寫。穩定性、成熟度和緻力于創造共享代碼，促生了一個生态系統，這個生态系統使得大多數開發的簡易程度讓人驚訝。如果您正在尋找一個長期項目的可靠架構，Ember 是一個很好的選擇。
Polymer 是一個對于希望建立單一樣式指南，和要在整個組織中使用的元件集合的大型組織而言特别适合的架構。該架構提供可比較的開發工具。如果你想将一些現代化的功能應用在你的程式上，而不需要編寫大量 JavaScript，那麼 Polymer 是你們很不錯的選擇。
我們正在了解如何為浏覽器建構應用，并彙集好的想法。 所有架構的制作者都非常關心使用他們的庫的人。 問題是哪個社群和生态系統是你的組織和用例的最佳選擇。
我希望這篇文章有助于揭示現代網絡生态系統的發展，并幫助您建構下一代現代 Web 應用。
在評論區留下你的看法吧。
<b>原文釋出時間為：2017年7月20日</b>
<b>本文來自雲栖社群合作夥伴掘金，了解相關資訊可以關注掘金網站。</b>