为什么要使用前端框架以及如何选择

白酒永远的神

已于 2024-03-21 12:10:36 修改

阅读量944

点赞数 1

文章标签：前端框架 javascript 前端

于 2022-05-31 21:09:10 首次发布

在本章节我们开始大致了解框架, 简要回顾JavaScript和框架的历史,为什么框架会存在以及它们提供了什么, 如何开始考虑选择一个框架并学习, 以及对于客户端框架还有什么替代方案.

先决条件：	熟悉 HTML, CSS, 以及 JavaScript 语言的核心.
目标:	了解客户端JavaScript框架是如何存在的，它们能解决什么问题，还有哪些替代方案，以及如何选择一个框架.

简史

当JavaScript在1996被发布后, 它给网络增加了少许的交互性和乐趣, 直到那时, 网页仍由静态文档组成. 网络应该不仅仅是阅读,更是创造的地方. 随着JavaScript的流行. 使用JavaScript的开发者们创造工具来解决他们遇到的问题, 并且将其打包成称为库的可复用组件, 这样就能和他人共享解决方案. 这种共享库的体系帮助塑造了网络的增长.

现在, JavaScript是网络的基本部分, used on 95% of all websites, 而且网络又是现代生活的基本部分. 用户在网络上写文章, 管理预算, 听音乐, 看电影, 以及和相隔万里的人通过文字, 音频, 视频聊天来瞬时交流. 网络让我们能够做到那些过去只能在电脑上安装本地应用程序才能做到的事. 这些现代的, 复杂的, 具有交互性的网站通常被称为 网络应用程序.

现代JavaScript框架的到来加快了打造高度动态化和交互性强的应用程序的速度. 框架就是提供该如何构建应用程序的意见的库。这些意见能使应用具有可预测性和同质性。可预测性让软件能在扩展到很大规模的同时仍保持可维护性。可预测性和可维护性对于一个软件的长久健康运行是十分重要的。

在现代网络中，JavaScript框架为众多令人印象深刻的软件提供支持——包括许多你可能每天都使用的网站。你正在阅读的这个MDN Web 文档页面, 就是使用React / ReactDOM框架为其前端提供动力。

有哪些框架?

有很多框架可供你选择，但以下主要介绍目前公认的“四大框架”。

Ember

Ember于2011年12月发布，最初作为SproutCore项目的延续而开始。比其新式的替代品（例如React和Vue），作为老框架它的用户人数要少得多。但因其稳定性、社区支持以及一些明智的编程原则，它仍然享有很高的知名度。

Angular

Angular 是一个开源 Web 应用程序框架，正式发布于2016年9月14日。它由构建 AngularJS 的团队完全重写，并由 Google 的 Angular 团队以及个人和公司社区共同领导。

Angular 是一种基于组件的框架，使用声明式的HTML模板。在应用构建时，框架的编译器将 HTML 模板转换为优化好的 JavaScript 指令，这一过程对开发者是透明的。Angular 使用 TypeScript，它是 JavaScript 的超集，我们将在下一章中对其进行更多介绍。

Vue

在工作和学习了 AngularJS 的源码之后，Evan You （尤雨溪）在2014年第一次发布 Vue 。Vue 是“四大框架”中最年轻的，但在最近，它的人气迅速上升。

Vue，就像 AngularJS，用它自己的代码拓展了 HTML。除此之外，它完全依赖于现代的、标准化的 JavaScript。

React

Facebook 在 2013 发布了 React。在当时 React 已经被Facebook内部用来解决许多问题。严格来说 React 本身并不是框架，而是一个用来渲染UI 组件的库。 React 被用来组合其它用来构建应用的库 —— React 和 React Native 让开发者能够用 JavaScript 构建移动应用； React 和 ReactDOM 使他们能够被用来制作 web 应用程序等。

因为 React 和 ReactDOM 被经常放在一起使用，通俗地讲，React 可以被理解为是一个 JavaScript 框架。当你通读了这个模块时，我们将使用这种口语化的理解进行工作。

React 用类似 HTML 的语法的 JSX 拓展了 JavaScript。

框架为何会存在?

我们已经讨论了因为什么契机而创造了框架，但我们仍不知道为什么开发者认为有必要创造它。要知道这个问题的答案，我们首先需要检查软件开发中的各种挑战。

设想一个很常见的软件：一个To-Do清单创建器，在接下来的章节中我们会使用各种框架来实现它。这个应用应让用户可以完成诸如呈现任务列表、添加和删除任务等操作，且在完成这些操作的同时能可靠地跟踪和更新应用程序的底层数据。在软件开发中，这种底层数据被称为状态。

上述每个目标理论上都很简单。我们可以遍历数据来列出清单，添加一个对象来创建新任务，使用标识符来查找、编辑和删除任务。需要注意的是，用户都是在浏览器中使用应用的这些功能，然而这就引出了一些问题： 每当我们修改应用的数据时，我们都需要更新用户界面以使其匹配。

我们可以通过To-Do应用的一个功能来检验这个问题的难点：呈现任务清单。

冗长的DOM操作

构建HTML元素并在适当的时候在浏览器中呈现它们需要大量的代码。假设我们的状态是一组如下结构的对象：

const state = [
  {
    id: 'todo-0',
    name: 'Learn some frameworks!'
  }
]

我们如何向用户显示这些任务之一？我们希望将每个任务表示为一个列表项——无序列表元素（a <ul>）中的一个HTML <li>元素。我们怎么做？可能是这样的：

function buildTodoItemEl(id, name) {
  const item = document.createElement('li');
  const span = document.createElement('span');
  const textContent = document.createTextNode(name);

  span.appendChild(textContent)

  item.id = id;
  item.appendChild(span);
  item.appendChild(buildDeleteButtonEl(id));

  return item;
}

这里，我们使用document.createElement()方法来创建我们的<li>，还有几行代码来创建它所需的属性和子元素。

此代码段的第十行引用了另一个生成函数：buildDeleteButtonnel()。它遵循与我们用于构建列表项元素类似的模式：

function buildDeleteButtonEl(id) {
  const button = document.createElement('button');
  const textContent = document.createTextNode('Delete');

  button.setAttribute('type', 'button');
  button.appendChild(textContent);

  return button;
}

这个按钮还没有做任何事情，但我们稍后会实现删除。在页面上呈现项目的代码可能如下所示：

function renderTodoList() {
  const frag = document.createDocumentFragment();
  state.tasks.forEach(task => {
    const item = buildTodoItemEl(task.id, task.name);
    frag.appendChild(item);
  });

  while (todoListEl.firstChild) {
    todoListEl.removeChild(todoListEl.firstChild);
  }
  todoListEl.appendChild(frag);
}

现在，我们已经有超过三十行代码专门用于UI，还只是在DOM中呈现某些内容而已，而且我们还没给列表项设置设置任何样式！

如本例所示，直接使用DOM需要了解DOM的许多工作原理：如何生成元素；如何改变其属性；如何将元素放在彼此内部；如何在页面上显示它们。这些代码实际上都不处理用户交互，也不处理添加或删除任务的问题。如果我们添加这些功能，我们必须记住在正确的时间以正确的方式更新UI。

JavaScript框架的创建是为了使这类工作变得更容易——它们的存在是为了提供更好的“开发人员体验”。它们不会给JavaScript带来全新的功能；它们让您更容易使用JavaScript的能力来构建现代的web。

如果您想查看此部分的代码示例，可以查看CodePen上的工作版本，它还允许用户添加和删除新任务。

阅读有关本节中使用的JavaScript的更多信息：

document.createElement()
document.createTextNode()
document.createDocumentFragment()
eventTarget.addEventListener()
node.appendChild()
node.removeChild()

另一种打造UIs的方式

每个JavaScript框架都提供了一种更声明性编写用户界面的方法。也就是说，它们允许您编写描述UI外观的代码，并且框架使其在幕后的DOM中实现。

重复构建新DOM元素的原生JavaScript方法很难一目了然。相比之下，以下代码块演示了使用Vue描述任务列表的方式：

<ul>
  <li v-for="task in tasks" v-bind:key="task.id">
    <span>{{task.name}}</span>
    <button type="button">Delete</button>
  </li>
</ul>

就是这样。这段代码将大约32行代码减少到6行。如果你不熟悉这里的花括号和v-属性，那没关系；稍后，您将在稍后的文章中了解特定于Vue的语法。这里需要注意的是，这段代码看起来像它所代表的UI，而普通JavaScript代码则不像。

由于Vue，我们不必编写自己的函数来构建UI；该框架将以优化、高效的方式为我们处理这些问题。我们在这里的唯一任务是向Vue描述每个项目的外观。熟悉Vue的开发人员可以加入我们的项目，并快速了解情况。Vue并不是唯一这样做的：使用框架可以提高团队和个人的效率。

在原生JavaScript中可以做类似的事情。模板文字字符串使编写表示最终元素外观的HTML字符串变得容易。对于像我们的待办事项列表这样简单的应用程序来说，这可能是一个有用的想法，但对于管理数千条数据记录的大型应用程序来说，它是不可维护的，并且可能在用户界面中呈现同样多的独特元素。

框架提供给我们的其他功能

让我们看看框架赋予我们的其他一些优势。正如我们之前所提到的，框架的结果在原生JavaScript中是可以实现的，但使用框架可以消除所有必须自己解决这些问题的认知负担。

工具

由于本文中的每个框架都有一个大型、活跃的社区，因此每个框架的生态系统都提供了改善开发人员体验的工具。这些工具使添加测试（确保应用程序正常运行）或linting（确保代码无错误且风格一致）等内容变得很容易。

注：如果您想了解有关web工具概念的更多详细信息，请阅读我们的客户端工具概述。

组件化

大多数主要框架都鼓励开发人员将其用户界面的不同部分抽象为组件——可维护、可重用的代码块，这些代码块可以相互通信。与给定组件相关的所有代码都可以存在于一个文件（或几个特定文件）中，因此作为开发人员，您可以确切地知道在哪里对该组件进行更改。在一个原生JavaScript应用程序中，您必须创建自己的一组约定，以高效、可扩展的方式实现这一点。许多JavaScript开发人员，如果任由他们自己的编写，可能最终会将UI某个部分相关的代码分布在一个文件中，或者完全在另一个文件中。

路由

web最重要的功能是允许用户从一个页面导航到另一个页面——毕竟，它是一个由相互关联的文档组成的网络。当您访问网站上的链接时，您的浏览器将与服务器进行通信，并获取新内容以显示给您。这样一来，地址栏中的URL就会发生变化。您可以保存此新URL并稍后返回该页面，或与其他人共享，以便他们可以轻松找到相同的页面。您的浏览器会记住您的导航历史记录，并允许您来回导航。这称为服务器端路由。

现代web应用程序通常不会获取和呈现新的HTML文件——它们加载单个HTML壳子，并不断更新其中的DOM（称为单页应用，或SPA），而无需将用户导航到web上的新地址。每个新的伪网页通常称为视图，默认情况下，不进行路由。

当SPA足够复杂，并呈现足够独特的视图时，将路由功能引入应用程序非常重要。人们习惯于能够链接到应用程序中的特定页面，在导航历史中前后移动，等等，当这些标准web功能被破坏时，他们的体验就会受到影响。当客户端应用程序以这种方式处理路由时，它被恰当地称为客户端路由。

使用JavaScript和浏览器的本机功能制作路由器是可能的，但流行的、积极开发的框架有配套的库，使路由成为开发过程中更直观的一部分。

使用框架的注意事项

成为一名高效的web开发人员意味着使用最合适的工具来完成工作。JavaScript框架使前端应用程序开发变得容易，但它们并不是解决所有问题的灵丹妙药。本节讨论了在使用框架时应该考虑的一些事情。请记住，您可能根本不需要框架——请注意，您不应该为了使用框架而使用框架。

熟悉工具

就像原生JavaScript一样，框架需要时间来学习，并有自己的特殊之处。在您决定为项目使用框架之前，请确保您有足够的时间了解其功能，使其对您有用，而不是与您作对，并确保您的队友也对其感到满意。

过度工程化

如果您开发的web项目是一个只有几个页面的个人网站，而这些页面几乎没有交互功能，那么可能根本不需要框架（及其所有JavaScript）。就是说，框架不是一个整体，其中一些框架比其他框架更适合于小型项目。SarahDrasner在Smashing杂志的一篇文章中写到，Vue如何取代jQuery作为一种使网页的一小部分具有交互性的工具。

更大的代码库和抽象

通过在幕后处理DOM交互，框架允许您编写更多的声明性代码，有时总体上可以编写更少的代码。这种抽象对于您作为开发人员的体验很好，但它不是免费的。为了将您编写的内容转换为DOM更改，框架必须运行自己的代码，这反过来最后又会使您软件变得更大，并且计算成本更高。

一些额外的代码是不可避免的，支持tree-shaking（删除构建过程中应用程序中实际未使用的任何代码）的框架将允许您保持应用程序的小型化，但这仍然是您在考虑应用程序性能时需要记住的一个因素，尤其是在网络/存储限制更大的设备上，如手机。

框架的抽象不仅影响JavaScript，还影响您与web本质的关系。无论您如何构建web，最终的结果，即用户最终与之交互的层，都是HTML。用JavaScript编写整个应用程序可能会使您忽视HTML及其各种标记的用途，并导致您生成一个非语义且无法访问的HTML文档。事实上，可能编写一个完全依赖JavaScript的脆弱应用程序，没有它就无法正常工作。

框架不是我们问题的根源。使用错误的优先级，任何应用程序都可能变得脆弱、臃肿和无法访问。然而，框架确实放大了我们作为开发人员的优先级。如果你的首要任务是制作一个复杂的web应用程序，那么很容易做到这一点。然而，如果您的优先级没有仔细保护性能和可访问性，那么框架将放大您的脆弱性、膨胀性和不可访问性。现代开发人员的优先权被框架放大，在许多地方改变了web的结构。web现在通常将JavaScript放在第一位，用户体验放在最后，而不是一个健壮的、内容优先的文档网络。

框架影响页面的可访问性

让我们以上一节中所说的内容为基础，进一步讨论可访问性。使用户界面可访问总是需要一些思考和努力，而框架可能会使该过程复杂化。您通常必须使用高级框架API来访问本机浏览器功能，如ARIA活动区域或重点管理。

在某些情况下，框架应用程序会产生传统网站不存在的可访问性障碍。如前所述，最大的例子是客户端路由。

使用传统的（服务器端）路由，在web上导航具有可预测的结果。浏览器知道如何将焦点设置在页面顶部，而辅助技术将朗读页面标题。每次您导航到新页面时，都会发生这些事情。

通过客户端路由，您的浏览器不会加载新网页，因此它不知道是否应该自动调整焦点或朗读新的页面标题。框架作者花费了大量的时间和精力来编写JavaScript来重新创建这些特性，即便如此，没有一个框架能做到完美。

结果是，您应该从每个web项目的一开始就考虑可访问性，但请记住，如果不这样做，使用框架的抽象代码库更有可能遇到重大的可访问性问题。

如何选择一个框架

本模块中讨论的每个框架都采用不同的方法来开发web应用程序。每一种都在不断改进或改变，每一种都有其优点和缺点。选择正确的框架是一个依赖于团队和项目的过程，您应该自己进行研究，找出适合您需求的内容。也就是说，为了更有效地研究您的选择，我们已经确定了一些您可以问的问题：

框架支持哪些浏览器？
框架使用哪些领域特定语言？
框架是否有强大的社区和良好的文档（以及其他支持）？

本节中的表格简要总结了每个框架当前提供的浏览器支持，以及可以使用的领域特定语言。

一般来说，领域特定语言（DSL）是与软件开发特定领域相关的编程语言。在框架的上下文中，DSL是JavaScript或HTML的变体，让用框架进行开发更加容易。至关重要的是，没有一个框架需要开发人员使用特定的DSL，但它们几乎都在设计时考虑到特定的DSL。选择不使用框架首选的DSL将意味着您错过了原本可以改善开发人员体验的功能。

在为任何新项目做出选择时，您应该认真考虑框架的支持矩阵和DSL。不匹配的浏览器支持可能会成为用户的障碍；不匹配的DSL支持可能会成为您和您的队友的障碍。

框架	浏览器支持	偏好的DSL	支持的DSLs
Angular	IE9+	TypeScript	HTML-based; TypeScript
React	Modern (IE9+ with Polyfills)	JSX	JSX; TypeScript
Vue	IE9+	HTML-based	HTML-based, JSX, Pug
Ember	Modern (IE9+ in Ember version 2.18)	Handlebars	Handlebars, TypeScript

注：我们描述为“基于HTML”的DSL没有正式名称。它们不是真正的DSL，但它们是非标准HTML，因此我们认为它们值得强调。

本表引文：

框架是否有一个强大的社区?

这可能是最难衡量的指标，因为社区规模与易于使用的数字并不直接相关。您可以查看一个项目的GitHub stars数量或每周npm下载量，了解其受欢迎程度，但有时最好的做法是搜索几个论坛或与其他开发人员交谈。这不仅关系到社区的规模，还关系到它的欢迎程度和包容性，以及可用文档的质量。

网上意见

在这件事上不要只相信我们的话，网上到处都有讨论。Wikimedia基金会最近选择使用Vue作为其前端，并发布了关于框架采用的评论请求（RFC）。RFC的作者Eric Gardner花时间概述了Wikimedia项目的需求，以及为什么某些框架是团队的好选择。这个RFC是一个很好的例子，说明了在计划使用前端框架时，您应该为自己进行哪些类型的研究。

JavaScript现状调查是JavaScript开发人员反馈的有用集合。它涵盖了许多与JavaScript相关的主题，包括关于框架使用和开发人员对框架看法的数据。目前，有几年的可用数据，可以让您了解框架的流行程度。

Vue团队将Vue与其他流行框架进行了详尽的比较。这种比较可能有一些偏差（他们注意到了这一点），但这仍然是一种宝贵的资源。

客户端框架的替代方案

如果您正在寻找加快web开发过程的工具，并且您知道您的项目不需要密集的客户端JavaScript，那么您可以选择其他几种用于构建web的解决方案之一：

内容管理系统
服务器端渲染
静态站点生成器

内容管理系统

内容管理系统（CMSes）是允许用户在不直接编写代码的情况下为web创建内容的工具。对于大型项目来说，它们是一个很好的解决方案，尤其是那些需要有限编码能力的内容编写人员，或者对于那些想要节省时间的程序员来说。然而，它们确实需要大量的时间来设置，而使用CMS意味着您至少放弃了对网站最终输出的某种程度的控制。例如：如果您选择的CMS在默认情况下没有编写可访问的内容，那么通常很难改进这一点。

流行的例子包括 Wordpress, Joomla, 和Drupal.

服务器端渲染

服务器端渲染（SSR）是一种应用程序体系结构，在这种体系结构中，呈现单页应用程序是服务器的工作。这与客户端呈现相反，客户端呈现是构建JavaScript应用程序最常见、最直接的方法。服务器端渲染在客户端设备上压力更小，因为您只向他们发送渲染的HTML文件，但与客户端渲染的应用程序相比，它可能很难设置。

本模块中涵盖的所有框架都支持服务器端渲染和客户端渲染。比如Next.js对于React，numxt.js对于Vue（是的，这令人困惑，不，这些项目不相关！），FastBoot对于Ember, 以及Angular Universal对于Angular。

注：一些SSR解决方案由社区编写和维护，而一些是框架维护者提供的“官方”解决方案。

静态站点生成器

静态站点生成器是动态生成多页网站的所有网页的程序（包括任何相关的CSS或JavaScript），以便可以在任意多个位置发布这些网页。例如，发布主机可以是GitHub pages分支、Netlify实例或您选择的任何私有服务器。这种方法有很多优点，主要围绕性能（用户的设备没有使用JavaScript构建页面；它已经完成）和安全性（静态页面的攻击较少）展开。这些网站仍然可以在需要的地方使用JavaScript，但它们并不“依赖”JavaScript。静态站点生成器需要时间来学习，就像任何其他工具一样，这可能会阻碍您的开发过程。

静态站点可以具有任意数量的唯一页面。正如框架使您能够快速编写客户端JavaScript应用程序一样，静态站点生成器允许您快速创建HTML文件，否则您将单独编写HTML文件。与框架一样，静态站点生成器允许开发人员编写定义web页面公共部分的组件，并将这些组件组合在一起创建最终页面。在静态站点生成器的上下文中，这些组件称为模板。静态站点生成器构建的网页甚至可以是框架应用程序的主页：例如您可以让静态生成的网站，在某个特定页面在用户访问时启动React应用程序。

静态站点生成器已经存在了很长一段时间，但它们在最近的web历史中看到了一些复兴。现在有一些功能强大的选项可用，例如Hugo, Jekyll, Eleventy, 以及 Gatsby。

如果您想从整体上了解更多关于静态站点生成器的信息，请查看Tatiana Mac的Eleventy初学者指南。在本系列的第一篇文章中，她解释了静态站点生成器是什么，以及它与发布web内容的其他方式的关系。

总结

以上就是我们对前端框架的介绍，我们还没有教你任何代码，但希望我们已经为你提供了一个有用的背景知识，告诉你为什么要使用前端框架，以及如何选择前端框架，并让你兴奋地想学习更多并陷入其中！

我们的下一篇文章将深入到一个较低的层次，研究框架倾向于提供的特定类型的功能，以及为什么它们会这样工作。

翻译自：https://developer.mozilla.org/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction

白酒永远的神

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
为什么要使用前端框架以及如何选择

在本章节我们开始大致了解框架, 简要回顾JavaScript和框架的历史,为什么框架会存在以及它们提供了什么, 如何开始考虑选择一个框架并学习, 以及对于客户端框架还有什么替代方案.先决条件：熟悉 HTML, CSS, 以及 JavaScript 语言的核心.目标:了解客户端JavaScript框架是如何存在的，它们能解决什么问题，还有哪些替代方案，以及如何选择一个框架.简史当JavaScript在1996被发布后, 它给网络增加了少许的交互性和乐趣, 直到那时, 网页仍由静
复制链接

扫一扫