一套 React 语法规范的多端开发解决方案 Taro

一套 React 语法规范的多端开发解决方案 Taro

MIT
JavaScript 查看源码»
跨平台
京东
2018-06-11
yuche

Taro - 用 React 写小程序,生成 H5、React Native 等多端应用

Taro['tɑ:roʊ],泰罗·奥特曼,宇宙警备队总教官,实力最强的奥特曼。

Taro 是什么?

Taro 是由京东 - 凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架。

现如今市面上端的形态多种多样,Web、App 端(React Native)、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。

使用 Taro,我们可以只书写一套代码,再通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信小程序、H5、App 端等)运行的代码。同时 Taro 还提供开箱即用的语法检测和自动补全等功能,有效地提升了开发体验和开发效率。

Taro 能提供什么?

一次编写,多端运行

既然是一个多端解决方案,Taro 最重要的能力当然是写一套代码输出多端皆可运行的代码。目前 Taro 已经支持一套代码同时生成 H5 和小程序,App端(React Native)端也即将支持,同时诸如快应用等端也将得到支持。

同时 Taro 也已经投入到了生产环境使用,目前已经支撑了一个 3 万行代码小程序 TOPLIFE 的开发和部分京东购物小程序,未来也将会支撑更多的京东核心业务小程序。

qrcode.png

现代前端开发流程

和微信自带的小程序框架不一样,Taro 积极拥抱社区现有的现代开发流程,包括但不限于:

  • NPM 包管理系统

  • ES6+ 语法

  • 自由的资源引用

  • CSS 预处理器和后处理器(SCSS、Less、PostCSS)

对于微信小程序的编译流程,我们从 Parcel 得到灵感,自研了一套打包机制将 AST 不断传递,因此代码分析的速度得到了很大的提高。一台 2015 年 的 15寸 RMBP 在编译上百个组件时仅需要大约 15 秒左右。

和 React 完全一致的 API 和组件化系统

在 Taro 中,你不用像小程序一样区分什么是 App 组件,什么是 Page 组件,什么是 Component 组件,Taro 全都是 Component 组件,并且和 React 的生命周期完全一致。可以说,一旦你掌握了 React,那就几乎掌握了 Taro。而学习 React 的资源也几乎是汗牛充栋,完全不用担心学不会。

Taro 和 React 一样,同样使用声明式的 JSX 语法。相比起字符串的模板语法,JSX 在处理精细复杂需求的时候会更得心应手。

import { View, Button } from '@tarojs/components'

export default class Home extends Component {
  constructor (props) {
    super(props)
    this.state = {
      title: '首页',
      list: [1, 2, 3]
    }
  }
  
  componentWillMount () {}
  
  componentDidMount () {}
  
  componentWillUpdate (nextProps, nextState) {}
  
  componentDidUpdate (prevProps, prevState) {}
 
  shouldComponentUpdate (nextProps, nextState) {
    return true
  }

  add = (e) => {
    // dosth
  }

  render () {
    const { list, title } = this.state
    return (
      <View className='index'>
        <View className='title'>{title}</View>
        <View className='content'>
          {list.map(item => {
            return (
              <View className='item'>{item}</View>
            )
          })}
          <Button className='add' onClick={this.add}>添加</Button>
        </View>
      </View>
    )
  }
}

良好的开发效率和体验

鉴于 Taro 的语法和 React 完全一样,因此编辑器/IDE 能够对 Taro 的支持和 React 是几乎一样的。现代的编辑器默认都对 JSX 进行了支持,如果没有,找一个插件也是非常容易的事情。但毕竟我们做 Taro 就是为了提升开发效率和开发体验,而真正使用 Taro 的人就是我们自己或正坐在我们旁边的同事。因此在此基础上,我们又对 Taro 开发体验进行了进一步加强。

自定义 ESLint 规则

我们之前提到过,当学会了 React,其实也差不多会 Taro 了。其中很重要的一个原因就是我们对 Taro 不支持的语法和特性单独写了 ESLint 规则:开发者只管写代码,写到不支持的语法/特性编辑器会报错,并给出报错信息和一个文档地址描述。

Taro eslint

类型安全和运行时检测

JSX 的本质就是 JavaScript 的语法增强,所以例如没有 import 组件等语法错误在编译期就能发现。开发者也可以使用 TypeScriptFlow 来对代码的可靠性进一步增强,或使用 PropsType 在运行时进一步保障代码的鲁棒性。

typings.gif

高效的自动补全和 ES6+ 语法

Taro 的所有 API(包括微信小程序等端能力接口)都有智能的提醒和自动补全,包括接口的参数和返回值。

Taro 自动补全

Taro 的设计思路

我们的初心就是做一款能够适配多端的解决方案,结合业务场景、技术选型和前端历史发展进程,我们的解决方案必须满足下述要求:

  • 代码多端复用,不仅能运行在时下最热门的 H5、微信小程序、React Native,对其他可能会流行的端也留有余地和可能性。

  • 完善和强大的组件化机制,这是开发复杂应用的基石。

  • 与目前团队技术栈有机结合,有效提高效率。

  • 学习成本足够低

  • 背后的生态强大

同时满足这几个需求并不容易,在我们经过充分地调研和思考之后发现只有 React 体系能够满足我们的需求。而对于微信小程序而言,使用 React 完全没有办法进行开发&mdash;&mdash;直到我们从 codemod 得到灵感:

在一个优秀且严格的规范限制下,从更高抽象的视角(语法树)来看,每个人写的代码都差不多。

也就是说,对于微信小程序这样不开放不开源的端,我们可以先把 React 代码分析成一颗抽象语法树,根据这颗树生成小程序支持的模板代码,再做一个小程序运行时框架处理事件和生命周期与小程序框架兼容,然后把业务代码跑在运行时框架就完成了小程序端的适配。

对于 React 已经支持的端,例如 Web、React Native 甚至未来的 React VR,我们只要包一层组件库再做些许样式支持即可。鉴于时下小程序的热度和我们团队本身的业务侧重程度,组件库的 API 是以小程序为标准,其他端的组件库的 API 都会和小程序端的组件保持一致。

Taro原理

技术选型与权衡

在我们前面社区已经有多个优秀的框架以小程序为核心对多端适配进行了探索,我们将各个开发框架的主要特点和特性进行了对比并制成图表。大家可以结合团队技术栈、技术需求以及框架特点、特性进行选型和权衡。

Taro 对比

结语

经过数个月的开发,Taro 从第一次 commit 到发展成包括 16 个包,十多位同学共同参与的大型项目。与此同时,Taro 也在生产环境支撑了数个复杂业务线上项目的开发,将来也会支撑更多的京东业务。

Taro 的技术方案和实现也根植于社区,我们也希望为技术社区的发展壮大贡献一份自己的力量。秉持着京东凹凸实验室长久以来开源、开放、共享的优良传统,我们今天将 Taro 全部代码开源,为广大开发者快速开发多端项目提供一整套技术解决方案。未来,我们也将继续拓展 Taro 现有能力,支持更多端能力,继续完善开发者体验,提高开发者效率,帮助更多开发者,同时也从社区中汲取养分,让 Taro 变得更加强大。

官网:http://taro.aotu.io/

的码云指数为
超过 的项目
加载中

评论(11)

IdleMan
IdleMan
又是啥东东
甜言
甜言
taro学习起来特别快,而且很好学,最特别的是有一群大佬在技术群里进行技术支持,开发过程中遇到什么坑都有大佬在线解决。所以用起来特别快,跨平台开发成本低,效率高!
_吟游诗人
_吟游诗人
大家有没有兴趣搞个DIGA出来,人家是泰罗,我们是迪加,就像阳光穿过黑夜 黎明悄悄划过天边。想想就热血沸腾
RogerLee
RogerLee
mark...
R
RoadNorth
mark
jluflyingz
jluflyingz
antd是一套面相web的UI库。京东这个是面相小程序的
宇润-不忘251-支持中医
坐等迪迦
电磁怪兽
电磁怪兽
特么奥特曼命名序列都出来了…用汉文化圈神话相关命名很土?!
幕smile
幕smile
多端实现感觉前景还是挺可以的
aiplat点com
aiplat点com
晚上试试

Taro 2.0.2 发布,BAT 小程序、H5 与 RN 端统一框架

Taro 2.0.2 发布了。Taro 是一套遵循 React 语法规范的多端统一开发框架,支持用 React 的方式编写一次代码,生成能运行在微信小程序/百度智能小程序/支付宝小程序、H5 与 React Native 等端...

01/22 07:20

Taro 2.0.0-beta.13 发布,BAT 小程序、H5 与 RN 端统一框架

Taro 2.0.0-beta.13 发布了。Taro 是一套遵循 React 语法规范的多端统一开发框架,支持用 React 的方式编写一次代码,生成能运行在微信小程序/百度智能小程序/支付宝小程序、H5 与 React Na...

01/01 07:36

Taro 1.3.17 发布,BAT 小程序、H5 与 RN 端统一框架

Taro 1.3.17 发布了。Taro 是一套遵循 React 语法规范的多端统一开发框架,支持用 React 的方式编写一次代码,生成能运行在微信小程序/百度智能小程序/支付宝小程序、H5 与 React Native 等端...

2019/09/03 07:35

Taro 1.3.4 发布,BAT 小程序、H5 与 RN 端统一框架

Taro 1.3.4 发布了。Taro 是一套遵循 React 语法规范的多端统一开发框架,支持用 React 的方式编写一次代码,生成能运行在微信小程序/百度智能小程序/支付宝小程序、H5 与 React Native 等端...

2019/07/01 07:44

Taro 1.3 震撼升级:全面支持 JSX 语法和 HOOKS

在 Taro 1.2 发布之后,Taro 在业界收获了巨大的赞誉和关注:GitHub 上 Star 数量超过 19000 粒,NPM 下载量也稳居同类开发框架之首,同时 Taro 团队也和腾讯、百度、华为等数十家业界巨头的...

2019/06/14 07:20

Taro 1.2.16 发布,BAT 小程序、H5 与 RN 端统一框架

Taro 1.2.16 发布了,Taro 是一套遵循 React 语法规范的多端统一开发框架,支持用 React 的方式编写一次代码,生成能运行在微信小程序/百度智能小程序/支付宝小程序、H5 与 React Native 等端...

2019/03/08 07:52

Taro 1.2.14 发布,BAT 小程序、H5 与 RN 端统一框架

Taro 1.2.14 发布了,Taro 是一套遵循 React 语法规范的多端统一开发框架,支持用 React 的方式编写一次代码,生成能运行在微信小程序/百度智能小程序/支付宝小程序、H5 与 React Native 等端...

2019/02/26 07:29

Taro 1.2.12 发布,BAT 小程序、H5 与 RN 端统一框架

Taro 1.2.12 发布了,Taro 是一套遵循 React 语法规范的多端统一开发框架,支持用 React 的方式编写一次代码,生成能运行在微信小程序/百度智能小程序/支付宝小程序、H5 与 React Native 等端...

2019/01/31 07:23

Taro 1.2.9 发布,BAT 小程序、H5 与 RN 端统一框架

Taro 1.2.9 发布了,Taro 是一套遵循 React 语法规范的多端统一开发框架,支持用 React 的方式编写一次代码,生成能运行在微信小程序/百度智能小程序/支付宝小程序、H5 与 React Native 等端...

2019/01/29 07:52

Taro 1.2.4 发布,多端统一开发框架

Taro 1.2.4 发布了,Taro 是一套遵循 React 语法规范的多端统一开发框架,支持用 React 的方式编写一次代码,生成能运行在微信小程序/百度智能小程序/支付宝小程序、H5 与 React Native 等端...

2019/01/04 07:32

没有更多内容

加载失败,请刷新页面

1
回答
taro中下载文件内容不对

在taro中下载文件,下载的是内容是入口文件index.html的内容,无法下载本地的静态文件,用相对路径找不到文件,用绝对路径不对,如果直接在rende...

2019/01/22 09:30
2
回答
echarts生成的饼状图,宽度在切换页面时,会自己变化

第一次访问页面时图的宽度是359,跳转到其他页面再返回时就变为了375,怎么才能让它不变化,这样没法居中

2018/11/27 19:02
11
回答
高手问答第 208 期 — 小程序开发的另一种选择,用 React 开发小程序

微信小程序从发布上线时不被大多数人看好,到如今的逐渐火热,已经在互联网站稳了跟脚,甚至有引领潮流的趋势。小程序用时间和实践证明了自己的价值,既然如此,作为...

2018/08/15 08:04

没有更多内容

加载失败,请刷新页面

没有更多内容

taro常用不定期更新

###全局安装Taro # 使用 npm 安装 npm install -g @tarojs/cli # 使用 yarn 安装 yarn global add @tarojs/cli # 安装了 cnpm,使用 cnpm 安装 cnpm install -g @tarojs/cli ###更新 Taro t...

2019/05/28 09:59
37
0
小程序多端框架全面测评

小程序多端框架到底应该选哪个? 最近前端届多端框架频出,相信很多有代码多端运行需求的开发者都会产生一些疑惑:这些框架都有什么优缺点?到底应该用哪个? 作为 Taro 开发团队一员,笔者想...

2019/03/25 16:31
1.4W
6
Taro 兼容 h5 踩坑指南

最近一周在改造 公羊阅读🐏 Taro 版本适配 h5 端,过程中改改补补,好不酸爽。 本文记录📝遇到的问题,希望为有相同需求的哥们👬节约点时间。 Taro 版本:1.3.9。 client_mobile_taro...

2019/08/19 19:09
630
0
邀您参加「Taro x 小程序·云开发」物料开发竞赛

多端统一开发解决方案 Taro 是由凹凸实验室开源、遵循 React 语法规范的多端开发解决方案,截止目前 star 数即将突破两万,受到了前端开发者的广泛关注,成为了当前最受欢迎的小程序多端开发...

2019/07/01 11:38
2
0
taro实现聊天|taro仿微信聊天界面|taro+redux多端实例

最近一直进行多端探索开发,之前就有使用uniapp+vue开发过多端仿抖音/陌陌直播室项目,今天给大家分享的是基于taro+react多端仿微信界面聊天室TaroChat项目,同样支持编译到H5端、小程序、A...

2019/12/17 20:02
150
0
微信小程序项目开发实战:用WePY、mpvue、Taro打造高效的小程序》(笔记4)支持React.js语法的Taro框架

Taro本身实现的情况类似于mpvue,mpvue的未来展望中也包含了支付宝小程序,现在的版本中,也可以使用不同的构建命令来构建出百度小程序的支持,如第10章所示,但是现在Taro先于mpvue实现了更...

2019/07/09 10:04
118
0
一周小程序学习 第1天

一周小程序学习 第1天 今日正式开始小程序的学习! 对于刚上手的自学小白,技术选型是很重要的,这在一开始就决定了这条开发学习之路顺不顺利。 今日目标 完成小程序框架的技术选型 搭建开发...

2019/05/16 23:01
11
0
微信小程序脚手架

我的 Taro 小程序脚手架 基于 Taro / dva / redux-saga / react 的微信小程序脚手架,同时集成了 sprite 。 链接: https://pan.baidu.com/s/17OkANm6hSttYmV30MqwTqA 提取码: ye72 文档参考 ...

2019/07/05 14:45
483
0
react学习需知

npm install -g create-react-app --是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境。 create-react-app my-app -- 自动创建的项目是基于 Webpack + ES6 cd my-app/...

2019/10/20 10:24
5
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部