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

2019 年 11 月 25 日

多端统一开发解决方案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 的议题,详情请点击「阅读」了解详细内容。


2019 年 11 月 25 日 11:543557
用户头像
叶兰 GMTC 会议编辑

发布了 22 篇内容, 共 54848 次阅读, 收获喜欢 68 次。

关注

评论 2 条评论

发布
用户头像
关注用的人数,用个人多,社区活跃才敢上。
2019 年 11 月 25 日 14:24
回复
这是一个悖论,要想社区活跃,必须用的人多;而要想用的人多,必须社区活跃
2019 年 11 月 26 日 15:19
回复
没有更多评论了
发现更多内容

创业使人成长系列 (1)- 从失败中学习

石云升

创业 个人成长 成长

架构师训练营总结 -5

River Tree

极客大学架构师训练营 个人总结

一篇文章深入理解JDK7 HashMap

独钓寒江雪

hashmap map 源码解析 哈希冲突

编程能力 —— TicTacToe(井字棋)

wendraw

Java 前端进阶训练营 编程能力

小姐姐面试蚂蚁金服被虐经历,哪吒心疼.

通天哪吒

面试 Java 面试

我终于弄懂了Python的装饰器(一)

Young先生

Python 装饰器

[架构师训练营] Week02 - 作业

谭方敏

功利学习法:我为什么要这么功利?

非著名程序员

学习 程序员 程序人生 提升认知

Homework-我的一致性Hash算法

River Tree

Homework

深入理解CAS:以AtomicInteger为例

独钓寒江雪

Atomic CAS AtomicInteger 自旋

猿灯塔:spring Boot Starter开发及源码刨析(一)

猿灯塔

Java 源码剖析

[架构师训练营] Week02 - 学习总结

谭方敏

你真的在做持续集成吗?

Winfield

DevOps 持续集成 CI/CD

架构师训练营第5周总结

aoeiuvzcs

小师妹学JVM之:Dirty cards和PLAB

程序那些事

Java JVM 小师妹 性能调优 JIT

week5 coding

AIK

可读代码编写炸鸡四(下篇) - 提炼注释的下一步是提炼注释

多选参数

代码质量 代码 代码组织 代码规范

一致性Hash算法

莫莫大人

极客大学架构师训练营

直接赋值,深拷贝和浅拷贝

Leetao

Python Python基础知识

week5 总结

AIK

推荐 10个 NB的 IDEA 插件,开发效率至少提升一倍

程序员内点事

Java 效率 IDEA

第五周作业

如何写一份合格的技术简历?

通天哪吒

面试

第五周学习总结

架构师训练营 0 期第五周

Blink

再谈任务分解

松花皮蛋me

Java 精益开发

Atlassian Team Playbook | OKR 好的不只是逼格

Atlassian速递

开发

架构师训练营第5周作业

aoeiuvzcs

Spring Boot 最流行的 16 条实践解读,值得收藏!

Java小咖秀

spring 学习 Spring Boot SpringBoot 2 经验分享

想怎么玩,就怎么玩!搭载桌面级十代酷睿的神舟超级战神真香!

飞天鱼2017

一篇文章深入理解JDK8 HashMap

独钓寒江雪

源码 hashmap 线程安全

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