凹凸技术揭秘 · Tide 研发平台 · 布局研发新基建

全栈开发工程师 @ 京东

背景

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

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

如何提升研发流程整体的效率?技术先驱们早已给出了答案:Integrated Development Environment(集成开发环境),也就是通常说的 IDE。

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

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

CodeSandbox 融资情况

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

探索

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

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

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

Taro IDE

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

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

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

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

打磨

根据我们的对 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 devtools

在调试器完工之后,我们发布了 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 架构,降低用户的使用门槛。

B/S IDE

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

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

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

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

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

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

Taro IDE 架构图

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

Tide 框架

成果

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

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

Tide 项目

展望

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

未来会如何?我们倾向于认为,未来会是大数据、智能技术大展身手的时代。不仅如此,我们也已经进行技术布局,借助智能的力量,对传统的产研流程发起彻底的改革,我们称之为智能化的前端研发体系,Tide 正是其中的基础设施之一。

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

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

智能化前端研发体系

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

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

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

其他

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

加入凹凸实验室开放、开源、专业、有爱、有梦的大家庭?点击直达

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

凹凸揭秘系列文章地址

1.《凹凸实验室的过去与未来》

2.《凹凸技术揭秘·羚珑智能设计平台·逐梦设计数智化》

3.《凹凸技术揭秘 · Deco 智能代码 · 开启产研效率革命》

4.《凹凸技术揭秘·羚珑页面可视化·成长蜕变之路》

5.《凹凸技术揭秘 · 夸克设计资产 · 打造全矩阵优质物料》

6.《凹凸技术揭秘 · Tide 研发平台 · 布局研发新基建》

文章分类
开发工具