将变为全平台

时间: 2019-05-14阅读: 1147标签: Flutter

时间: 2019-07-03阅读: 935标签: Flutter

时间: 2019-05-11阅读: 745标签: flutter一. 序

Flutter作为一个可移植的UI框架,已经支持现代Web应用开发了!我们很开心已经发布了SDK预览版,这样你可以在Web浏览器里直接运行你的Flutter UI代码。

用来构建漂亮、定制化应用的跨平台的 UI 框架 Flutter 现在已经支持 Web 开发了。我们很高兴推出了一个预览版的 SDK 可以让开发者直接使用 Flutter UI 和业务逻辑代码构建 web 应用在浏览器中运行起来。

在 Google I/O 2019 上,Dart 团队宣布推出新的 Flutter 稳定版本 1.5,这是 Flutter 迄今为止最大的一次版本发布。伴随着 Flutter 1.5 的发布,同期也宣布发布 Flutter for Web 的 Preview 版本,正式开启了 Flutter 的全平台 UI 框架之路。

Flutter Web的目标

Flutter 在 Web端的雄心

早在年初发布的 Flutter 2019 Roadmap 中,就有提到,会在今年支持移动设备之外的平台,对 Web 的支持,算是完成了一个新的里程碑吧。

从去年Beta版发布以来,客户们已经使用Flutter来创建可以运行在iOS和Android上的移动应用了。但是,Flutter是以可移植的UI工具集构架的,它还可以运行在其他环境下,例如Windows、Mac、Fuchsia甚至Raspberry Pi。 由于Flutter是使用Dart构建的,它针对原生机器码和JavaScript都包含了生产级的编译器,因此我们有了一个坚实的基础。接下来的挑战在于需要使用web平台的对等单元来替换基于Skia的图形引擎和文本渲染器。

自从去年第一个公测版本推出之后,开发者使用 Flutter 构建跨 IOS 和 Android 的应用。但是 Flutter 自始至终被设计成一个跨平台的 UI 框架包括 Windows ,Mac,Fuchsia 甚至是 Raspberry Pi(树莓派)。因为 Flutter 是由 Dart 编写的,里面包含一个生产环境的编译器来构建原生的代码和 JavaScript 代码,所以我们有一个坚实的基础。剩下的挑战就是替换基于 Skia-based 的图形引擎和文本渲染来适配 Web 平台。

二. Flutter for Web

要正确地实现这一点,我们需要提供:

要做到这些,我们需要提供:

Flutter 之所以能够在移动平台上运行,主要是依赖的 Flutter Engine,就是 Flutter 所依赖的运行环境。这就导致在移动平台,只要你使用了 Flutter,哪怕只用混合开发的模式写了一个页面,这也将为你的 App 增大大约 4MB 的体积。

60帧/秒快速平滑动画的性能与其他平台一致的行为和视觉感受可以与当前开发模式集成的高效的开发者工具在所有现代浏览器上对核心web特性的支持

快速,无抖动的且每秒60帧的页面交互考虑到 Flutter 在其他平台提供的能力和视觉和现有开发模式整合的高效率的开发体验支持所有现代浏览器的核心 Web 功能

而 Flutter for Web,完全是一种全新的模式,它可以将 Dart 编写的现有 Flutter 代码,编译成可嵌入浏览器并部署到任何 Web 服务器的代码。

虽然用于Web的Flutter还在开发中,在上述几个方面都还有很多工作要进行,不过我们已经可以和大家分享一个预览版了,你可以尝试以下,期待你的反馈!

虽然Flutter for web是一项正在进行中的工作,而且为了实现上述功能还有很多工作要做。我们已经推出一个预览版,所以开发者可以进行尝鲜并给我们反馈。

编译后的代码,完全是基于 HTML、CSS 和 JavaScript 这些标准的 Web 技术,所以它也不需要任何浏览器插件的支持。

Flutter Web总体架构

Flutter Web 架构

早期微软的 Silverlight 和 Adobe 的 Flash 都证明了,一切需要插件才能支持的 Web 应用,都是纸老虎,最终都会被基础的 HTML 技术所替代。

Flutter Web的总体架构与用于移动平台的Flutter非常接近:

Flutter 在 Web 端的整体架构和移动端的架构差不多,Flutter 核心层(上图绿色部分)在移动端和 Web 端是一样的。它提供了 Flutter UI 的高度抽象,包括动画,手势,基本的小部件,以及一套大部分应用需要的 Material 风格的部件。如果你已经在客户端开发中使用了 Flutter,那么你就会很快的在 Web 开发中上手。

我想这也是 Flutter for Web 选择这种支持方式的一个考量因素。

Flutter框架(上图中绿色部分)在移动和web平台中共享,它提供了Flutter的UI基础层的高层次抽象,包括动画、收拾、基础组件类、以及大多数应用需要的物化主题的组件集。如果你已经在Flutter上开发,那么使用Flutter Web时你会感到非常熟悉。

神奇之处就是将这些概念(客户端层面的)编译到浏览器中。我们重新实现了 dart ui 库,原本是基于 Skia 引擎被用在客户端上,现在是基于 DOM 和 Canvas API。当你编译 Flutter 代码到 Web 端,你的应用包括 Flutter 核心库,Web 端的 dart ui 库,所有的用 Dart 语言写的代码都会被编译成 JavaScript 代码,能够运行在所有的现代化浏览器中。

添加 Web 支持,涉及在标准 API 之上,实现 Flutter 的核心绘图层,结合使用 DOM、Canvas 和 CSS,Flutter for Web 能够实现在现代浏览器中提供便携的、高质量和高性能的用户体验。

魔力来自于将这些概念翻译到浏览器平台。我们重新实现了dart:ui库,使用基于DOM和Canvas的代码替换了移动平台上对Skia引擎的绑定。当你为Web平台编译Flutter代码时,你的应用、Flutter框架、以及Web版本的dart:ui库都将编译为JavaScript,可以运行在任何现代浏览器上。

我们正在认真考虑采纳 Web 核心的特性,像用 Flutter 的路由模型无缝衔接浏览器的 History 路由。我们还在与Flutter 桌面终端合作,来实现鼠标滚动,悬停和聚焦这些客户端开发中用不到的功能。

Flutter for Web 很大程度上,归功于 Chrome、Firefox 和 Safari 等现代浏览器的快速发展,这些浏览器提供了基础的硬件加速的图形、动画和文本以及 JavaScript 的快速执行。

我们仔细地拥抱web核心特性,例如将Flutter的路由模型与浏览器History无缝集成。我们同时也努力让Flutter适应桌面环境,例如启用鼠标滚动、悬停、聚焦等等,虽然这些特性在移动体验中并不需要。

Flutter Web 项目聚焦的核心功能就是框架提供的丰富流畅的交互体验。基于 document 的 Web 端也能从 Flutter web 可视化中 收益。

随着 Flutter for Web 的发布,Flutter 正式成为一个全平台的 UI 框架。

Flutter Web项目聚焦于框架提供的核心价值:丰富的交互式体验。而聚焦于文档的Web内容依然可以通过嵌入Flutter Web可视化元素来获益。

这个预览版的核心库是现有 Flutter 核心库的一个临时分支。这让我们的工程师能够很快的实现 web 端功能而核心团队能够持续保持开发稳定的用于生产环境的工具。我们已经开始往主仓库合并部分支持浏览器端的代码。我们计划提供一个 Flutter 的工具包,里面的核心框架将为移动端,web,和其他平台提供支持。

Flutter 最初的设想,也并不是想作为一个 HTML 的替代品,而是想基于 Flutter 能够快速构建出全平台的所支持的,图形丰富、交互流程的应用。在 Google I/O 上,也展示了最近刷屏的 KENKEN 益智游戏(文末有地址),该游戏在 Android、iOS、Web、Mac 和 Chrome 上,运行的都是相同的代码。

预览版本的Flutter Web框架当前是作为已有Flutter框架的一个临时分支。这使得我们的工程师可以快速实现Web功能,同时核心团队可以继续维护并改进生产可用的工具集。我们一进刚开始将浏览器支持合并到主仓库。我们计划提供一个Flutter工具集,提供一个单一的框架来满足移动、Web以及其他平台的开发需要。

我们计划的工作包括:

Flutter for Web 还只是一个 Preview 版本,还有很多不足和被限制的地方。

接下来计划的工作包括:

支持文本特性例如选中,复制和粘贴。提供插件支持。像位置信息,摄像头,文件 API,我们希望提供一个简单的 API 将客户端和 web 端桥接起来。对 PWA 提供开箱即用的技术支持。将 web 开发所需要的工具集成到现有的 FLutter 脚手架和编辑器中。能够用 DevTools 来调试 web 开发。提高性能,浏览器支持以及无障碍的访问的能力

限制:

支持文本相关的特性,例如选中、复制、粘贴支持插件。对于像位置、摄像头、文件访问这些特性,我们希望使用单一API来桥接移动平台和Web为PWA这样的科技提供开箱即用的支持使用已有的Flutter命令行和IDE集成工具来统一web开发工具链使用DevTools调试web应用性能的改善、浏览器的支持,以及可访问性

欢迎大家去flutter.dev/web查看例子,文档以及更多的资源。我们很期待你使用 Flutter 开发的 web 应用。

Flutter_web 的插件还不完善,暂时只提供了最基础的 dart:html、dart:js、dart:svg、dart:indexed_db,可以通过他们访问绝大多数浏览器的 API。并非所有的 Flutter 都在 Flutter_web 上实现了。Flutter_web 编译还很慢。在桌面浏览器上运行,还有一些不足,大部分是基于移动应用的操作特性,而没有对桌面系统的操作习惯进行特殊的优化。开发流程目前仅支持 Chrome。三. 小结

你可以到flutter.dev/web查看示例、文档以及其他资源的链接,我们期待着看到你的创作!

原文地址:-flutter-to-the-web-904de05f0df0原文作者: Kevin Moore翻译作者: Fedora

自此 Flutter 就不再是一个单纯的移动框架,而是一个多平台框架,通过它,可以快速的构建应用,更快的触达用户。

原文链接:Flutter Web - 目标全平台开发的Flutter再下一城!- 汇智网

坦率的讲,Flutter 这一年的发展以及推广效果都是惊人的,据公开的消息来看,不少一线大厂已经在一些生产项目上,尝试使用 Flutter,虽然尝试的大多都并不是主力项目,但这背后一定也少不了 Google 的推广,Google 本身对 Flutter 的期望也很大,短期应该不会凉。

不过框架这个东西,有兴趣看看就好了,毕竟铁打的基础,流水的 API,不要花太多的精力沉迷在框架中,把编程的基础技术学好才是正道。如果真到了公司想尝试 Flutter 的地步,专门花一周两周突击一下,肯定能上手。

本文由澳门威斯尼人平台登录发布于Web前端,转载请注明出处:将变为全平台

相关阅读