如何選擇最好的前端框架

JavaScript 世界是一個擁有數十種工具、庫和框架的豐富環境。 但是，有很多選擇會帶來很多混亂。 這真的是一把雙刃劍。

雖然您有足夠的空間進行創意和實驗，但有時您不確定要選擇哪個庫或框架。

從長遠來看，您選擇的前端框架可以成就或破壞您的項目。

在本文中，我們將研究一些最流行的 JavaScript 框架，以及它們如何相互對抗。 我們將研究這些框架的五個不同視角，這通常會簡化您決定下一個 JavaScript 框架的過程。

無論您是從這些流行的 JavaScript 框架中選擇一個，還是從更深奧的框架中選擇，您都應該考慮這些方面。

學習資源的可用性

這一點很明顯，但經常被忽視。 雖然某些框架的精美主頁可能會吸引您的眼球，但除了枯燥乏味的文檔之外，您仍然需要一些額外的課程、書籍、教程和文章來幫助您入門。

創建一個很棒的框架是一回事，傳達其背後的核心思想是不同的。 事實上，有許多專業的開發人員專門從事教練工作。 精心製作的學習資源將大大縮短您的學習曲線。

去尋找你以前接觸過的值得信賴的作者的資源——最終這將是值得你花時間的。 如果您很難找到有用的東西，請小心：您嘗試學習的框架可能是新的，或者尚未被社區很好地採用。

儘管我提到僅靠文檔是不夠的，但也有例外。 例如，EmberJS 有很好的文檔。 核心特性和用例在這里和那裡都用通用示例很好地描述了。 不幸的是，除了文檔之外，我們只剩下很少的資源書籍、視頻課程或其他材料。

另一方面，Angular 和 React 有豐富的資源。 幾乎任何面向前端的教育網站都會有一兩篇關於它們的文章，甚至可能是完整的視頻課程或書籍。

Vue 有點中庸之道：它有很好的文檔，並且有一些不錯的課程可供您選擇。

例如，Aurelia 的資源幾乎為零。 你唯一的希望是文檔和運氣。

我更喜歡有選擇。

即使你讀了一本很棒的書或課程，你也有機會通過接觸不同的資源來學習新的東西。 如果您熟悉該主題，通常您可以瀏覽並尋找可能還不太清楚的區域。

不幸的是，如果您的選擇有限，則此策略將不起作用，這將導致我們進入下一點。

人氣

您可能會為學習異國情調而感到自豪，但如果您從商業角度來看，情況就不一樣了。 您的公司或客戶可能更喜歡使用久經考驗的工具集。

有幾個原因。 如果一個框架不那麼流行，這意味著有一些專門從事它的開發人員。 如果您放棄項目或找到新工作會怎樣？ 您的雇主最終陷入了尋找了解您使用的框架的開發人員的困境。

這個過程可能會成為公司的真正負擔。 即使您堅持該項目並且它會發展，同樣的事情也適用。 現在雇主需要更多的開發人員來加速開發。

您可能會選擇流行的、廣泛使用的框架還有其他一些個人原因。 如果您發現自己遇到了一些問題並且沒有真正可以尋求幫助的社區，會發生什麼？ 由於您需要自己處理文檔，因此您很可能會浪費大量時間。

除此之外，您還想考慮未來，在您的職業生涯中更具吸引力的機會。 如果您專注於流行的事物並且非常擅長它，那麼將會有很多項目適合您。

這裡明顯的領導者是 Angular 和 React。

大多數與前端相關的工作列表都需要一個或另一個。 他們分別得到谷歌和 Facebook 的支持，因此雇主對他們的選擇感到“安全”。

有時，您的公司或客戶的框架選擇並不取決於您； 也許它是由以前的員工或團隊中的其他人製作的。 可能是 Angular 或 React。 現在還有其他選擇，例如 Ember 和 Vue。 但是，您必須刻意尋找使用它們的公司。

您可以通過快速查看項目在 GitHub 和其他地方的表現來確定框架的受歡迎程度。 以下是撰寫本文時收集的一些統計數據：

儘管這些庫已經存在了足夠長的時間來證明自己是流行的選擇，但如果您正在嘗試一些真正新的東西，它們的類似統計數據可能會幫助您做出選擇。

只學習 Angular 或 React 只會讓你在職業生涯中走得更遠。 當然，你會有很多機會，但存在其他框架是有原因的。 嘗試在業餘時間了解它們，偶爾做一些實驗。 即使您從未在實際項目中使用它們，您也會獲得寶貴的見解，幫助您進行日常開發工作。

核心功能

現在讓我們來點技術。

開始時，您希望簡要概述框架的核心功能，以便在開始編碼時有足夠的期望。 為此，請瀏覽文檔。 您需要大致了解這個框架的含義。 它只是一個視圖層，完全成熟，還是介於兩者之間？

如果你之前對其他框架有豐富的經驗，這個過程很簡單快捷。 在文檔中查找以下主題：模板、狀態管理、HTTP 通信、表單處理和驗證以及路由。 這些是您作為開發人員的日常工作。 並非所有這些都可以在核心框架中呈現，或者對於特定問題可能有一些不同的方法。

讓我們簡要介紹一下流行的選項。

我們將從 React 和 Vue 開始。 它們不是真正的框架。 它們僅代表您的應用程序的視圖層。 這意味著所有其他部分——HTTP 通信、表單驗證等——都取決於您。

正如我之前提到的，它可能是一把雙刃劍。 最終，您將最終構建自己的自定義框架。 他們都有自己的庫生態系統來為最常見的問題提供解決方案，但整體結構會因項目而異。

React 的 JSX 總是讓我畏縮。 我不得不習慣它。 然而 Vue 的模板非常好，特別是如果你來自 Angular。

另一方面，Ember 幾乎擁有一切。 令人驚訝的是，Ember 的核心不提供高級表單處理。 它只有一些輸入助手，僅此而已。 它非常固執己見，甚至有自己的數據層。 一切都必須以“Ember 方式”完成。

如果你有其他框架或 JavaScript 的背景，你可能會因為 Ember 使用自己的對像模型而感到沮喪。 正如其文檔所述，標準 ES2015 類並未被廣泛使用。 您可能會發現自己將值直接分配給屬性，而 Ember 會抱怨它。

另一個與其他框架顯著不同的是 Ember Data。 它是 Ember 應用程序的數據層。 您可以將其視為前端的某種 ORM。 您創建模型並映射它們之間的關係。

現在，如果您的服務器使用 JSON API（它是實現 JSON API 的規範），那麼您可以使用 Ember，但不幸的是，大多數服務器都沒有。 所以你必須編寫自定義適配器和序列化程序。 然而，如果你以 Ember 的方式做事，它可能真的很有成效。 它只是有一個陡峭的學習曲線。

Angular 2 是一個功能豐富的框架。 它附帶了很多像 Ember 這樣的模塊，所以你有很多開箱即用的工具。 然而，由於 Angular 是為大型應用程序設計的，它促進了 TypeScript，這可能會在你嘗試之前引發一些阻力。

另一個值得注意的事情是大量使用 Rx 庫中的 observables，這非常好。 您可以將幾乎任何東西表示為可觀察對象，並應用高級操作，如 map、filter 等。如果您使用過 Lodash 或 Underscore，Rx 是相同的，但使用的是類固醇。

以下是我們在本文中討論的四個框架的核心特性的總結：

如果您需要在兩端燒毀蠟燭才能有效地使用它們，那麼我們簡要概述的所有這些功能都是毫無價值的——這是下一點。

可用性

如果此時您仍然對您選擇的框架充滿熱情，那麼下一步就是動手。

由於您的背景，該框架可能非常適合您。 也許它有點不同，並在某些方面挑戰你。 您還不知道，在您自己嘗試之前，再多的閱讀或觀看教程也無濟於事。

了解框架的最佳方式是在一些小型項目中使用它。 這使您有機會使用給定的框架解決上述日常問題。

在進行項目時，花點時間思考一下您是否富有成效。 達到預期結果有多容易？ 您必須尋找外部庫嗎？ 也許你需要一些來自社區的插件。 在框架範圍內是否有任何常規結構或指導方針？ 也許有一個 CLI 來加速開發過程。 在這一步，您正在收集基本經驗，因此您可以思考如果您將這個框架用於即將進行的項目甚至轉換現有項目會是什麼樣子。

Ember 被認為是一個非常高效的框架，至少對於它的核心用戶來說是這樣。 它帶有一個 CLI，這真的很有幫助。 您可以使用自己的測試套件生成路由、控制器、組件和模型。 手動完成所有這些是一項乏味的任務。 也可以生成一個新項目。 它將創建基本的文件夾結構、安裝必要的包、構建工具、測試環境等。如果您從未使用過 CLI 到這種程度，您會非常高興。 但是，正如我之前提到的，Ember 非常固執己見。 儘管有這些好處，但您在嘗試完成常見任務時可能會感到沮喪。

現在對於 React 和 Vue，他們有某種 CLI，create-react-app 和 vue-cli。 但是除了生成帶有一些選項的初始項目之外，與 Ember 或 Angular 相比，它們並沒有提供那麼多。 這是可以理解的，因為它們都代表一個視圖層。 如果您喜歡基於項目的自定義工作流程、實驗或不同的結構，那麼您來對地方了。 對於一些開發人員來說，靈活性是使用 React 或 Vue 固有的關鍵。

Angular 4 像 Ember 一樣帶有 CLI。 您可以生成組件、指令、服務等。它還為應用程序生成初始結構，因此您只需要擔心產品。 測試環境非常好，因為對於每個生成的應用程序，測試套件都靠近它（字面意思）。 除此之外，TypeScript 可能會提供真正的生產力提升。 原因如下：

你有多少次遇到過這樣的代碼......

 function doSomething(someData) { // do something }

…並且想知道someData是什麼，它應該有什麼屬性，它應該提供什麼功能，以及它們的行為是什麼？ 使用 TypeScript，您可以定義類型並期望得到適當的數據。 如果您使用一些支持 TypeScript 的 IDE，它可以走得更遠。 您可以輕而易舉地探索應用程序的不同部分。

我們還沒有接觸過 IDE，但是對於大多數流行的框架，都有一些插件可以讓開髮變得非常容易。 例如，WebStorm 內置了對 Angular、React 和 Vue 的支持。

易於集成（與其他庫）

最後但並非最不重要的一點是，這可以被認為是可用性的一部分，但它非常重要，值得擁有自己的部分。

無論您選擇的框架功能多麼豐富，您都可能會遇到需要額外工具的問題。 有很多優秀的庫專注於一個問題，無論是 DOM 操作、數據處理、時間格式化、富文本編輯等。如果您嘗試集成其中一個並每次都花費數小時，那麼這可能不是最佳選擇.

測試這很容易。 您可以快速想出一些需要某個庫的想像場景。 看看你過去的項目； 您一直在使用哪些工具以及在哪些場景下使用？ 你很有可能會再次遇到同樣的情況，你想為此做好準備，或者至少有一個期望。

並非所有的庫都支持 TypeScript。 由於 Angular 大量使用它，一些 TypeScript 的優點可能會在使用這樣的庫時消失。 當然，您可以找到解決方法，但這有點麻煩。 由於 Angular 的流行，您可以在庫本身的頁面上集成說明。

對於 Vue 和 React，您幾乎負責所有事情，使用其他庫也不例外。 如果您使用的是 Webpack 或類似的構建工具，您可以直接引用使用 NPM 安裝的庫。 我發現 Vue 使用社區插件有點麻煩，尤其是當它們也包含用戶界面邏輯時。

Ember 有 EmberObserver，這是一個社區插件網站。 他們每個人都有一個從零到十的分數。 這是一個尋找你需要的東西的好地方。 如果您輸入您喜歡的庫的名稱，例如 Lodash、Rx 或 Ramda，您會找到從簡單包裝器到完整重寫的相關插件。 當然，還有 Awesome React 和 Awesome Vue 存儲庫，它們收集相關資源，包括庫，但我發現 EmberObserver 特別有用。

致力於 JavaScript 框架

選擇正確的 JavaScript 框架是使您的 Web 項目成功的最重要步驟之一。 無論您是從事小型項目還是大型項目，無論您是獨自工作還是團隊合作，這些細節中的每一個都在確定哪個框架最適合您的項目（而不是您可能更喜歡哪個框架）方面發揮著至關重要的作用）。

至於核心特性和可用性，我列出了不同程度影響開發人員生產力的要點。 可用性特別棘手，因為它在很大程度上取決於您的經驗和背景以及您所在的公司或組織。

隨著時間的推移，我們在本文中討論的框架可能會發展，它們的流行度可能會發生變化，它們適合的項目可能會發生變化，但本文應該讓您大致了解這些框架中的每一個可能在哪些方面發揮最佳作用。