你的web应用需要一个前端框架吗？_程序员人生_博客_测评&博客

您可能听说过前端框架。像React、Vue和Angular这样的名字在教程和黑客新闻辩论中比比皆是。如果您想知道为什么以及何时使用这些框架，以及是否该在项目中实现这些框架，那么您并不孤单。几年前，当我在一个辅助项目Hackterms上工作时，我自己的前端变得很笨拙。我对实现一个框架是正确的下一步有一种松散的感觉，但我对他们所做的几乎一无所知。（我们将在文章的最后回到结果。）这是我当时希望得到的解释。在这篇文章中，我们将鸟瞰前端框架试图解决的问题以及您何时可能需要使用它。

具体来说，我们将回顾：

前端如何增长。
在扩展时可能会遇到的体系结构问题。
前端框架如何帮助解决这些问题。
您可能会考虑的其他替代方案。

简而言之：“前端框架”是一个复合形容词，因此有一个连字符。但是，你的应用程序有一个“前端”名词，没有连字符。

要查看的一些术语

我们将讨论一些前端框架（您可能已经从标题中得到了一些提示），因此让我们在同一页讨论术语：

软件框架是一个预先编写的应用程序结构，供您在其上构建。实际上，它是一个文件和目录的集合，您可以将自己的代码和文件添加到其中。框架旨在通过解决常见的开发问题来帮助您更快地构建应用程序，通常从以下几个方面开始：

样板代码，涵盖大多数应用程序重用的功能。
一种目录结构，通常遵循一种设计理念。
您的应用程序类型经常遇到的一组设计原则。执行这些原则的框架，如RubyonRails，通常被称为固执己见。

前端是应用程序的表示层。它通常被描述为用户看到的所有东西，但更一般地说，它是负责高效地向用户显示数据的任何代码。因此，前端包括构建直观和愉快的界面，以及有效地存储、呈现和更新从后端或API接收的数据。

前端框架是构建前端的脚手架。它通常包括一些方法来构造文件（例如，通过组件或CSS预处理器）、发出AJAX请求、设置组件样式以及将数据与DOM元素关联。

不断增长的应用程序

您可以用三个文件构建一个简单的前端：HTML、CSS和JavaScript。但是，随着应用程序的扩展，您的文件也会随之增长，充满了难以理解和维护。

按照传统，让我们看一个愚蠢的例子：假设您正在构建MySquare，一个面向有竞争力的棋盘游戏玩家的排行榜。在这个应用程序中，用户可以分享他们玩过的棋盘游戏，他们的联盟认可的竞争结果（现在有一个联盟，名列前茅），以及对竞争对手的简短评论。应用程序最重要的功能是用户配置文件页面：

您将使用三种基本技术（HTML、CSS和JavaScript）构建此概要文件页面的第一个版本。它的工作原理如下：

在初始页面加载时，后端最初以最小的样式发送空白配置文件页面。然后，对于所有将来的加载，前端通过AJAX请求用户数据。
后端以JSON的形式发送一些公共用户数据，您可以使用JavaScript将游戏徽章和记录的DOM元素动态附加到页面上。
当您决定构建列出所有用户及其记录的特定于游戏的页面时，创建新的JavaScript文件，复制大部分代码，因为它们是基于相同的游戏数据绘制的。
每个游戏徽章（和比赛徽章）使用相同的HTML，因此将标记存储在JavaScript字符串中，并找出将特定于游戏的数据注入其中的方法，例如：“<p>{{Game Name}}</p>”。然后，您将每个游戏的徽章HTML附加到页面上。
当用户更新页面上的某些值时，您可以通过查询属性从DOM读取数据，或者通过将事件侦听器附加到每个元素，通过从DOM读取数据来获取数据。

随着MySquare的流行和数据集的增长，这种方法很快就会变得难以使用：

您发现自己将数据附加到页面，然后通过抓取值或读取id或数据属性从DOM中读取数据。
JavaScript和CSS文件气球的数量，它们之间有许多重复的代码。
您将事件侦听器绑定到常见的UI元素，如输入字段和按钮，然后编写函数来更新这些元素中的值。
当您需要进行哪怕是很小的更改时，您担心它将如何影响应用程序的其余部分。
当您的朋友提出帮助您进行开发工作时（当然是为了公平起见），您会花费数小时来解释代码的工作方式。

管理这些问题是可行的香草JavaScript和足够的耐心。有了计划和先见之明，你也许可以构建你的应用程序来预测其中的一些问题。然而，随着前端的增长，这些问题只会加深，您永远无法确定应用程序将如何发展。

您意识到，将数据存储在DOM中并无限地附加存储在JavaScript字符串中的HTML并不是处理此项目的最佳方法。

输入，框架

前端框架的存在是因为对于许多应用程序来说，前端以可预测的方式增长和紧张。虽然每个流行的框架都提供了自己的设计理念，但它们都试图解决我们之前遇到的一般问题：

您的代码应该是可维护的：便于您和其他人阅读、测试和更改。
复杂的接口通常由相同的组件组成。您应该能够创建和重用这些组件，以便轻松地创建新页面。
由于DOM操作很慢，您希望执行尽可能少的元素更新。
您应该能够轻松地基于数据操作UI。
您的UI应该是一致和直观的；这意味着标准化排版、颜色和，按钮、输入和其他元素。
在解决这些常见的前端难题时，您不需要重新设计轮子和编写大量的样板文件。
您应该有一种通用语言，通过它与其他开发人员交流您的想法和模式。

不同的框架解决了其中的一些问题，但通常不是全部。一些，比如Bootstrap和SemanticUI，专注于创建可读的、可维护的HTML和CSS，强调一致的视觉设计。其他的，如Vue、React和Angular，则擅长在整个应用程序中构建数据流，使您能够专注于操作数据而不是DOM。

如果实现一个流行的前端框架，比如React，MySquare会是什么样子？以下是您可能会经历的一些变化：

您可以创建可重用的HTML/CSS/JavaScript组件，其中包含游戏徽章、比赛记录和其他公共元素的数据占位符。然后，框架将根据传入的数据（我们从服务器或api获得的JSON）呈现这些元素。例如，如果JSON有九个游戏记录，我们将呈现九个组件，并自动插入匹配数据。
您将按照样板目录结构创建组件、脚本和样式表，以便于遵循和维护。需要改变游戏记录的结构和样式吗？找到小型的、独立的组件并进行更改。
您将能够利用最新的JavaScript功能以及类似SASS的CSS预处理器来编写简洁、富有表现力的现代代码。这个框架将把它转换成浏览器可以理解的HTML/CSS/JavaScript。
有了这个基础设施，您可以集中精力处理数据，而不用担心DOM。我们框架的数据绑定特性将在数据更改时自动重新呈现相关组件。例如，如果您从服务器接收到有关新匹配结果的数据，框架将自动将另一个组件附加到屏幕上。
如果您发现自己遇到问题，可以利用框架社区获得帮助。解释问题应该更容易，因为您遵循的框架惯例有助于构建流行的前端功能。
因为流行的框架通常遵循类似的设计原则，所以与其他开发人员协作会更容易，即使是那些不在您的特定框架中开发的人，您也不需要让新开发人员了解您自己的自定义代码结构。

关注点分离

理想情况下，您希望前端作为一个独立的应用程序运行，从后端请求数据、处理并显示数据（您可能会听到这种说法称为“使用API”）。支持这一点的原则被称为“关注点分离”，它指出程序的每个部分都应该独立运行，有明确的单一目的，并通过定义良好的接口进行通信。尽管您的前端不必实现一个框架来遵循关注点分离原则，但大多数框架都支持这种架构模式。

由此产生的模块化设计的优点是，开发人员可以独立地处理应用程序的不同部分，只要他们的组件接受可预测的输入并提供可预测的输出。拥有一个具有单一职责的前端（由遵循相同原则的模块化组件组成）使其易于适应变化。例如，如果您决定从Angular转移到React，您可以自信地这样做；两个框架都希望从后端获得数据，因此您可以关注React的接口如何接收数据以及如何使用数据，而不是前端如何嵌入到更大的应用程序中。

作为应用程序的专用视图层，前端应全权负责以下方面的逻辑：

哪些元素应该显示或隐藏
何时请求数据或将更新发送到服务器
何时显示简单的验证和错误消息
根据数据做出哪些样式选择

这里有两个MySquare场景：一个是架构遵循关注点分离，另一个是违反关注点分离。看看你能不能找出哪个是哪个！

后端发送一个游戏记录列表；每个记录包含一个分数、两个玩家的名字和比赛日期。前端为每场比赛附加一个HTML组件，根据谁赢了比赛，背景颜色为红色或绿色。
后端发送一个游戏记录列表；每个记录包含一个分数、两个玩家的姓名、比赛日期和一个用于赢/输比赛样式的颜色十六进制代码，根据请求代码的配置文件计算。前端为每个匹配添加一个组件，用后端发送的背景色设置样式。

你抓到违规行为了吗？后端不应该与样式有关。这种逻辑应该存在于前端，它决定了数据的显示方式。如果你的设计师想要美化MySquare的设计，他们不必担心数据结构。

使用框架的优点

让我们回顾一下采用前端框架将有助于我们快速增长的应用程序的主要方式：

可维护性：将应用程序分解为可重用的独立组件，可以更轻松地进行快速更改，而不会影响应用程序的其余部分。
关注点分离：现代框架设计鼓励可维护的模块化体系结构，并允许前端开发人员专注于他们最擅长的方面：以直观高效的方式获取数据并将其显示给用户。
速度：针对常见问题的样板代码使应用程序更容易启动和运行；基于组件的设计使开发更快。
协作：由于框架通常遵循类似的设计模式，新加入您的代码库的开发人员更容易开发和维护您的应用程序。
社区：流行框架有一个社区，周围有专门的教程、论坛、会议，一般支持您的开发人员，您可以向他们寻求帮助。

缺点和替代方案

当然，与任何工具一样，前端框架并不总是适合您的应用程序。在实施之前，需要考虑以下几个因素。

缺点

抽象的开销代码：在您完全熟悉它之前，框架代码是一个黑匣子。很难辨别代码中有多少对您的应用程序有帮助，也很难修复由您不熟悉的代码导致的错误。
学习曲线：学习如何有效地使用框架需要时间。为了提高效率，您需要理解框架如何工作背后的语法、工具和原理。对于速度至关重要的项目，学习一项全新的技术可能不是最好的利用时间的方法。
对于较小的项目，过度使用：如果您希望部署一个静态站点或每个组件都是唯一的站点，您可能不需要完整框架的强大功能和开销。实现一个最小的框架甚至库可能还是有帮助的，我们将在下一节讨论这些问题。
设置：根据您的特定用例设置和定制框架需要时间。如果速度是必要的，那么就按照你所知道的去做，或者按照你的开发团队所熟悉的去做。
强烈的意见：一个固执己见的框架可能会让人感到压抑，它的设计原则可能会与你的冲突。一定要研究你正在实现的特定框架。如果您喜欢从头开始构建，请使用您自己的解决方案。
生态系统演化：JavaScript框架生态系统是出了名的不稳定的。现在最热门的框架明年可能不会流行，随着这种转变，开发人员和支持可能很难找到。

替代品

除了Vue、React和Angular等大型JavaScript框架之外，还有一些替代方案。正如我们前面提到的，不同的前端框架试图解决不同的问题。根据您的需要，较小的框架和库可能适合您。此外，您可以放弃关注点的分离，使用带有服务器端呈现视图的monolith全栈应用程序。这里有一些可供考虑的替代方案：

模板化引擎：如果您只需要可重用组件，请考虑像这样的模板化引擎车把.js，EJS公司，下划线.js，或胡须。这些引擎允许您存储HTML/CSS/JavaScript组件并将JavaScript变量插入其中。我在本文开头提到了如何扩展我的项目Hackterms。回想起来，我绝对应该使用一个成熟的框架。然而，当时我时间和耐心都不够，所以我成功地使用了把手来创建可重用的模板。

CSS框架和库：如果您希望创建一致的UI，Bootstrap、SemanticUI、Bulma或Tailwind等工具可能是一个不错的选择。有人曾经把使用CSS框架描述为“让一个设计师在你身后看着你，推动你走向好的实践。”你不必继承这些框架的视觉设计，但是对于一个没有强大设计背景的开发人员来说，知道要使用多少种字体，不同的按钮状态，以及直观的形式是什么样子。

全栈monolith应用程序：许多全栈框架，如Ruby on Rails，流星.js，和Django，都有自己的模板引擎，在服务器上呈现HTML。服务器端呈现和monolith体系结构都是值得自己发表博文的概念，但您可以将此选项视为为为整个应用程序选择一个完整的堆栈框架，并在单个代码库中编写表示层和服务器逻辑。大多数全栈框架确实允许您插入自己选择的前端框架，但默认情况下您使用自己的模板引擎。如果您想在整个应用程序中使用单一框架，这是一个很好的解决方案；它也可以作为一个快速的方法来原型化一个完整的堆栈应用程序。

总之

前端框架是开发复杂用户界面的强大工具。它们鼓励您构建一个可维护的、模块化的、独立的体系结构，使您可以轻松地构建应用程序并与其他开发人员协作。流行的框架由支持社区、丰富的文档和教程提供支持，并提供经过战斗测试的代码，以解决前端在扩展时带来的常见挑战。框架允许您利用最新的JavaScript特性，并提供工具，使应用程序原型化变得容易。最后，他们为您提供了一种共享的语言来讨论您的体系结构和挑战。

前端框架和库的形状和大小多种多样您可以使用成熟的UI框架构建整个前端，实现CSS库以加强视觉设计，或使用模板引擎创建可重用组件。

然而，对于较小的项目和原型来说，前端框架可能过于复杂，陡峭的学习曲线，再加上快速发展的JavaScript生态系统，使得在一个年轻的项目中实现变得困难。最后，如果您对学习经过良好测试的设计原则感到兴奋，希望前端能够扩展，或者在性能不是主要问题时需要快速原型化，那么您应该实现一个流行的框架。如果您喜欢透彻地了解应用程序的每一部分，或者不想学习新技术，那么这可能不是最佳选择。

希望本概述能让您了解前端框架解决的问题，以及它是否适合您的下一个项目。您对前端框架的体验如何？你选择的框架是什么？期待您的评论！