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（抽象语法树）开始构思

期待么？恐惧么？