Taro Next 發佈預覽版：同時支持 React / Vue / Nerv

自 Taro 2.0 起，咱們將會啓動對整個 Taro 系統架構的革新，此次革新咱們將其稱之爲 Taro Next。Taro Next 革新完成以後，Taro 自己的拓展性、穩定性、可維護性都會大幅提升，相應地，使用 Taro 的開發者也會得到更好的開發體驗，下降更多開發成本和學習成本。

咱們目前已經完成了編譯系統和小程序端的重構，經過 npm i -g @tarojs/cli@next 安裝 Taro CLI 預覽（alpha）版以後，使用 taro init 建立新項目便可體驗 Taro Next 的新特性：

同時支持 React/Vue/Nerv 三種框架

在舊版本的 Taro，咱們以微信小程序的開發規範爲基準，使用 React/JSX 的方式來進行開發。而在 Taro Next，咱們把這一思路量化爲一個編程模型：

設微信小程序生命週期爲一個 interface，不一樣的框架實例的生命週期雖然不盡相同，但咱們能夠根據框架生命週期分別新建一個 class 去 implements 小程序生命週期的 interface。相應地，小程序的組件/API/路由規範可使用一樣的思路和模型讓不一樣框架的代碼，運行在不一樣的端上：

不限制語言、語法

因爲 Taro Next 的架構出現了變化，表面上來看 Taro 從一個編譯型框架變成了一個運行時框架。但究其內核是總體的設計思路出現了變化：從前是「模擬（mock）」，如今是「實現（implements）」。在 Taro Next 咱們實現了 React 在小程序中的完整支持，所以這類曾經的 Taro 沒法運行的代碼在 Taro Next 中徹底沒有壓力：

import { View } from '@tarojs/components'
*function* Page (props) {
    *const* view = React.createElement(View, null, props.text)
    return [view, React.Children.only(this.prosps.children)]
}

在舊版本的 Taro 中咱們對 JavaScript 和 TypeScript 進行了 First Class 的支持，Taro Next 咱們更進一步，原理上最終能夠編譯到 JavaScript 的語言均可以用來構建 Taro 項目，如下是一個在 Vue 中使用 CoffeeScript 的例子：

/// config.js/
{
    webpackChain (chain) {
        chain.merge({
            module: {
                rule: {
                    test: /\.coffee$/,
                    use: [ 'coffee-loader' ]
                }
            }
        })
    }
}

<template>
    <view>{{ title }}</view>
    <view>{{ text }}</view>
    <input v-model='text' />
</template>

<script lang="coffee">
export default
    props:
        title:
        type: String
        required: true
    data: ->
        text: 'text'
</script>

更快的運行速度

運行時性能主要分爲兩個部分，一是更新性能，二是初始化性能。

對於更新性能而言，舊版本的 Taro 會把開發者 setState 的數據進行一次全量的 diff，最終返回給小程序是按路徑更新的 data。而在 Taro Next 中 diff 的工做交給了開發者使用的框架（React/Nerv/Vue），而框架 diff 以後的數據也會經過 Taro 按路徑去最小化更新。所以開發者能夠根據使用框架的特性進行更多更細微的性能優化。

初始化性能則是 Taro Next 的痛點。原生小程序或編譯型框架的初始數據能夠直接用於渲染，但 Taro Next 在初始化時會把框架的渲染數據轉化爲小程序的渲染數據，多了一次 setData 開銷。

爲了解決這個問題，Taro 從服務端渲染受到啓發，在 Taro CLI 將頁面初始化的狀態直接渲染爲無狀態的 wxml，在框架和業務邏輯運行以前執行渲染流程。咱們將這一技術稱之爲 預渲染（Prerender），通過 Prerender 的頁面初始渲染速度一般會和原生小程序一致甚至更快。

更快的構建速度和 source-map 支持

做爲一個編譯型框架，舊版本的 Taro 會進行大量的 AST 操做，這類操做顯著地拖慢了 Taro CLI 的編譯速度。而在 Taro Next 中不會操做任何開發者代碼的 AST，所以編譯速度獲得了大幅的提升。

正由於 AST 操做的取消，Taro Next 也輕鬆地實現了 source-map 的支持。這對於開發體驗是一個巨大的提高：

不忘初心

在作到以上各項特性的同時，咱們也沒有丟掉原來就已經支持的特性：

• 支持微信小程序、百度智能小程序、支付寶小程序、QQ 小程序、字節跳動小程序
• 使用原生小程序第三方組件/插件
• 多端條件編譯
• 跨端 API 和樣式處理

這些特性基本涉及到了小程序開發的方方面面，雖然是預覽版，但 Taro Next 已經具有了開發生產級小程序的準備，在 Taro 團隊內部和兄弟團隊也有多款小程序正在使用 Taro Next 進行開發。而在 Taro Next 的 H5 端和移動端，咱們還在進行緊張的開發。當 Taro Next 測試（beta）版發佈時，使用 Taro Next 構建的一套代碼，就能夠同時運行在各類小程序、快應用、H5 和移動端當中。在將來，咱們還會把 Taro Next 的能力開放出去，讓開發者只要寫少許的接入代碼，就可使用本身喜歡的任意框架（Angular, Flutter, svelte等）開發小程序~~~~或多端應用。

牢記使命

正如咱們在 Taro 2.0 發佈時所言：

節物風光不相待，桑田碧海須臾改。

20 年代呼嘯而來，下一個 10 年，不少框架都會死去，不少技術也會煥然而生，沒有什麼是不變的，惟一不變的只有變化，咱們能作的也只能是擁抱變化。

前端技術一直在高速發展，流行的技術和框架每一年都各不相同。但咱們始終沒有忘記開發 Taro 的初心和使命：下降開發成本，提升開發體驗和開發效率。

「不忘初心，牢記使命。」

這就是 Taro 團隊擁抱變化的方式。

---

歡迎關注凹凸實驗室博客：aotu.io

或者關注凹凸實驗室公衆號（AOTULabs），不定時推送文章：

參考資料

• 小程序跨框架開發的探索與實踐
• Taro Next 舊版本遷移指南
• Prerender
• 性能測試
• 與其它新型小程序的對比)