2022大前端總結和2023就業分析

i5ting發表於2023-02-04

本文首發CNode社群、SegmentFault、稀土掘金和Node全棧公眾號,本文版權歸作者所有,未經作者同意,禁止轉載。

我在年前給掘金平臺分享了《2022年熱點技術盤點》的前端熱點,算是系統性的梳理了一下我自己對前端一整年的總結。年後,在知乎上看到《前端的就業行情怎麼樣?》,下面都是各種唱衰前端的論調,什麼裁員,外包化,沒前途,薪資不過20k之類的,我非常不認同他們的觀點,於是我也回覆了這個提問,基於前端情況、趨勢和我個人的理解,給出了一些就業行情分享,大家還是比較認可的,收藏的比點讚的還多。既然都喜歡看,那我就把這些人寫的稍微詳細一下,希望有理有據的分析能夠對更多前端的朋友們在寒冷的冬天,感受到更多溫暖,更加堅定。

本文主要講了前端2022的主流趨勢,年度大戲低碼和2023就業行情分析,對未來的2個可能放大的點AI和Cropto和前端相關的部分也有一點點覆蓋。2022年是黑天鵝滿天飛的一年,整個網際網路局勢都很差,從人才濟濟到“人才擠擠”,2023年前端就業形勢會怎樣呢?下面一起來嘗試分析一下。

先看一下2022年前端主流趨勢

2022年的前端還是非常熱鬧的,比如Vite和Turbo的效能之爭,惡劣的Faker.js事件,尊重但不一定認同的SubStack退網事件,已知多位大佬加入區塊鏈公司,Doodlewind在AFFiNE做編輯器,Justjavac在Deno & Rust之外又參與了Astro原始碼貢獻,Antfu開源的Vitest非常棒,如果評年度卷王2位,一定會有Antfu。如果只評一位,那麼一定是Jarred-Sumner,他是Bun.sh作者,Bun是2022年的效能最好的Runtime,風光一時無二,從 2021 年 4 月初始提交至今已有超過百萬行的程式碼增刪量,單人完成了 98% 以上的提交量,2月3日剛釋出了Bun v0.5.5。

透過我的種種觀察,我的分析是前端專業成熟度基本上見頂了,基建基本穩定,2022年做的事都是深耕基建和前端垂類細化,整體看是圍繞研發體驗最佳化做的事兒為主,各垂類全面專業化。下面圍繞效能、執行時、體積、Rust等四個方面進行講解。

當前前端趨於成熟

image.png

從2005年之後,相繼出現Prototype,Motools,jQuery等為了抹平瀏覽器差異的庫,極大的降低了全棧開發門開。隨著電商高速發展,促成了前後端分離,並最終催生了前端工程師這一專業工種。

在2009年,Node.js橫空出世,由於Node.js使用V8這個最高效的JavaScript引擎,所以在語法上,對前端更友好,或間接或直接的促進了前端構建領域的日漸成熟,比如對html不滿足,就有了Pug、ejs等模版,比如css不滿足,就有了sass,less等CSS前處理器,比如js不滿足,就開始有了Coffee等新的衍生語言。除此之外,在模組規範層面也是有了很多演進,從AMD到CommonJS到UMD,完成了很多優秀的探索,比如require.js,sea.js這樣的優秀實踐。另外JavaScript語言本身也取得非常大的發展,從ES5一路升級,在TC39組織下每年一個版本,為了相容各個版本特性,誕生了Babel這樣的超級怪物,當然這樣間接的解決了非同步流程控制問題,從Callback hell到Promise到Generator到Async function,雖然很亂,到總歸是回到了正路上。除了這些基礎外,在UI框架層面也做了大量時間,從早年各種hack物件導向基礎,到extjs類的物件導向的開發方式,甚至是從Flex、Silvelight等富客戶端,但都是驚鴻一瞥,未能一直稱雄。

隨後2013年之後,開始出現Backbone,Angular類似外掛,將MVVM、IoC、指令等引入到前端,繼而促使React、Vue在DSL,VDom層面展開激烈角逐,並促成了React、Vue、Angular三家爭霸的局面。同時,也使得分散的技術棧開始變得不滿足構建需求,於是從Grunt、Gulp等傳統構建器,演進為以Webpack代表的打包器(Bundler)。

這還只是前端爆發的開始,2015年之後,Node.js開始穩定在1.0版本,並持續發力,使得BFF(backend for frontend)遍地開花。同時圍繞React、Vue、Angular三大框架的移動端開發也如火如荼,比如react-native、weex等都變得流行起來,幾乎是強運營場景下必備的神器。

從2013到2019年間,是大前端的爆發式增長期。從前端基建,跨端,BFF(backend for frontend)等領域都取得了極大的進步,這也促使前端人才需求極大,尤其是對專業型人才需求極大,薪資也是可以用“狂飆”來形容。可以說這6年是前端發展最好的時期,Java自從被Spring包養之後變化不大,移動端更是在2005年下半年之後開始式微,在這種情況下,只有前端幾乎是唯一大的增長點。很多人黑前端娛樂圈,屁大點事兒都能被放大到很大,這種聚光燈效應足以說明大家對前端的關注點。

甚至那幾年有前端同學調侃說:“學不動了”,就是因為三大框架生態和大前端的快速發展導致的。但,2020年之後,基本上就沒有人這樣說了,前端的新輪子也不再那麼高頻率出現了,就連幾個核心框架,更新的內容也都開始擠牙膏了,甚至是互相借鑑。這就意味著前端成熟度已經趨於平穩,剩下的事兒就是如何趨於成熟。我們看一下這2年前端所發生的變化也確認如此,你能看到的變化,已經不是輪子上的廣度上追求變化,而是更多的聚焦核心場景圍繞深度上進行探索,這就在穩定性和開發者體驗上做更多努力,這是極好的變化。

這裡以Svelte為例,它甚至還有點返祖,它官方介紹的特性就是:寫更少的程式碼(開發者體驗),無VDom(效能),真正反應式(開發者體驗)。基本上也都是圍繞開發者體驗和效能2個方面進行創新的。

image.png
下面就當下新潮的技術(Solid.js、Svelte、Remix、Astro、Vite、Bun、Tauri、Turbo等)進行總結,圍繞效能、執行時、體積、Rust四方面分別講解,具體如下。

1、效能

先看一下為什麼會有效能問題,問題和解法如下。
1、啟動時間慢,大家都受夠了Webpack陣營:於是就有了swc、esbuild這些編譯器,以及Turbo、Vite這樣的基於新編譯器的構建方式。
2、配置太多:約定大於配置或0配置的開箱即用
3、包太大,動不動1個G的NPM包大小:Yarn,pnpm。有朋友開玩笑,1個G不大,可是電腦才256個G的硬碟。
4、模組拆分:Lerna | Yarn/ pnpm workspace。

其實都是在解決大規模程式設計問題,如果再直接點說,那就是解決的是開發者自己的體驗問題。整體看前端生態真的做的已經很好,吊打其他社群包管理機制。某一次我在知乎上看到一個回答,往死裡罵npm,然後我就簡單的拿NPM和Cargo對比了一下,結果那位回答的人來質問我不能這樣比。這就是典型中國人,自己孩子隨便罵,別人說一聲都不行。如此看來,我這激將法還是管用的。

下面是Umi作者雲謙大佬整理的效能比較資料,以及Vercel官方對比的Vite和Turbo資料對比。至於具體資料大家不必詳細看,資料在變,不同基準下也是有影響的。之所以放這2張圖,就是想讓大家瞭解一下,當前幾個主流框架裡都在做效能競賽,這裡面最有代表性的就是Webpack5,Vite和Turbo。

image.png

圍繞構建工具,我曾經畫過一張圖,基本講清楚了前端的構建演進歷史。參考下圖。

image.png

最開始的時候,很多前端,包含Node.js工程師都是使用make作為構建工具的,如果大家感興趣,可以去看看tj早年專案結構(其實,《深入淺出Node.js》裡也是用到make的,樸大大也很喜歡make)。之後就是Grunt,基於模版和外掛機制的構建工具,比如jQuery等都是基於Grunt構建的。但Grunt有2個問題,就是效能不太好,另外配置複雜。於是Gulp橫空出世,很快就替代了Grunt,它是基於Node.js stream機制做,只要機器有資源就可以完全利用上,在效率上比基於檔案模版的方式高出一大截。即使在今天看,Gulp也是極為優秀的構建方案。
但前端發展非常快,各種CSS前處理器,模版,語言,還有Babel等各種相容,於是就有了Webpack這樣的Bundler,透過外掛和loader機制,把前端這點亂七八糟的快速發展產物整理的順暢很多,在很長很長一段時間,Webpack都隨著三大框架一起成長,結果臃腫,笨重,一個稍大一點的專案幾秒到幾十秒都是常事。那個時候,沒的選,學東西都來不及,溫飽還沒解決,誰還有心思想什麼馬斯洛需求層次理論啊。

到2019年之後,開始出現Snowpack,主要是針對ESM進行Bundless打包方案,隨後Vite也借鑑了Snowpack的思路,提升開發者體驗,並以Rollup和esbuild生態輔助,以高明的設計,最小的投入,獲得社群快速的認同,有點像當年Gulp替代Grunt一樣。按照正常劇本的話,Vite會和Gulp一樣大火。偏偏半路殺出一個程咬金,Vercel開源了Turbo,以Rust做基建,拿Rust優勢為底,重寫底層工具鏈,從根上開始槓,做了一個硬核的事兒。

其實,充分競爭是好的。如果效能提升10倍,甚至100以上,這對開發者是多麼大的體驗提升啊。不管最終勝者是Vite,還是Turbo,或者其他,都無所謂,我們能看到的是未來前端開發會非常幸福。

2、執行時

2013到2019年,TC39組織發展的非常快。曾經阿里,360都以能加入TC39為榮,能夠從語言這樣的底層規範上參與,能夠很大程度提升中國前端的影響力。比如2021年阿里巴巴提案Error Cause 進入Stage3,也是當年很火的新聞。但實際上經過這麼多年的發展,能提的都提了,能借鑑的也都借鑑了,就好比現在Node.js原始碼想去提個PR是不容易的一樣。

2022年最火的一個專案是Bun.sh,官方介紹Bun是一個快的JavaScript執行時,且all in one,就是說它內建包管理。基於Zig和uWebSockets,效能是極好的。

其實,Node.js從2009誕生之後,除了當年iojs分家又合併的事外,就是ry另立門戶做的Deno,其實它也是一個JavaScript執行時,無非是對瀏覽器和最新標準支援的更好,加上對TypeScript直接支援,開箱即用是非常好的設計。

我們可以把Node.js、Deno、Bun放在一起走一個簡單的對比,具體如下。

image.png

它們都是非常優秀的JavaScript執行時,無論是star數,更新頻度,貢獻者都是非常健康的。圖中有一個錯誤,說Node.js是建立於2014年,這其實是iojs合併回來的時間,實際上Node.js是2009年。

去年之所以Bun爆火就是因為它的效能極好,下面我們看一下Bun的效能,分別是Bun v0.1和v0.4的效能對比。

image.png

透過上圖,可以明顯的看出,Bun的效能基本上是Node.js和Deno的3倍左右。但只看資料其實是不合適的,按太郎的說法: “等 Bun 把所有的 SegmentationFault, Illegal instructionversion 'GLIBC_2.29' not found 修完了以後效能會回到 Node.js/Deno 水平”,我是非常認同這個說法的。

當然,Node.js也有它的問題,尾大不掉,很多東西想改也是沒法的。事實上,Node.js更新的也是非常多的,比如Deno引以為豪的network import,在Node.js v17.6裡就實現了,除了直接ts沒有支援外,其他差別就不大了。

image.png

針對Runtime來塊,Bun的思路是對的,all in one,不過我更希望有一個集合3個Runtime的優勢的Runtime,比如支援network import,自帶包管理,原生支援Typescript。想想,對Node.js開發者來說,那也是很美好的事兒。其實就是歪歪一下而已,Node.js已經很難做改造了,不然也不會在Serverless容器裡因為冷啟動時長過長,而導致很多公司自己定製Runtime,比如阿里去年開源的noslate便是因為這個原因鼓搗出來的。

這裡再稍微囉嗦一點,除了Runtime層面,其實在應用層面效能也是有提升,比較典型的例子是Deepkit,Deepkit的做法是將 TypeScript 轉換到位元組碼,提供反射 開箱即有型別轉換、序列化/反序列化器,驗證器和自動型別守衛,所有的 TypeScript 型別都受支援。在@deepkit/core裡使用很多hack技巧,比如用new function來建立新的動態類。但由於型別上做了大量最佳化,包括bson解析,RPC協議最佳化等方面有非常大的優勢,所以在DB和RPC效能方面是非常不錯的。除此之外,它在除錯方面也是非常方便的。參見下圖。

image.png

就目前deepkit情況而言,它是非常優秀的專案,deepkit目標非常遠大,它自己也實現Web server,但效能和Fastify比還是有一定差距的,可以關注一下。

除了deepkit之外,其實還有一些社群想法也是可以關注的,對提升效能都是比較好的解法。

3、體積

通常產品開發都是先實現功能,然後再最佳化,然後再做周邊。其實這種思路在大前端生態裡也是這樣的。舉個例子,SSR就是非常典型的例子。以淘寶的活動頁為例,早年一直是沒有SSR支援的,後來拉新需求以及技術突破,自然而然就會做SSR了。就好像我當年使用SSR,總會被問到SSR的價值,明明就是錦上添花的技術,為什麼一定要用,原理是一樣的。當你想提升效能的時候,除了萬金油快取外,減小體積就是最簡單的方式,SSR就是最典型的實現,當下SSR、SSG等已經成了前端標配,像astro也是在體積上做了大文章的優秀專案。

除了前端體積外,跨度領域其實也是在最佳化的。這裡舉一個2022年輪子哥Egoist的一個專案dropcode,頗具有代表性。dropcode技術棧和ui如下圖。

image.png

dropcode就是一個簡單的管理程式碼片段的軟體,它的技術棧是很潮的,採用Tauri做打包,採用Vite做構建,採用Solid.js做ui框架,這三個大殺器都是非常優秀的。

  • Tauri是Rust編寫的跨端構建方案,優點是基於Web技術可以打出比Electron更小的包。體積小10倍以上。
  • Vite是基於ESM的方案,在體積和效能上也是極為優秀的,絲般順滑。
  • Solidjs是一個react類dsl增強的最佳化框架,7kb的包,也是把體積做到極致了。createSignal不評價,優點缺點都有的。

關於Tauri這裡是有必要講一下,它是Rust的代表應用之一,在跨端構建領域也算一時風光,大有取而代之的意思。下面是Tauri的架構圖和功能對比。

image.png

上圖右側對比功能基本差不多,Linux系統的安裝包大小是非常值得關注的,將近20倍,這也是最吸引開發者的特性。從Tauri架構上來看,設計的是很合理。

1、TAO是建立跨平臺應用視窗的庫,支援所有主要平臺,除了PC,還有iOS和Android,野心還是很大的。
2、WRY是基於Tao構建的跨平臺Webview渲染庫。
3、核心是Tauri Runtime和周邊。

接下來我們對比一下Tauri和Electron。從Tauri v1.2釋出宣告上看,它是使用Rust編寫的,構建最佳化過的,安全的,前端獨立的應用多平臺打包軟體。

這裡重點介紹一下構建最佳化,主要是它的tao和wry使用各個作業系統的內建Webview,而不是像Electron內建Chromium。所以在安裝包大小上,具有絕對優勢。但辯證的看,使用系統內建的Webview,Webview相容性是個大問題,會不會出現ie6類的相容問題不好說。而Electron是所有平臺展示都一樣,這就是拿體積換體驗一致。參考下圖,瞭解一下就好。

image.png

下面看一下Tauri相關應用場景,2022年最火的軟體大概Chatgpt,圍繞Chatgpt衍生出很多周邊,透過Tauri打包chatgpt,lencx的做法就非常不錯,目前已經超過6.9k star數了。另外一個應用就是侑夕寫的pake,這是一個簡單的基於Tauri的封裝,但用法卻極為簡單,可以讓網頁快速變成pc應用。試用了一下,非常的舒服,短短几個月就10.2k star數了。

image.png

大家對體積和效能的關注是一樣的,除了Tauri外,Node.js社群裡也有Gluon這樣的方案,都是採用系統Webview,不過目前Gluon還是處於比較初級階段,可以關注一下。下面是Gluon官方給出的對比圖。就效能和體積來說,Gluon和前面講的Bun類似,希望它們都能夠發展的越來越好。

image.png

從SSR,到Solidjs,到Vite,到Tauri,到Gluon,都是在體積上做了很大最佳化的優秀技術,我相信未來還會不斷在體積和效能最佳化方案深究,這對使用者和開發者來說都是好的。

4、Rust正在變成前端新基建

說 Rust 是 WebAssembly 未來,目前看還不是,多語言裡大家機率不會差太多。Web Server 已經卷死了,無機會。雲原生是 Go 的地盤,難下手,機器學習 Python 才是王者,大資料和後端 Java 天下,可玩的有限。綜上,JavaScript 依然是應用軟體最好的選擇。但 Rust 做基建,提供更好的開發體驗,倒是大有可為的。

當然 Rust 是寫前端基建,是當下趨勢,我整理了一下相關工具鏈的倉庫[https://github.com/i5ting/lea...]
(https://github.com/i5ting/lea...),目前已經超過900多star了。

image.png

Rust 語言在前端工具鏈的影響越來越大,目前可以看到 Next.js 對 Rust 重倉,招攬大量人才,swc 作者,Rollup 作者等等,未來可能是一個很好的解決前端體驗的方向。

《Rust Is The Future of JavaScript Infrastructure》一文作者是 Vercel 的開發者關係主管,這篇文章和我的觀點一樣,自備梯子。 很多東西都是上錯花轎嫁對郎,比如 MVC,比如 Node,如今又多了 Rust。必然雄起!未來隨著 WebAssembly 普及,Rust 才能變成應用級別的。

其實,很多經典的Rust庫在blessed.rs網站上都是有的,上面內容非常全。我對Rust模組的看法是都偏底層,比如CLI用的最多的就是clap,類似的模組遠沒有Node.js世界裡百分之一,這意味著Rust社群比較喜歡深耕,不喜歡搞各種創新。另外,從功能上clap這種就屬於剛好夠用的,這和cargo類似,基本相當於低配版的pnpm。之前和粉絲們開玩笑,狼書三卷出完了,如果再出卷4,我的唯一選擇就是《狼書卷四:Rust從入門到棄坑》,這是玩笑話,也是真實想法,我非常認同Rust對大前端和Node.js的未來影響。

image.png

我的小兄弟十憶在2022年寫了一個v8-profiler-rs模組,v8-profiler-rs 是一個使用 Rust 開發的用於線上智慧化的分析 V8 heapsnapshot 堆快照的專案。幫助使用到 V8 引擎的應用開發者,例如Node.js/Chrome/Deno/Electron 等程式,旨在幫助開發者更直觀的理解程式記憶體結構以及輔助定位記憶體洩漏問題。這裡面技術點還是非常複雜的,需要熟悉v8,還要用rust重寫,裡面演算法部分還是非常多的,比如支配數演算法。

image.png

其實,它實現了多少功能不重要的,重點要的是它能夠代表趨勢潮流。從Swc到Turbo到v8-profiler-rs,基本上前端工具鏈已經被Rust實現差不多了,比如ESLint就曾在Issue裡說要用Rust重寫,類似的事兒比比皆是,綜上種種,我個人對Rust打造前端基建是非常有信心的。

總結

2022年,從效能,執行時,體積等多個方面講了前端趨勢,同時Rust正在變為前端新基建,整體上看前端趨於成熟,更多的都是做的是深耕,最佳化的事兒,這些對使用者和開發者都是極好的。
如果說只能推薦一個,那就只能是Next.js。雖然Next.js和張宇昂寫的ssr框架是競品,我個人不是很喜歡Next.js後面的改進,但它確確實實是好東西。

1、它是一個開箱即用的框架,從SSR開始做,然後轉型開箱即用的應用框架,支援CSR,支援SSG,支援各種最佳化,連圖片、字型、SEO等很多小細節都扣的極其細緻。這對新手極其友好,所以大家的好感是極好的。
2、除了框架自身做的好用,簡單,強大外,搭配Vercel雲服務,一條命令完成開發和部署,這一點也是對開發者極好的體驗。
3、Vercel對 Rust 重倉,招攬大量人才,swc 作者,Rollup、Webpack 作者等等,對Turbo這種基建硬核的事兒有勇氣有能力,我是非常佩服的。

有Vercel打樣,引領前端趨勢潮流,未來很多框架都會趨之若鶩,關注開發者體驗的,這才是真正的大好事。

image.png

年度大戲(低碼):又一次全棧,至暗時刻還是新機會?

每年都會做一次年度總結和趨勢預測,以往我對前端趨勢都是比較樂觀的,但在今年,此時此景,我竟然有一種莫名的惆悵,因為今年可能是至今為止變化最大的一年。對應標題中的全棧,可能大家都熟悉,但今天我要講的是“又一次全棧”,低碼全棧,是我以為的未來發展趨勢。在當前前端成熟度和技術突破的結果上,催生低碼全棧,繼而導致工程師角色的變化,可能是前端的至暗時刻,也可能是新的機會。本文主要探討這個問題,相信能夠給大家一些不一樣的輸入。

全棧歷史

講到全棧,大家的都是既熟悉又陌生,且褒貶不一。按英文解釋,全棧是fullstack翻譯過來的,在JavaWeb時代其實是不講全棧,只是Java工程師裡,有Java Web工程師這個分類而已。在這個角色裡,開發者需要會Java SE基礎,掌握JavaEE,會寫jsp、servlet、javabean,會model1和model2,會ssh框架,做的最多的事兒就是針對db的crud。至於ibatis等都是額外的零食。那個年代能折騰的其實很少,比如nutz算不錯的開源專案,fastjson也不錯,剩下的就是各種apache的包,結果最終大一統到spring全家桶了。這時候的Java Web工程師其實就是全棧工程師了。

在2005年,Ruby on rails作者dhh透過15分鐘編寫一個blog,震驚世界。一下子ruby和rails成了效率工具,確實ruby很優秀,簡潔,結合強大的超程式設計能力可以實現很多超能力(黑魔法),在rails裡透過腳手架,以及檢視抽象等,才使得15分鐘寫1個blog成為現實。ror的影響一直持續到現在,很多語言裡的框架都是借鑑rails的,比如目錄結構,腳手架實現。在《狼書》卷三里,自己動手寫企業級Web框架,其實也是借鑑了rails寫法的。

無論Java Web工程師,還是RoR工程師,他們都是一個人搞定開發,從db到檢視,從開發到釋出運維,這就是早起的全棧。所以很多那個時代過來的人都會認為全棧就是全乾的說法,事實上看確實沒錯,不過是自我調侃而已。這時候的前端非常原始,基本上js能寫一些表單處理校驗,動畫處理基本就夠了,最麻煩的大概就是瀏覽器相容了,於是各種prototype,motools,jquery等應運而生。說白了,這些都還是工具屬性,所以,這時候的前端,基本上是全棧工程師的加分技能而已,還不是一個角色。

隨著網際網路的崛起,在2005到2009年之間,前後端開始分離,標誌性事件應該是淘寶最先引發的,前端開始更多的關注UI表達、瀏覽器相容性,元件複用,效能最佳化等。於是在工具庫之上,開始出現各種ui庫,比如jquery-ui,我理解是原始ui框架的開始。然後是extjs,透過class方式定義ui,在企業級開發裡被大量使用,很多ui框架都開始迷信物件導向(oop)能夠解決ui複用問題。在一個連oo機制都不完善的語言裡,自己實現oo寫法是那個時代特有的特徵。無論如何,專業化分工,帶來的工程師職業發展的更多可能性。這個階段,很多前端都會自嘲為切圖仔,甚至還有專門的css重構工程師。

對前端影響里程碑事件的是2009年,Node.js誕生,它對前端工程化落地提供了基礎。雖然本意是解決c10k問題,卻誤打誤撞,變成了前端基礎設施。透過js能夠寫構建,解法了前端很多禁錮。從寫一點簡單構建指令碼,到grunt、gulp,基本上你能想到的構建都涵蓋了,甚至連伺服器運維都有一整套js工具鏈。如果僅僅是構建方面增強,其實是說小了,node其實是開啟了工程師的想象力,當js具備io讀寫功能,自然就是編譯的良好實驗場。再加上各種js自身痛點(比如模組規範缺失),ruby等其他語言影響,於是出現了ejs這樣的模版引擎,coffee這樣的類ruby語法的轉譯器,從ruby解決的scss等,於是潘多拉魔盒被開啟了。像新文化運動一樣,前端開始不滿足“切圖仔”的角色,而是想打造更好的前端。隨後backbone,angular、react、vue等依次登場,後面就是大家熟悉的話本了。這裡要講的是,從簡單構建到bundler是一個跨越。事實上,2013年之後,曾經能搞定jQuery的那波Java大佬已經搞不定React了,原因是概念太多,前端不成熟,沒有cra這樣的東西,於是徹底切斷了前後端的分工。
按墨菲定律,凡是可能出錯的事有很大機率會出錯,引申到Node.js身上也是一樣的,它是什麼,它就該做什麼。當前端掌握了這個大殺器,不搞點事情怎麼可能呢?於是早起的MEAN新一代架構便應運而生,說白了,就是mongdb、express、angular、node四個當時先進技術的,這其實也是上一代全棧的延伸。

除了MEAN外,還另外一個概念就是BFF,backend for frontend。就是所謂的api膠水層解決方案。最初bff是為了解決ios,android等移動端和pad、pc的api聚合問題而被thoughtworks提出來的,反正是膠水層,難度不大,用node寫更合適。另外一個契機是網際網路架構的演進,從前後端分離,慢慢固化到ui,api,rpc和db四個部分。在這種架構下,api層聚合,需要的是前端能搞定,效能好,快發簡單,這種場景下舍Node其誰。所以從我個人角度來看,bff才是第二個的全棧階段。從專業化分工到膠水粘結,確實是非常高效的。在《狼書》卷一和卷三大量講的內容都是這件事,搞來搞去也無非快取,RPC、MQ。在卷二里講的Web開發,其實也是BFF必須掌握的技能。

至此,我們講了2個全棧高潮期,具體如下。
1、從Java Web到RoR,引發的“全乾” fullstack。這個階段,全乾是精髓。
2、由Node.js引發的API膠水層革命,即bff層fullstack,這個階段是再網際網路四大件體系下,前端和API膠水層全乾。也有個說法,這叫前端3.0,本質沒變,都是想拓寬前端的職能範圍。

時至今日,前端框架混戰,爆發式增長的階段已經過去了。2020年之後,已經很少有人說學不動了,除了技術創新成本增加外,新東西增量也放緩,還有就是現有體系不斷增加,比如cra,umi,next等越來越完善,基本上都是開箱即用的。各種ui庫多的是,各種視覺化,拖拽,編排也非常多,且垂類越來越好,比如3d、vr/ar/webassemly等生態。

那麼,下一個正在發展中的階段是什麼呢?我以為是全棧的第三個階段:低碼全棧。如下圖,表達了三個階段的演進關係。

image.png

低碼全棧

在2019年之後,前端技術趨於穩定,生態豐富,發展出很多對低碼友好的技術生態。下面我們具體分析一下,低碼全棧的歷史必然性。

image.png

結合上圖,從基建形成低碼技術,繼而出現面向低碼的全棧。這裡先講解基建的必然性。

1)前端成熟,這個大家都可以理解。
2)視覺化技術成熟,在前端生態裡視覺化已經相當夠用了。各種畫布,所見即所得,編輯器技術也得到大大的發展。都想幹掉office,顛覆企業協作,這也是可以理解的。
3)SQL成熟,這裡更多的是指DB層面的成熟,無論量,運維,還是oltp和olap融合,都是非常成熟的,至少目前的網際網路應用是驗證過的。各種SQl相關定製和實現也很容易,會SQL的人更是不計其數,好一點的PD都能自己搞定。
這裡要講一點不一樣的內容,比如Byzer,將演算法和SQL結合是一個很有趣的方向,社群裡py類似專案也是有的。我們可以這樣理解,在表單這種垂類應用上,藉助演算法模型,能夠提供更多分析和實操能力。這個我理解才是趨勢。
4)AI演算法成熟,雖然AI普及很難,但在特定場景,真的是很好用。

以上四點是基礎,但不是載體。我們目前能看到的,承載所有上面技術的是低碼技術。

對前端帶來的技術變化

下面我們看一下低碼全棧給前端帶來的一些變化,簡單講是服務下沉,給了一些技術變革的機會,以當下投資圈最火爆的retool為例。

image.png

大家看去retool官網首頁看一下這個影片,太震撼了。第一次看到五分鐘可以搞定2個表格,按鈕,過濾,聯動。這種複雜度,對於絕大部分B端應用都夠了。其最大的創新是讓ui元素和SQL欄位聯動,讓ui元素和請求聯動。這樣ui、sql、http請求就有機的結合在一起了。在上面4點基礎之上,極大的放大了生產力,在當下經濟環境下,大概這才是資本追逐的原因。

image.png

關於低碼的更多介紹,推薦大家看一下侑夕同學的這篇文章,總結的還是非常棒的。

除了上面講的歷史必然性,我們還要低碼和當下技術進行對比拆解,這樣理解起來更容易。我們前面講過第二個階段全棧核心解決的是BFF,主要是膠水層。那麼低碼應該解決啥呢?

以retool的方式為例,它只保留ui和db,而rpc和api都變成了db上的增值服務,這樣就減少了環節,也讓問題定義更簡單。

image.png

快手的車明君老師總結的低碼本質,說的非常好。
1)透過技術提升生產力,繼而減少需求
2)透過最佳化生產關係,減少中間環節,協作更高效

以前我的理解的生產關係最佳化是從PD到服務端,今天看來,這個觀點可以更加開放一些,在技術上也是一樣的。當我們再看到sql和ui元素組合的時候,你會震驚,這才是簡化的力量。
從技術上提高生產力,從組織層面最佳化,從技術層面簡化,三管齊下,解決絕大部分開發場景是夠用的。約定式創新是沒有問題,確實降本提效。至於是不是殺雞取卵,大家可以各自發揮。從我個人視角來看,這是趨勢,一個人能夠做更多事情,藉助生產力工具,減少協作流程,這一定是高效的。回到標題,“又一次全棧”,我想把第三個全棧定義為低碼全棧就是這個原因。

低碼全棧是技術發展和融合背景下提供的業務快速交付方式的創新。不管大家是否願意,這樣的改變都正在發生。試想當年運維工程師,在2000左右都是車接車送的,2010年基本就消失了,繼而轉換成devops和平臺工程師,事情其實還是在的,比如MoeLove(張晉濤)做的k8s相關研究也在這個範圍裡。

對於前端工程師來講,也面臨同樣的問題,轉型成全棧或平臺前端、垂類前端。我在文章最前面說,這可能是前端的至暗時刻,也可能是新的機會。就是這個原因,優勝劣汰會使得很多人要接受變化。

但換積極的角度看,有了retool這樣的平臺,也同樣會催生出使用這樣平臺的人,我們假定這個角色叫retool工程師,需要掌握sql和低碼操作,完成頁面快速交付,這其實也是一個新的全棧角色。對於工程師來說,這也是一個新的選擇。

在低碼背景下,前端也會有一些技術選型上的變化,具體如下。

首先低碼是基於頁面維度的,所以頁面託管服務是必備的。也就是說狼三里page as service依然實用,甚至要把csr和ssr都同意到一起。

其次是微前端成為基礎設施,這個和微前端誕生初心一樣,新老系統難免整合。

之後是MPA大行其道,以前spa是為了快取公共資原始檔,提升載入速度,體驗更好。但在低碼裡都是獨立頁面,這種情況,很明顯是多頁應用更好,每個頁面都是獨立的,獨立服務,按需開啟ssr或csr,是必然結果。

image.png

當然,優秀的開源專案,比如aims,alc,x6等都會有比較不錯的增量,享受趨勢紅利。還有整合性的,比如apitable等也是我非常看好的。

舉例

技術變化其實是小的,真正的難的是選擇。如下圖,我整理了2個方案。

image.png

1)擁抱變化,積極轉型全棧。大部分的只能這樣選擇
2)主動出擊,做好bff,去分一塊服務端的業務。

技術本身變化並不大,但融合會導致工作內容變化,繼而是角色變化。其實還有平臺前端,或者說專業前端可以選擇,當然,這個範圍會慢慢變小。垂類前端也可以,比如做互動遊戲,3d,xr,音影片等小眾。當然也可以嘗試web3。

下面說一個我的例子,2022年把ts-junit寫完了第一版,寫這個目的就是讓熟悉Java的同學能夠以他們熟悉的方式寫測試。當然,這不一定是真命題。只有全棧統一,這樣的需求才會變多。

我的做法是選用junit寫法, 用ts去實現。

image.png

技術選型上,選擇了uvu做執行引擎,裡面用了策略模式和模版模式做了一點擴充套件點,可圈可點。

image.png

下面是ts裡的具體技術棧,還算是比較常規的內容,具體如下。

image.png

總結

文章中,我們講了3個全棧高潮期,具體如下。

1、從Java Web到RoR,引發的“全乾” fullstack。這個階段,全乾是精髓。
2、由Node.js引發的API膠水層革命,即bff層fullstack,這個階段是再網際網路四大件體系下,前端和API膠水層全乾。也有個說法,這叫前端3.0,本質沒變,都是想拓寬前端的職能範圍。
3、低碼全棧是技術發展和融合背景下提供的業務快速交付方式的創新。從技術上提高生產力,從組織層面最佳化,從技術層面簡化,三管齊下,解決絕大部分開發場景是夠用的。

由低碼技術發展而衍生出的全棧,可能會導致工程師們角色的又一次變化。文章中舉例了運維工程師的變化。當然,也寫了一些前端的變化和應對方案。最後舉了ts-junit的例子。這是殘酷的現實,所以我說這可能是前端的至暗時刻,也可能是新的機會。

其實,身在變化中的人都會難受,重要的是心態。無論大家願意與否,改變都在發生。堅持學習,每日精進才是解法。

2023年就業情況分析

整體上,我對前端的狀態是趨於成熟,已經過了第一波爆發式增長期,但它還在垂類細化領域不斷髮展中,所以我還是非常看好的,前端按照波士頓矩陣說法,大約處於明星和金牛中間,整體上發展還是非常好的。交代完背景,再看就業情況分析。

前端局勢算很差嗎?

先說結論,整個網際網路局勢都很差,從人才濟濟到“人才擠擠”,我理解的原因就是經濟環境和行業發展遇到瓶頸,更深層次的分析我就沒能力分析了。有了這個命題,加上前端是網際網路中的一個工種,這就意味著前端在網際網路局勢很差的情況下也會很差。

其實,最可怕是馬斯克收購Twitter搞一波裁員,如果打破投資圈對技術崇拜的魔咒,那才是最可怕的。以前網際網路朝氣蓬勃,產品都是做加法的,舉例電商做品類拆分細化,越做越大,還有pdd,那時候能拿錢砸出來,現在就未必了。另外,很多產品都功能做的過於豐滿,把自己定位甚至都改了,真是把mvp理解的太到位了,從Minimum Viable Product到Maximum Viable Product都理解到了。 以往裁員都是銷售類等揮之即來的崗位,如果因為產品功能飽和而裁員技術,這才是最可怕的。

事實上,前端是去年在網際網路如此糟糕的局勢裡比較好的工種。參考https://octoverse.github.com/2022/top-programming-languages,這應該和各位讀者理解的差不多,JavaScript依然是一騎絕塵,冠絕一時,連Typescript都能排在第四,可見前端技術使用度佔比之高。

JavaScript continues to reign supreme and Python held steady in the second place position over the past year in large part due to its versatility in everything from development to education to machine learning and data science. TypeScript also held firm in fourth place year-over-year. Notably, PHP dropped from sixth to seventh place in 2022.

具體資料如下。
image.png

根據DevJobsScanner網站統計,時間是從Oct-2021 到 Nov-2022之間,從1200萬個工作機會中進行篩選的記過。資料如下。

image.png

從圖中,我們可以得知,JavaScript / TypeScript相關工作高居榜首,這意味著前端相關技能適用面非常廣泛。雖然這是國外的資料,放在國內不一定完全適用,但它至少可以佐證,前端是在國外是需求旺盛的工種。參考https://www.devjobsscanner.com/blog/top-8-most-demanded-languages-in-2022/,把上圖進行簡單梳理,可只前端需求量依然最大。

image.png

辯證的看,前端技能和前端職位數成正比,這是正常的。這一點國內和國外的是沒有區別的,多端和跨端,Node.js等混合成為大前端,守好體驗和效率的門衛,當然是必不可少。

下面回覆3個相關提問:

提問1:請教下大佬,現在前端局勢算很差嗎,作為一個前端校招新人而言應該朝哪個方向發展大佬有什麼推薦嗎

整個經濟形勢都不好,不只是前端。不過是比不得前幾年而已。整體看,還算健康的,精深專業人才還是需要的。

提問2:前端最悲觀的前景在於需求越來越外包化,很可能將來的趨勢是除了行業頂端的企業需要少量的金字塔頂前端,其他前端都只能吃外包的飯。

一個不盈利的創業公司他不需要關注體驗,而是完成功能。當求發展時才有體驗需求,這時候才要專業的人。所以你這個觀點有點以偏概全了,且悲觀。我的觀點,幾乎任何行業都類似的,努力進大廠,然後獨立,玩出樂趣,才是好事。

提問3:2022年的前端崗位在逐漸外包化(幾個大廠帶的頭),工資 10k~20k 的外包崗位很好就業,但是 20k 以上的就難找不少了。

至於20k以上少的論斷,我不認同。經驗能力和薪資必然正比。只是選擇上會更謹慎。如果再直接點,就是你看到的就是你看到的,不一定是別人看到的。

就業形式相交而言還是不錯的,受大的經濟環境和前端趨勢影響,很明顯,前端外包化嚴重,專業前端細分化,但變化(危機)也要來了,在低碼和AI共同作用下,新的融合性崗位已經慢慢在出現了。下面具體講講我的理解。

1、外包化嚴重

沒有增長的公司大致是會維持或降本。對於技術來說,除了伺服器等軟硬體採購,就是人力成本。出於降本的考慮,一些能夠由成本不高的人能夠完成的活,就不會讓高成本的人來做。所以說,外包化是整個網際網路行業都在做的事兒,不單單只是前端。

對於前端來說,門檻不高,技術成熟度高的工作是最容易外包化的。比如ToB端相關工作外包化就嚴重。原因很簡單使用者是內部人員,頁面不追求極致體驗,甚至是能用就行。另外,技術上沒有新框架,React這種框架使用上還是很好用的,所以ToB端CRUD能外包的就外包。

熟練外包確實是好的,但外包和正式比例短期內還是正式更多。大家也不必過度擔心,java至今也沒有外包比正式多,只是會讓大家去追求專業度更高的事兒,這其實也是好事。

外包是一種常態化選擇,不只是在裁員潮下面,外包和技術提效一直都有,只是在局勢不好的時候,它會被放大,甚至引起很多人的恐慌。業務萎縮,擠掉些水分是正常的,但這不是行業坍塌,需求量依然還在的,對我們而言,更多的調整好心態,強大自己,技術過硬,與時俱進就好。

就未來講,真正慘的事兒不只是外包化,而是正式員工幹外包的活,外包被辭退,這也是非常有可能的。比如類似國企性質的公司,不方便辭退的公司,大機率只能這樣選擇。成本最佳化,很多時候是先擠掉水分,然後清理外包,正式員工加量不加價(降薪不好操作),正式流失,扛不住的時候再補外包。

2、高階崗位變少

前端領域裡所謂的架構師類(或者說專家類)比例還是非常多的。前端為什麼會高階崗位很多,其實是2013到2019年的前端爆發期有關的。以前Java同學還能寫jQuery,但到了React時代,搞定Webpack,sass,TypeScript等等,他們就顯得力不從心了,專業前端都很痛苦,何況他們。所以那個時候非常細化招高階崗位,除了解決問題外,還有很多基建的建設。

隨著基建的完善,比如create-react-app(cra)、Umi、Next.js這樣的基建成熟,如果只是單純做業務,我們還需要那麼多高階崗位嗎?明細是不會的。從成本角度看,高階崗位的成本,大家也是心裡清楚的。所以我的判斷是高階崗位會變少,很有可能會慢慢變成架構師角色,比例和Java等差不多。

高階崗位溢位的人,創業、轉管理、轉型也都是好的,學學Winter、Hax、Phodal、安曉輝、神光、程軍,王曄亮(頭哥侃碼)其實也挺好。像TL這種比例不大動,變化不大。優勝略汰,正常比例,只是流動量少,競爭會非常激烈。

3、專業前端細分化

專業前端,依然是大多數,比如c端這種重體驗的必須專業前端,還有垂類,比如互動遊戲,3d,webrtc這種有專業難度的小眾分類也必須專業前端,比如視覺化編輯器,AFFiNE,QUill,X6這種都是需要專業前端的。

技術的邊界,其實已經在打破了。比如以前說瀏覽器裡無法操作DB,傳統資料庫都是要透過TCP進行連線,請問前端如何連線?基本上無解,Web快取不算。目前見到的奇技淫巧是sql.js-httpvfs,透過WASM+Webworker搞,腦回路甚至不一樣。其次,前端範圍放大,Server Page也算前端,那就有了ASP,JSP,PHP等等,這些都是可以連線資料庫的。尤其是http://asp.net玩的很棒的。再看,前後端分離下,為什麼呢?寫到一起沒分層,程式碼不好,不適合大規模開發。部署到一起,沒法藉助CDN優勢,也沒法保障高可用。最重要的是專業化分工。

最近也看到AlaSQL.js,也是可以跑在瀏覽器是的RDBMS,未來瀏覽器就是現在的OS,對此我深信不疑。AFFiNE其實在做本地儲存,目前看可能是基於SQLite做的。再加上去中心化的玩法,瀏覽器既是OS,又是Client,這樣的日子還會遠嗎?

在我看來,發展中的企業依然是按照專業分工工作,成熟的公司更願意搞全棧,降薪不好操作,就只能加量不加價。目前看,前端垂類,其實是最吃香的部分。

4、崗位融合新機會

崗位融合,對於Retool帶來革命性的互動方式,會顛覆很多角色的,包括前端、服務端、資料分析等。未來可能會出現低碼工程師,或者類似全棧工程師這樣的膠水類崗位,也是非常有可能的。大家把心態放寬,沒工作是很難的,最怕的自己放棄自己,堅持每日精進,又怎麼會被時代拋棄呢。

在本文中《年度大戲(低碼):又一次全棧,至暗時刻還是新機會?》一節裡,已經有了全面的敘述,這裡就不再贅述了。

體力活和技術含量低的活兒慢慢被技術升級所替代,這在任何時代都是必然的事兒。

小結

回顧一下前面講的內容:

  • 講了2022年趨勢

    • 1、效能
    • 2、執行時
    • 3、體積
    • 4、Rust正在變成前端新基建
  • 講了年度大戲(低碼),retool類低碼系統會顛覆很多角色的,未來可能會出現低碼工程師,或者類似全棧工程師這樣的膠水類崗位。
  • 講了2022就業情況,局勢很差,不只是前端,而是網際網路很差,前端也很差,很有變化,但大盤需求不會有特別大的變化。

在2023年,端正態度,做好技術才是正經事。小鬍子哥說:“想做一件事情,看到的全是方法,不想做一件事情,那看到的就全是藉口。意願、態度或者說興趣,才是個人發展的第一生產力”。擺正心態,積極面對。如果不熱愛,請熱愛,不然做不好的。我很認同他的說法,不管是工作還是學習,其實都是:知之者不如好之者,好之者不如樂之者。我經常說,程式設計本身是無趣的,玩出樂趣,才能做好程式設計。

按常理,文章後都是要展望一下未來。對於未來來說,我們還是要重視趨勢的影響,對低碼,AI,去中心化等技術還是保持關注和學習,最好能每日精進,與時俱進。對於AI和去中心化等技術,我是持悲觀態度的,和Vic talk的推文想法類似:“AI提高生產力,Crypto提升資本利用效率,一起創造新的龐氏”,這話說的雖然很那露骨,但確實是趨勢。如果拿不準,每日精進,學習能力在,還會怕技術變革嗎?

image.png

狼叔說:“少抱怨,多思考,未來更美好”,社會需要專業人才,喜歡就堅定的做,熱愛才是救贖最好的藥。

相關文章