凹凸技术揭秘 · Tide 研发平台 · 布局研发新基建-京东云开发者社区

![](http://img11.360buyimg.com/ling/jfs/t1/166973/13/1478/355496/5ff6d21dEc7e40778/96f47988dc023372.jpg)

## 背景

随着前端技术领域的高速发展，前端开发也变得越来越复杂。业务扩张，小程序平台井喷式增加，都导致开发者肩上的负担越来越重。为了提升研发效率，减少人力浪费，我们开发了开放式跨端跨框架解决方案 [Taro](https://github.com/NervJS/taro)，支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ 小程序 / H5 等应用，将一份代码直接转换到多个不同终端，有效避免了将一份代码手动适配到多个平台的重复劳动。

一个项目的完整生命周期一般包括：项目创建，代码开发，测试，部署发布，以及后期的监控。作为一个多端解决方案，Taro 有效提升了多端应用的开发效率，但对于开发以外的环节就无能为力了。

如何提升研发流程整体的效率？技术先驱们早已给出了答案：[Integrated Development Environment](https://en.wikipedia.org/wiki/Integrated_development_environment)（集成开发环境），也就是通常说的 IDE。

举个例子，C 语言程序运行前，需要经过预处理、编译、汇编、链接等步骤，最后生成可执行文件。但在 Visual Studio 等 IDE 中，点击一个按钮就能完成上面所有的流程。Taro 尚没有一款类似的产品将项目的研发流程与生命周期进行整合，这给了我们施展拳脚的机会。

另一方面，虽然集成开发环境在开发者群体中是较为小众的概念，却并不妨碍它成为 SaaS 领域的热点之一。不论是国内的 CODING，各厂商的小程序开发者工具，还是远在国外的 CodeSandbox，都阐述了各自对于集成开发环境的理解。资本市场也对他们的答案[给予了肯定](https://www.tianyancha.com/brand/baf97468863)。

![CodeSandbox 融资情况](http://storage.360buyimg.com/pre-release/taro-ide-n-tide/codesandbox.png)

到这里，我们的目标就清晰了。为了提升研发效率，也为了探索技术产品化与商业化，我们要做一款Taro 的集成研发环境，利用它来串联研发流程、整合研发流程中的系统、工具，实现整个研发流程的体系化、规范化，促进研发物料在体系内的流转，这就是 Taro IDE 项目。

## 探索

“路漫漫其修远兮，吾将上下而求索”。

我们希望通过 Taro IDE 串联研发流程，同时，由于 VSCode 在代码编辑器领域如日中天，短时间内很难做出 VSCode 的替代品，我们考虑在不触及代码编辑环节的基础上，整合研发流程中的工具、系统，将常用操作 GUI 化，屏蔽研发流程及前端工程的复杂度。

基于上面的想法，我们打造了 Taro IDE，它具有以下功能：快速开发，本地测试，发布中心，物料中心，以及应用监控。

![Taro IDE](http://storage.360buyimg.com/pre-release/taro-ide-n-tide/ide1.jpeg)

Taro IDE 是基于 [Electron](https://www.electronjs.org/) + React 打造的桌面客户端。基于 Electron 提供的原生能力，Taro IDE 可以在本地创建项目、启动小程序开发者工具，并进行小程序的发布、体验版设置等。

Taro IDE 满载着我们的希望上线了。本期望它可以乘风破浪，一举成名，然而上线后的统计数据却给我们上了生动的一课：我们的想法还是太年轻、简单，甚至有些幼稚了。在多次开会复盘后，我们将这次失利归因为下面三点：

1. 缺乏核心卖点。用户可以轻易找到替代方案达到相同效果；
2. 体验问题。项目的交互细节经不起仔细推敲，使用体验并不顺畅；
3. 缺乏反馈渠道。项目上线，由于缺乏获取用户反馈的渠道，后期的优化工作无法展开。

带着这次上线失利的教训，我们走上了寻找核心卖点的旅途。

## 打磨

根据我们的对 Taro 开发者的抽样统计，在使用 Taro 的项目中，具有多端需求的项目占到了一半以上。

通过将一份代码转换到多个平台，Taro 解决了多端项目的研发效率问题。但在小程序多端开发过程中，我们需要同时打开多个小程序开发者工具，面对如此多的窗口，调试时难免手忙脚乱，这是多端应用开发过程中显而易见的痛点。如果有一个多端调试工具，一键切换调试平台，必然能够大大提升研发效率和体验。

技术调研阶段，业界并没有可供参考的方案。在反编译友商的小程序开发者工具后，我们发现各平台小程序开发者工具的实现基本如出一辙，并且都遵循了微信小程序的标准。即使有少数的差异，也可以在 Taro 层或者工具层抹平。也就是说从技术层面上来讲，多端调试器是可行的。

具体说来，在调起调试器之前，首先需要将小程序跑起来，为此我们需要提供一个小程序运行环境。参照微信小程序的设计，小程序的运行环境主要包括模拟器和 AppService：

- 模拟器负责通过 webview 中还原小程序页面的展示效果，即视图层；
- AppService 是另外的一个 webview，负责模拟小程序行为，管理小程序启停等生命周``期，数据存储等，是逻辑层。

调试面板则负责提供调试小程序组件、本地存储、AppData 等能力，这需要将 webview 与调试面板通过 [Chrome Devtools Protocol](https://chromedevtools.github.io/devtools-protocol/) 连接起来。

![调试器架构](http://storage.360buyimg.com/pre-release/taro-ide-n-tide/devtools_structure.png)

开发阶段，出于开发生态的考量，我们采用 Electron 作为底层技术，而不是微信开发者工具中的 [NW.js](https://nwjs.io/)。调试器内运行的小程序基于多进程的架构，视图层（页面）与 数据层（AppService） 运行在不同的 webview 中，互不干扰，相互之间经由 JSON RPC 进行通信。

基于上面的原理，我们完成了 Taro 小程序的多端调试器，可以一键切换小程序平台进行调试。由于项目采用了 B/S 架构，很方便适配到多种多样的使用场景，如 Cli 命令调用，通过 Taro 2.0 的插件 API 调用，或者是在 Taro IDE 中使用。

![Taro devtools](http://storage.360buyimg.com/pre-release/taro-ide-n-tide/taro_devtools.png)

在调试器完工之后，我们发布了 Taro IDE 2.0。相比 1.0 版本，2.0 添加了调试器功能并优化了性能和体验。上线后，Taro IDE 的使用数据稍有好转，但依然没有达到理想状态。

调试器可谓是我们在 IDE 探索过程中的无心插柳之作。谁都没有想到，调试器能力竟成为了后期串联研发全流程的关键碎片。

## 正轨

在失利后，我们在每个失眠的夜问自己：”IDE 应该怎么做？“，可这无异于问道于盲。在短暂的彷徨后，我们决定进行用户调研，快速编辑了一份 Taro & Taro IDE 调研问卷，向所有使用过的用户进行投放。

![调查问卷](http://storage.360buyimg.com/pre-release/taro-ide-n-tide/questionnaire.png)

调查结果显示，我们过于低估桌面客户端的安装门槛了。Taro IDE 1.0、2.0 都是基于 Electron 开发的桌面应用，动辄几百 M 的体积已经拦住了大量的非刚需用户，更不用说它还存在前面提到的问题了；其次，基于 Electron 的 Renderer/Main + IPC 架构看似方便，事实上却会导致大量的逻辑耦合。综合上面两个原因，我们下定决心，要将应用改造为 B/S 架构，降低用户的使用门槛。

![B/S IDE](http://storage.360buyimg.com/pre-release/taro-ide-n-tide/browser_ide.png)

到这里，我们已经围绕项目研发流程，完成了 GUI 化的项目创建、测试、发布等研发流程，调试器能力的开发。距离完整的开发者工具，就只差一个编辑器了。

一款没有代码编辑器的 IDE 是没有灵魂的。纵使我们在前端工程化领域努力耕耘，也无法与 Visual Studio、Eclipse 等知名开发者工具比肩。我们开始思考：能否基于已有的能力，做一些更厉害，更有影响力的事情？直到发现 [Eclipse Theia](https://theia-ide.org/) 项目，我们知道，机会来了。

从最开始，我们就一直在做大而全的事情。从项目的创建，到发布等流程，我们需要考虑不同用户的使用环境，对特殊场景做额外处理，慢慢地将 Taro IDE 项目变得臃肿不堪，却忘记我们最初只是想要一个集成开发环境，想要串联研发流程而已。

孙子说得好：“能用众力，则无敌于天下矣。”如果我们只负责抽象研发流程，而将研发流程的具体逻辑交给专业的研发同学。不同部门之间形成合力，IDE 核心的工作量会大大降低，业务支持也会更为专业。

Eclipse Theia 是一款云和桌面端的 IDE 平台，提供了一系列构建 IDE 的工具，不仅编辑体验酷似 VS Code，还支持 VS Code 的插件生态；基于 [InversifyJS](https://github.com/inversify/InversifyJS) 的底层还具有极强的扩展性，完美符合我们的要求。

因此，我们基于 Theia 源码，结合内部的业务及使用场景，对 Theia 进行拓展，增加了插件系统、布局系统、和业务上下文模块，让业务方简单、灵活地深度定制 IDE 的功能和界面。

![Taro IDE 架构图](http://storage.360buyimg.com/pre-release/taro-ide-n-tide/tide_structure.png)

拓展完成后，我们基于 Theia 打造底层 IDE 框架，提供通用研发流程接口，其他团队则通过插件机制，定制专属的研发流程，如 Taro 项目研发流程，H5 营销项目研发流程等，最后打包成对应的场景化 Cloud& Desktop IDE。至此，我们完成了**从 Taro IDE 到公共 IDE 底层框架的转变。**

![Tide 框架](http://storage.360buyimg.com/pre-release/taro-ide-n-tide/tide_as_a_framework.png)

## 成果

为配合项目形态的转变，我们还联合品牌设计的同学，将技术品牌由 Taro IDE 升级为 Tide，期待它能像 Tide Hunter 一样，一个大招搞定全场。

目前，Tide 项目的核心模块已经开发完毕，并通过插件适配了 Taro 项目研发全流程，在部分业务开展试点。

![Tide 项目](http://storage.360buyimg.com/pre-release/taro-ide-n-tide/tide.png)

## 展望

如果说在前端模块化标准、方案出现以前，前端界尚处于刀耕火种的阶段；那么在前端工程化蓬勃发展的今天，前端行业正在逐步向成熟的工业化转变。

未来会如何？我们倾向于认为，未来会是大数据、智能技术大展身手的时代。不仅如此，我们也已经进行技术布局，借助[智能的力量](https://aotu.io/notes/2020/12/31/deco/)，对传统的产研流程发起彻底的改革，我们称之为智能化的前端研发体系，Tide 正是其中的基础设施之一。

什么是智能化前端研发体系？

前端研发人员在收到业务设计稿后，通过 Deco 智能代码，得到基础的 UI 还原稿。对于其中的修改点，则可在羚珑页面可视化平台中进行调整。过后将调整后的 UI 代码导入到线上 Tide 环境中二次开发，填充数据、逻辑等代码，运用 Taro 能力，将业务上线到众多不同的业务平台中。最后，上线业务中可以再次向夸克设计资产沉淀大量优质物料，提升未来智能代码能力的准确性。

![智能化前端研发体系](http://storage.360buyimg.com/pre-release/taro-ide-n-tide/aibased_fe_dev_system.png)

我们将继续完善 Tide 核心架构，将 Tide 拓展到其他的研发场景，帮助业务方快速高效定制自己的场景化 IDE，提升研发效率；除此之外，我们还将提供基于 Docker 的部署方案，帮助业务方实现实现研发上云。

“锦江春色来天地，玉垒浮云变古今”。

前端领域的发展日新月异，各种技术框架层出不穷，2021 年，变化的种子已经埋下，让我们一起拥抱更好的未来。

## 其他

感谢一直关注凹凸实验室的读者，为了提供更优质的内容，希望您能抽出几分钟时间，完成一个小调查，明年凹凸公众号的内容由你决定。[点击直达](https://aotu.io/join/)

加入凹凸实验室开放、开源、专业、有爱、有梦的大家庭？[点击直达](https://aotu.io/join/)

还没有关注「凹凸实验室」的读者们，关注我们吧，我们一个月只有 4 次推送机会，我们很珍惜每一次推送，不会让你失望的。微信搜索「凹凸实验室」关注即可。

### 凹凸揭秘系列文章地址

[1.《凹凸实验室的过去与未来》](https://mp.weixin.qq.com/s/xPgauXm6DL6udSEGnCSpEQ)

[2.《凹凸技术揭秘·羚珑智能设计平台·逐梦设计数智化》](https://mp.weixin.qq.com/s/3jwZrygWYG2oA-R4-2WSXg)

[3.《凹凸技术揭秘 · Deco 智能代码 · 开启产研效率革命》](https://mp.weixin.qq.com/s/R3Nsrwyy9kFbjG65zA-eCw)

[4.《凹凸技术揭秘·羚珑页面可视化·成长蜕变之路》](https://mp.weixin.qq.com/s/joTeBq0H1aWChAa6PZvGCA)

[5.《凹凸技术揭秘 · 夸克设计资产 · 打造全矩阵优质物料》](https://mp.weixin.qq.com/s/C02kg7ykMTmQyJUAW188yA)

[6.《凹凸技术揭秘 · Tide 研发平台 · 布局研发新基建》](https://mp.weixin.qq.com/s/7lMyU5l4EzzRYK4l6bVYmA)