背景
随着前端技术领域的高速发展，前端开发也变得越来越复杂。业务扩张，小程序平台井喷式增加，都导致开发者肩上的负担越来越重。为了提升研发效率，减少人力浪费，我们开发了开放式跨端跨框架解决方案 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 年，变化的种子已经埋下，让我们一起拥抱更好的未来。
其他
感谢一直关注凹凸实验室的读者，为了提供更优质的内容，希望您能抽出几分钟时间，完成一个小调查，明年凹凸公众号的内容由你决定。点击直达
加入凹凸实验室开放、开源、专业、有爱、有梦的大家庭？点击直达
还没有关注「凹凸实验室」的读者们，关注我们吧，我们一个月只有 4 次推送机会，我们很珍惜每一次推送，不会让你失望的。微信搜索「凹凸实验室」关注即可。
凹凸揭秘系列文章地址
3.《凹凸技术揭秘 · Deco 智能代码 · 开启产研效率革命》
