如何选择最佳的前端框架

本文概述

• 学习资源的可用性
• 人气度
• 核心功能
• 易用性
• 易于集成(与其他库)
• 致力于JavaScript框架

JavaScript世界是一个包含数十种工具, 库和框架的丰富环境。但是, 有很多选择会带来很多混乱。这确实是一把双刃剑。

尽管你有大量的创造力和实验空间, 但有时你不确定选择哪种库或框架。

从长远来看, 你选择的前端框架可以创建或破坏你的项目。

在本文中, 我们将介绍一些最受欢迎的JavaScript框架, 以及它们之间的相互关系。我们将研究这些框架的五个不同角度, 它们通常可以简化决定下一个JavaScript框架的过程。

无论是从这些流行的JavaScript框架之一中选择, 还是从更深奥的东西中选择, 都应考虑到这些方面中的每一个。

学习资源的可用性

这是显而易见的, 但常常被忽略。尽管某些框架的精美主页可能会引起你的注意, 但除了无聊而枯燥的文档之外, 你仍然需要一些其他课程, 书籍, 教程和文章, 以帮助你入门。

创建一个很棒的框架是一回事, 传达其背后的核心思想是不同的。实际上, 那里有许多专门从事教练工作的专业开发人员。精心设计的学习资源将极大地缩短你的学习曲线。

从你以前有过经验的值得信赖的作者那里寻找资源, 这最终值得你花时间。如果你难以找到有用的东西, 请保持谨慎：你尝试学习的框架可能是新的, 或者未被社区广泛采用。

尽管我提到仅凭文档是不够的, 但还有一些例外。例如, EmberJS具有出色的文档。到处都有通用示例很好地描述了核心功能和用例。不幸的是, 除了文档之外, 我们几乎没有其他资源书籍, 视频课程或其他材料。

另一方面, Angular和React有很多资源。几乎任何面向前端的教育网站都会有关于它们的一两篇文章, 甚至可能是完整的视频课程或书籍。

Vue居于中间：它具有良好的文档说明, 并且你可以选择一些不错的课程。

例如, 奥雷利亚(Aurelia)的资源几乎为零；你唯一的希望就是文档和运气。

我喜欢选择。

即使你阅读了不错的书或课程, 也有可能通过将自己暴露于不同的资源而学到新的东西。如果你熟悉该主题, 通常你可以浏览并寻找可能尚不清楚的区域。

不幸的是, 如果你的选择有限, 那么该策略将行不通, 这将导致我们进入下一个观点。

人气度

你可能会以学习异国情调而感到自豪, 但是如果你从业务角度来看这件事, 那就不一样了。你的公司或客户可能更喜欢使用经过考验的工具集。

有几个原因。如果框架不那么流行, 则意味着有一些专门从事该框架的开发人员。如果你放弃该项目或找到新工作会怎样？你的雇主最终被困在寻找知道你使用的框架的开发人员。

这个过程可能成为公司的真正负担。即使你坚持该项目并且项目不断发展, 同样的事情仍然适用。现在, 雇主需要更多的开发人员来加速开发。

还有其他一些个人原因, 为什么你会选择一个流行的, 广泛使用的框架。如果你发现自己遇到了一些问题而又没有一个真正的社区可以寻求帮助, 该怎么办？由于你自己拥有文档, 因此很可能会浪费大量时间。

除此之外, 你还需要考虑职业生涯中未来, 更具吸引力的机会。如果你专门研究流行的东西并且真的很擅长, 那么将会有很多项目供你选择。

这里最明显的领导者是Angular和React。

大多数与前端相关的职位列表都需要一个或另一个。他们分别得到Google和Facebook的支持, 因此雇主对其选择感到”安全”。

有时, 你公司或客户的框架选择不由你决定；也许是以前的员工或团队中的其他人制作的。可能是Angular或React。现在还有其他选择, 例如Ember和Vue。但是, 你必须故意寻找使用它们的公司。

你可以通过快速查看该项目在GitHub和其他地方的运行情况来确定框架的受欢迎程度。这是撰写本文时收集的一些统计信息：

尽管这些库已经存在了很长时间, 足以证明它们是流行的选择, 但是如果你尝试一些真正的新东西, 则类似的统计数据可能会帮助你做出选择。

仅学习Angular或React只会使你走上职业。当然, 你将有很多机会, 但是有其他框架存在的原因。尝试在业余时间了解它们, 并偶尔进行一些实验。即使你从未在实际项目中使用过它们, 也将获得宝贵的见解, 从而在日常开发工作中为你提供帮助。

核心功能

现在让我们来一点技术。

开始时, 你希望简要概述框架的核心功能, 以便在开始编码时有足够的期望。为此, 请仔细阅读文档。你需要大致了解此框架的含义。它是仅视图层, 完全成熟的视图层, 还是介于两者之间的视图层？

如果你以前在其他框架上有丰富的经验, 那么此过程将非常简单快捷。在文档中查找以下主题：模板, 状态管理, HTTP通信, 表单处理和验证以及路由。这些都是你作为开发人员要做的日常工作。并非所有这些都可以在核心框架中提供, 或者对于特定的问题可能有一些不同的方法。

让我们简要介绍一下热门选项。

我们将从React和Vue开始。它们并不是真正的框架。它们仅代表应用程序的视图层。这意味着其他所有部分(HTTP通信, 表单验证等)都由你决定。

正如我之前提到的, 它可能是一把双刃剑。最终, 你将最终构建自己的自定义框架。他们两个都有自己的库生态系统, 可以为最常见的问题提供解决方案, 但是整个项目的整体结构会有所不同。

React的JSX总是让我感到畏缩。我不得不适应它。但是Vue的模板确实很棒, 特别是如果你来自Angular。

另一方面, Ember几乎拥有一切。令人惊讶的是, Ember的核心不提供高级表格处理。它只有一些输入助手, 仅此而已。它很自以为是, 甚至有自己的数据层。一切都必须以”灰烬之路”完成。

如果你一般在其他框架或JavaScript中都有背景, 则可能会因为Ember使用自己的对象模型而感到沮丧。根据文档说明, 标准ES2015类并未得到广泛使用。你可能会发现自己直接将值分配给属性, 而Ember抱怨它。

与其他框架明显不同的是Ember Data。它是Ember应用程序的数据层。你可以像前端的某种ORM那样考虑它。你创建模型并映射它们之间的关系。

现在, 如果你的服务器使用JSON API(这是用于实现JSON API的规范), 那么使用Ember的位置就很好, 但不幸的是, 大多数服务器都没有。因此, 你必须编写自定义适配器和序列化器。但是, 如果你以Ember方式进行操作, 则可能会非常有效。它的学习曲线很陡。

Angular 2是一个功能丰富的框架。它附带了许多模块, 例如Ember, 因此你可以立即使用大量工具。但是, 由于Angular用于大型应用程序, 因此它会促进TypeScript, 这可能会在你尝试之前引发一些阻力。

另一个值得注意的事情是Rx库中可观对象的大量使用, 这确实很棒。你几乎可以将任何事物表示为可观察的事物, 并应用诸如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, 你可以定义类型并期待适当的数据。如果你将某些IDE与TypeScript支持一起使用, 则可能会更进一步。你可以轻松浏览应用程序的不同部分。

我们还没有涉及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项目成功的最重要步骤之一。无论你是从事小型项目还是大型项目, 无论是单独工作还是团队工作, 每一个细节都在确定哪种框架最适合你的项目中起着至关重要的作用(而你可能更不喜欢哪种框架) )。

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

随着时间的流逝, 我们在本文中讨论的框架可能会发生变化, 它们的受欢迎程度可能会发生变化, 并且它们适合的项目可能会发生变化, 但是本文应该使你大致了解这些框架在哪些方面可能效果最好。

有关：

• 哪些JS框架将在2020年引发前端革命？
• 挖掘用于前端开发的ClojureScript