2024年的前端怎么干活

大家好，我是卡颂。

最近Stackoverflow2021开发者报告发布，其中有一项吸引我的注意：

在所有框架（不仅是前端），Svelte是最受欢迎的。

这里倒不是说Svelte是最多人使用的，另一项调查显示React是开发者最需要的框架。

毕竟React生态繁荣程度摆在那。

国内的前端生态大体落后国外2～3年。所以，今天我们从2021年的报告来预测下国内2024年的前端生态情况。

Svelte背后的意义

Svelte作为一个前端框架，在语法、使用体验上没有什么特别之处。他最重要的意义是：

一次对前端框架领域AOT（ahead-of-time，可以理解为预编译）的探索

丛Elm（2012年）、Marko(2014年)、Vue2（2014年）到Svelte（2016年），不断有先行者探索AOT。

我们可以从两个角度看待AOT的意义：

• DX（Developer Experience，即开发者体验）
• UX（User Experience，即用户体验）

DX（开发者体验）

同时写过React与Vue的朋友可能会有如下感受：

为什么React有这么多性能优化API（如PureComponent、React.memo...）需要我手动调用，而Vue则没有。

原因就在于性能优化作为一个功能，如果框架本身没有自动完成，那就只能开发者手动完成。

要让框架自动完成，就需要给框架足够多的提示。Vue使用的模版语法的语法限制其实就隐含提示信息。

比如如下模版代码，就隐含了只有span这个节点是动态、会变化的节点这一信息：

<template>
  <div>
    <p>Hello</p>
    <span>{{name}}</span>
  </div>
</template>

React由于JSX太过灵活，无法从语法层面给予足够提示，就无法自动完成性能优化这一功能。

对React来说，改变的方式有两种：

1. 为JSX增加约束

这是同样采用JSX但是拥有AOT能力的框架Solid.js的选择。

比如，在React中使用数组map方法遍历JSX，而在Solid.js中使用for语法：

<For each={state.list}>
  {(item) => <div>{item}</div>}
</For>

这就起到了语法限制的提示作用。

2. 增加约定

比如，所有Hooks的命名都遵循use前缀，这可以为React未来的AOT能力提供一些线索。

UX（用户体验）

WEB环境相比其他视图环境，有个很大的区别：

重视应用体积

想想，手机下个60mb的应用，你会不会觉得：是不是下到假的了，咋这么小？

再想想，PC端游没个20G硬盘占用是不是都不好意思吹自己是细心打磨的。

但是一个网页应用，要是有60mb，加载20秒才加载出来。你能忍么？

所以，web开发者一直致力于减少应用体积。

一个很浅显的道理：一段必要的逻辑，如果没法在编译时完成，那一定得在运行时完成。

编译时完成意味着运行时执行的是完成后的结果，代码体积更小。

运行时完成则需要将运行逻辑一同加载，代码体积更大。

所以，无论从DX还是UX角度，AOT都是有利可图的。

造轮子的方向改变了

如果接受了AOT是大趋势这一设定，那么3年后国内开发者造轮子的方向也会变化。

曾经的重运行时前端时代，大家造轮子的方向都是：

• 运行时的性能优化方案
• 运行时的i18n方案

......

但是随着上层的框架逐渐普及AOT，基于框架衍生的各种轮子也会更偏编译时。

所以，想在未来几年吃得更开的前端朋友，编译原理可以学起来了。

总结

2024年一个优秀前端同学的工作内容很可能如下：

• 用着和2021年前端一样的框架语法、范式
• 造轮子时从AST（抽象语法树）开始构思

期待么？恐惧么？