Taro 3 正式版发布:开放式跨端跨框架解决方案

作者:凹凸曼 - yuche

从 Taro 第一个版本发布到现在,Taro 已经接受了来自于开源社区两年多的考验。今天我们很高兴地在党的生日发布 Taro 3(Taro Next)正式版,希望 Taro 未来的更多两年能像一名共产主义战士一样经受住更多的考验。以下是 Taro 3 的一些新增特性:

跨框架:React、Nerv、Vue 2、Vue 3、jQuery

在旧版本的 Taro,我们以微信小程序的开发规范为基准,使用 React/JSX 的方式来进行开发。而在 Taro 3,我们把这一思路量化为一个编程模型:

设微信小程序生命周期为一个 interface,不同的框架实例的生命周期虽然不尽相同,但我们可以根据框架生命周期分别新建一个 classimplements 小程序生命周期的 interface。相应地,小程序的组件/API/路由规范可以使用同样的思路和模型让不同框架的代码,运行在不同的端上:

taro

在 Taro 3 中我们内置了 React、Nerv、Vue 2、Vue 3 四种框架的支持,开发者可以通过 taro init 命令创建对应的模板,并编写与框架本身生命周期、调用方法合乎一致的代码(idiomatic code),在语法上也没有任何的限制。

在四类框架之外,Taro 3 还提供 jQuery-like API 的支持,作为现代开发框架的补充和实现跨框架组件的方案。

跨端:H5、微信、支付宝、百度、字节跳动...小程序

和旧版本的 Taro 一样,Taro 3 支持编译到微信、京东、支付宝、百度、字节跳动、QQ 等主流小程序平台。

和小程序一样,Taro 3 的 H5 端相较于之前版本的 Taro 是一次彻底的重写:基础组件现在全部使用 Web Components 构建,路由系统也完全与前端框架解耦,因此在 H5 端 Taro 也实现了跨框架。不管开发者使用的是 React、Vue 还是 Nerv,都可以同时运行在各种小程序和 H5 上。

开放式插件系统

Taro 3 在编译时引入了基于 Tapable 的插件系统,开发者可以通过编写插件的方式为 Taro 拓展更多功能或者为自身业务定制个性化功能。在运行时我们则从 React Reconciler 中得到启发,在 Taro 运行时也实现了一套修改运行时逻辑的 API。

也就是说,开发者可以在不修改甚至不了解 Taro 源码和实现的情况下通过 Taro 拓展更多端,拓展更多的框架。在下个 Minor 版本(v3.1.0)Taro 就会完成编译时/运行时与端/框架的解耦,届时开发者只要写一个插件就能拓展新的端或框架。未来 Taro 添加新的端或框架也会通过这样的方式进行。

开源治理与项目治理

为了与开发者更高效地交流,Taro 从 Vue.js 和 Ant Design 得到启发,引入了 Issue Helper 工具。为了让 Taro 在重大特性更新和更改能稳步推进,我们又从 Rust、React 中学习,引入了 RFC 流程机制。为了让版本迭代更透明、更规范,Taro 在今后版本发布也会遵守 Milestone 机制。

文档是开发者最好的朋友。在 Taro 3 我们对文档也进行了改版和重新梳理,并推出了新的 渐进式文档,渐进式文档按照开发项目的顺序介绍 Taro 的基础概念和优化技巧,适合喜欢边学边做或对小程序开发没有任何了解的开发者。

代码质量和稳定性对开源项目非常重要。Taro 也在严格贯彻 Code Review 机制,所有人的代码都要被审核,没有人例外。为了保证我们能更大胆地迭代新特性,在整个 Taro 3 开发期间我们总共添加了三万行测试代码。

微信小程序转 React/Vue

早在 Taro 1.2 发布 时,我们就提供微信小程序转 Taro 的功能,转换后的微信小程序应用会变成一个多端应用。现在这个功能也完全兼容 Taro Next 的新架构,并且转换后的代码提供 React 和 Vue 两种选项。和以前一样,只需要在微信小程序项目根目录执行命令 taro convert

$ taro convert

选择想要转换后的框架即可:

convert

渲染 HTML 字符串

在小程序中渲染 HTML 字符串通常会使用 wxparse 这样的第三方库,但 wxparse 的 API 复杂,拓展性弱,内部实现不准确,最重要的是现在已经停止了维护。比起 wxparse,Taro 3 的 HTML 字符串渲染提供以下的特性:

  • API 与 Web 保持一致,可以直接通过 React 的 dangerouslySetInnerHTML 或 Vue 的 v-html 调用。
  • 可以通过 CSS 直接控制标签样式
  • 给已经渲染的 HTML 标签绑定事件
  • 在 HTML 解析和渲染都提供了钩子函数满足个性化渲染需求

你可以访问文档渲染 HTML了解更多信息。

CSS-In-JS

在 React 社区有一个著名的 CSS-in-JS 解决方案: styled-components。但遗憾的是,styled-components 使用 <style> 标签来动态地控制样式,在小程序端没有类似的方案。但在 Taro 中我们可以通过 linaria 实现同样的功能,linaria 主要提供以下特性:

  • 近似于 styled-components 的 API
  • 完整的 TypeScript 支持
  • 零运行时

其中零运行时对于打包体积有要求的小程序尤为重要。

你可以访问文档使用 CSS-in-JS了解更多信息。

虚拟列表(VirtualList)

当我们渲染数据量非常大的列表时,框架会根据数据尝试全量渲染视图,这就可能会产生性能问题导致视图无法响应操作一段时间。为了解决这个问题,我们可以采用另一种方式:比起全量渲染数据生成的视图,可以只渲染 当前可视区域(visable viewport) 的视图,非可视区域的视图在用户滚动到可视区域再渲染:

diff.jpg
正常渲染和虚拟列表的区别
vue.gif
在开发者工具的直观效果

类似的技术在 Android 开发被称之为 RecyclerView,在 React Native 叫做 VirtualizedList,我们统一命名为虚拟列表(Virtual List),这个组件现在内置在 Taro 中,在 React/Vue 或各种小程序及 H5 皆可使用:

import VirtualList from '@tarojs/components/virtual-list'

你可以访问文档长列表渲染了解更多信息。

预渲染

初始化性能是 Taro 3 的性能优化的痛点。原生小程序或编译型框架的初始数据可以直接用于渲染,但 Taro 3 在初始化时会把框架的渲染数据转化为小程序的渲染数据,多了一次 setData 开销。

为了解决这个问题,Taro 从服务端渲染受到启发,在 Taro CLI 将页面初始化的状态直接渲染为无状态的 wxml,在框架和业务逻辑运行之前执行渲染流程。我们将这一技术称之为预渲染(Prerender),经过 Prerender 的页面初始渲染速度通常会和原生小程序一致甚至更快。

你可以访问文档预渲染了解更多信息。

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

作为一个编译型框架,旧版本的 Taro 会进行大量的 AST 操作,这类操作显著地拖慢了 Taro CLI 的编译速度。而在 Taro 3 中不会操作任何开发者代码的 AST,因此编译速度得到了大幅的提高。

正因为 AST 操作的取消,Taro 也轻松地实现了 source-map 的支持。这对于开发体验是一个巨大的提升:

source-map

没有枪,没有炮,没有轮子自己造

把时间节点再跳转回两年前,市面上并没有一个支持使用 React 开发小程序的框架,也没有什么思路或探索能提供指引,我们面对的情况和旧中国「一穷二白」的情况差不多。今天,Taro 已经是中国活跃度 Top 5 的开源项目。

办法总是比困难多,即便是在小程序这样相对受限的开发环境。今后,Taro 依然会从开发者的角度出发,不断完善开发体验,提升开发效率,走中国特色发展道路,遇山开山,遇水搭桥,努力成为小程序开发,甚至多端开发的基础技术设施——Taro 3 就是实现这一愿景最坚实的一步,正如一位智者所言:

上车 Taro 最好的时机是从前,其次是现在。


欢迎关注凹凸实验室博客:aotu.io

或者关注凹凸实验室公众号(AOTULabs),不定时推送文章:

欢迎关注凹凸实验室公众号

热门文章

编程学习 ·

3.1.1 Jsoup环境搭建

Jsoup是一款基于Java语言开发的开源项目,主要用于请求URL获取网页内容、解析HTML和XML文档。使用Jsoup可以非常轻松地构建一些轻量级的网络爬虫。 在Idea或者Eclipse中创建Maven工程,并在Maven工程的pom.xml文件中添加Jsoup对应的dependency,本专栏采用的版本是1.11.3。 <…
编程学习 ·

RFID标签与我们的生活息息相关

在我们的生活中,很多领域都在使用RFID标签,下面,小编就来给大家介绍一下。1、ETC智能收费把RFID标签安装在车子汽车挡风玻璃上,在高速收费站ETC行车道上的频射无线天线中间的专用型短程通信,利用软件连接网络技术性与金融机构开展后台管理清算解决,进而做到车子根据路桥区…
编程学习 ·

无线传输技术有哪些?

什么是ZigBee? ZigBee,也称紫蜂,是一种低速短距离传输的无线网上协议,底层是采用IEEE802.15.4标准规范的媒体访问层与物理层。主要特色有低速、低耗电、低成本、支持大量网上节点、支持多种网上拓扑、低复杂度、快速、可靠、安全。 三大特征、八大优势 特征一 ZigBee能源消…
编程学习 ·

NLP 任务中有哪些巧妙的 idea?

文章目录1. 分布式假设(Distributional Hypothesis)2. 词袋模型(Bag-of-Words)3. 潜在语义分析(Latent Semantic Analysis)4. 概率主题模型(Probabilistic Topic Models )5. 基于BMES的中文分词或基于BIO的NER/Chunking6. 基于PageRank的TextRank转载来源:https://www…
编程学习 ·

什么是语音直播源码,语音下直播系统可以做什么?

语音直播源码是指用户能够通过语音进行聊天的软件功能。语音直播源码的形式多样化的,现在市场上也出现了很多很多语音形式的源码出现,比如,可以多人语音聊天,语音视频通话,语音直播,语音教学还有很多的语音游戏,像最近很多的和平精英,王者荣耀,狼人杀之类的,都是在游…
编程学习 ·

python pytest selenium 自动化测试框架搭建

python pytest selenium 自动化测试框架搭建公司一直有这个自动化测试需求,前期利用c++或者python进行了一些自动化脚本的编写。这几天没有版本更迭,基于前期的工作,把自动化测试整理了一部分功能模块。现在的状态基本达到预期:即搭建了一个AutoTest框架,基于此实现了logi…
编程学习 ·

广东工业大学黎权之的百度云使用经验分享

广东工业大学黎权之的百度云使用经验分享 我将在这篇文章分享自己用了百度云这么多年来的经验。 一、百度云的分享链接食用方法 1.将分享链接完整的分享给别人 这种最直接,但如果是敏感资源的话链接容易失效 2.将分享链接/s/后的内容和提取码一同分享给别人 同样如果是敏感资源…
编程学习 ·

深度学习入门教程-1.1 神经网络是什么

到底什么是人工神经网络?前面提到,人工神经网络是从大脑的理解中汲取灵感而形成的。在我们的大脑中,有数十亿个神经元,它们连接成了一个神经网络。人工神经网络,结构也有些类似。许多个神经元(下图中的⚪)相连,构成了一个神经网络。人类大脑神经元细胞接收来自外部多个…
编程学习 ·

文件-复制-删除-移动

import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.FileWriter; import java.io.InputStream; import java.io.PrintWriter; public class CopyFile { public CopyFile() { } /** * 新建目录 * @param folderPat…
编程学习 ·

手动连接线上presto

命令如下: java -jar presto-cli-0.237-executable.jar --server https://presto.ludp.lenovo.com:30070 --catalog hive --truststore-path /opt/jdk1.8.0_25/jre/lib/security/keystore.jks --truststore-password changeit在之前可以先测试一下网络 ping presto.ludp.lenov…
编程学习 ·

sed详解

1. Sed简介sed 是一种在线编辑器,它一次处理一行内容。处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pattern space),接着用sed命令处理缓冲区中的内容,处理完成后,把缓冲区的内容送往屏幕。接着处理下一行,这样不断重复,直到文件末尾。文件内容并没有…
编程学习 ·

为什么使用Google搜索的时候会连接不到服务器?

为什么使用Google搜索的时候会连接不到服务器?DNS缓存投毒说明方法PS DNS缓存投毒 说明 在未使用付业成设计的DNSCrypt(一种网络协议,用来抵御针对DNS的DNS缓存投毒攻击)之前,使用代理访问google一直打不开,原因就在于一般系统默认会从ISP提供的域名查询服务器查询海外服…
编程学习 ·

String类、Arrays类

String类 概念:之前都已经接触到了String的对象,是一个字符串。String类就代表的是字符串 特点 1.双引号引起来的"abc",这种也是String对象,这种对象不是保存到堆中而是方法区的常量池中 2.字符串对象是不可变的对象,只要你观察到字符串的内容变化了,那么肯定是…
编程学习 ·

金秋十月,再聚蓉城!一展一会,涌动环保新商机!

如果不是……今天会是“第二届中国环博会成都展”与“2020中国环境产业高峰论坛”开幕的日子。现在,两大盛会确定改到10月13-15日,地点仍为中国成都西部国际博览城。在等待的日子里,我们一起来回顾一下去年展会的盛况,再跟朋友们说说今年的最新动态。 品牌环保展落户蓉城 强…
编程学习 ·

互联网行业VS传统行业,哪碗饭更香?

这些年,网络发展速度越来越快,通过网络赚钱的项目也越来越多。但是,如果你去对这些项目进行分类的话,其实这些项目大致也就分为几种,赚钱的方式也大致相同。这个时代给我们提供了很多网上赚钱的机会。老实说,现在赚钱不一定非要去公司或工厂工作,何况在公司或工厂工作的…