什么是前端？在网络应用中前端和后端是软件的独立层次，两者相辅相成。如果把一个软件想象成一家餐厅，那么前台就包括门面、餐厅内的桌椅、菜单和服务人员等。而后台则包括厨房、管理人员和行政工作。

前端是什么意思？

前端是用户操作网站或应用程序的图形用户界面。前端面向人类的需求和期望。这意味着，以吸引人的方式显示信息和以易于理解的方式构建交互是重中之重。前端设计的目的是产生良好的用户体验。

前端是在客户端执行的软件层。它简单得令人难以置信，因为它不会显示后台正在进行的复杂信息处理。在幕后，前端与后端进行通信，以便同步数据和进行更改。为此，通常会使用称为 API 的编程接口。

根据 “关注点分离”的开发原则，前端和后端是作为独立的层实现的。但是，这两层对于一个功能完善的软件来说都是必要的。没有后端的前端就像一个门面，背后空无一物。

谁负责前端工作？

有两类人以不同方式在前端工作：

1. 使用前端的用户
2. 构建和维护前端的前端开发员

在下文中，我们将详细介绍这两类人员以及他们在前端的工作方式。

用户如何使用前端？

网站访问者使用链接在网站的子页面之间导航。他们使用文本和媒体等内容，并与按钮和其他元素（如带有下拉菜单和输入框的 HTML 表单）进行交互。

同样的概念也适用于应用程序用户，他们可以使用专门的按钮与应用程序进行交互。与网站一样，交互范围仅限于几种明确定义的路径。不过，用户可以有更多的选择来创建自己的内容。

开发人员如何使用前端？

用户在前端能做的事情非常有限。前端开发人员的情况则完全不同，他们是负责创建、维护和继续开发前端的专业程序员。由于用户友好的网页设计是重中之重，因此他们通常会得到设计师的支持。

那么，前端开发员究竟是做什么的呢？我们来看一个 WordPress 的例子。前端开发员创建 WordPress 小工具和 WordPress 主题，使 WordPress 网站如此吸引人。

在前端开发人员创建的 WordPress 主题的帮助下，网站各个页面上的不同内容被嵌入到预定义的结构中，从而确保整个网站的设计保持一致。

前端开发人员创建登陆页面，并使用 “行动呼吁”（CTA）元素引导用户浏览网站。响应式设计对前端编程尤为重要。

最重要的前端框架有哪些？

前端在用户的终端设备（”客户端”）上显示。其中一个重要的区别是网络前端和本地前端，前者是为在浏览器中显示而构建的，后者则是为特定操作系统而设计的。幸运的是，现代的跨平台开发方法使得在一个共同的基础上创建多个前端成为可能。

网络前端包括 HTML、CSS 和 JavaScript 三种网络语言的代码，它们与网络编程中的三种关注点相对应：

从理论上讲，只需使用这三种网络语言就能创建前端。然而，这将涉及大量不必要的工作。前端框架大大简化了这项工作。

不同的前端框架针对不同的情况提供不同的功能和优势。它们扩大了网络语言的范围，简化了与后台的连接，并确保不同浏览器版本的功能一致。

React 和 Vue 等较新的框架侧重于反应性： 数据的变化会立即反映到前端。组件也是这些框架的核心，它们是独立的、可重复使用的用户界面元素。

根据你的方法，你会发现纯 CSS 或 JavaScript 前端框架。网络前端框架和跨平台前端框架之间也有区别。

使用反应式前端框架进行基于组件的开发

这些 JavaScript 前端框架都是量身定制的反应式组件。组件将结构、外观和行为结合在一起，并自动适应底层数据的变化。例如，如果您删除了一条数据，相应的条目就会从列表中消失，而计数器则会立即显示准确的数值。

反应式前端框架中的佼佼者是 Angular 和 React。这两种框架都可用于创建单页面应用程序或更复杂的应用程序，而且都相当复杂。现代的替代方案是更为精简的 Vue 框架。

Svelte 框架是一项有趣的新开发，它采用了与 React 及其同类框架不同的方法。Svelte 使用编译器，而不是在 JavaScript 中发明新结构。这意味着开发人员编写的简单 Svelte 代码会被编译器转换成更复杂的 JavaScript 代码。

大多数反应式前端框架都会简化全局数据的处理。这得益于用于封装状态数据的 “状态存储”。

前端代码可以使用 Gulp 或 Grunt 等任务运行程序的单独构建流程生成。

混合关注前端框架： 守旧派

在反应式框架出现之前，这些老式前端框架非常流行。Bootstrap 和 Bootstrap 替代框架为不同浏览器和版本提供了亟需的标准化，并提供了一系列现成的组件，如导航菜单、带折叠字段的手风琴和动画图片滑块。

所有这些框架的共同点是都使用 JavaScript 和 CSS 代码。紧凑型用户界面框架 ZURB Foundation 侧重于专业应用程序的适应性，而 jQuery UI 则采用了简约的方法，可以与流行的 JavaScript 框架相结合。

这些前端框架的优势在于它们非常易于使用。通常只需插入一个 CSS 或 JavaScript 文件即可。但是，如果要进行更改或优化，情况很快就会变得复杂起来。事实证明，组合这些框架的不同部分也很困难。

单一关注点的前端框架： 精益专家

与结合了 JavaScript 和 CSS 的混合前端框架不同，单一前端框架仅限于一种语言。Tailwind CSS 建立了一个为前端组件提供 CSS 规则的标准。在 Tailwind 中，预定义的类被嵌入到 HTML 结构中，而不是由用户自己编写 CSS 代码。

另一方面，前端框架 Alpine JS 是行为和反应性的首选工具。它不使用 CSS，而是使用现成的 JavaScript 片段。该框架将自己描述为 “现代网络的 jQuery”，从而向经典 JavaScript 框架致敬。

单一关注点前端框架的一个决定性优势就是简单。通常可以将代码量限制在实际需要的范围内，不过这可能需要一个单独的构建过程。此外，这些不同框架的部分内容可以相互组合。一个流行的组合是 Tailwind CSS + Alpine JS。

跨平台框架： 同时创建多个前端

上文讨论的所有框架都面向网络浏览器。还有一些跨平台前端框架可以为本地应用程序创建代码。原生应用程序不需要浏览器，而是直接在 Windows、macOS、Android 或 iOS 等操作系统上运行。

Flutter 是一种流行的跨平台前端框架，它基于谷歌的编程语言 Dart。用 Flutter 构建的用户界面可以作为创建多个本地和网络前端的基础。

本地前端框架 GTK 也采用了类似的方法。在 GTK 中，你可以使用相同的基础为 Linux、Windows 和 macOS 创建前端。与 Flutter 不同，GTK 并不基于网络技术。但它确实提供了大量编程语言供在框架中使用。