GitHub Star数超2万的开源框架帮你轻松构建跨端应用

本文根据京东高级前端开发工程师朱天健在2019年软件绿色联盟开发者大会发表的《使用Taro构建跨端应用》主题演讲整理而成，为大家带来Taro框架的背景介绍、快速上手、样例解析和开发生态等内容分享。

背景介绍

Taro是一套基于React语法规范的小程序开发框架，旨在解决不同端小程序开发中需要逐个适配的问题。下面就”面对诸多开发需求，如何从工具和流程上提升开发的流程效率？”这一问题进行分享。

1、需求和痛点

在实际业务中，经常需要在不同的平台上完成产品开发，每个平台的语法规则、开发环境、适配样式和API等都不尽相同，给跨平台开发带来很高成本。

除了研发成本的提高，跨端开发过程中还会碰到很多痛点，如：业务响应及时和代码维护困难等，这些对产品迭代是致命的。

2、Taro设计思想和原理

面对以上需求和痛点，最理想的方案是实现：一套代码，多端适配。现在有很多类小程序平台，每个平台从开发工具到语法实现都有很大的不同，主要特点如下：

- 不同小程序端的规则相似但不统一；

- 小程序原生开发比对常规前端开发，不论是开发环境还是体验都有很大的差距。

这也就是我们面临的第一个问题，小程序开发的领域特定语言——DSL（domain-specific language）不统一。

2.1 DSL不统一

除了文件后缀等细节，在 Web 端和 RN 开发中常用的React 语法和小程序及快应用的语法之间虽然存在一定的相似性，但规则并不完全一致。因此需要定义一套前端熟悉的语法规则作为 DSL 。

通过完整的DSL打通现有前端和各类小程序平台之间的一些基础构架，让开发者在多端业务开发时，都能够使用现有开发环境，和已有的NPM的包、开发工具以及现有组件进行开发。

Taro选择基于所有前端团队都非常熟悉的React进行打造，从内部和社区的反馈上看，这个选择得到了广泛的认可。开发者只需正常编写代码，就可以编译生成多个平台的应用。

在代码转换过程中，源码在Taro框架内部会经过词法分析、语法分析、语义分析，标准化抽象语法树构建，目标代码转换等流程。ESTree Spec在这些流程中起到了非常重要的作用。

ESTree Spec使用自定义语法来描述 JS 抽象语法树的结构。它遵循向后兼容，无上下文，信息唯一且可拓展的准则，给产品的通用性和兼容性带来了很大的帮助。

以上图为例，ESTree Spec关于InterfaceProgram描述非常简单，但是实际编码过程中，代码结构可能会非常复杂。因此Taro还借助了AST Explorer和Babel等工具的力量。

其中AST Explorer主要用来快速查看代码对应的的抽象语法树。而Babel在解析代码获取AST，生成节点、递归遍历操作和生成源码等环节都提供了很多帮助。

除了借助工具，Taro还做了很多优化工作。在小程序代码转换的过程中，解析Render是非常重要的环节，因为整个页面呈现都会在这里实现。

而Taro在这个过程中，需要进行组件名转换，变量转换等操作。在实际运用中，Taro可能还需要进行数据类传递、列表循环、属性计算和逻辑判断等操作。

在这些操作中，Taro做了很多优化工作，比如将逻辑全部抽象成模板化处理，从而得到更加优秀的体验。

2.2组件库、API 不统一

代码转换完成后，不同平台组件库，和 API的差异，依然是跨端开发中的绊脚石。

不同平台支持的组件有一定的相似性，但是差异也非常明显。每一端的API也会有很多差异，因此我们需要制定一套完整的标准化的组件库。

2.3 Taro跨端解决方案

通过以上需求和难点分析，Taro的构架逐渐清晰起来：从基础框架的生命周期、组件API，以及事件机制开始逐步将多端环境打通，然后通过提供标准化组件库，标准化API为大家开发过程进行简化，提供更完善的开发体验。

下图是产品从源代码到发布的整个流程，在这个流程中Taro会匹配产品对应的运行框架，以及相应的路由库，编译完成的代码打包时也会自动匹配所需要的API和对应的组件，方便开发者在需要的平台上进行发布。

快速上手

1、易于获取

对于前端工程师，Taro上手非常简单。目前Taro-Cli已经在 Npm JS 上发布了，不论使用Npm、Yarn或者是Cnpm都可以实现快速安装，甚至不安装Taro-Cli 也可以直接使用 Npx执行Taro-Cli 提供的方案。

2、方便调试

在开发的过程中，我们还需要根据不同平台去编译调试代码。而通过Taro直接 Build 会构建压缩后的微信小程序端代码，而加上 Watch 之后，代码不会压缩，同时会实时监听代码的修改，调试非常方便。

3、多端呈现高度统一

Taro在多端的页面展示上，可以实现高度的一致性。

4、项目结构简单人性化

Taro项目结构非常简单，程序入口和页面及组件的入口写法都与原生开发非常接近，便于上手。

5、标准化的API和组件库以及跨平台尺寸

Taro还提供了标准化的API、组件库以及跨平台尺寸适配支持。跨平台尺寸适配是前端经常需要面对的问题，而通过Taro可以非常简单的帮大家应对。

6、支持多端差异开发

考虑到开发者根据平台进行差异化开发的需求，Taro还支持多端差异化开发。Taro通过一个简单的环境变量就能够判断代码所处的平台，然后根据平台进行引用依赖和组件渲染。

同时Taro还支持条件文件编译，在不同文件里面去放置平台对应的代码，在编译时引用，避免代码的冗余。

7、Taro帮你轻松应对多端开发困局

在多端开发中，Taro可帮助开发者解决大部分难题，帮助开发者得到更好的开发体验。

案例解析

下面以一个简单的购物类小程序为例，帮助大家更好地了解Taro。

1、功能分析和效果展示

如图所示，我们看到一个购物小程序所需要的大部分功能和页面。通过简单的配置，就可以得到下图中的效果。

2、流程分析及实践

在这个小程序中，主要需要进行一些列表渲染、数据请求和分页加载的操作。首先可以通过Taro简单初始化一个项目，在C++初始化过程，Taro会拉取远端模板，完成所有依赖的加载。

经过简单页面开发，项目初始化完成，就可以通过Taro进行编译，实时预览和快速调试，无论是哪个平台，都可以得到很好的体验。

3、优秀案例展示和征集

Taro目前在各个平台上都有了很多成功案例，开发者也可以在社区提交自己的实践，优秀案例将会获得展示的机会。

开发生态

除了官方团队，还不断有新的力量为Taro 的环境提供更现代化的支持，比如 Typescript、Redux和开源的Mobx 、Css-Modules 等，使得Taro的研发生态不断壮大。

同时Taro还支持智能代码提示和ES6+语法，支持ESlint语法校验，为开发者带来良好的开发体验。

在业务生态上，Taro还有强大的的UI库和组件库。Taro UI和Taro一样通过持续迭代完成了八端适配，并通过社区形成一个完整的框架体系，为大家提供丰富的组件库，开发者可以按需引用。

在Taro的物料市场中有很多开发者为大家提供各类物料，包括有Taro的模板，Taro的组件，以及包括一些非常好用的工具，开发者可以在物料市场中寻找自己所需要的组件。也欢迎大家在Taro物料市场库分享自己的物料。

在Taro生态里面非常重要的一环是反向编译，可以轻松实现微信小程序和Taro的双向转换，帮助大家快速实现平台的迁移。

总结与展望

1、Taro IDE

经过一年多发展，Taro生态从无到有，发展非常迅速。下一步我们期望打造移动端一站式研发解决方案 Taro IDE，为大家提供可视化界面代码管理界面，实现物料中心与开发过程中无缝的接轨。最后我们还希望提供版本管理和数据统计等功能，帮助大家完成业务后期的工作。

2、重新定义跨端开发

我们希望通过Taro为大家打造更加舒适的开发体验，打造下一代移动端跨端解决方案，最终实现重新定义跨端开发。

3、从使用React到更多

目前Taro是基于React打造的跨端开发方案，也许在未来，我们在Taro上可以选择任意一种你喜欢的框架完成跨端开发。这其实并不遥远，目前已经有一个分支框架已经可以在官方仓库的分支下可以看到，我们期待在后续的版本中，看到大家的身影。

4、Taro社区共建计划

Taro生态的建设仅仅依靠Taro官方团队是远远不够的，所以我们会在未来推出我们的社区共建计划，激励更多开发者参与到Taro社区管理、知识构建和能力完善中来，与所有开发者一起打造更好的Taro生态。

·END·