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
,不同的框架实例的生命周期虽然不尽相同,但我们可以根据框架生命周期分别新建一个 class
去 implements
小程序生命周期的 interface
。相应地,小程序的组件/API/路由规范可以使用同样的思路和模型让不同框架的代码,运行在不同的端上:
在 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
选择想要转换后的框架即可:
渲染 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) 的视图,非可视区域的视图在用户滚动到可视区域再渲染:
正常渲染和虚拟列表的区别 |
在开发者工具的直观效果 |
类似的技术在 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
的支持。这对于开发体验是一个巨大的提升:
没有枪,没有炮,没有轮子自己造
把时间节点再跳转回两年前,市面上并没有一个支持使用 React 开发小程序的框架,也没有什么思路或探索能提供指引,我们面对的情况和旧中国「一穷二白」的情况差不多。今天,Taro 已经是中国活跃度 Top 5 的开源项目。
办法总是比困难多,即便是在小程序这样相对受限的开发环境。今后,Taro 依然会从开发者的角度出发,不断完善开发体验,提升开发效率,走中国特色发展道路,遇山开山,遇水搭桥,努力成为小程序开发,甚至多端开发的基础技术设施——Taro 3 就是实现这一愿景最坚实的一步,正如一位智者所言:
上车 Taro 最好的时机是从前,其次是现在。
欢迎关注凹凸实验室博客:aotu.io
或者关注凹凸实验室公众号(AOTULabs),不定时推送文章:
Taro 3 正式版发布:开放式跨端跨框架解决方案的更多相关文章
- Java 开源博客——B3log Solo 0.6.1 正式版发布了!
Java 开源博客 —— B3LOG Solo 0.6.1 正式版发布了!欢迎大家下载. 该版本主要是改善细节体验,并加入了一款 Metro 风格的皮肤. 特性 基于标签的文章分类 Ping Goog ...
- 最强 IDE Visual Studio 2017 正式版发布
Visual Studio 2017 正式版发布,该版本不仅添加了实时单元测试.实时架构依赖关系验证等新特性,还对许多实用功能进行了改进,如代码导航.IntelliSense.重构.代码修复和调试等等 ...
- 终于等到你,最强 IDE Visual Studio 2017 正式版发布
Visual Studio 2017 正式版发布,该版本不仅添加了实时单元测试.实时架构依赖关系验证等新特性,还对许多实用功能进行了改进,如代码导航.IntelliSense.重构.代码修复和调试等等 ...
- Java 开源博客——B3log Solo 0.6.7 正式版发布了!
Java 开源博客 -- B3log Solo 0.6.7 正式版发布了!欢迎大家下载. 另外,欢迎观摩 B3log 团队的新项目:Wide,也非常欢迎大家参与进来 :-) 特性 基于标签的文章分类 ...
- Java 开源博客——B3log Solo 0.6.6 正式版发布了!
Java 开源博客 -- B3log Solo 0.6.6 正式版发布了!欢迎大家下载. 该版本引入了数据库连接池:Druid. 另外,欢迎观摩 B3log 团队的新项目:Noty,也非常欢迎大家参与 ...
- Java 开源博客——B3log Solo 0.6.5 正式版发布了!
Java 开源博客 -- B3log Solo 0.6.5 正式版发布了!欢迎大家下载. 该版本主要是改善细节体验,也是 B3log Solo 的最后一个大版本. 这个版本发布后,B3log Solo ...
- Python 3.8.0 正式版发布,新特性初体验 全面介绍
Python 3.8.0 正式版发布,新特性初体验 北京时间 10 月 15 日,Python 官方发布了 3.8.0 正式版,该版本较 3.7 版本再次带来了多个非常实用的新特性. 赋值表达式 PE ...
- Angular2正式版发布,Wijmo抢先支持
Angular2正式版发布 9月15日,Angular 2 的最终版正式发布了.作为 Angular 1 的全平台继任者 -- Angular 2 的最终版,意味着什么? 意味着稳定性已经得到了大范围 ...
- Redis 3.0正式版发布,正式支持Redis集群
Redis是一个开源.基于C语言.基于内存亦可持久化的高性能NoSQL数据库,同时,它还提供了多种语言的API.近日,Redis 3.0在经过6个RC版本后,其正式版终于发布了.Redis 3.0的最 ...
随机推荐
- Qcom rampdump解析工具使用
使用如下命令获取qcom工具: ljj@ljj-ThinkCentre-M83:~/git/qcom_tools/ramdump$ git clone git://codeaurora.org/qui ...
- 【Win10】BeyondCompare时提示"许可证密钥已被撤销"的解决办法
删除...AppData\Roaming\Scooter Software\Beyond Compare 3目录下所有文件. 应该是对应了bcompare的配置文件以及记录文件.删除了之后,就等于新安 ...
- Java实现 蓝桥杯VIP 算法提高 师座操作系统
算法提高 师座操作系统 时间限制:1.0s 内存限制:256.0MB 问题描述 师座这天在程序设计课上学了指针和结构体以后,觉得自己可以轻松的写出操作系统,为了打败大微软帝国,他给这个系统起了个响亮的 ...
- Java实现 蓝桥杯 素因子去重
素因子去重 问题描述 给定一个正整数n,求一个正整数p,满足p仅包含n的所有素因子,且每个素因子的次数不大于1 输入格式 一个整数,表示n 输出格式 输出一行,包含一个整数p. 样例输入 1000 样 ...
- java中Runtime类详细介绍
Runtime类描述了虚拟机一些信息.该类采用了单例设计模式,可以通过静态方法 getRuntime()获取Runtime类实例.下面演示了获取虚拟机的内存信息: package Main; publ ...
- CentOS7搭建Pacemaker高可用集群(1)
Pacemaker是Red Hat High Availability Add-on的一部分.在RHEL上进行试用的最简单方法是从Scientific Linux 或CentOS存储库中进行安装 环境 ...
- python自学Day07(自学书籍python编程从入门到实践)
第8章 函数 函数是带名字的代码块,用于完成具体的工作. 学习定义函数,向函数传递信息. 学习如何编写主要任务是显示信息的函数,还有用于处理数据并返回一个或一组值得函数. 学习如何将函数存储在被称为模 ...
- thinkphp5升级thinkphp6完整步骤
在php.ini文件中 打开 php_openssl扩展,去掉前面的;extension=php_openssl.dll 在phpstudy的WWW目录打开cmd,输入composer creat ...
- [C#.NET 拾遗补漏]03:你可能不知道的几种对象初始化方式
阅读本文大概需要 1.2 分钟. 随着 C# 的升级,C# 在语法上对对象的初始化做了不少简化,来看看有没有你不知道的. 数组的初始化 在上一篇罗列数组的小知识的时候,其中也提到了数组的初始化,这时直 ...
- AndroidCamera开发学习笔记01
概述 Android框架支持设备的相机拍照和录像功能 可以直接调用系统的Camera应用来拍照或录像 也可以利用Adroid系统提供的API开发Camera应用来实现拍照和录像的功能 注意事项 需要硬 ...