头图

2024年的前端怎么干活

卡颂
English

大家好,我是卡颂。

最近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的意义:

  • DXDeveloper Experience,即开发者体验)
  • UXUser Experience,即用户体验)

DX(开发者体验)

同时写过ReactVue的朋友可能会有如下感受:

为什么React有这么多性能优化API(如PureComponentReact.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>

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

  1. 增加约定

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

UX(用户体验)

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

重视应用体积

想想,手机下个60mb的应用,你会不会觉得:是不是下到假的了,咋这么小?

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

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

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

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

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

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

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

造轮子的方向改变了

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

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

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

......

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

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

总结

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

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

期待么?恐惧么?

阅读 1.1k
avatar
卡颂
《React技术揭秘》作者
888 声望
7k 粉丝
0 条评论
你知道吗?

avatar
卡颂
《React技术揭秘》作者
888 声望
7k 粉丝
宣传栏