屠龍少年終成惡龍，前端轉產品的我給前端挖了個坑
前端轉產品3周左右，把自己的一些感受通過《我轉產品了-前端轉產品是一種什麼樣的體驗》這篇文章與大家分享，評論區驚現一波大佬。由於比較忙，不知不覺好像轉眼間已經又過去一個多月，這次趁着週末沒有開成會，給大家分享一下最近的『趣事』。
目前在並行中的一個項目主要是類似文件管理的功能，在這個項目中主要是旁聽的角色，這個項目的產品和需求是由公司的一產品朋友來做。在文章中產品功能描述部分由於衆所周知的原因，我只會粗略的提一下。
客戶說的
用於簡化傳統 OA 系統的某些繁複操作。最好能編輯、預覽，如果沒有的話也可以，先上一版。
我們準備給客戶做的
我們給客戶畫了第一批原型，瀏覽器登錄一個網址，註冊一個賬號、密碼…… 然後在文件系統中可能在線預覽圖片、PDF、word、excel 之類的。
客戶其實想要的
在演示的時候，第一個界面，客戶質問爲什麼我們的系統還需要輸入網址？還需要登錄？大家一臉懵逼。然後解釋因爲數據是服務器器上的，在瀏覽器裏輸入地址，就能訪問我們的系統了。然後如果不使用用戶名和密碼登錄的話就不知道誰是誰。
客戶說：『我們雲桌面對每個人都是唯一的啊，不需要再搞一個賬戶……』
我們說：『因爲我們系統是在瀏覽器裏的，瀏覽器是訪問不了操作系統裏的用戶信息的，所以需要註冊一個用戶密碼……如果覺得麻煩，我們也可以後臺先註冊後，然後登錄之後記住登錄狀態，就不用每次都登錄了。』
客戶：『行吧。』
然後講業務流程……
當講到某文檔的審覈功能時，比如如果審覈人需要對 word 進入批註，需要下載，然後添加批註，再上傳到審覈意見附件中。
客戶：『爲什麼要下載？』
我們：『因爲我們的是瀏覽器。』
客戶：『行吧。』
矛盾分析
經過了幾周、幾輪之後的演示，客戶還經常時不時問一些爲什麼我們系統不能直接進行某操作的想法。想要不用寫到這裏大家都很清楚了，客戶想做的東西其實是一個便於操作的文件管理系統。要實現最大的便利性，最好是與操作系統打通。
但我們這邊技術棧主要是 B/S 架構的經驗較多，桌面程序的經驗基本沒有。並且應該我們這邊認爲瀏覽器裏的文件管理操作也是很常見的，比如各大網盤都可以在瀏覽器裏進行文件操作。
我們調研的方向都甚至是通過各種 js sdk 實現瀏覽器中預覽 word、excel 的功能。
一些自己的想法，不知該如何講
這個產品討論會來來回回5-6次到現在還沒結束，雖然從第2次我基本就確定客戶這種應該使用桌面端來實現比較好。但是這種東西不好講，這是產品和技術人員去決定的東西。
不能隨便講的原因在哪裏：
- 角色只是旁聽者就不要去定一些方向性的東西。
這個應該大家都明白，角色問題。
- 每個方向最小和最大會有什麼後果，團隊是不是能承擔？
這個也比較清楚，難度問題。首先講，如果做成桌面端，團隊沒有這方面的經驗，遇到操作系統相關的 API 調不起來怎麼搞？兼容性怎麼搞？我瞭解的前端肯定是實現不了，雖然 node/electron 可以與操作系統交互，但當前前端團隊無相關經驗的人。雖然後端 java 可以與操作系統交互，但我不可能給客戶說這東西我們這邊後端 java 能做。
所以我的想法是：如果他們與客戶能達成使用瀏覽器完成這個系統的共享，清楚瀏覽器與桌面程序的能力邊界。那麼何樂不爲呢？
我方開始妥協
第6次演示原型時，客戶又講到，那如果一個文件要下載也行。但使用這個系統的人可能年齡都比較大了，下載到哪裏自己經常都找不到。
這也確實，每個文件都要下載來操作再上傳已經很麻煩了，再像在垃圾裏去翻剛剛下載的文件，就更麻煩了。客戶問能不能下載的位置我們系統可以指定的？
我們再次說下載位置是瀏覽器規定的，系統指定不了。然後客戶提到，實現不行像 ftp 這些工具一樣，能把文件傳到某個指定的位置也行……
然後我們技術負責人說，那這樣的話，看能不能把兩臺設備互通，當瀏覽器裏要下載某文件時，向後端發起請求，後端從服務器上操作客戶端電腦。客戶說可以啊！
我理解上一段話下來是這樣：
客戶端與服務端有某個通道，允許服務端操作客戶端，比如文件創建、刪除。然後客戶端的瀏覽器裏要下載某個文件到 C 盤時，向服務器發起請求，服務端去後臺下載文件到客戶端的 C 盤。
看起來到也可行，這對前端瀏覽器而言還是一樣的。直接向服務端發請求就行了。
但是我的想法是這樣的：？？？
準備好了嗎？坑要來了
上面說的功能結果是可行的，並且客戶也是接受的，而且前端也是一樣的只需向服務器發起請求即可。但是我有以下想法：
- 有點繞。
- 服務端要如何遠程操作客戶端？這是個問題。在客戶端上裝個自己寫好的 curd 操作的程序？服務器通過 telnet 等現有工具遠程後臺操作客戶端？
據我所知有一種從天而降的掌法，叫 electron，主要是前端來弄，可是這東東體積太大了，當然體積在當前客戶這裏不是首要問題。首要問題是這東西雖然很厲害，但這裏的前端不會 node。還有一些方案，瀏覽器插件配合、WPF 這些也都不用講了。
所以有沒有一種方法，不需要會 node，不需要後端語言(比如java/C#)，不需要安裝依賴(比如運行庫、瀏覽器插件)、兼容現有前端已寫好的頁面和接口，如果需要調用系統 API(例如文件、IO、進程)，前端只需要調用 js 方法傳參即可，有點像 JSBridge。
就針對於我個人的見識層面和需求層面來說，約等於沒有。所以我打算自己弄個（挖坑）。但我不能說我要挖個坑啊？
開始挖坑
我嘗試性的問技術負責人，如果使用套殼瀏覽器的方案，前端正常寫，如果要操作文件時，前臺能直接調用 js 方法，例如創建文件、打開文件、定位文件等等。您看行不？負責人問，那要檢測文件修改上傳可以嗎？我愣了兩秒，說可以（就算不能監控修改，也還有通過獲取文件MD5對比的方式）。然後我能說那我會後給您提供一些 demo 你看看。
給出一些 demo，讓坑看起來沒有坑
爲了證明方案的可行性和便利性，我用團隊當前技術棧 Vue 爲當前文件系統可能用到的操作都提供了示例：
- 進程操作。創造子進程、使用系統程序。
- 文件定位。給定一個文件路徑，讓資源管理器直接定位到它。
- 文件後臺下載。後臺下載文件到指定位置。
- 文件後臺上傳。後臺上傳上件到指定接口。
- 文件操作。文件創建、修改、重命名、刪除……
- 文件打開。以默認程序或指定的系統程序打開指定文件。
定製好圖標、描述。打包成這個單獨的 exe，體積 1.2M，好像有點大了，將就吧。
實測幾次沒問題之後，發給技師負責人。
技術負責人：『？？？』
不知道當時負責人心裏是不是在想：什麼玩意？沒事做嗎？給我發個 exe？病毒嗎？你很能嗎？產品試用期過了嗎？
// 可以編程式創建窗口。
const view = await new main.View(`http://baidu.com`)
view.form.show() // 顯示窗口
前端對該方案的實測效果
也可以指定本地文件，例如 desktop.html 。
{
"page": "desktop.html",
"pageShow": true
}
過一會，前端同事轉發負責人與他的溝通給我，然後一臉懵逼的問他到底要做什麼？溝通一波之後，原來會議內容還沒同步給前端同事，講了好半天客戶需求，才慢慢知道要搞一個客戶端。但他又再次陷入震驚，我一前端，憑什麼讓我搞客戶端？我不會啊！
我突然感覺我有點難。然後我說：『不是我要你搞客戶端。是客戶要客戶端。我只是提供了一個方案，你看得行不』。
然後讓其先把我提供的 dmeo 在他電腦上試試看各功能是否正常。
很感動，果然沒有問題。
然後同事問：『那這東西把我現在寫的系統放進去能正常用嗎？』
真是個問題，我說：『不知道，你試試，建議路由 hash 模式。』
然後同事直接把自己的系統的鏈接放進去，嘗試了一下一些自己原有的功能，是正常的。
然後同事問：『這東西基於什麼技術，關鍵詞？』
我答：『webview。』
然後同事搜索了一下甩我一張截圖，接着問：『和 edge 一樣嗎？』
我說：『不嚴格等於，但約等於。』
也不知道同事看了這句話有沒有罵我，擱這給我玩哲學？
同事又問：『客戶電腦是 win7 的，客戶電腦沒裝 edge 瀏覽器怎麼辦？』
我：『拿我的 demo 上去，能打開就是支持的。』
理論上，如果客戶電腦上沒有 webview 環境，會自動安裝。但客戶那邊網絡環境是不通外網的，所以我讓直接試。
然後一會之後，實測下來，還好就是支持的。
接下來就是前端同事嘗試在已有的項目中去使用我提供的 api 去操作系統上的內容了。經過一波溝通，實測也是沒有問題。
瘋狂暗示，我挖的坑，與我無關
一邊在溝通如何入坑我的輪子的同時，一邊我又提供了前端實現桌面程序的其他方案供其選擇，時時不忘提醒，你看哪個合適你用哪個。這個 exe 是我封裝的，API 只有示例，詳細文檔來不及寫，桌面程序我也沒有太多的經驗。
PS：意思就是，方案由你選，如果選擇我的輪子，某些功能我也要先研究一會，某些功能我也可能解決不了。還有我現在主要重心在產品上，所以可能沒時間研究新功能。 /手動狗頭保命。
小驚喜
雖然知道 electorn 麻煩，但我這確實沒有文檔，也麻煩，但是過了幾天，突然收到消息：
然後我邪魅一笑（哈哈哈哈，入坑了！入坑了！入坑了！）。
後記
這個坑不是我故意挖的，是有意挖的。因爲有一個想法，開發一個簡單的桌面程序，只使用前端語言開發，暫只考慮在 windows 上運行，希望開發體驗像在瀏覽器中一樣，然後程序的樣子像是本地應用一樣，調用本地文件、系統命令、後臺運行、托盤菜單這些都沒有問題。
我調研了一些常見的方案，發現他們大多數都不喜歡，經常體積太大或要求其他語言，有一 neutralino 看起來實現上是想要的，但 api 太少，所以決定含淚造坑，在 api 設計上會考慮貼近 neutralino 便於兩者遷移。
代碼倉庫在這裏 wll8/sys-shim ，如果有願意的小夥伴，可以 star 支持一下。