2022 前端部分框架对比及其发展方向判断

发表于

本文主要从前端 JavaScript 运行时、打包构建工具 、 JavaScript 框架 三个方向，去对比过去 2022 年前端在这些方向的能力建设，同时帮助大家判断未来工具的发展方向。 其中：

  • JavaScript 运行时 ：对比 Deno、Bun 同 NodeJs 相关的差异；
  • 打包构建工具 ：对比 Vite、Turbopack、同 Webpack 的差异；
  • JavaScript 框架 ：对比 SolidJs 同 React、Vue 的差异；

JavaScript 运行时

对比结论：
  1. 整体朝着改善开发体验和提升性能的方向发展：
    • 减少常用开发配置：比如原本在 NodeJs 中要，手动配置的 script 命令、测试脚本、TS 的预编译等，都提供原生支持；
    • 提升速度：运用其它开发语言，如 Rust 去加速项目的构建速度以及响应性能；
  2. 相同点：
    • Deno 和 Bun 都原生支持 TS ，内置了打包、构建的能力和命令，无需配置第三方插件，大幅减少初始化常规配置；
    • Deno 和 Bun 都支持简单的常用命令行，如：test、run，无需配置 script 命令；
    • 都使用了第三方语言的工具，提升了构建、启动速度；
  3. 不同点：
    • Deno 使用 Rust 语言开发，Bun 使用 ZIG 语言开发；
    • Deno 依旧使用 V8 引擎，而 Bun 使用 JavaScriptCore 引擎；
    • Deno 的依赖引入使用 URL， Bun 内置了包管理工具，但依旧使用常规引入；
  4. 使用率：Node 71%，AWS Lambda（serverless）使用率达20.4%，Deno 从 5.6% 上升到 5.8%；
Bun 和 Deno 的对比
Bun ：
  • 理念：all-in-one JavaScript runtime
  • 能力( 文档链接 )：
    • 提供在不需要使用 Webpack、babel、TS转译 等工具的情况下，可以实现在 Bun 上直接 运行 JavaScript & TypeScript & JSX 程序的能力。
    • 自带包管理能力；
    • 运行速度快：尤其是在 服务器端渲染、加载大型数据表 等方面；
1
2
3
4
# 命令行使用例子：
bun run index.tsx     # TS and JSX 直接支持运行
bun install <pkg>     # 安装package
bun run start         # 运行`start`脚本
1
2
3
4
5
6
7
8
9
// 通过 Bun 起一个 HTTP 服务
Bun.serve({
    fetch(req) {
        const url = new URL(req.url);
        if (url.pathname === "/") return new Response(`Home page!`);
        if (url.pathname === "/blog") return new Response("Blog!");
        return new Response(`404!`);
    },
});
  • 为什么快：
    • 引擎差异，使用 JavaScriptCore 引擎，非 V8 引擎；
    • 语言差异，使用的是新兴的系统编程语言 ZIG 编写的，主要通过手动内存管理对内存进行更细粒度的控制、无隐藏的控制流来提升程序的性能；
    • 从零开始，包括 JSX/TypeScript 转译器、npm 客户端、打包器、SQLite 客户端、HTTP 客户端、WebSocket 客户端
  • 目前还在开发阶段，不建议用在生产环境
Deno ：
  • 理念：The easiest, most secure JavaScript runtime
  • 能力( 文档链接 )：
    • 默认安全设置，代码不能访问文件、网络、环境变量等（除非显式开启）；
    • 支持 TypeScript，只支持 ES 模块，不支持 CommonJs 模块，没有包管理能力，模块通过 URL 加载；
    • Deno 只有一个可执行文件，所有操作都通过这个文件完成；
    • 基于 V8 引擎并采用 Rust 编程语言构建，异步操作不使用 libuv 库，而是使用 Rust 语言的 Tokio 库；
    • 内置了开发者需要的各种功能，不再需要外部工具。打包、格式清理、测试、安装、文档生成、linting、脚本编译成可执行文件等，都有专门命令；
1
2
3
4
 # 命令行使用例子：
deno run main.ts     # TS 直接支持运行
deno test            # 直接运行测试
deno fmt --watch     # 格式化代码
1
2
3
4
// 通过 Deno 起一个 HTTP 服务
import { serve } from "https://deno.land/std@0.121.0/http/server.ts";
console.log("http://localhost:8000/");
serve((req) => new Response("Hello World\n"), {port: 8000});
NodeJs：
  • 生态丰富，运行稳定，不再赘述;

打包构建工具

对比结论
  1. Rust 越来越多的进入到前端工具领域，在打包构建方向尤其显著；
    • 提升速度：这里分为两个方向，一个是提高开发时的热更新速度，另一个 CI、CD 时的打包构建速度；
    • 方法：运用其它开发语言，如基于 Rust 的 Turbopack、基于 GO 的 Esbuild 去加速和利用 ESM 能力；
  2. Webpack 当前使用率 84.8%，其次是 Gulp 50.2%，Vite 是 48.8 %
Vite 和 Turbopack 的对比
Vite
  • 理念：下一代前端开发与构建工具，为开发提供极速响应；
  • 快速的冷启动: No Bundle + esbuild 预构建；
  • 即时的模块热更新: 基于 ESM 的 HMR，同时利用浏览器缓存策略提升速度；
  • 真正的按需加载: 利用浏览器 ESM 支持，实现真正的按需加载；
  • 生产环境使用 rollup 打包，开发环境使用 ESM 模式；
Turbopack
  • 一个用 Rust 实现的 JavaScript 和 TypeScript 高性能打包构建工具；
Webpack：
  • 当前使用率最高的打包构建工具，除了在大项目中表现有点慢，也没啥其它问题；

JavaScript 框架

对比结论
  1. 基本还是 React、Angular、Vue，趋于稳定，但也有不错的框架逐步提升，如 SolidJS；
  2. React 使用率 81.8%，远高于第二名 Angular 的 48.8% 和第三名 Vue 的使用率46.2%；
SolidJS
  • 理念：一个用于构建用户界面，简单高效、性能卓越的 JavaScript 库
  • 使用 JSX ，性能自称优于基于虚拟 DOM 的库，更新粒度方面，摒弃了虚拟dom，采用节点级更新；
  • 更像是 React 和 Vue 的结合体，吸收了 React hooks 相关的内容和 Vue 模板相关的能力；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 代码 DEMO1
import { render } from 'solid-js/web';
import { createSignal, createEffect } from 'solid-js';

const Counter = () => {
    const [getCount, setCount] = createSignal(0);
    const add = () => setCount(getCount() + 1);
    createEffect(() => {
        console.log('count is change:', getCount());
    });

    return (
        <button type='button' onClick={ add }>
            { getCount() }
        </button>
    );
};

render(() => <Counter/>, document.getElementById('root'));
1
2
3
4
5
6
7
8
9
// 代码 DEMO2，Switch 控制流，性能上的差异可以参考这篇文章：https://juejin.cn/post/7018828149567782926
<Switch>
    <Match when={ status === 1 }>
        <span>通过</span>
    </Match>
    <Match when={ status === 2 }>
        <span>拒绝</span>
    </Match>
</Switch>