|
Taro 是由京東 - 凹凸實(shí)驗(yàn)室打造的一套遵循 React 語法規(guī)范的多端統(tǒng)一開發(fā)框架。現(xiàn)如今市面上端的形態(tài)多種多樣，H5、App (React Native)、微信小程序等各種端大行其道，當(dāng)業(yè)務(wù)要求同時在不同的端都要求有所表現(xiàn)的時候，針對不同的端去編寫多套代碼的成本顯然非常高，這時候只編寫一套代碼就能夠適配到多端的能力就顯得極為需要。使用 Taro，我們可以只書寫一套代碼，通過 Taro 的編譯工具，將源代碼分別編譯出可以在不同端（微信小程序、H5、App、快應(yīng)用等）運(yùn)行的代碼。同時 Taro 還提供開箱即用的語法檢測和自動補(bǔ)全等功能，有效地提升了開發(fā)體驗(yàn)和開發(fā)效率。 
既然是一個多端解決方案，Taro 最重要的能力當(dāng)然是寫一套代碼輸出多端皆可運(yùn)行的代碼。目前 Taro 已經(jīng)支持一套代碼同時生成 H5 和微信小程序，App（React Native）端也即將支持，同時諸如快應(yīng)用等端也將于近期得到支持。同時 Taro 也已經(jīng)投入到了生產(chǎn)環(huán)境使用，目前已經(jīng)支撐了一個 3 萬行代碼小程序 TOPLIFE 的開發(fā)，以及部分京東購物小程序和一起有局小程序，未來也將會支撐更多的京東核心業(yè)務(wù)小程序。
和微信自帶的小程序框架不一樣，Taro 積極擁抱社區(qū)現(xiàn)有的現(xiàn)代開發(fā)流程，包括但不限于：對于微信小程序的編譯流程，我們從 Parcel 得到靈感，自研了一套打包機(jī)制將 AST 不斷傳遞，因此代碼分析的速度得到了很大的提高。一臺 2015 年 的 15寸 RMBP 在編譯上百個組件時僅需要大約 15 秒左右。?? 和 React 完全一致的 API 和組件化系統(tǒng)在 Taro 中，你不用像小程序一樣區(qū)分什么是 App 組件，什么是 Page 組件，什么是 Component 組件，Taro 全都是 Component 組件，并且和 React 的生命周期完全一致?？梢哉f，一旦你掌握了 React，那就幾乎掌握了 Taro。而學(xué)習(xí) React 的資源也幾乎是汗牛充棟，完全不用擔(dān)心學(xué)不會。Taro 和 React 一樣，同樣使用聲明式的 JSX 語法。相比起字符串的模板語法，JSX 在處理精細(xì)復(fù)雜需求的時候會更得心應(yīng)手。// 一個典型的 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 的語法和 React 完全一樣，因此編輯器/IDE 能夠?qū)?Taro 的支持和 React 是幾乎一樣的?，F(xiàn)代的編輯器默認(rèn)都對 JSX 進(jìn)行了支持，如果沒有，找一個插件也是非常容易的事情。但畢竟我們做 Taro 就是為了提升開發(fā)效率和開發(fā)體驗(yàn)，而真正使用 Taro 的人就是我們自己或正坐在我們旁邊的同事。因此在此基礎(chǔ)上，我們又對 Taro 開發(fā)體驗(yàn)進(jìn)行了進(jìn)一步加強(qiáng)。我們之前提到過，當(dāng)學(xué)會了 React，其實(shí)也差不多會 Taro 了。其中很重要的一個原因就是我們對 Taro 不支持的語法和特性單獨(dú)寫了 ESLint 規(guī)則：開發(fā)者只管寫代碼，寫到不支持的語法/特性編輯器會報(bào)錯，并給出報(bào)錯信息和一個文檔地址描述。
JSX 的本質(zhì)就是 JavaScript 的語法增強(qiáng)，所以例如沒有 import 組件等語法錯誤在編譯期就能發(fā)現(xiàn)。開發(fā)者也可以使用 TypeScript 或 Flow 來對代碼的可靠性進(jìn)一步增強(qiáng)，或使用 PropsType 在運(yùn)行時進(jìn)一步保障代碼的魯棒性。
Taro 的所有 API（包括微信小程序等端能力接口）都有智能的提醒和自動補(bǔ)全，包括接口的參數(shù)和返回值。
我們的初心就是做一款能夠適配多端的解決方案，結(jié)合業(yè)務(wù)場景、技術(shù)選型和前端歷史發(fā)展進(jìn)程，我們的解決方案必須滿足下述要求：代碼多端復(fù)用，不僅能運(yùn)行在時下最熱門的 H5、微信小程序、APP（React Native），對其他 能會流行的端也留有余地和可能性 完善和強(qiáng)大的組件化機(jī)制，這是開發(fā)復(fù)雜應(yīng)用的基石 與目前團(tuán)隊(duì)技術(shù)棧有機(jī)結(jié)合，有效提高效率 學(xué)習(xí)成本足夠低 背后的生態(tài)強(qiáng)大
同時滿足這幾個需求并不容易，在我們經(jīng)過充分地調(diào)研和思考之后發(fā)現(xiàn)只有 React 體系能夠滿足我們的需求。而對于微信小程序而言，使用 React 完全沒有辦法進(jìn)行開發(fā)——直到我們從 codemod 得到靈感：在一個優(yōu)秀且嚴(yán)格的規(guī)范限制下，從更高抽象的視角（語法樹）來看，每個人寫的代碼都差不多。也就是說，對于微信小程序這樣不開放不開源的端，我們可以先把 React 代碼分析成一顆抽象語法樹，根據(jù)這顆樹生成小程序支持的模板代碼，再做一個小程序運(yùn)行時框架處理事件和生命周期與小程序框架兼容，然后把業(yè)務(wù)代碼跑在運(yùn)行時框架就完成了小程序端的適配。對于 React 已經(jīng)支持的端，例如 Web、React Native 甚至未來的 React VR，我們只要包一層組件庫再做些許樣式支持即可。鑒于時下小程序的熱度和我們團(tuán)隊(duì)本身的業(yè)務(wù)側(cè)重程度，組件庫的 API 是以小程序?yàn)闃?biāo)準(zhǔn)，其他端的組件庫的 API 都會和小程序端的組件保持一致。
在我們前面社區(qū)已經(jīng)有多個優(yōu)秀的框架以小程序?yàn)楹诵膶Χ喽诉m配進(jìn)行了探索，我們將各個開發(fā)框架的主要特點(diǎn)和特性進(jìn)行了對比并制成圖表。大家可以結(jié)合團(tuán)隊(duì)技術(shù)棧、技術(shù)需求以及框架特點(diǎn)、特性進(jìn)行選型和權(quán)衡。
經(jīng)過數(shù)個月的開發(fā)，Taro 從第一次 commit 到發(fā)展成包括 16 個包，十多位同學(xué)共同參與的大型項(xiàng)目。與此同時，Taro 也在生產(chǎn)環(huán)境支撐了數(shù)個復(fù)雜業(yè)務(wù)線上項(xiàng)目的開發(fā)，將來也會支撐更多的京東業(yè)務(wù)。Taro 的技術(shù)方案和實(shí)現(xiàn)也根植于社區(qū)，我們也希望為技術(shù)社區(qū)的發(fā)展壯大貢獻(xiàn)一份自己的力量。秉持著京東凹凸實(shí)驗(yàn)室長久以來開源、開放、共享的優(yōu)良傳統(tǒng)，我們今天將 Taro 全部代碼開源，為廣大開發(fā)者快速開發(fā)多端項(xiàng)目提供一整套技術(shù)解決方案。未來，我們也將繼續(xù)拓展 Taro 現(xiàn)有能力，支持更多端能力，繼續(xù)完善開發(fā)者體驗(yàn)，提高開發(fā)者效率，幫助更多開發(fā)者；同時也從社區(qū)中汲取養(yǎng)分，讓 Taro 變得更加強(qiáng)大。
|
