三端開發調研之京東Taro

Taro 是由凹凸實驗室打造的一套遵循 React 語法規範的多端統一開發框架。

使用 Taro，咱們能夠只書寫一套代碼，再經過 Taro 的編譯工具，將源代碼分別編譯出能夠在不一樣端（微信小程序、H五、App 端等）運行的代碼。實現 一次編寫，多端運行。

1. 和JDreact的關係

   Taro 是基於 Nerv.js 搞的。Nerv 是在 2017 年初就已經開發了的基於 virutal-dom 的 Web 框架，沒有依賴任何第三方庫。

2. 解決的痛點

   主要是將解決怎麼將同一套web端代碼適配日益興起的各類小程序的問題

3. 支持端

• 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 的設計思路

作一款可以適配多端的解決方案，結合業務場景、技術選型和前端歷史發展進程，咱們的解決方案必須知足下述要求：

• 代碼多端複用，不只能運行在時下最熱門的 H五、微信小程序、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端仍是有一寫小差異呢，不過覆蓋一下默認樣式仍是能夠解決的，可是還有一點比較重要的是，Taro若是轉爲App【React Native】的話，樣式是不能嵌套的，就像和React Native中寫樣式是同樣的，這樣所謂的SASS或者LESS就沒有了優點，實在解決不了的，只能用下面這種方法了：

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文件夾下手動一個一個安裝，不過仍是能慢慢解決的，算是一個解決三端問題比較好的一個解決方案。