关于javascript:2024年的前端怎么干活

大家好，我是卡颂。

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

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

这里倒不是说 Svelte 是最多人应用的，另一项考察显示 React 是开发者最须要的框架。

毕竟 React 生态凋敝水平摆在那。

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

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

一次对前端框架畛域AOT（ahead-of-time，能够了解为预编译）的摸索

丛 Elm（2012 年）、Marko(2014 年)、Vue2（2014 年）到 Svelte（2016 年），一直有先行者摸索AOT。

咱们能够从两个角度对待 AOT 的意义：

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

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

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

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

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

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

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

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

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

为 JSX 减少束缚

这是同样采纳 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 年后国内开发者造轮子的方向也会变动。

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

运行时的性能优化计划
运行时的 i18n 计划

……

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

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

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

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

期待么？恐怖么？

关于javascript:2024年的前端怎么干活

Svelte 背地的意义

DX（开发者体验）

UX（用户体验）

造轮子的方向扭转了

总结