背景
隨着前端技術領域的高速發展，前端開發也變得越來越複雜。業務擴張，小程序平臺井噴式增加，都導致開發者肩上的負擔越來越重。爲了提升研發效率，減少人力浪費，我們開發了開放式跨端跨框架解決方案 Taro，支持使用 React/Vue/Nerv 等框架來開發 微信 / 京東 / 百度 / 支付寶 / 字節跳動 / QQ 小程序 / H5 等應用，將一份代碼直接轉換到多個不同終端，有效避免了將一份代碼手動適配到多個平臺的重複勞動。
一個項目的完整生命週期一般包括：項目創建，代碼開發，測試，部署發佈，以及後期的監控。作爲一個多端解決方案，Taro 有效提升了多端應用的開發效率，但對於開發以外的環節就無能爲力了。
如何提升研發流程整體的效率？技術先驅們早已給出了答案：Integrated Development Environment（集成開發環境），也就是通常說的 IDE。
舉個例子，C 語言程序運行前，需要經過預處理、編譯、彙編、鏈接等步驟，最後生成可執行文件。但在 Visual Studio 等 IDE 中，點擊一個按鈕就能完成上面所有的流程。Taro 尚沒有一款類似的產品將項目的研發流程與生命週期進行整合，這給了我們施展拳腳的機會。
另一方面，雖然集成開發環境在開發者羣體中是較爲小衆的概念，卻並不妨礙它成爲 SaaS 領域的熱點之一。不論是國內的 CODING，各廠商的小程序開發者工具，還是遠在國外的 CodeSandbox，都闡述了各自對於集成開發環境的理解。資本市場也對他們的答案給予了肯定。
到這裏，我們的目標就清晰了。爲了提升研發效率，也爲了探索技術產品化與商業化，我們要做一款Taro 的集成研發環境，利用它來串聯研發流程、整合研發流程中的系統、工具，實現整個研發流程的體系化、規範化，促進研發物料在體系內的流轉，這就是 Taro IDE 項目。
探索
“路漫漫其修遠兮，吾將上下而求索”。
我們希望通過 Taro IDE 串聯研發流程，同時，由於 VSCode 在代碼編輯器領域如日中天，短時間內很難做出 VSCode 的替代品，我們考慮在不觸及代碼編輯環節的基礎上，整合研發流程中的工具、系統，將常用操作 GUI 化，屏蔽研發流程及前端工程的複雜度。
基於上面的想法，我們打造了 Taro IDE，它具有以下功能：快速開發，本地測試，發佈中心，物料中心，以及應用監控。
Taro IDE 是基於 Electron + React 打造的桌面客戶端。基於 Electron 提供的原生能力，Taro IDE 可以在本地創建項目、啓動小程序開發者工具，並進行小程序的發佈、體驗版設置等。
Taro IDE 滿載着我們的希望上線了。本期望它可以乘風破浪，一舉成名，然而上線後的統計數據卻給我們上了生動的一課：我們的想法還是太年輕、簡單，甚至有些幼稚了。在多次開會覆盤後，我們將這次失利歸因爲下面三點：
- 缺乏核心賣點。用戶可以輕易找到替代方案達到相同效果；
- 體驗問題。項目的交互細節經不起仔細推敲，使用體驗並不順暢；
- 缺乏反饋渠道。項目上線，由於缺乏獲取用戶反饋的渠道，後期的優化工作無法展開。
帶着這次上線失利的教訓，我們走上了尋找核心賣點的旅途。
打磨
根據我們的對 Taro 開發者的抽樣統計，在使用 Taro 的項目中，具有多端需求的項目佔到了一半以上。
通過將一份代碼轉換到多個平臺，Taro 解決了多端項目的研發效率問題。但在小程序多端開發過程中，我們需要同時打開多個小程序開發者工具，面對如此多的窗口，調試時難免手忙腳亂，這是多端應用開發過程中顯而易見的痛點。如果有一個多端調試工具，一鍵切換調試平臺，必然能夠大大提升研發效率和體驗。
技術調研階段，業界並沒有可供參考的方案。在反編譯友商的小程序開發者工具後，我們發現各平臺小程序開發者工具的實現基本如出一轍，並且都遵循了微信小程序的標準。即使有少數的差異，也可以在 Taro 層或者工具層抹平。也就是說從技術層面上來講，多端調試器是可行的。
具體說來，在調起調試器之前，首先需要將小程序跑起來，爲此我們需要提供一個小程序運行環境。參照微信小程序的設計，小程序的運行環境主要包括模擬器和 AppService：
- 模擬器負責通過 webview 中還原小程序頁面的展示效果，即視圖層；
- AppService 是另外的一個 webview，負責模擬小程序行爲，管理小程序啓停等生命周
期，數據存儲等，是邏輯層。
調試面板則負責提供調試小程序組件、本地存儲、AppData 等能力，這需要將 webview 與調試面板通過 Chrome Devtools Protocol 連接起來。
開發階段，出於開發生態的考量，我們採用 Electron 作爲底層技術，而不是微信開發者工具中的 NW.js。調試器內運行的小程序基於多進程的架構，視圖層（頁面）與 數據層（AppService） 運行在不同的 webview 中，互不干擾，相互之間經由 JSON RPC 進行通信。
基於上面的原理，我們完成了 Taro 小程序的多端調試器，可以一鍵切換小程序平臺進行調試。由於項目採用了 B/S 架構，很方便適配到多種多樣的使用場景，如 Cli 命令調用，通過 Taro 2.0 的插件 API 調用，或者是在 Taro IDE 中使用。
在調試器完工之後，我們發佈了 Taro IDE 2.0。相比 1.0 版本，2.0 添加了調試器功能並優化了性能和體驗。上線後，Taro IDE 的使用數據稍有好轉，但依然沒有達到理想狀態。
調試器可謂是我們在 IDE 探索過程中的無心插柳之作。誰都沒有想到，調試器能力竟成爲了後期串聯研發全流程的關鍵碎片。
正軌
在失利後，我們在每個失眠的夜問自己：”IDE 應該怎麼做？“，可這無異於問道於盲。在短暫的彷徨後，我們決定進行用戶調研，快速編輯了一份 Taro & Taro IDE 調研問卷，向所有使用過的用戶進行投放。
調查結果顯示，我們過於低估桌面客戶端的安裝門檻了。Taro IDE 1.0、2.0 都是基於 Electron 開發的桌面應用，動輒幾百 M 的體積已經攔住了大量的非剛需用戶，更不用說它還存在前面提到的問題了；其次，基於 Electron 的 Renderer/Main + IPC 架構看似方便，事實上卻會導致大量的邏輯耦合。綜合上面兩個原因，我們下定決心，要將應用改造爲 B/S 架構，降低用戶的使用門檻。
到這裏，我們已經圍繞項目研發流程，完成了 GUI 化的項目創建、測試、發佈等研發流程，調試器能力的開發。距離完整的開發者工具，就只差一個編輯器了。
一款沒有代碼編輯器的 IDE 是沒有靈魂的。縱使我們在前端工程化領域努力耕耘，也無法與 Visual Studio、Eclipse 等知名開發者工具比肩。我們開始思考：能否基於已有的能力，做一些更厲害，更有影響力的事情？直到發現 Eclipse Theia 項目，我們知道，機會來了。
從最開始，我們就一直在做大而全的事情。從項目的創建，到發佈等流程，我們需要考慮不同用戶的使用環境，對特殊場景做額外處理，慢慢地將 Taro IDE 項目變得臃腫不堪，卻忘記我們最初只是想要一個集成開發環境，想要串聯研發流程而已。
孫子說得好：“能用衆力，則無敵於天下矣。”如果我們只負責抽象研發流程，而將研發流程的具體邏輯交給專業的研發同學。不同部門之間形成合力，IDE 核心的工作量會大大降低，業務支持也會更爲專業。
Eclipse Theia 是一款雲和桌面端的 IDE 平臺，提供了一系列構建 IDE 的工具，不僅編輯體驗酷似 VS Code，還支持 VS Code 的插件生態；基於 InversifyJS 的底層還具有極強的擴展性，完美符合我們的要求。
因此，我們基於 Theia 源碼，結合內部的業務及使用場景，對 Theia 進行拓展，增加了插件系統、佈局系統、和業務上下文模塊，讓業務方簡單、靈活地深度定製 IDE 的功能和界面。
拓展完成後，我們基於 Theia 打造底層 IDE 框架，提供通用研發流程接口，其他團隊則通過插件機制，定製專屬的研發流程，如 Taro 項目研發流程，H5 營銷項目研發流程等，最後打包成對應的場景化 Cloud& Desktop IDE。至此，我們完成了從 Taro IDE 到公共 IDE 底層框架的轉變。
成果
爲配合項目形態的轉變，我們還聯合品牌設計的同學，將技術品牌由 Taro IDE 升級爲 Tide，期待它能像 Tide Hunter 一樣，一個大招搞定全場。
目前，Tide 項目的核心模塊已經開發完畢，並通過插件適配了 Taro 項目研發全流程，在部分業務開展試點。
展望
如果說在前端模塊化標準、方案出現以前，前端界尚處於刀耕火種的階段；那麼在前端工程化蓬勃發展的今天，前端行業正在逐步向成熟的工業化轉變。
未來會如何？我們傾向於認爲，未來會是大數據、智能技術大展身手的時代。不僅如此，我們也已經進行技術佈局，藉助智能的力量，對傳統的產研流程發起徹底的改革，我們稱之爲智能化的前端研發體系，Tide 正是其中的基礎設施之一。
什麼是智能化前端研發體系？
前端研發人員在收到業務設計稿後，通過 Deco 智能代碼，得到基礎的 UI 還原稿。對於其中的修改點，則可在羚瓏頁面可視化平臺中進行調整。過後將調整後的 UI 代碼導入到線上 Tide 環境中二次開發，填充數據、邏輯等代碼，運用 Taro 能力，將業務上線到衆多不同的業務平臺中。最後，上線業務中可以再次向夸克設計資產沉澱大量優質物料，提升未來智能代碼能力的準確性。
我們將繼續完善 Tide 核心架構，將 Tide 拓展到其他的研發場景，幫助業務方快速高效定製自己的場景化 IDE，提升研發效率；除此之外，我們還將提供基於 Docker 的部署方案，幫助業務方實現實現研發上雲。
“錦江春色來天地，玉壘浮雲變古今”。
前端領域的發展日新月異，各種技術框架層出不窮，2021 年，變化的種子已經埋下，讓我們一起擁抱更好的未來。