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