Flutter 3.10 发布,Element 和 fragment shaders 支持 Web 路线已定,可用性提升

2023-05-1511:58:04APP与小程序开发Comments1,205 views字数 3343阅读模式
Flutter 3.10 发布,Element 和 fragment shaders 支持 Web 路线已定,可用性提升

随着 Flutter 3.10 发布,Flutter Web 也引来了它最具有「里程碑」意义的更新,这里的「里程碑」不是说这次 Flutter Web 有多么重大的更新,而是 Flutter 官方对于 Web 终于有了明确的定位和方向文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/39555.html

提升

首先我们简单聊提升,这不是本篇的重点,只是顺带。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/39555.html

本次提升主要在于两个大点:Element 嵌入支持和 fragment shaders 支持 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/39555.html

首先是 Element 嵌入,Flutter 3.10 开始,现在可以将 Flutter Web嵌入到网页的任何 HTML 元素中,并带有 flutter.js 引擎和 hostElement 初始化参数文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/39555.html

简单来说就是不需要 iframe 了,如下代码所示,只需要通过 initializeEngine 的 hostElement 参数就可以指定嵌入的元素,灵活度支持得到了提高文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/39555.html

<html>
 <head>
   <!-- ... -->
   <script src="flutter.js" defer></script>
 </head>
 <body><!-- Ensure your flutter target is present on the page... -->
   <div id="flutter_host">Loading...</div><script>
     window.addEventListener("load", function (ev) {
       _flutter.loader.loadEntrypoint({
         onEntrypointLoaded: async function(engineInitializer) {
           let appRunner = await engineInitializer.initializeEngine({
             // Pass a reference to "div#flutter_host" into the Flutter engine.
             hostElement: document.querySelector("#flutter_host")
          });
           await appRunner.runApp();
        }
      });
    });
   </script>
 </body>
</html>

PS :如果你的项目是在 Flutter 2.10 或更早版本中创建的,要先从目录中删除 /web 文件 ,然后通过 flutter create . --platforms=web 重新创建模版。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/39555.html

fragment shaders 部分一般情况下大家可能并不会用到,shaders 就是以 .frag 扩展名出现的 GLSL 文件,在 Flutter 里是在 pubspec.yaml 文件下的 shaders 中声明,现在它支持 Web 了:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/39555.html

flutter:
shaders:
  - shaders/myshader.frag

一般运行时会把 frag 文件加载到 FragmentProgram 对象中,通过 program 可以获取到对应的 shader,然后通过 Paint.shader 进行使用绘制, 当然 Flutter 里 shaders 文件是存在限制的,比如不支持 UBO 和 SSBO 等。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/39555.html

当然,这里不是讲解 shaders ,而是宣告一下,Flutter Web 支持 shaders 了文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/39555.html

未来

其实未来才是本篇的重点,我们知道 Flutter 在 Web 领域的支持上一直在「妥协」,Flutter Web 在整个 Flutter 体系下一直处于比较特殊的位置,因为它一直存在两种渲染方式:html 和 canvaskit。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/39555.html

简单说 html 就是转化为 JS + Html Element 渲染,而 canvaskit 是采用 Skia + WebAssembly 的方式,而 html 的模式让 Web 在 Flutter 中显得「格格不入」,路径依赖和维护成本也一直是 Flutter Web 的头痛问题文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/39555.html

Flutter 3.10 发布,Element 和 fragment shaders 支持 Web 路线已定,可用性提升

面对这个困境,官方在年初的 Flutter Forword 大会上提出重新规划 Flutter Web 的未来,而随着 Flutter 3.10 的发布,官方终于对于 Web 的未来有了明确的定位:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/39555.html

“Flutter 是第一个围绕 CanvasKit 和 WebAssembly 等新兴 Web 技术进行架构设计的框架。”文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/39555.html

Flutter 团队表示,Flutter Web 的定位不是设计为通用 Web 的框架,类似的 Web 框架现在有很多,比如 Angular 和 React 等在这个领域表现就很出色,而 Flutter 应该是围绕 CanvasKit 和 WebAssembly 等新技术进行架构设计的框架。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/39555.html

所以 Flutter Web 未来的路线更多会是 CanvasKit ,也就是 WebAssembly + Skia ,同时在这个领域 Dart 也在持续深耕:从 Dart 3 开始,对于 Web 的支持将逐步演进为 WebAssembly 的 Dart native 的定位文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/39555.html

Flutter 3.10 发布,Element 和 fragment shaders 支持 Web 路线已定,可用性提升

什么是 WebAssembly 的 dart native ?一直以来 Flutter 对于 WebAssembly 的支持都是:使用 Wasm 来处理CanvasKit 的 runtime,而 Dart 代码会被编译为 JS,而这对于 Dart 团队来时,其实是一个「妥协」的过渡期。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/39555.html

而随着官方与 WebAssembly 生态系统中的多个团队的深入合作,Dart 已经开始支持直接编译为原生的 wasm 代码,一个叫 WasmGC 的垃圾收集实现被引入标准,该扩展实现目前在基于 Chromium 的浏览器和 Firefox 浏览器中在趋向稳定。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/39555.html

目前在基准测试中,执行速度提高了 3 倍文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/39555.html

要将 Dart 和 Flutter 编译成 Wasm,你需要一个支持 WasmGC 的浏览器,目前 Chromium V8 和 Firefox 团队的浏览器都在进行支持,比如 Chromium 下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/39555.html

通过结构和数组类型为 WebAssembly 增加了对高级语言的有效支持,以 Wasm 为 target 的语言编译器能够与主机 VM 中的垃圾收集器集成。在 Chrome 中启用该功能意味着启用类型化函数引用,它会将函数引用存储在上述结构和数组中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/39555.html

Flutter 3.10 发布,Element 和 fragment shaders 支持 Web 路线已定,可用性提升

现在在 Flutter master 分支下就可以提前尝试 wasm 的支持,运行 flutter build web --help 如果出现下图所示场, 说明支持 wasm 编译。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/39555.html

Flutter 3.10 发布,Element 和 fragment shaders 支持 Web 路线已定,可用性提升

之后执行 flutter build web --wasm 就可以编译一个带有 native dart wasm 的 web 包,命令执行后,会将产物输出到 build/web_wasm 目录下。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/39555.html

之后你可以使用 pub 上的 dhttpd 包在 build/web_wasm目录下执行本地服务,然后在浏览器预览效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/39555.html

> cd build/web_wasm
> dhttpd
Server started on port 8080

目前需要版本 112 或更高版本的 Chromium 才能支持,同时需要启动对应的 Chrome 标识位:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/39555.html

  • enable-experimental-webassembly-stack-switching
  • enable-webassembly-garbage-collection
Flutter 3.10 发布,Element 和 fragment shaders 支持 Web 路线已定,可用性提升

当然,目前阶段还存在一些限制,例如:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/39555.html

Dart Wasm 编译器利用了 JavaScript-Promise Integration (JSPI) 特性,Firefox 不支持 JSPI 提议,所以一旦 Dart 从 JSPI 迁移出来,Firefox 应启用适当的标志位才能运行。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/39555.html

另外还需要 JS-interop 支持,因为为了支持 Wasm,Dart 改变了它针对浏览器和 JavaScript 的 API 支持方式, 这种转变是为了防止把 dart:html 或 package:js 编译为 Wasm 的 Dart 代码,大多数特定于平台的包如 url_launcher 会使用这些库。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/39555.html

Flutter 3.10 发布,Element 和 fragment shaders 支持 Web 路线已定,可用性提升

最后,目前 DevTools 还不支持 flutter run 去运行和调试 Wasm文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/39555.html

最后

很高兴能看到 Flutter 团队最终去定了 Web 的未来路线,这让 Web 的未来更加明朗,当然,正如前面所说的,Flutter 是第一个围绕 CanvasKit 和 WebAssembly 等新兴 Web 技术进行架构设计的框架文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/39555.html

所以 Flutter Web不是为了设计为通用 Web 的框架去 Angular 和 React 等竞争,它是让你在使用 Flutter 的时候,可以将能力很好地释放到 Web 领域,而 CanvasKit 带来的一致性更符合 Flutter Web 的定位,当然,解决加载时长问题会是任重道远的需求。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/39555.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/39555.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/xcx/39555.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定