面向未來(lái)的前端開(kāi)發(fā)模式 - 寫于2021年

？面向未來(lái)的前端開(kāi)發(fā)模式

在之前，給大家介紹過(guò)webcontainer這個(gè)技術(shù)，就是可以讓Node.js運(yùn)行在瀏覽器中的技術(shù)

• 什么是webcontainer技術(shù)：
• Web 已經(jīng)發(fā)展到可以提供本地安裝的應(yīng)用程序的大部分功能的地步。借助WebAssembly的強(qiáng)大功能、現(xiàn)代瀏覽器 API（如 Web/ServiceWorker 和 SharedArrayBuffer）以及對(duì)硬件的訪問(wèn)增加，釋放 Web 全部潛力的要素已經(jīng)創(chuàng)建，原生應(yīng)用程序和基于 Web 的應(yīng)用程序之間的界限從未如此狹窄。過(guò)去，像Electron這樣的解決方案通過(guò)為基于 Web 的應(yīng)用程序創(chuàng)建一個(gè)沙箱來(lái)訪問(wèn)系統(tǒng)級(jí)資源，從而幫助填補(bǔ)了這一空白。圍繞WASI 等接口進(jìn)行標(biāo)準(zhǔn)化，我們實(shí)際上可以擁有一個(gè)與本機(jī)應(yīng)用程序的功能相匹配的可移植運(yùn)行時(shí)，同時(shí)保持我們所期望的 Web 的安全性和一致性。雖然 WASI 旨在帶來(lái)模塊化系統(tǒng)接口，但仍然需要有一個(gè)操作系統(tǒng)，供 WASI 模塊在瀏覽器中進(jìn)行接口。WebContainer 提供了一個(gè)為現(xiàn)代應(yīng)用程序設(shè)計(jì)的小型便攜式容器和操作系統(tǒng)。WebContainer 工作組旨在彌合這一差距，并幫助加速世界向基于 WebAssembly 的計(jì)算的過(guò)渡。

一切源于我收到了這封郵件，之前在文章里面寫過(guò)，這個(gè)技術(shù)可能會(huì)顛覆目前的前端開(kāi)發(fā)模式，那到底會(huì)怎么顛覆呢？

前端現(xiàn)狀的痛

• 依賴管理的痛 :使用某些知名的cli需要用npm或者yarn或者pnpm安裝一大堆依賴，我只想寫一個(gè)helloworld，可能會(huì)達(dá)到1G的依賴，如果是mac電腦，不用的時(shí)候刪除這些node_modules文件的話還好，但是windows刪除起來(lái)，可能會(huì)很慢，導(dǎo)致電腦很卡，還會(huì)遇到權(quán)限問(wèn)題等等
• 搭建環(huán)境困難的痛：先裝nodejs、npm,不然項(xiàng)目本地都跑不起來(lái)，明明是頁(yè)面仔，卻不得不接觸nodejs，對(duì)新手不友好，可能還會(huì)存在各種不同操作系統(tǒng)的坑
• 工具太多且無(wú)法統(tǒng)一：我們可能要在webstorm/vscode里面寫代碼，然后安裝xx插件，且A同事跟B同事習(xí)慣可能不一致，那么導(dǎo)致插件還可能不通用，寫代碼在編輯器，調(diào)試在瀏覽器，其他的工具也都無(wú)法統(tǒng)一

我只想做一個(gè)前端，面向?yàn)g覽器編程，可是你讓我裝這么多東西，為了碎銀幾兩，我忍?。?/p>

webcontainer技術(shù)可能會(huì)幫我們解決這些痛點(diǎn)

當(dāng)node.js可以運(yùn)行在瀏覽器中的時(shí)候，我們就不需要安裝vscode,node.js和各種插件在電腦上了，只需要打開(kāi)瀏覽器，輸入（例如react環(huán)境）：

https://stackblitz.com/fork/react

感受一下，打開(kāi)瀏覽器就可以編程，毫秒級(jí)別啟動(dòng)、熱更新的感受

有人會(huì)說(shuō)，你這不就是個(gè)webIDE嗎？但是webIDE缺失了nodejs的能力，webcontainer是具有node.js能力的。

例如，我在瀏覽器里面寫nodejs,可以執(zhí)行我的命令，安裝對(duì)應(yīng)的依賴等

以上兩點(diǎn)，就解決了我們的node_modules黑洞，和安裝各種軟件到電腦上的痛點(diǎn),我只需要安裝一個(gè)瀏覽器，我就可以寫React，寫nodejs,寫next，想怎么寫就怎么寫

最讓我感到興奮的點(diǎn) - 舒適

進(jìn)入next項(xiàng)目，從安裝依賴到啟動(dòng)，只要幾秒鐘時(shí)間，要知道如果是在日常的開(kāi)發(fā)中，這個(gè)時(shí)間可能會(huì)需要幾分鐘

試著安裝lodash

yarn add lodash -D

大約7秒鐘時(shí)間，所有的操作都在瀏覽器環(huán)境中完成，注意是瀏覽器環(huán)境中

但是怎么把webIDE上的代碼本地化呢？

URL上按鈕，一鍵本地化，只要兩秒鐘，代碼就到本地了

熱更新從代碼編寫，到編譯打包，完全在瀏覽器中閉環(huán)，只要打開(kāi)一個(gè)瀏覽器就完成所有的動(dòng)作

是不是很香？是不是很舒適？打開(kāi)一個(gè)瀏覽器就搞定了所有的事情。

談?wù)勥@種開(kāi)發(fā)模式目前存在的問(wèn)題

1.在瀏覽器沙箱環(huán)境中運(yùn)行，在瀏覽器環(huán)境下，會(huì)產(chǎn)生跨域的情況，那么意味著 數(shù)據(jù)庫(kù)、mysql、redis連接都會(huì)受限（谷歌瀏覽器可能未來(lái)會(huì)支持 native socket,做過(guò)私有化通信協(xié)議開(kāi)發(fā)的同學(xué)應(yīng)該就知道這個(gè)是什么，這是issue地址，目前是open狀態(tài))

https://bugs.chromium.org/p/chromium/issues/detail?id=909927&can=2&q=proj-fugu&sort=pri&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified&x=m&y=releaseblock&cells=ids

2.底層使用的是特定的Turbo包管理器，而不是npm或者yarn,針對(duì)瀏覽器做了特定優(yōu)化(這個(gè)貌似只要做好兼容就行)

3.目前還是beta狀態(tài)，尚未發(fā)布正式版本

4.兼容性問(wèn)題，一些瀏覽器對(duì)Web/ServiceWorker 和 SharedArrayBuffer不兼容

5.打包目前不是esm

這個(gè)技術(shù)的原理

• 目前源碼尚未開(kāi)放，以下都是本人根據(jù)文檔和猜測(cè)而來(lái)

在我看來(lái)，webcontainer這個(gè)技術(shù)更像是一個(gè)wasm的一個(gè)框架、庫(kù)，例如：讓nodejs能跑在瀏覽器中，那么這個(gè)nodejs肯定是wasm的二進(jìn)制文件，引入了webcontainer之后，nodejs就可以跑在瀏覽器中了

像一些安裝依賴的緩存優(yōu)化，用到了ServiceWorker的tcp網(wǎng)絡(luò)請(qǐng)求能力，還有攔截請(qǐng)求，優(yōu)化等。這樣也可以在后期電腦離線的時(shí)候使用

包的安裝，像npm yarn 都是安裝到本地磁盤上，但是在瀏覽器環(huán)境中，不是安裝在本地磁盤上，根據(jù)官方的說(shuō)法，每次進(jìn)入一個(gè)環(huán)境，都是重新干凈的,需要重新install一次，這里我還沒(méi)確定，因?yàn)楣俜秸f(shuō)打包不是esm，那么意味著可能自己對(duì)依賴做了處理然后再打包構(gòu)建，可能安裝的時(shí)候也是把內(nèi)容放在內(nèi)存中，并沒(méi)有落入磁盤，或者是存在了ServiceWorker的緩存中（這里我發(fā)現(xiàn)一些文件會(huì)被緩存在或者是存在了ServiceWorker的緩存中）

總結(jié)

目前這個(gè)技術(shù)還不算成熟，但是強(qiáng)烈建議去嘗試使用，stackblitz這種理念很棒，一個(gè)瀏覽器搞定所有的事情，但是目前存在的問(wèn)題最大的是:native socket能力并沒(méi)有放開(kāi)，但是做過(guò)IM或者Electron的人都知道，瀏覽器如果放開(kāi)native socket,又有webcontainer這種技術(shù)，以后我們真的只要安裝一個(gè)瀏覽器就完事了

一切可以用javascript來(lái)實(shí)現(xiàn)的，最終都將用javascript來(lái)實(shí)現(xiàn) - 魯迅