1.4 大前端时代

在前端工程化的方案逐渐趋于成熟后，各公司的视野已经不满足于浏览器应用，而是更大胆地尝试一些“探索边界”的事情，跨端开发 就成为它们紧盯的下一个目标。

1.4.1 多端开发的现状

Web 始于计算机时代，那时的浏览器只能安装在计算机中，PC 端就是前端的全部。

后来，随着移动互联网的兴起，用手机刷新闻和浏览网页成了趋势，移动端 H5 页面成了不可或缺的一项。这时多数的 ToC 项目有 PC 端和 H5 端，供用户在不同的屏幕上浏览。

客户端也是随着移动互联网的兴起开始流行的。客户端刚出现时，就是 Android 端和 iOS 端。对于开发者来说，两个端两条线，几乎完全不一样。一家中型互联网公司的技术团队，终端开发者至少有 3 类，分别为前端、Android 和 iOS，这是最基本的配置。

但是客户端开发有一个现实问题——效率慢，成本高。对于一家小型公司来说，如果不是产品强需求，那么一般直接采用前端实现。但是，客户端也有自己的优势，如原生体验好、功能权限高等。小型公司也确实想做更好的用户体验，但是因为玩不起客户端所以只能放弃。

正是在这样的背景下，小程序出现了。小程序内嵌在 App 中，以一种微应用的方式打开，并没有网页那样的糟糕的加载体验。在权限方面，小程序依靠原生应用提供的 API 能做得更多。最关键的是，小程序是使用 JavaScript 开发的，效率和前端页面基本一致。

小程序的出现，对于那些“不满意 H5 页面的体验，但没有精力开发原生”的团队来说是一个极大的惊喜。因此，很多小型公司纷纷投入小程序开发中。小程序虽然起源于微信，但随后被各应用纷纷效仿，如支付宝小程序、抖音小程序、头条小程序等，一时间小程序遍地开花。

然而，小程序的便利也为开发者带来了难题：这些大型企业的小程序方案虽然大同小异，但是代码互不兼容，如果有开发多端小程序的需求，就不得不为各端单独开发一套代码。

至此，客户端阵营已经囊括了 Web、原生 App 和小程序三大类，细分开来至少有 5 个客户端。多端开发的状况带来了高昂的成本，企业迫切需要降本增效。

1.4.2 跨端开发成为趋势

前端在 Web 领域积累了足够丰富的工程方案。既然可以通过 Webpack/Babel 将任意高级语法（如 JSX）转换成 JavaScript 代码，那么是否也可以用同样的方式生成另一套其他平台的代码呢？

例如，通过编写转换工具将一套 Vue.js 代码转换成小程序代码，这样这套代码既可以被打包成 Web 应用，又可以被打包成小程序应用，由此可以实现“将一套代码打包成多个应用”的目的。

不得不说，这是一个创造性的思路。从之前积累的 JavaScript 工程化经验来看，这显然是可行的。生成多端代码，虽然会在开发上带来兼容性，但是可以成倍地节约成本（一个人干了两三个人的活）。

所以，本着降本增效的目的，大型企业不惜耗费精力也要探索出可用的跨端解决方案。一些优秀的解决方案逐渐浮出水面，并选择在社区开源。例如，Taro、React Native 等跨端方案被广泛应用，因此前端有机会从“开发一端”转变为“开发多端”。

正是因为 JavaScript 有了跨端开发的能力，所以传统前端正在跨步进入大前端时代。在大前端时代，JavaScript 可以用于开发全系客户端（Web、小程序、Android、iOS）。对于一些中小型公司（它们缺乏专业的原生 App 工程师）来说，使用 JavaScript 是一个再好不过的选择。

当然，大前端不是只有跨端开发，除了常规前端开发，一些新技术也可以被归属到大前端的范畴，如图形技术、音/视频技术和 VR 技术，这些技术超出了常规前端开发的范畴，但又表现在前端上，因此也可以作为大前端的一部分。

1.4.3 一处代码，多处运行

多端开发的现状和 JavaScript 的优势，催生了以 JavaScript 为主的跨端解决方案，其中最具代表性的有 Taro、React Native 和 Electron。

Taro

Taro 是一个使用 React 语法的跨端开发框架，在编译时将 ReactDSL 转换为各端代码，从而实现“一码多端”。但从 Taro 3 开始，Taro 团队重构了跨端实现方案，从“编译时的代码转换”升级为“运行时的自定义渲染”，使其成为一个开放式的跨端框架。

Taro 3 支持直接引用 Vue.js/React 框架本身的代码。Taro 只做渲染层的逻辑，这就解决了语法兼容问题。因此，Taro 3 支持同时用 React 语法和 Vue 语法进行开发，从根本上解决了与 Web 代码割离的问题。Taro 是目前跨端解决方案中非常优秀的代表。

React Native

Taro 也支持将代码转换为原生 App，而转换为原生 App 的功能是基于 React Native 实现的。React Native 是 React 官方提出的跨端解决方案，主要是将 React 代码生成原生 Android、iOS 应用，是目前 JavaScript 开发原生 App 的主流方案。

React Native 也沿用了 React 框架中的虚拟 DOM 方案：只需要编写一套代码，就可以将代码打包成不同平台的 App，这极大地提高了开发效率。另外，相对于全部原生开发的应用来说，这种方式的维护成本也相对较低。

目前，React Native 新架构正在加速开发中，新架构有望进一步提升 React Native 的性能。

Electron

Electron 是开发桌面端应用的框架，使用 JavaScript 开发 Windows 和 Mac 应用程序。VSCode 编辑器就是使用 Electron 开发的。

Electron 框架内部嵌入了 Chromium 和 Node.js。Chromium 负责界面的渲染，所以应用窗口像 Chrome 浏览器；Node.js 主要关注逻辑部分，负责系统底层能力的调用。Electron 比 React Native 更容易上手，因为它完全屏蔽了原生代码，只使用 Node.js 就可以实现大部分的原生功能，并且更容易集成 Webpack、Vite 等构建工具。

以上 3 个跨端框架分别实现了小程序跨端、App 跨端和桌面应用跨端，真正做到了“一处代码，多处运行”。