Taro Next 发布预览版：同时支持 React / Vue / Nerv

拼搏现实的明天。 2023-07-05 10:22 41阅读 0赞

自 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/路由规范可以使用同样的思路和模型让不同框架的代码，运行在不同的端上：

![format_png][] taro next

## 不限制语言、语法— ##

由于 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` 的支持。这对于开发体验是一个巨大的提升：

![format_png 1][] 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 团队拥抱变化的方式。

## 参考资料— ##

\[1\] [小程序跨框架开发的探索与实践: https://www.infoq.cn/article/TMqBzVFTSiQTUbgxydPm][https_www.infoq.cn_article_TMqBzVFTSiQTUbgxydPm]

\[2\] Taro Next 旧版本迁移指南：https://taro-docs.jd.com/taro/next/docs/migration.html

\[3\] Prerender: https://taro-docs.jd.com/taro/next/docs/prerender.html

\[4\] 性能测试：https://github.com/NervJS/taro-benchmark/tree/next

\[5\] 与其它新型小程序的对比：https://taro-docs.jd.com/taro/next/docs/difference-to-others.html

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9pYkN4d1JxTk1qUTFIVUNvbkhFcXl2WmEyNTJnYm15dHY1UG5wZkZJNEhUR04xWFZzMDNhbzdqUXJpYVFaaWFqdTZFRFdVbUdjRVJzY0pBSUxEV0N2cENSdy82NDA?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9pYkN4d1JxTk1qUTFIVUNvbkhFcXl2WmEyNTJnYm15dHZvbTZCOW9HamxPTE9INkpBbXh0bG5pYkpsNUIzWnlpYkl4aWJkTGljdlNCejJGYVlpYUlZSnVEeTFQdy82NDA?x-oss-process=image/format,png
[https_www.infoq.cn_article_TMqBzVFTSiQTUbgxydPm]: http://mp.weixin.qq.com/s?__biz=MzU3NDkzMTI3MA%3D%3D&chksm=fd2ba953ca5c20459aa414b8856b70054a37d77bff8a8fe8400682a7026cc412fcc2622aca88&idx=1&mid=2247483770&scene=21&sn=ba2cdea5256e1c4e7bb513aa4c837834#wechat_redirect