[譯] 2017 年了，這麼多前端框架，你會怎樣選擇？

• 原文地址：Choosing a frontend framework in 2017
• 原文做者：Taras Mankovski
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：LeviDing
• 校對者：sunui, warcryDoggie

過去七年來，前端框架生態系統發展蓬勃。咱們已經學了不少關於構建和維護大型應用的知識。咱們看到了不少新想法的出現。其中一些新想法改變了咱們構建 Web 應用的方式，而其餘想法被廢棄，由於它們起不到什麼做用。

在這個過程當中，咱們看到不少炒做和衝突的觀點，選擇一個框架變得困難重重。當您爲長期維護一個應用的組織挑選框架時，更是難上加難。

在本文中，我想描述咱們對如何構建現代 Web 應用的理解的演變，並提出一種如何在多種技術中進行選擇的方法。

在開始前，我想先回顧一下，回到第一個使構建網絡應用更像編程的庫。 Backbone.js 於 2010 年 10 月發佈，2013 年 3 月達到 1.0 版本。它是第一個普遍使用的採用模型與視圖之間相分離的 JavaScript 庫。

圖片來源：Angular Model 和 View 之間的關係 —— backbonejs.org
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 組件規範承諾使開發人員能夠建立與其上下文分離的，而且易於與其餘組件進行組合的可重用組件。

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.js 的元素 —— 原文 Ember JS 深刻介紹

Ember 社區在 Ember.js 核心團隊的領導下，於 2013 年 8 月發佈了 Ember.js 1.0。它具備 MVC 架構，強大的路由系統和可編譯模板的組件。像 Angular.js 和 Polymer 同樣，Ember.js 主要依靠雙向綁定來保持視圖與狀態同步。

在 2014 年的年中，一個新的庫開始引發開發者的注意。Facebook 爲他們的平臺建立了一個框架，並以 「React」 的命名發佈。

在其餘的框架都依賴於對象突變和屬性綁定的時候，React 引入了將諸如純函數和組件參數之類的組件做爲函數參數來處理的想法。

組件是返回 DOM 的函數 —— 原文 facebook.github.io/react/docs/…

當一個參數的值改變時，組件的 render 函數被調用並返回一個新的組件樹。 React 將返回的組件樹與虛擬 DOM 樹進行比較，以肯定如何更新真實的DOM。這種從新渲染全部內容並將結果與虛擬 DOM 進行比較的技術經實踐證實是很是有效的。

原文: React.js Reconciliation

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 社區的基本宗旨。

當 Ember 正在像 React 學習時，React 社區正在採用由 Ember 推廣的路由。 大型 React 應用是使用 React Router 編寫的，該路由器是從用於 Ember 路由的 router.js 分支發展而來的。

Ember 對咱們構建現代 Web 應用最大的貢獻之一是他們在使用命令行工具做爲構建和部署 Web 應用的默認界面上的領導力和普及。此工具稱爲 EmberCLI。它啓發了 React 的 create-react-app 和 AngularCLI。如今的每一個 Web 框架都提供了一個命令行工具來簡化 Web 應用的開發。

在 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 的 Angular 組件 —— github.com/johnpapa/an…
TypeScript 提供類，模塊和接口。它支持可選的靜態類型檢查，它對 Java 和 C＃ 的開發人員來講是一個很是棒的語言。具備 Visual Studio Code 編輯器對 TypeScript 代碼提供了很棒的智能支持功能。

對 Angular Apps 的智能支持 —— 原文：rafaelaudy.github.io/simple-angu…

Angular 是高度結構化和以公共標準爲基礎的，然而仍然存在配置機制的問題。它有一個強大的路由器。Angular 團隊正在努力爲 Google 開發人員從專業開發環境的角度提供一個全新的框架。對完整性的關注對整個 Angular 社區都很是有好處。

在 2017 年 5 月，Polymer 2.0 改進了綁定系統，減小了對 heavy polyfills 的依賴，並與最新的 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 應用。

在評論區留下你的見解吧。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、React、前端、後端、產品、設計 等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃。