编者注:本文由我们的编辑团队于2023年1月23日更新. 它已被修改，以包括最近的来源，并与我们目前的编辑标准保持一致.

JavaScript世界是一个丰富的环境，有许多工具、库和框架. But with lots of options comes lots of confusion. The situation really is a double-edged sword.虽然你可能有大量的创造力和实验空间, 您经常无法确定要选择的最佳前端框架. 从长远来看，选择正确的前端框架可以成就或破坏您的项目.

在本文中, 我们将介绍一些最流行的前端JavaScript框架，以及它们之间的对比. 我们将研究这些框架的五个不同方面，以简化决定下一个JavaScript框架的过程.

您是否正在从这些流行的前端JavaScript框架中进行选择, 或者更深奥的东西, you should take each of these aspects into consideration.

Key No. 1 to Front-end JS Frameworks: Availability of Learning Resources

This one is obvious but oftentimes overlooked. 而一些框架的华丽主页和文档可能会吸引您的眼球, 你还需要额外的课程, books, tutorials, 和文章开始.

创建一个健壮的框架是一回事，传达其背后的核心思想是另一回事. 事实上，有许多专业开发人员专门从事指导工作. 一个精心制作的学习资源会极大地缩短你的学习曲线. 从你以前接触过的值得信赖的作者那里寻找资源——最终会值得你花时间. If you are struggling to find something useful, be careful: The framework you are trying to learn might be new, 或者还没有被社区很好地采用.

虽然我提到了单靠文档是不够的，但也有例外. Ember.例如，Js就有 伟大的文档. 核心特性和用例在这里和那里用通用示例进行了很好的描述. 不幸的是，除了文档之外，我们几乎没有其他东西了.

On the other hand, there are abundant resources for Angular and React. 几乎所有面向前端的教育网站都会有一些关于它们的文章, 如果没有完整的视频课程或书籍.

Vue处于中间:它有很好的文档，并且有一些有用的课程可供选择. Aurelia has almost no resources; your only hope is documentation—and luck.

Even if you read a suitable book or follow a helpful course, 通过接触不同的资源，你会学到新的东西. 如果你对这个主题很熟悉，那就略读并找出那些还不太清楚的主题.

不幸的是, this strategy won’t work if you are limited with your options, 这就引出了下一个问题.

Key No. 2到前端JS框架:流行

You might take pride in learning something exotic, but if you look at this from a business perspective, 它并不总是有用的. 您的公司或客户可能更喜欢使用经过实战测试的工具集，这有几个原因. 如果一个框架不那么流行，这意味着很少有专门研究它的开发人员. What happens if you abandon the project or find a new job? 你的雇主最终会寻找一个了解你使用的利基框架的开发人员.

This situation might become a real burden for a company. 即使你坚持这个项目，它也会成长. 现在用人单位需要更专业的开发人员来加快开发.

选择流行的、广泛使用的框架还有其他原因. 如果你发现自己被一个问题困住了，而且没有一个社区可以帮助你，会发生什么呢? 由于您需要自己处理文档，因此很可能会浪费大量时间.

除此之外，你要考虑未来，在你的职业生涯中更有吸引力的机会. If you specialize in something popular and get really good at it, there will be plenty of projects out there for you.

The obvious leaders in popularity are Angular, React, and Vue. 大多数与前端相关的工作列表都要求其中之一. 他们得到了谷歌和Facebook的支持, respectively, and therefore employers feel safe choosing them.

Sometimes, the choice of framework for your company or client is not up to you; maybe it was made by a previous employee or some other person on the team. 很有可能是Angular或React. Now there are other options out there like Ember.js和Vue，但你必须有意识地寻找使用它们的公司.

您可以通过查看项目在GitHub和其他地方的表现来大致确定框架的受欢迎程度. 以下是一些统计数据:

尽管这些框架已经存在了足够长的时间，证明它们是受欢迎的选择, 如果你在尝试新的东西, similar statistics for them may help you make the choice.

在你的职业生涯中，只学习Angular或React只能走这么远. 当然，您将有很多机会，但是存在其他框架是有原因的. 试着在业余时间了解它们，偶尔做一些实验. Even if you never use them in real projects, 您将获得对您日常开发工作有帮助的有价值的见解.

Key No. 3 to Front-end JS Frameworks: Core Features

在开始编码之前，您需要对框架的核心特性进行简要概述，以获得充分的预期. 浏览文档. 您需要对这个框架有一个大致的了解. Is it a view layer only, fully fledged, or something in between?

如果您有丰富的其他框架的经验，这个过程是简单和快速的. Look for the following topics in the documentation: templating, 状态管理, HTTP通信, 表单处理和验证, and routing. These are everyday things you do as a developer. Not all of these may be presented in the core framework, or there may be some different approach to a particular problem.

让我们简单介绍一下流行的选项.

我们从 React and Vue. They are not really frameworks; they only represent the view layer of your application. 这意味着所有其他部分——http通信、表单处理和验证等.-由你决定.

正如我刚才提到的，形势可能是一把双刃剑. Eventually, you’ll end up building your own custom framework.

React和Vue都有自己的库生态系统，可以为最常见的问题提供解决方案, but the overall structure will vary from project to project. React’s JSX has always made me cringe—I had to get used to it. 然而，Vue的模板真的很好，特别是如果你来自Angular.

另一方面，烬.Js几乎什么都有. 令人惊讶的是，烬的核心.js does not provide advanced form processing; it has some input helpers and that’s it. It is very opinionated and even has its own data layer. 如果你有其他框架或JavaScript的背景, 你可能会感到沮丧，因为烬.js uses its 自己的对象模型. 正如文档所述，标准ES6类并没有被广泛使用. 你可能会发现自己直接给属性和Ember赋值.我在抱怨. 每件事都必须完成，烬.js way.”

Ember Data 是另一种方式烬.js differs significantly from other frameworks. 它是Ember的数据层.js应用程序. You can think about it like some kind of ORM for the front end. You create models and map the relationships among them.

如果您的服务器使用 JSON API (一种实现JSON api的规范)，你在Ember上处于一个很好的位置.js, but, unfortunately, most servers do not use it. So you have to write custom adapters and serializers. 然而，如果你做的事情烬.以我的方式，尽管学习曲线陡峭，但它可能真的很有成效.

Angular是一个功能丰富的框架. 它附带了很多像Ember这样的模块.js, so you have a ton of tools at your disposal out of the box. However, as Angular is intended for large applications, it 促进打印稿, which might trigger some resistance before you even try it.

另一个值得注意的方面是大量使用Rx库中的可观察对象——这是一个很好的特性. 你几乎可以将任何东西表示为一个可观察对象，并应用高级操作，比如map, filter, etc. 如果您使用过Lodash或Underscore，那么Rx就像一个增压的表兄.

以下是本文讨论的四个框架的核心特性总结:

However, 如果您需要加班工作才能有效地使用它们，那么我们讨论的所有功能都是毫无价值的——下一点.

Key No. 4 .前端JS框架:可用性

如果在这一点上，您仍然对您选择的框架有热情, 下一步就是亲自动手.

也许因为你的背景，这个框架很适合你. 也许它有点不同，在某些方面对你有挑战. 你还不知道, 在你自己尝试之前，再多的阅读或观看教程也无济于事.

了解框架的最好方法是在一些小型项目中使用它. 这为您提供了一个使用给定框架解决日常问题的机会.

当你在做一个项目的时候，花点时间思考一下你的工作效率是否很高. How easy is it to achieve the desired result? Do you have to look for external libraries? Maybe you need some plugins from the community. 在该框架的上下文中是否存在任何常规结构或指导方针? Maybe there is a CLI to accelerate the development process. At this step, 您正在收集基本信息，以便您可以想象如果将此框架用于即将到来的项目或甚至过渡到现有项目将会是什么样子.

Ember.Js被认为是一个非常高效的框架，至少对它的核心用户来说是这样. 它有一个 CLI，这真的很有帮助. 你可以生成路由, controllers, components, 并且模型具有自己的测试套件(手动完成所有这些是一项乏味的任务). 生成一个新项目也是可能的. 它将创建基本的文件夹结构, 安装必要的软件包, build tools, 测试环境, etc. 如果您从未如此广泛地使用过CLI，那么您将非常满意. 但是，正如我之前提到的，Ember.js is very opinionated; despite all of its usefulness, 你可能会发现自己在试图完成普通任务时感到沮丧.

React和Vue都有cli， create-react-app and vue-cli. But besides generating an initial project with some options, they don’t offer that much compared to Ember.js or Angular. This is understandable as they both represent a view layer. 如果你喜欢自定义工作流, 实验, or different structures on a project-to-project basis, then you are in a good place with React and Vue. 对于一些开发人员来说，灵活性是关键，并且在使用React或Vue时是固有的.

Angular有一个 CLI just as Ember.js does. You can generate components, directives, services, etc. It also generates the initial structure for an application, so you only need to worry about the product. The testing environment is really organized as, 应用程序的每个生成部分, 测试套件就在它附近(字面上). 除此之外，TypeScript可以提供 真正的生产力提升. Here’s why:

How many times have you encountered code with lines like this…

doSomething(someData) {
    //做某事
}

想知道到底是什么 someData 它应该有什么属性，它应该提供什么功能，它们的行为是什么? 使用TypeScript，你定义类型并期望得到适当的数据. You can go further if you use some IDE with TypeScript support. It’s a breeze to explore different parts of the app.

我们还没有涉及ide，但是, 对于大多数最好的前端框架, there are some plugins that make development really easy. WebStorm例如，它内置了对Angular、React和Vue的支持.

Key No. 5到前端JS框架:易于与其他库集成

Ease of integration could be considered part of usability, but it’s so important that it merits its own section.

No matter how feature-rich your selected framework is, 您可能会遇到需要额外工具的问题. 有一些很棒的库只关注一个问题(DOM操作), 数据处理, 时间格式, 富文本编辑, etc.), 但是如果你试着积分其中的一个并且每次都要花上几个小时, 这可能不是最佳选择.

测试这一点非常容易. 您可以很快想出一个需要某个库的假想场景. 看看你过去的项目:你使用了什么工具，在什么情况下? 很有可能你会再次遇到同样的情况，你需要为此做好准备, 或者至少有一个期望.

使用Vue和React, 你几乎要对一切负责, and use of other libraries is no exception. If you are using Webpack or a similar build tool, you can directly refer to libraries installed using NPM. (我发现使用Vue的社区插件有点麻烦, especially when they contain user interface logic as well.)

Ember.js has EmberObserver，一个社区插件网站. Each of them has a score on a scale from 0 to 10. It is a really fruitful place to look for something you need. If you type in the name of your favorite libraries, like Lodash, RxJS, or Ramda, 从简单的包装器到完整的重写，您将找到相关的插件. 当然有 Awesome React and Awesome Vue, repositories which gather related resources, 包括库, but I have found EmberObserver to be especially useful.

Committing to a Front-end JavaScript Framework

选择正确的JavaScript框架是使web项目成功的最重要的步骤之一. Whether you are working on a small or large project, 单独或团队工作, 在确定项目的最佳前端框架时，这五个关键点中的每一个都起着至关重要的作用.

至于核心功能和可用性, 我已经列出了会在不同程度上影响开发人员生产力的要点. 可用性尤其棘手，因为它在很大程度上取决于你的经验和背景, 以及你的特定公司或组织及其需求.

Over time, 我们在本文中讨论的框架可能会发展, 他们的受欢迎程度可能会改变, and the projects they are suitable for may change, 但是本文应该让您对这些框架在何时何地发挥最佳作用有一个总体的了解.