來自NPM聯(lián)合創(chuàng)始人的預(yù)言：前端未來會(huì)這樣

大家好，我卡頌。

在WWC22[1]上，NPM聯(lián)合創(chuàng)始人（當(dāng)前是Netlify的數(shù)據(jù)分析師）「Laurie Voss」發(fā)表了對(duì)「web開發(fā)」未來發(fā)展方向的預(yù)測(cè)演講。

本文讓我們來看看這位有26年web開發(fā)經(jīng)驗(yàn)的數(shù)據(jù)分析師，會(huì)帶來哪些洞察。

太陽(yáng)底下無新鮮事
未來5年「web開發(fā)」會(huì)如何發(fā)展，在說出自己的預(yù)測(cè)前，「Laurie」先表示：「在座各位，很可能討厭我的預(yù)測(cè)」。

因?yàn)樗约壕筒淮娺@個(gè)預(yù)測(cè)結(jié)果。

那么他預(yù)測(cè)的依據(jù)是什么呢？簡(jiǎn)單來說就是：

太陽(yáng)底下無新鮮事

作為一個(gè)有26年web開發(fā)經(jīng)驗(yàn)的數(shù)據(jù)分析師，「Laurie」總結(jié)了技術(shù)發(fā)展的模型。

簡(jiǎn)單來說，一項(xiàng)技術(shù)的生命周期會(huì)經(jīng)歷一個(gè)輪回：



提出解決思路
最初，人們?cè)陧?xiàng)目開發(fā)時(shí)遇到一個(gè)問題，有部分人開始嘗試解決這個(gè)問題。

一旦某個(gè)人提出一個(gè)讓人覺得「這個(gè)思路很棒」的解決方案，當(dāng)遇到類似問題時(shí)大家就會(huì)嘗試用自己的理解將這個(gè)解決方案落地。

比如，當(dāng)Dan提出Redux模型時(shí)，社區(qū)還沒有更好的狀態(tài)管理解決方案，于是這個(gè)方案被廣泛接受，涌現(xiàn)出很多「基于Redux模型的狀態(tài)管理方案」。









這是個(gè)不斷重復(fù)造輪子的過程（也是很多KPI項(xiàng)目的源頭）。

找出最佳實(shí)踐
隨著這套解決方案不斷實(shí)踐，會(huì)逐漸產(chǎn)生「最佳實(shí)踐」。

當(dāng)「最佳實(shí)踐」產(chǎn)生后，開發(fā)者通常會(huì)覺得無聊，因?yàn)樵谶@個(gè)方向沒有什么可探索（可造輪子）的了。

這時(shí)候，某個(gè)無聊的程序員會(huì)想：我可以制造一個(gè)「大而全」的框架/系統(tǒng)/產(chǎn)品，一勞永逸的解決這類問題。

也就是說，將最佳實(shí)踐「商品化」。

最佳實(shí)踐的商品化
「商品化」過程通常是很激烈的，會(huì)有很多團(tuán)隊(duì)/公司/個(gè)人參與其中，提出自己的產(chǎn)品，并抨擊競(jìng)爭(zhēng)對(duì)手在某些方面的不足。

比如，各種前端框架，可以認(rèn)為是前端工程師這類消費(fèi)者消費(fèi)的商品。

消費(fèi)者有自己的偏好，可能有人喜歡Vue，有人喜歡React。但作為商品，最終會(huì)產(chǎn)生一個(gè)事實(shí)上的贏家。

這是一個(gè)不變的經(jīng)濟(jì)規(guī)律 —— 要達(dá)到某個(gè)目的，可能有很多產(chǎn)品可供選擇，但一旦其中某款產(chǎn)品被更多人選擇：

作為老板，可以更容易招到「會(huì)用這款產(chǎn)品的程序員」

作為程序員，可以更好利用這個(gè)產(chǎn)品的社區(qū)生態(tài)

這又會(huì)反過來使得該產(chǎn)品被更多人選擇，最終馬太效應(yīng)（強(qiáng)者愈強(qiáng)）產(chǎn)生。

比如，與Wordpress同時(shí)期出現(xiàn)的，還有很多博客建站產(chǎn)品。



但到2022年的今天，全世界43%的網(wǎng)站是Wordpress驅(qū)動(dòng)的。第二名與他的差距恐怕都不是一個(gè)數(shù)量級(jí)的。

抱怨基礎(chǔ)欠缺
當(dāng)某一產(chǎn)品成為主流后，就會(huì)聽見一種聲音：不要光會(huì)用產(chǎn)品/系統(tǒng)/框架，你還得理解背后的原理。

當(dāng)「Laurie」剛當(dāng)開發(fā)時(shí)，主流的標(biāo)記語(yǔ)言是[SGML](https://www.techtarget.com/whatis/definition/SGML-Standard-Generalized-Markup-Language#:~:text=SGML%20(Standard%20Generalized%20Markup%20Language "SGML")%20is%20a%20standard%20for%20how,It%20is%20metadata.) (Standard Generalized Markup Language，標(biāo)準(zhǔn)通用置標(biāo)語(yǔ)言)

HTML僅僅是SGML的一個(gè)微小子集，特點(diǎn)是規(guī)范比較松散，但比較易學(xué)。

如果你在當(dāng)時(shí)使用HTML，資深工程師會(huì)告誡你：不要光會(huì)用HTML，還得理解背后的SGML，要不然是做不長(zhǎng)久的。

大規(guī)模應(yīng)用
當(dāng)某個(gè)產(chǎn)品成為絕對(duì)主流，被大規(guī)模應(yīng)用，以至于成為事實(shí)上的「基礎(chǔ)設(shè)施」后，下一代技術(shù)人很可能不會(huì)再接觸上一代人所謂的「原理知識(shí)」。

比如現(xiàn)在，HTML已經(jīng)成為前端基礎(chǔ)設(shè)施了，誰(shuí)還記得SGML呢？

另一個(gè)例子，現(xiàn)在的老前端，很多都用過jQuery。






在前端框架興起之前，大家都用jQuery操作DOM。面試時(shí)也會(huì)考察jQuery源碼。

畢竟，大家都認(rèn)可 —— 原生JS才是基礎(chǔ)。

jQuery中的選擇器太好用，以至于主流瀏覽器都將他內(nèi)置了，這就是querySelector的選擇器語(yǔ)法。

最終，querySelector成為選擇DOM時(shí)事實(shí)上的標(biāo)準(zhǔn)。誰(shuí)會(huì)在意背后的原理呢？

回到原點(diǎn)
最后，在基于新的「基礎(chǔ)設(shè)施」的開發(fā)中又會(huì)遇到新的問題。于是，一切又回到了起點(diǎn)。

比如，最初開發(fā)者使用JSP、PHP開發(fā)前端頁(yè)面。

后來有了CSR。

再后來為了解決CSR的各種問題，有了SSR。

但從實(shí)現(xiàn)原理來說，JSP、PHP不就是SSR么。

Laurie的預(yù)言
最后，基于上述輪回模型，「Laurie」提出了對(duì)「web開發(fā)」的預(yù)言。

在21年的一次調(diào)查中顯示，有68%的開發(fā)者使用React開發(fā)頁(yè)面。

「Laurie」表示：在他的職業(yè)生涯中，能達(dá)到j(luò)Query那么大的使用規(guī)模，React是唯一一個(gè)。

沒準(zhǔn)兒未來React會(huì)被作為基礎(chǔ)設(shè)施在瀏覽器中直接實(shí)現(xiàn)（就像jQuery的選擇器一樣）。

但不是以「直接集成React本身」的方式，可能是將當(dāng)前還不太好用的Web Components重新設(shè)計(jì)為類似React Component的形式。

在當(dāng)前，有很多新的框架基于React實(shí)現(xiàn)，比如Astro、Remix、Next.js、Solid.js。

這些框架的開發(fā)者假設(shè)自己的用戶已經(jīng)會(huì)用React、喜歡用React（否則也不會(huì)用他這款框架），這從側(cè)面反映了React已經(jīng)被作為前端基礎(chǔ)設(shè)施。

如果接受了這個(gè)設(shè)定（React會(huì)作為前端基礎(chǔ)設(shè)施），那么我們就回到了輪回模型的起點(diǎn)。

有什么事情是當(dāng)前開發(fā)者用React反反復(fù)復(fù)實(shí)現(xiàn)，又覺得很無聊的事呢？

一個(gè)答案是：寫組件。

所以，「Laurie」認(rèn)為：未來5年，基于「React組件」的可視化編輯器會(huì)成為主流。

類似React Bricks[2]這款產(chǎn)品：



屆時(shí)，一部分開發(fā)者負(fù)責(zé)實(shí)現(xiàn)各種功能的React組件，這類組件被稱為Bricks（磚塊）。

而大部分開發(fā)者則基于磚塊，用可視化編輯器拖拽實(shí)現(xiàn)不同頁(yè)面。

這類開發(fā)者甚至不會(huì)接觸到HTML，在他們的基礎(chǔ)設(shè)施中，最小的單位是磚塊（React組件）。

事實(shí)上，早期的瀏覽器（由「Sir Tim」開發(fā)的WWW）就是用拖拽、輸入等方式實(shí)現(xiàn)的富文本編輯器。



呵，太陽(yáng)底下無新鮮事。

總結(jié)
如果你看到這個(gè)預(yù)測(cè)后覺得挺討厭的 —— 就這？

就像文章開篇就提到的，「Laurie」自己也討厭這個(gè)預(yù)測(cè)。

但歷史一次次證明，曾經(jīng)被討厭的設(shè)計(jì)，最終很可能變成主流（比如2013年時(shí)，前端們對(duì)待JSX的態(tài)度）。

26年前的開發(fā)者會(huì)認(rèn)為只會(huì)HTML，不會(huì)SGML是不靠譜的。

10年前的開發(fā)者會(huì)認(rèn)為只會(huì)jQuery，不會(huì)原生JS是不靠譜的。

現(xiàn)在的開發(fā)者會(huì)認(rèn)為只會(huì)前端框架，不懂實(shí)現(xiàn)原理是不靠譜的。

那有沒有一點(diǎn)可能，5年后的開發(fā)者會(huì)認(rèn)為只會(huì)拖拽生成頁(yè)面，不懂開發(fā)組件是不靠譜的？

參考資料
[1]
WWC22:
https://www.youtube.com/watch?v=hWjT_OOBdOc

[2]
React Bricks:
https://reactbricks.com/

作者：卡頌


歡迎關(guān)注微信公眾號(hào) ：魔術(shù)師卡頌