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

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

随着小程序开发的热度上升，小程序开发框架也层出不穷。但目前每一个小程序开发框架都会绑定一个专属 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（微信同号）