三端开发调研之京东Taro

三端开发调研之Taro

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

使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信小程序、H5、App 端等）运行的代码。实现 一次编写，多端运行。

和JDreact的关系

Taro 是基于 Nerv.js 搞的。Nerv 是在 2017 年初就已经开发了的基于 virutal-dom 的 Web 框架，没有依赖任何第三方库。
解决的痛点

主要是将解决怎么将同一套web端代码适配日益兴起的各种小程序的问题
支持端

H5，微信小程序，百度智能小程序，支付宝小程序 ———————— 这些功能适配的很好
APP端(基于Expo)【个人感觉不是很好用，有点坑】———————— 有局限，Expo的局限就是Taro

上线项目示例：

现代前端开发流程

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

NPM 包管理系统
ES6+ 语法
自由的资源引用
CSS 预处理器和后处理器（SCSS、Less、PostCSS）

对于微信小程序的编译流程，Taro从 Parcel 得到灵感，自研了一套打包机制将 AST 不断传递，因此代码分析的速度得到了很大的提高，并且保证一键傻瓜式命令编译，不增加入门或者学习门槛。

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

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

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

// 一个典型的 Taro 组件
import Taro, { Component } from '@tarojs/taro'
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基于Nerv，同时结合微信小程序，React Native的优点，并且结合react-h5的代码编写优势，让我们在基本上不改变编写习惯的同时，顺便过渡到Taro上面来，摒弃了react native里面编写样式那种变态且又臃肿的代码编写方式<没有完全解决，没有完全解决，没有完全解决！！！>

Taro的H5端对于react.js的优势

Taro对于H5端的优势，不仅仅有一套代码可以编译成其他端的天然开发优势外，还有NervJS的优势，主要有：

性能对比：

更多信息：https://nerv.aotu.io

Nerv产生的原因：

日常开发中，相对于 Vue ，我们更倾向于选择 React 模式作为我们的开发标准，因为 React 天生组件化且函数式编程的方式，更加灵活且便于维护。然而，React 仍然有一些不能满足我们需求的地方：

IE8 浏览器兼容性：当前环境所限，即便很不情愿，我们仍然要支持 IE8。
体积：React 大概 130kb 的体积。在低网速 / 低版本浏览器 / 低配置设备的加载速度和解析速度都不能让我们满意。
性能：React 的 Virtual Dom 算法（React 自己叫 Reconciler）并没有做太多的优化。

而我们的新轮子 —— Nerv，它完全能提供上述 React 的所有优点，并且它也能完全满足我们自己的需求：更好的兼容性、更小的体积、更高的性能。

npm install nervjs --save
复制代码

从react迁移到Nerv

Nerv 提供了比 React 更好的浏览器兼容性和更高的性能，与此同时也不会放弃 React 庞大的生态系统。兼容 React 生态系统是开发 Nerv 的重要目标之一。

在webpack中只需要在 alias 把 nervjs 和 react、react-dom 关联起来即可：

{
  resolve: {
    alias: {
      'react': 'nervjs',
      'react-dom': 'nervjs'
    }
  }
}
复制代码

其他类工具可以参考：官网

Taro 的设计思路

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

代码多端复用，不仅能运行在时下最热门的 H5、微信小程序、React Native，对其他可能会流行的端也留有余地和可能性。
完善和强大的组件化机制，这是开发复杂应用的基石。
与目前团队技术栈有机结合，有效提高效率。
学习成本足够低
背后的生态强大

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

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

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

解释如下：

意思就是：用户根据基本上和react一样的语法，同时结合Taro自己的一套组件，像正常编写web一样去开发，最终根据用户输入命令，命令通过Taro转化器，将组件转化为相应平台的组件，语法还是遵循react语法。

Taro组件有以下[可以在node_modules里@tarojs/components完全找到]：

共27个，对比与react native，增加了一些web熟悉并常用的组件

转APP

Taro转APP主要还是基于react native，并且结合神器Expo，转化为可以在APP中正常运行的项目

什么是Expo？？？

Expo是一组工具、库和服务，可以通过编写JavaScript来构建本地的ios和Android应用程序。

Expo Apps是包含了Expo SDK的react native Apps,SDK是一个native-and-js的库，它包提供对设备系统的访问功能，像照相机、联系人、本地存储和其他硬件）。这意味着你不需要使用Xcode或Android的环境，或写任何代码也使得你的pure-JS项目非常便携，因为它可以运行在任何自然环境包含Expo SDK。

Expo还提供UI组件来处理各种应用程序，几乎所有应用程序都将被覆盖，但它不会突破react native Core的核心代码，例如图标、模糊视图，等等。

最后，Expo SDK提供了访问服务，这些服务虽然很难管理，但几乎每个应用程序都需要它。其中最受欢迎的是：Expo可以为您管理您的资产，它可以为您处理推送通知，并且它可以构建准备部署到应用程序商店的本地二进制文件。

说了这么多，什么意思啊？？？

就是咱们平时开发，虽然写了一套代码，但是环境还是要单独配置的，也就是说即使你用Mac开发，用react native开发APP的话，Xcode和安卓环境还是要配置的，毕竟APP的运行和打包都是需要这样的环境的，但是有了Expo就不用了，他有自己的SDK，开发者不用关心是什么系统了，但是唯一的要求就是你用的是什么版本的React Native，就要安装对应版本的Expo SDK【Expo针对不同的react native版本开发不同版本对应的SDK】

说了这么多，其实开发者要干嘛呢，怎么才能运行一个Taro项目呢，总结一下啊：

Taro建项目— 跑命令 taro build --type rn —watch — 出现上图 — 确保在和电脑统一域下用安卓或者iOS手机中的Expo APP扫上图码

不过我试了一下，还有其他方法，就是直接打开模拟器，并在模拟器中安装还Expo的APP，并且打开，这时候直接跑命令即可，整个过程还算顺利，不过想打开Expo这个APP，还是有点门槛的，就是你得首先注册个账号并登陆，不过人家目的是为了更好的为你服务。传送->

贴一下网页端图片和APP图：

左侧是网页端，右侧是安卓模拟器中，可以看出来，基本上是OK的，但是由于不同环境的APP端和H5端还是有一写小差别呢，不过覆盖一下默认样式还是可以解决的，实在解决不了的，只能用下面这种方法了：

ENV_TYPE.WEAPP 微信小程序环境

ENV_TYPE.SWAN 百度小程序环境

ENV_TYPE.ALIPAY 支付宝小程序环境

ENV_TYPE.TT 字节跳动小程序环境

ENV_TYPE.WEB WEB(H5)环境

ENV_TYPE.RN ReactNative 环境

总结

整体上上手还是较顺手的，基于 codemod 的灵感，同时整合一些比较优秀的第三方库，实现了一套代码，经过编译，多端运行的目标，也遇到一些坑，比如缺少webpack-runner,我试了一下缺的还蛮多，并且需要到node_modules下的@Taro文件夹下手动一个一个安装，不过还是能慢慢解决的，算是一个解决三端问题比较好的一个解决方案。