多端统一开发解决方案Taro的架构设计

Posted 2021-04-10 前端之巅

随着小程序开发的热度上升，小程序开发框架也层出不穷。但目前每个小程序开发框架都会绑定一个专属 DSL，如类 React 或者类 Vue。在一个框架内，开发者无法根据团队技术栈自由选择 DSL，同时也无法共享框架本身的生态与工具。

Taro 框架将各种语法的前端框架运行在小程序上，一个框架支持多 DSL 的实现探索，使得开发者可以使用任意热门框架 / 语法 / DSL 来编写小程序应用，同时复用相关生态。

在即将于 12 月 20～21 日举行的 GMTC 全球大前端技术大会（深圳站）上，京东高级前端开发工程师程帅老师将分享《小程序跨框架开发的探索与实践》。InfoQ 在会前采访了程帅老师，带大家了解了凹凸实验室开源的多端统一开发框架（Taro）的研发背景、业务类型以及解决方案。

InfoQ：请您简单介绍下自己与所负责的工作。

程帅：大家好，我是程帅，来自凹凸实验室，主要负责部门研发工具的开发以及一些开源项目建设。

InfoQ：多端统一开发解决方案（Taro）自开源以来，用户越来越多，该框架的研发背景是？

程帅：Taro 的诞生，其实是因为当时我们支持的业务有小程序、H5 以及 APP，得同时维护三套代码，因此我们萌生一个想法“能不能就用一套代码去实现各个端”。而且当时我们正好在做类 React 的框架，整个部门的技术选型就转向了 React 的阵营。后来，我们就思考怎么写一套代码编译到各个端，于是就有了 Taro。

InfoQ：Taro 在内部业务落地的过程中遇到的最大的技术难点是什么？又是怎么解决的？

程帅：Taro 在内部落地的业务类型主要有两种，一种是旧的业务，一种是新的业务。

旧的业务的核心在于稳定迭代，所以 Taro 应用到旧的业务中时，会先评估适合的场景和页面，优先选择多端差距小、迭代频繁的页面，然后将这些合适的场景或页面剥离成独立的 Taro 项目，再使用 Taro 对这部分页面进行重构，这样既保证了重构后的收益，又不会对整个项目的正常迭代造成影响。同时，我们还针对剥离后的 Taro 项目定制了整套的自动化工作流程，从开发调试到 CI/CD 工具，尽可能将 Taro 对原有项目的侵入性减少到最低，这样在降低研发成本、提升研发效率的同时，还保证了项目的持续稳定迭代。

另外，针对旧的小程序项目想全面改造成 Taro 的，Taro 还提供了原生微信小程序转 Taro 的功能。通过 taro convert 命令，可以一键将原生微信小程序应用转换为 Taro 代码，然后再对转换后的 Taro 代码用 React 的方式进行二次开发，或直接转换为多端应用。

而对于新的项目，最重要的是团队的快速上手。Taro 的 DSL 选择的是 JSX 语法，支持 TypeScript 、Redux/Mobx 、Sass/Less/Styleus 等生态，还有 ESlint 代码校验、语法提示、Taro Doctor 环境检查等辅助开发的功能，因此熟悉 React 的开发人员上手基本毫无压力。在后期持续迭代的过程中，我们完善了一系列复杂的 JSX 语法的支持，在 1.3 的版本中又支持了最新的 React Hooks 特性，这些努力都有效地保证了新项目的无缝接入。

而 Taro 跨框架开发特性的发布，又将进一步扩大 Taro 框架的受众群体，保障 Taro 在更多业务的顺利落地。

InfoQ：Taro 如何将各种语法的前端框架运行在小程序上？

程帅：将各种语法的前端框架运行在小程序上，也就是通过 Taro 实现跨框架开发小程序，这是我们即将发布的重要特性。这个特性涉及到整个 Taro 的架构升级和项目大部分代码的重构。

要想实现小程序的跨框架开发，我们得先回到前端开发框架的本质。当前所有流行的前端框架，抛开使用和实现层面的差异，以及一系列兼容性和性能优化层面的考虑，最终都要回归到 DOM 的操作上。也就是说，只要你能够在小程序实现框架所需的 DOM/BOM 的 API ，那就能够将这些前端框架运行在小程序上。而各端小程序处于安全等层面的考虑，都没有把 DOM/BOM API 暴露出来，从而导致各种前端框架无法直接在小程序上运行。

Taro 就是给基于小程序的运行时实现了一套 DOM/BOM 的 API，并将这一套 API 和小程序的渲染机制结合起来，从而实现了将各种语法的前端框架运行在小程序上。

当然，小程序的正常运行不仅仅是 DOM 的渲染，还包括生命周期、路由、事件等一系列运行时的环境，这些都在 Taro 运行时进行了一一适配。

InfoQ：您觉得 Taro 能帮助使用者解决什么问题？Taro 接下来有没有大的规划？

程帅：Taro 可以帮助开发者快速开发小程序，也可以快速开发多端适配的应用。更重要的是，我们有活跃的社区，遇到问题都能得到及时解决。同时，Taro 还提供了庞大的研发生态，如 Taro 物料市场，它拥有丰富的开箱即用的物料，帮助开发人员快速构建多端应用。

现在小程序的开发情况是，即使使用了 Taro，在实际工作中，我们还需要接触众多不同的工具、系统，单纯的 CLI 工具难以实现复杂流程的聚合，不利于项目的多人协作，项目交付标准也参差不齐。为此，我们开发了一个可视化移动端研发解决方案，在降低使用门槛的同时，它也作为一个载体，将开发调试、测试、打包 / 发布、监控统计等一整套标准的工作流整合进来，降低门槛，提升人效。

嘉宾介绍

程帅，京东高级前端开发工程师，曾作为核心开发参与京东购物小程序开发，现作为多端统一开发解决方案 Taro 的核心成员，主要负责小程序及 RN 端的适配开发。热爱开源和分享，在前端工程化、性能优化以及跨端解决方案等方面有丰富的研究和积累。

活动推荐

在即将到来的 GMTC 全球大前端技术大会（深圳站）上，程帅老师还会具体分享，Taro 在小程序跨框架开发的探索、新架构的适配与实现，带你了解小程序开发框架的发展历程、各种热门框架的基本运行原理以及 Taro 的新架构设计，迅速掌握利用任意热门框架 / 语法 / DSL 来编写小程序的技能，同时复用相关生态。

除了程帅老师的分享，本次 GMTC 我们还设置了小程序挑战与应对、音视频技术、Serverless 实践、前端测试与安全、大前端工程化、Flutter 实战、新兴编程语言、团队建设与管理等热门技术专场。目前大会 9 折购票，点击「阅读原文」了解大会日程。有任何问题欢迎联系票务鱼丸：13269078023（微信同号）