关于javascript: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的意义：

同时写过React与Vue的敌人可能会有如下感触：

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

起因就在于性能优化作为一个性能，如果框架自身没有主动实现，那就只能开发者手动实现。

要让框架主动实现，就须要给框架足够多的提醒。Vue应用的模版语法的语法限度其实就隐含提示信息。

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

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

React因为JSX太过灵便，无奈从语法层面给予足够提醒，就无奈主动实现性能优化这一性能。

对React来说，扭转的形式有两种：

这是同样采纳JSX然而领有AOT能力的框架Solid.js的抉择。

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

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

这就起到了语法限度的提醒作用。

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

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

器重利用体积

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

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

然而一个网页利用，要是有60mb，加载20秒才加载进去。你能忍么？

所以，web开发者始终致力于缩小利用体积。

一个很通俗的情理：一段必要的逻辑，如果没法在编译时实现，那肯定得在运行时实现。

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

运行时实现则须要将运行逻辑一起加载，代码体积更大。

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

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

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

......

然而随着下层的框架逐步遍及AOT，基于框架衍生的各种轮子也会更偏编译时。

所以，想在将来几年吃得更开的前端敌人，编译原理能够学起来了。

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

期待么？恐怖么？