解锁构建用户界面的新姿势

前几期我们介绍了有关，计算机网络，前端编程语言，以及工具链相关的内容。

本期我们来聊聊用户界面。

我们常说的 UI，全称叫 User Interface，翻译过来就是用户界面，它是人与计算设备交互的必要窗口。用户界面有很多种，我们可以根据它的呈现方式、承载功能来进行划分。

比如图形用户界面（GUI），

命令行界面（CLI），

语言用户界面（LUI），

以及自然用户界面（NUI）。

前端的核心任务就是构建用户界面，

而如何高效地构建出体验良好的用户界面，则是现代前端要进一步考虑的问题。

传统的前端用户界面通常是指用 HTML、CSS 和 JS 三件套制作的网页。

我们使用 HTML 描述网页骨架，

使用 CSS 赋予它好看的样式，

再使用 JS 为它增加交互功能。

相比过去，现代前端呈现的用户界面已经不仅仅是普普通通的网页，还有跨平台桌面应用

智能手机中的 H5、小程序和 Native App

甚至是 VR 设备中的交互界面。

虽然大多数前端用户界面的底层依旧是这三件套，但针对不同场景，用户界面的构建方式会有很大不同。

比如小程序开发不再使用原始的 HTML，而是我们之前在 “前端编程语言” 章节介绍过的领域特定语言。

许多样式开发也不是一行行写原始的 CSS，而是采用原子化 CSS 或是 CSS-in-JS 方案。

几乎所有的 UI 框架都为开发者屏蔽掉了 DOM API，转而使用表达能力更强的领域化 JS 语言，比如 React 的 JSX。

接下来我会从 CSS 框架、UI 框架和组件库三个方面，展开介绍现代前端是如何通过它们构建用户界面的。

首先是 CSS 框架，它是一种对原生 CSS 的封装和抽象。

Bootstrap 是早期最典型的代表，

它内置了一组风格统一的 class 样式表，开发者只需要在必要位置填入 class 名，即可免去写一大堆 CSS 属性的工作。

现代 CSS 框架还提出了布局、主题、可访问性、工具函数、响应式设计等概念，使得编写 CSS 这件事更加系统化和便利。

以 Tailwind CSS 为代表的工具化 CSS 框架脱颖而出，

开发者组合使用其原子化工具类即可实现任何 UI 设计，这是一种更简单和灵活的 CSS 开发范式。

CSS 框架简化了传统 CSS 的编写方式，但距离构建出一个完整的用户界面还差很远。我们还需要另一种技术，

它就是专业对口的 UI 框架。

直接使用 HTML、CSS 和 JS 来构建用户界面虽然简单直接，但在开发效率和可维护性方面处于劣势。

UI 框架可以说是对三件套的高级抽象，通常包含虚拟 DOM、数据驱动、组件化、代码编译和工具链配套这几个要素。目的就是让开发者使用更自然的方式构建出高可复用的用户界面。

我们常说的 React、Vue 和 Svelte 等都属于 UI 框架的范畴，

从它们的官网介绍中都能看到 for building user interfaces 的字样。虽然它们能做的事并不只局限于此，但理解它们的定位其实是很重要的。

当你陷入一个组件业务逻辑乱如麻，useEffect 一个套一个开始失控的困扰时，有没有思考过 UI 框架本身就并不适合做这些事情呢？

为什么要提状态管理这件事？以及它为什么要独立于 UI 框架而存在？我相信你已经有答案了。

在实际项目中，我们会借助现有的组件库来进一步提升开发效率和减少重复代码。

组件库通常依赖于某个特定的 UI 框架，比如依赖于 React 的 Ant Design、依赖于 Vue 的 Element 等。也有不依赖 UI 框架的 Headless UI 和 Radix UI 等，不过它并不包含样式，使用起来会有额外开发成本。最常见的还是基于当前 UI 框架的组件库及其扩展。

提到扩展，就不得不说到组件库本身的层次划分了，我将其分为三类：基础组件、模板组件和业务组件。

诸如 Button、Input 等每个组件库都会有的组件，称之为基础组件。

基于基础组件再组合封装一层功能更复杂的组件叫模板组件，比如基于 Ant Design 封装的 Ant Design Pro Components 提供了诸如 ProLayout、ProForm、ProTable 等高级模板组件。

而基于模板组件，往上添加数据接口和业务处理逻辑，就形成了业务组件。

可以预见每一层抽象都以降低复用性为代价，

但抽象带来的收益是开发效率显著提升。

具备复用价值的业务组件就是一种最佳实践，是企业最重要的前端资产之一。

本期我们介绍了传统和现代前端用户界面的区别，以及构建用户界面的三个要素：CSS 框架，UI 框架和组件库，下一期我们将介绍另一种关键技术：应用框架。

另外有一个好消息，我做了一个前端资讯网站，这里有每天最新的前端博客、期刊和新闻。

你也可以搜索自己感兴趣的话题，访问这个链接免费获取。

我是小麦，我们下期再见。