三端開發調研之京東Taro

VIRGO發表於2019-03-07

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

使用 Taro，我們可以只書寫一套程式碼，再通過 Taro 的編譯工具，將原始碼分別編譯出可以在不同端（微信小程式、H5、App 端等）執行的程式碼。實現 一次編寫，多端執行。

  1. 和JDreact的關係

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

  2. 解決的痛點

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

  3. 支援端

  • H5，微信小程式，百度智慧小程式，支付寶小程式 ———————— 這些功能適配的很好

  • APP端(基於Expo)【個人感覺不是很好用，有點坑】———————— 有侷限，Expo的侷限就是Taro

上線專案示例：

三端開發調研之京東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的優勢，主要有：

三端開發調研之京東Taro

效能對比：

三端開發調研之京東Taro

更多資訊：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 都會和小程式端的元件保持一致。

img

解釋如下：

螢幕快照 2019-03-06 下午4.24.59

意思就是：使用者根據基本上和react一樣的語法，同時結合Taro自己的一套元件，像正常編寫web一樣去開發，最終根據使用者輸入命令，命令通過Taro轉化器，將元件轉化為相應平臺的元件，語法還是遵循react語法。

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

共27個，對比與react native，增加了一些web熟悉並常用的元件

三端開發調研之京東Taro

轉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建專案— 跑命令 taro build --type rn —watch — 出現上圖 — 確保在和電腦統一域下用安卓或者iOS手機中的Expo APP掃上圖碼

不過我試了一下，還有其他方法，就是直接開啟模擬器，並在模擬器中安裝還Expo的APP，並且開啟，這時候直接跑命令即可，整個過程還算順利，不過想開啟Expo這個APP，還是有點門檻的，就是你得首先註冊個賬號並登陸，不過人家目的是為了更好的為你服務。傳送->

貼一下網頁端圖片和APP圖：

三端開發調研之京東Taro

左側是網頁端，右側是安卓模擬器中，可以看出來，基本上是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資料夾下手動一個一個安裝，不過還是能慢慢解決的，算是一個解決三端問題比較好的一個解決方案。

相關文章