多端统一开发解决方案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 语法,支持 TypeScriptRedux/MobxSass/Less/Styleus 等生态,还有 ESlint 代码校验、语法提示、Taro Doctor 环境检查等辅助开发的功能,因此熟悉 React 的开发人员上手基本毫无压力。在后期持续迭代的过程中,我们完善了一系列复杂的 JSX 语法的支持,在 1.3 的版本中又支持了最新的 React Hooks 特性,这些努力都有效地保证了新项目的无缝接入。

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

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

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

要想实现小程序的跨框架开发,我们得先回到前端开发框架的本质。当前所有流行的前端框架,抛开使用和实现层面的差异,以及一系列兼容性和性能优化层面的考虑,最终都要回归到 DOM 的操作上。也就是说,只要你能够在小程序实现框架所需的 DOM/BOMAPI ,那就能够将这些前端框架运行在小程序上。而各端小程序处于安全等层面的考虑,都没有把 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 实战、新兴编程语言、团队建设与管理等热门技术专场。其中小程序专场不仅有京东小程序的实践,还有百度、腾讯、奇虎360的议题,详情请点击「阅读」了解详细内容。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章