如何选择最好的前端框架

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 项目成功的最重要步骤之一。 无论您是从事小型项目还是大型项目，无论您是独自工作还是团队合作，这些细节中的每一个都在确定哪个框架最适合您的项目（而不是您可能更喜欢哪个框架）方面发挥着至关重要的作用）。

至于核心特性和可用性，我列出了不同程度影响开发人员生产力的要点。 可用性特别棘手，因为它在很大程度上取决于您的经验和背景以及您所在的公司或组织。

随着时间的推移，我们在本文中讨论的框架可能会发展，它们的流行度可能会发生变化，并且它们适合的项目可能会发生变化，但本文应该让您大致了解这些框架中的每一个可能在哪些方面发挥最佳作用。