在 2018.6.7 我們對外開源了 多端統一開發框架——Taro。
Taro 是一個多端統一開發框架，它支持使用 React 的開發方式來編寫可以同時在微信小程序、Web 、React Native 等多個平臺上運行的應用，幫助開發者提升開發效率，改善開發體驗，降低多端研發成本。
自開源以來，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端的轉換優化，同時帶來了對 React Native 的轉換支持。
全新的小程序組件化
開源之初，由於種種原因，Taro 的微信小程序端組件化採用的是小程序 <template /> 標籤來實現的，利用小程序 <template /> 標籤的特性，將組件 JS 文件編譯成 JS + WXML 模板，在父組件（頁面）的模板中通過 <template /> 標籤引用子組件的 WXML 模板來進行拼接，從而達到組件化的目的。
實踐證明，Template 模板方案是一個失敗的組件化方案，Taro 開源初期的 Bug 主要來源於此。因爲這一方案將 JS 邏輯與模板拆分開了，需要手工來保證 JS 與模板中數據一致，這樣在循環組件渲染、組件多重嵌套的情況下，要保證組件正確渲染與 props 正確傳遞的難度非常大，實現的成本也非常高。而且，囿於小程序 <template /> 標籤的缺陷，一些功能（例如自定義組件包含子元素，等）無法實現。
所以，在經過艱辛的探索與實踐之後，我們採用了小程序原生組件化來作爲 Taro 的小程序端組件化方案，並且通過一些處理，繞開了小程序組件化的諸多限制，爲 Taro 的穩定性打下了堅實基礎，並帶來了以下好處：
- 小程序端組件化更加健壯
- 儘可能減少由於框架帶來的性能問題
- 依託官方組件化，方便以後解鎖更多可能
全面支持小程序生態
爲了更好地幫助開發者使用 Taro 開發小程序，在 1.0.0 版本中，我們加強了對小程序生態的支持，主要體現在以下幾個方面：
支持引用小程序端第三方組件庫
受益於小程序組件化重構，我們在 Taro 中支持了直接引用小程序端第三方組件庫，讓 Taro 可以融入到小程序生態中，爲開發者提供更多便利。
目前實測已經支持瞭如下知名第三方組件庫
- echarts-for-weixin，ECharts 的微信小程序版本
- iview-weapp，iview 的微信小程序版本
- vant-weapp，輕量、可靠的小程序 UI 組件庫
- wxParse，微信小程序富文本解析自定義組件，支持HTML及markdown解析
當然，Taro 不僅僅只支持上述組件庫，只要是按原生小程序規範編寫的組件庫都能在 Taro 中正常使用。
支持 Taro 代碼與原生小程序代碼混寫
與此同時，Taro 支持原生小程序代碼與 Taro 代碼混寫，因此，可以使用 Taro 愉快地將舊的小程序項目慢慢地改造成 Taro 項目了。
支持小程序端分包加載以及插件引用
我們在 Taro 中也加入對原生小程序分包加載功能的支持，配置的方式與原生小程序基本一致，只需要在 app.js 入口文件中加入 subPackage 字段即可。
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>
)
}
}小程序 setState 性能優化
在最初的開源版本中，小程序端 setState 僅僅是對小程序 setData 做了一次異步封裝，最終調用 setData 更新的時候還是傳入了完整數據。
但衆所周知，小程序的視圖層目前使用 WebView 作爲渲染載體，而邏輯層是由獨立的 JavascriptCore 作爲運行環境，在架構上，WebView 和 JavascriptCore 都是獨立的模塊，並不具備數據直接共享的通道。在調用 setData 之後，會將數據使用 JSON.stringify 進行序列化，再拼接成腳本，然後再傳給視圖層渲染，這樣的話，當數據量非常大的時候，小程序就會變得異常卡頓，性能很差。
Taro 在框架級別幫助開發者進行了優化，在 setData 之前進行了一次數據 Diff，找到數據的最小更新路徑，然後再使用此路徑來進行更新。例如
// 初始 state
this.state = {
a: [0],
b: {
x: {
y: 1
}
}
}
// 調用 this.setState
this.setState({
a: [1, 2],
b: {
x: {
y: 10
}
}
})在優化之前，會直接將 this.setState 的數據傳給 setData，即
this.$scope.setData({
a: [1, 2],
b: {
x: {
y: 10
}
}
})而在優化之後的數據更新則變成了
this.$scope.setData({
'a[0]': 1,
'a[1]': 2,
'b.x.y': 10
})這樣的優化對於小程序來說意義非常重大，可以避免因爲數據更新導致的性能問題。
更加豐富的 JSX 語法支持
前面已經提到 Taro 使用 React 語法規範來開發多端應用，這樣就必然是採用 JSX 來作爲模板，所以 Taro 需要將 JSX 編譯成各個端支持的模板，其中以小程序端最爲複雜，Taro 需要將 JSX 編譯成小程序的 WXML 模板。
在開源的過程中，Taro 支持的 JSX 寫法一直在不斷完善，力求讓開發體驗更加接近於 React，主要包括以下語法支持：
- 支持 Ref，提供了更加方便的組件和元素定位方式
- 支持 this.props.children 寫法，方便進行自定義組件傳入子元素
- 在循環體內執行函數和表達式
- 定義 JSX 作爲變量使用
- 支持複雜的 if-else 語句
- 在 JSX 屬性中使用複雜表達式
- 在 style 屬性中使用對象
- 只有使用到的變量纔會作爲 state 加入到小程序 data，從而精簡小程序數據
目前，除了 Taro 官方 ESLint 插件 eslint-plugin-taro 中限制的語法之外，其他 JSX 語法基本都支持，而在原生組件化的幫助下，未來將會把 ESLint 的限制也逐條取消。
React Native 端轉換支持
在 Taro 1.0.0 中，我們將正式推出 React Native 端的轉換支持，可以將現有 Taro 項目轉換成 RN 版本，但需要注意對樣式的處理，因爲 RN 支持的樣式非常有限，它是屬於 CSS 的子集，具體請移步 RN 端轉換注意事項。
Taro 的 RN 端基於 Expo 來進行編譯構建 RN 程序，開發方式和編譯命令與其他端類似，代碼目錄結構與現有 Taro 項目也基本一致
RN 編譯預覽模式
# npm script $ npm run dev:rn # 僅限全局安裝 $ taro build --type rn --watch # npx用戶也可以使用 $ npx taro build --type rn --watch
執行完命令之後，Taro 將會開始編譯文件，最終獲得 RN 端的編譯指引，並且啓動你的應用了
React Native 端完整開發流程請移步 React Native 開發流程介紹。
更加健全的 TypeScript 支持
隨着前端項目的複雜度和規模的增加，近年來越來越多的項目開始使用 TypeScript 進行開發。Taro 也注意到了這一趨勢，在開源之初就提供了對 TypeScript 的支持。在社區的幫助下，Taro 對 TypeScript 的支持也更加地健全和完善：
@tarojs/cli可以直接創建 TypeScript 項目@tarojs/components包含了所有組件的類型定義@tarojs/taro的所有 API 也都包含了類型定義@tarojs/redux和taro-ui也都全部內置了類型定義- 構建系統的編譯器從 Babel 切換到原生 TypeScript 編譯器，支持所有 TypeScript 語法
H5 端轉換優化
同時，Taro 在 H5 端的轉換中，也進行諸多轉換優化，修復了之前版本 H5 下諸多 Bug，讓 H5 端路由系統更加健壯，同時開放了 Webpack 配置，可以讓開發者自由地進行相關配置。
最後，附上 Taro 完整的 迭代歷程。
重生之路
正如上文提到，Taro 1.0.0 帶來許多新的優秀特性，而同時，在社區內的 Bug 反饋已經愈來愈少，這也是開源期間不斷努力打磨的結果。
從 6.7 到行文截止，Taro 一共經歷了 1800 餘次提交，平均每天近 20 次，最多的一天達 30次。每一次提交都是進步，每一次提交都讓 Taro 更加強大。經過這麼多次迭代之後，已經讓 Taro 獲得重生，尤其是小程序組件化重構完成之後，Taro 從舊版架構的泥潭中一躍而出，成爲更加健壯的開發框架。
在我們自己不斷反思、優化的同時，也積極融入開源社區，依託社區的力量去建設 Taro。
GitHub ISSUES 是檢驗一個開源項目靠譜程度的標準之一，到目前爲止，一共收到了 500 餘個 ISSUES，已關閉近 400 個，關閉率在 80% 左右，未關閉的也大部分是一些功能的迭代需求。在 Taro 開發團隊內部更是要求每一個 ISSUE 的響應時間不能超過 24 小時。正是因爲這些 ISSUES ，讓我們不斷意識到 Taro 的不足，讓我們知道如何地去進行迭代。
同時，我們也一直鼓勵社區的開發者積極提 PR，一個優秀的開源項目需要依靠整個社區的力量才能完善起來，到目前爲止，一共收到了 120 餘個 PR，已幾近全部合入，這些 PR 爲 Taro 注入了許多新鮮血液，讓 Taro 更加健壯，我們也期望能有更多的開發者可以加入進來，一起來讓 Taro 更加美好。
在 GitHub 上交流之餘，我們也爲開發者們開通了官方微信羣供大家一起討論 Taro 與技術，目前已有超過 1700 位開發者在關注、使用 Taro ，期待更多開發者的加入。
開發者生態完善
在開源之初，Taro 一直處於封閉的狀態，沒有適配的 UI 庫，也無法使用第三方組件庫，而這些對開發效率的桎梏非常嚴重，社區內對此反饋較多。
所以，在 1.0.0-beta 版本開發期間，Taro 團隊開發了多端 UI 庫打包功能，提供了 taro build --ui 命令來將按照一定規則組織的代碼打包成可以在 Taro 中使用的多端 UI 庫。
並且，基於這一功能，我們推出了首個可以跨多端使用的多端 UI 庫 Taro UI，目前已經支持了微信小程序與 H5 端，不久之後將完成 React Native 端的適配，可以同步提供給 React Native 端使用。
目前，多端 UI 庫打包功能還處於內測階段，在 Taro 1.0.0 發佈之後，這一功能將同步發佈，這樣更多開發者就可以爲 Taro 開發更豐富的多端組件庫和 UI 庫了。
未來規劃
Taro 將會繼續保持迭代，目前已經規劃瞭如下重要功能。
便捷測試
在編譯時與運行時提供代碼診斷的功能，分析代碼優劣，判定代碼寫法是否規範，以便幫助開發者規避一些由於寫法帶來的問題。
同時將提供一套測試方案，方便開發者書寫並運行組件測試用例，提升代碼質量。
多端同步調試
目前 Taro 只能一次調試一個端，這對於開發多端應用來說效率略低，所以，計劃提供微信小程序/ H5 / React Native 端同時調試的功能，可以一鍵啓動多端同時編譯，從而獲得多端同步預覽。
微信小程序/H5 代碼轉 Taro 代碼
目前已支持 Taro 代碼到小程序代碼、 H5 代碼的轉換，在未來，將提供逆向轉換功能，幫助開發者將原本就存在的小程序/H5 項目直接轉換成 Taro 項目，從而讓原本只能運行在一端的項目獲得多端運行的能力，降低開發者的重構成本。
與 React 新特性保持同步
Taro 是遵循 React 語法規範的，但是 React 一直在迭代在變化，Taro 作爲 React 的追隨者也將會保持與 React 新特性同步，讓 Taro 最大程度接近 React 開發體驗。
快應用支持
目前 Taro 已經完成了快應用端組件庫與 API 的適配，快應用端的文件轉換與模板轉換也正在開發中，不久的將來就會發布支持快應用端轉換的版本。
支付寶小程序與百度智能小程序支持
已預研支付寶小程序與百度智能小程序轉換的可行性，即將進入開發。
多端可視化拖拽搭建
目前 Taro 是依靠開發者手工編寫代碼來獲得多端應用的，Taro 未來計劃提供一個多端可視化拖拽搭建的功能，可以通過拖拽組件的方式來生成多端應用。
同時，Taro 將聯合各大公司小程序開發團隊，推出豐富的行業模板，爲各行業應用可視化搭建提供完整的解決方案。
使用案例
在開源期間，隨着 Taro 的逐步完善，越來越多的開發者加入到 Taro 的使用、開發中，產生了更多更優秀的使用案例。
特別鳴謝
Taro 的發展離不開廣大開源愛好者的幫助，在此特別鳴謝廣大 Taro 的使用者以及 Taro 主要貢獻者（排名不分先後）。
- aijiacy
- AlexStacker
- AsukaSong
- atzcl
- Boshen
- Bless-L
- beidan
- Chen-jj
- cuitianze
- dogbutcat
- finian
- frontlich
- guotie
- icodytan
- JerrySir
- js-newbee
- jas0ncn
- jinjinjin0731
- kdong007
- kenberkeley
- Lizhooh
- Littly
- lolipop99
- lijinke666
- looch
- ladjzero
- limichange
- leeenx
- luckyadam
- ly525
- Manjiz
- mclockw
- Mr-Prune
- missmimia
- mushan0x0
- Pines-Cheng
- rojer95
- ronffy
- Songkeys
- Simbachen
- smoothdvd
- soulhat
- thewei
- wowlusitong
- xunge0613
- YikaJ
- yuche
- zaaack
- zacksleo
- ZodiacSyndicate
- zuoge85
- zuorichongxian