凹凸实验室开源的 Taro 多端统一开发框架，提升开发效率降低成本
2018年6月7日，AOTU实验室向公众开放源代码。
Taro 是一个多端统一开发框架，支持使用微信小程序、Web 等开发方式编写可运行于多平台的应用程序，帮助开发者提高开发效率、改善开发体验、降低多端研发成本。
自开源以来，Taro 便受到业界的广泛关注，其原理和思想也得到了开发者的广泛认可，这对我们来说无疑是一件令人振奋的事情。但由于 Taro 初期缺乏测试和实现方法，开源期间出现了不少 Bug，引来了一些质疑。为此，我们吸取了教训，积极接受开源社区的意见和帮助，努力探索提高 Taro 稳定性和性能的方法。经过不断的迭代和完善，Taro 浴火重生。
1.0.0 已经到来
Taro 开源至今已有 3 个月，我们已发布了超过 70 个日常版本，以及超过 20 个 Taro 1.0.0 的 beta 版本。经过近百个版本的迭代优化，我们亲身感受到 Taro 的 Bug 反馈越来越少，Taro 也越来越健壮和完善。因此，我们有信心推出 1.0.0 正式版。
Taro 1.0.0正式版不仅延续了之前版本的优秀特性，还添加了更多特性和功能，并且在小程序端/H5端进行了多项转换优化，同时带来了对转换的支持。
全新小程序组件化
在开源之初，由于种种原因，Taro 的微信小程序组件化是利用小程序标签实现的。利用小程序标签的特点，将组件 JS 文件编译成 JS+WXML 模板，通过父组件（页面）模板中的标签引用子组件的 WXML 模板进行拼接，从而达到组件化的目的。
实践证明，模板方案是一个失败的组件化方案，Taro 开源初期的 Bug 主要就来自于此。由于这个方案将 JS 逻辑与模板分离，需要手动保证 JS 和模板中的数据一致。这样在循环组件渲染、多组件嵌套的情况下，很难保证组件的正确渲染和传输，实现成本也很高。另外由于小程序标签的缺陷，导致部分功能（如自定义组件包含子元素等）无法实现。
因此经过艰苦的探索和实践，我们采用了小程序原生的组件化作为 Taro 的小程序组件化解决方案，并通过一些处理规避了小程序组件化的诸多限制，为 Taro 的稳定性打下了坚实的基础，并带来了以下好处：
全面支持小程序生态
为了更好地帮助开发者使用Taro开发小程序，在1.0.0版本中，我们加强了对小程序生态的支持，主要有以下几个方面：
支持小程序端引用第三方组件库
受益于小程序组件化重构，我们在Taro中支持在小程序端直接引用第三方组件库，让Taro融入到小程序生态中，为开发者提供更多便利。
目前已支持以下知名第三方组件库
当然，Taro 不仅仅支持上述这些组件库，任何按照原生小程序规范编写的组件库都可以在 Taro 中正常使用。
支持Taro代码与原生小程序代码混合
同时，Taro 支持将原生小程序代码与 Taro 代码混合，你可以愉快地使用 Taro 将老版小程序项目改造成 Taro 项目。
支持小程序端子包加载及插件引用
我们在Taro中也加入了对原生小程序分包加载功能的支持，配置方法和原生小程序基本一致，只需要在app.js入口文件中添加字段即可。
import Taro, { Component } from '@tarojs/taro'
class App extends Component {
config = {
pages: [
'pages/index',
'pages/logs'
],
subPackages: [
{
root: 'moduleA',
pages: [
'pages/rabbit',
'pages/squirrel'
]
}
]
}
}
同时，Taro还支持使用小程序插件功能，第三方插件可以在Taro中直接引用。
import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/Components'
class PageA extends Component {
config = {
usingComponents: {
'hello-component': 'plugin://myPlugin/hello-component'
}
}
render () {
return (
<View>
<hello-component>hello-component>
View>
)
}
}
小程序性能优化
在最初开源的版本中，小程序端只是对小程序进行了异步的封装，最终调用更新的时候依然将完整的数据传入。
但众所周知，小程序目前是以视图层作为渲染载体，而逻辑层则是独立的运行环境。从架构上来说，和都是独立的模块，并没有直接的数据共享渠道。调用之后，数据会使用 JSON 进行序列化，然后拼接成脚本，再传递给视图层进行渲染。这样，当数据量非常大的时候，小程序就会异常卡顿，性能也会非常差。
Taro 可以帮助开发者在框架层面进行优化，通过事先进行数据 diff，找到数据的最小更新路径，然后通过此路径进行更新。
// 最初的
这个。= {
答：[0]，
b：{
X： {
年：1
} }
// 调用此方法。
这。（{
答：[1，2]，
b：{
X： {
年：10
}）
优化前，this.的数据会直接传递给，也就是
这个.$.({
答：[1，2]，
b：{
X： {
年：10
}）
优化后数据更新变为
这个.$.({
‘a[0]’：1，
‘a[1]’：2，
‘bxy’：10
}）
这样的优化对于小程序来说意义重大，可以避免数据更新带来的性能问题。
更丰富的 JSX 语法支持
前面提到，Taro 开发多端应用需要使用语法规范，所以必须使用 JSX 作为模板，因此 Taro 需要将 JSX 编译成各个终端支持的模板，其中小程序端是最复杂的，Taro 需要将 JSX 编译到小程序的 WXML 模板中。
在开源过程中，Taro 支持的 JSX 写法不断完善，力求开发体验更加贴近原生，主要包括以下语法支持：
目前除了 Taro 官方插件 taro 中受限语法外，其他 JSX 语法基本都支持，未来借助原生组件化，会逐步解除限制。
侧面转换支持
在 Taro 1.0.0 中我们将正式推出客户端的转换支持，可以将已有的 Taro 项目转换为 RN 版本。不过需要注意样式的处理，因为 RN 支持的样式非常有限，是 CSS 的子集。详情请移步 RN 客户端转换注意事项。
Taro 的 RN 端基于 Expo 编译构建 RN 程序，开发方式和编译命令与其他端类似，代码目录结构与现有的 Taro 项目基本一致。
RN编译预览模式
# npm
$ npm run dev:rn
# 仅限全局安装
$ taro --type rn --
# npx 用户还可以使用
$ npx taro --type rn --
执行命令之后Taro会开始编译文件，最终得到RN端的编译指令，并启动你的应用程序。
客户端完整开发流程请参见开发流程介绍。
更强有力的支持
随着前端项目的复杂度和规模不断增长，越来越多的项目开始使用。Taro 也注意到了这一趋势，并提供了对 的支持。在社区的帮助下，Taro 对 的支持更加完善和齐全：
H5转化优化
同时，Taro在H5转换上也进行了诸多转换优化，修复了H5上一版本中的诸多Bug，使得H5路由系统更加健壮，并且开放了配置，让开发者可以自由地进行相关配置。
最后附上Taro完整的迭代过程。
重生
如上所述，Taro 1.0.0 带来了许多新的优秀特性。同时，社区中的 Bug 反馈也越来越少，这也是开源期间不断努力和打磨的结果。
从 6.7 到本文结束，Taro 经历了 1800 多次 ，平均每天近 20 次，最多时每天 30 次。每一次 都是一次进步，每一次 都让 Taro 更加强大。经过这么多次迭代，Taro 已经脱胎换骨，特别是在小程序组件化完成后，Taro 跳出了旧架构的泥潭，成为了一个更加健壮的开发框架。
我们在不断反思和优化的同时，也积极融入开源社区，依靠社区的力量打造Taro。
这是检验一个开源项目可靠性的标准之一。目前为止，我们收到 500 多个请求，其中近 400 个已经关闭，关闭率大概在 80%。而未关闭的大多数也是一些功能的迭代需求，Taro 开发团队要求每一条的响应时间不能超过 24 小时。也正是因为这些，我们才不断意识到 Taro 的不足，懂得如何迭代。
同时，我们一直在鼓励社区开发者积极提交 PR。一个优秀的开源项目需要整个社区的力量才能完善。到目前为止，我们已收到 120 多个 PR，几乎全部被合并。这些 PR 为 Taro 注入了大量新鲜血液，让 Taro 更加健壮。我们也希望更多的开发者能够加入进来，共同把 Taro 做得更好。
除了线上交流，我们还开通了官方微信群供开发者讨论Taro、探讨技术，目前已有超过1700位开发者关注和使用Taro，期待更多开发者加入。
改善开发者生态系统
Taro 在开源之初一直处于封闭状态，没有适配的 UI 库，无法使用第三方组件库，这些对于开发效率都是非常严重的桎梏，社区中对此的反馈也非常多。
因此在 1.0.0-beta 版本的开发过程中，Taro 团队开发了多端 UI 库打包功能，并提供了 taro --ui 命令，可以将按照一定规则组织的代码打包成可以在 Taro 中使用的多端 UI 库。
并基于该功能推出了第一个可以跨终端使用的多端UI库Taro UI，目前支持微信小程序和H5终端，终端适配即将完成，可同步提供给各终端。
目前多端UI库封装功能尚在内测阶段，在Taro 1.0.0发布后该功能将同步发布，以便更多开发者为Taro开发更加丰富的多端组件库和UI库。
将来的计划
Taro 会持续迭代，目前已规划了以下重要功能。
测试便捷
提供编译时和运行时的代码诊断，分析代码的优劣，判断代码编写是否规范，帮助开发人员避免由于编写方法导致的问题。
同时将提供一套测试解决方案，方便开发人员编写和运行组件测试用例，提高代码质量。
多端同步调试
目前Taro仅支持单端调试，对于开发多端应用来说效率略低，因此计划提供微信小程序/H5/端同时调试的功能，可以一键启动多端同时编译，从而获得多端同步预览。
微信小程序/H5代码转Taro代码
目前支持将 Taro 代码转换为小程序代码、H5 代码，后续将提供反向转换功能，帮助开发者将已有的小程序/H5 项目直接转换为 Taro 项目，让原本只能在一端运行的项目，实现在多端运行，降低开发者的改造成本。
及时了解新功能
Taro 遵循语法规范，但不断在变化。作为追随者，Taro 也会与时俱进，不断推出新功能，让 Taro 尽可能贴近开发体验。
快应用支持
目前Taro已经完成快应用端组件库及API的适配，快应用端的文件转换、模板转换等功能也在开发中，支持快应用转换的版本将于近期发布。
支持支付宝小程序、百度智能小程序
支付宝小程序与百度智能小程序转换的可行性已完成预研，即将进入开发阶段。
多端可视化拖拽构建
目前Taro依靠开发者手动编写代码来获得多端应用，未来Taro计划提供多端可视化拖拽构建功能，可以通过拖拽组件的方式生成多端应用。
同时，Taro还将与各大公司的小程序开发团队合作，推出丰富多彩的行业模板，为各行业应用的可视化提供完整的解决方案。
用例
开源期间，随着Taro的逐渐完善，越来越多的开发者加入到Taro的使用和开发中，产生了更多、更优秀的用例。
============================由msup主办的第七届全球软件案例研究峰会将于11月30日至12月3日在北京国家会议中心举办。