大家好，我卡頌。

這篇文章不是標(biāo)題黨，也不是想蹭尤雨溪的流量，而是我看了VueConf US 2023^[1]后的一點(diǎn)感想。

從字節(jié)聊到Vue

在聊本文的主題前，讓我們先從字節(jié)聊起。字節(jié)有個(gè)很響亮的綽號(hào) —— App工廠。是指字節(jié)會(huì)在各個(gè)賽道用流水線的形式批量產(chǎn)出App，再根據(jù)數(shù)據(jù)不斷迭代。

當(dāng)然，字節(jié)看得上的都是很大的賽道。實(shí)際上，在很多一線互聯(lián)網(wǎng)城市，有很多體量比較小的互聯(lián)網(wǎng)公司，也在采用類似的開發(fā)模式。具體是怎么做的呢？

首先，他們會(huì)定時(shí)跑App Store或者Google Play的排行榜，看看各品類有什么發(fā)展不錯(cuò)的新App。

當(dāng)發(fā)現(xiàn)這類App后，他們會(huì)結(jié)合公司自身的開發(fā)資源，判斷到底能不能復(fù)刻一個(gè)，以及預(yù)期收益能不能覆蓋運(yùn)營(yíng)成本（買量、刷好評(píng)等費(fèi)用）。

當(dāng)發(fā)現(xiàn)這事兒有搞頭后，就會(huì)立項(xiàng)并迭代。

與這種「工廠模式」（姑且這么叫吧）相對(duì)應(yīng)的，就是常規(guī)的「我有一個(gè)好點(diǎn)子，我要落地這個(gè)好點(diǎn)子」的開發(fā)模式。

對(duì)于成熟互聯(lián)網(wǎng)團(tuán)隊(duì)來(lái)說(shuō)，顯然前者比后者更容易成功（因?yàn)槭∪チ撕芏嘣囧e(cuò)成本）。

Vue特性的迭代也類似「工廠模式」，比如：

• 模版語(yǔ)法借鑒Angular 1
• Composition API借鑒React Hook
• Vapor Mode借鑒Solid.js

注意，在開源領(lǐng)域，「借鑒」這種行為無(wú)論從法律，還是開源道德層面來(lái)說(shuō)，都是很正常的行為。甚至，開源項(xiàng)目能夠推陳出新，本身就是不斷在前人的肩膀上攀登。

所謂「創(chuàng)新」，很多時(shí)候并不是「從0到1想出一個(gè)點(diǎn)子」，而是「把已有的點(diǎn)子重新排列組合」。

有些同學(xué)可能會(huì)質(zhì)疑：開發(fā)、運(yùn)營(yíng)App是市場(chǎng)行為，但搞開源是搞技術(shù)，而且是完全免費(fèi)的，兩者不能類比。

實(shí)際上，開源本身就是一門生意。在這門生意中，開發(fā)者是用戶，開源項(xiàng)目是產(chǎn)品，而「免費(fèi)」本身只是產(chǎn)品的一種定價(jià)策略。

Vapor Mode的產(chǎn)品思維

在VueConf US 2023中，Vapor Mode的后續(xù)安排就很好的體現(xiàn)了產(chǎn)品思維。

首先，Vapor Mode的概念尤雨溪在2022年[2]就提出了，這是一種模版編譯模式。相比「虛擬DOM」，他有兩個(gè)優(yōu)點(diǎn)：

• 對(duì)于小項(xiàng)目，打包體積更小
• 框架自身的運(yùn)行時(shí)工作流程更短，這通常也意味著框架性能更好

雖然Vue同React一樣采用「虛擬DOM」，但其更新方式是響應(yīng)式更新。與其更新方式類似的Solid.js可以從編譯策略中獲益，顯然Vue也可以。

所以，借鑒Solid.js的編譯策略，尤雨溪提出了Vapor Mode。

這一步可以類比上面例子中的「尋找優(yōu)秀的App」。

作為一個(gè)產(chǎn)品，Vapor Mode的發(fā)布分為四個(gè)階段：

第一階段（當(dāng)前所處階段）的目標(biāo)是「提供核心功能的運(yùn)行時(shí)」，比如「v-if、v-for指令在Vapor Mode下的運(yùn)行時(shí)實(shí)現(xiàn)」。這樣就能大體評(píng)估Vapor Mode對(duì)運(yùn)行時(shí)性能的改善有多大。

這一步可以類比上面例子中的「評(píng)估開發(fā)這個(gè)App到底值不值」。

下一階段的目標(biāo)是「實(shí)現(xiàn)核心特性的編譯器」，可以完成：

• 從JSX到中間代碼，到Vapor Mode代碼的轉(zhuǎn)換。
• 從模版語(yǔ)法到中間代碼，到Vapor Mode代碼的轉(zhuǎn)換。

將編譯器單獨(dú)作為一個(gè)步驟，除了因?yàn)樗潜仨毜慕M成部分外，從產(chǎn)品的角度出發(fā)，還有個(gè)很重要的原因 —— 有了編譯器，就能出一個(gè)playground。

屆時(shí)，開發(fā)者可以預(yù)先體驗(yàn)Vapor Mode的輸出結(jié)果。雖然還不能在項(xiàng)目中使用，但能讓用戶（也就是開發(fā)者）感知到項(xiàng)目的進(jìn)展。這對(duì)于維持用戶關(guān)注（即維持開發(fā)者關(guān)注）是很有幫助的。

再下一個(gè)階段的目標(biāo)是「可以在現(xiàn)有項(xiàng)目中插入Vapor Mode組件」。

在實(shí)際項(xiàng)目中，「在現(xiàn)有項(xiàng)目中插入Vapor Mode組件」的場(chǎng)景其實(shí)不多，更多的場(chǎng)景應(yīng)該是「新開Vapor Mode項(xiàng)目」。

但從產(chǎn)品的角度出發(fā)，這個(gè)步驟是實(shí)現(xiàn)MVP（minimum viable product，最小化可行產(chǎn)品）。這樣，Vue團(tuán)隊(duì)可以以最小的成本，驗(yàn)證Vapor Mode在市場(chǎng)中的反饋。

最后一個(gè)階段的目標(biāo)是「Vapor Mode全特性支持」，也就是將之前「虛擬DOM」下支持的特性（比如Transition、KeepAlive）都遷移到Vapor Mode。

可以發(fā)現(xiàn)，Vue團(tuán)隊(duì)會(huì)在前面所有驗(yàn)證步驟（驗(yàn)證可行性、驗(yàn)證收益、驗(yàn)證市場(chǎng)反饋）都走完后，再慢慢遷移特性。

試想，如果悶頭一頓開發(fā)，直接上線全功能Vapor Mode，如果開發(fā)者反饋不佳，那對(duì)于Vue團(tuán)隊(duì)來(lái)說(shuō)，可是不小的打擊。

總結(jié)

本文從產(chǎn)品的角度分析了Vapor Mode的迭代策略。不難看出，尤雨溪不僅承擔(dān)了開發(fā)工作，還要承擔(dān)產(chǎn)品經(jīng)理、項(xiàng)目經(jīng)理的工作。

Vue能成為世界范圍最知名的前端框架之一，除了其團(tuán)隊(duì)成員的專業(yè)性外，「工廠模式」的產(chǎn)品開發(fā)模式也功不可沒(méi)。

參考資料

[1]VueConf US 2023:https://www.youtube.com/watch?v=y-hN5Q_lb9A。

[2]2022年:https://blog.vuejs.org/posts/2022-year-in-review。