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（抽象語法樹）開始構思

期待麼？恐懼麼？