[译] Flutter即将在Web上赢得胜利 | 技术点评

162 阅读14分钟

题目:Flutter Is About To Win Over the Web
作者:Lew C
本文翻译自:betterprogramming.pub/flutter-is-…

如今的网站,包括你现在正在使用的网站,都是使用HTML、JavaScript和CSS编写的。显而易见,你读到这好好想一下。如果我告诉你在不使用这三种技术中的任何一种的情况下创建网站,你可能会遇到一些问题。

然而,在整个历史过程中,我们在这一领域拥有许多参与者。我们拥有Flash、Silverlight,所有竞争技术都试图削减浏览器市场的份额,为了让开发人员使用其他技术来创建网站。但是他们中的任何一个都还没有真正起飞。那么,亲爱的读者,我怎么能找到你,并告诉你在这个领域可能有竞争对手?尤其是在经过数年的努力之后,在这个领域中,还是没有其他玩家参与?

好吧,让我们花一点时间来欣赏这些过去的尝试所共通的东西,即:

1. 他们需要一个浏览器插件才能运行。 他们通常需要特定平台的浏览器插件才能在目标平台上运行。Silverlight就是一个很好的例子-当时,使用Linux的人无法观看Netflix,因为该站点依赖Silverlight(不适用于Linux)。当然,有开源替代品,但没有第一方。

2. 他们引入了安全漏洞。 Flash为此而臭名昭著(已知漏洞超过1000个)。浏览器将必须加载插件才能显示内容,并且此时,浏览器的安全保护措施都无关紧要,因为插件可以完全访问主机。

3. 性能不如纯HTML。 就加载插件和显示文本是否更快而言,以原始HTML和CSS进行加载总是比尝试加载插件来显示内容要快得多。

4. HTML5出现了,CSS得到了改进。 突然之间,创造美丽的,参与的体验并非不可能。更好的是,那些讨厌标准的、使用奇怪的或是使用特定供应商的浏览器,被杀死的并不是使用CSS等效项(例如Internet Explorer)。

所有这些使选择本机HTML创建新的Web应用变得容易。 毕竟,如果用于创建Web体验的技术已被弃用,并且停止接收安全修复程序,那么别无选择,只能以一种受支持的新语言从头重写程序。但是我们首先是怎么到达这里的呢?HTML如何成为当今蓬勃发展的互联网中的这种支柱?

新时代的曙光

1991年8月6日,网络开始向世界传播。然后最终我们经历了所谓的互联网泡沫。考虑一下,网络只是在1991年才出现供公众使用的,在9年后,互联网泡沫破灭,损失了惊人的1.7万亿美元。这意味着互联网泡沫造成的损失相当于当年美国GDP的15%左右。

我们处在历史的那一部分,因为网络开始变得越来越普遍的时候,而我们编写网站的方式也变得越来越标准化。随着时间的流逝,我们获得了可以使用的类似HTML4的标准,并且这些标准确保你在自己的世界中编写的HTML可以用于大多数(即使不是全部)HTML解析器。级联样式表(Cascading Style Sheets,CSS)也在1996年问世,而在此之前的一年,JavaScript也出现了。你能想象看到或使用没有JavaScript或CSS的网站吗?可以肯定的是,这将不是一个愉快的经历。

但是,纵观整个历史,网络上的某些事物都保持不变。公平地说,它必须做的很多事情:在没有极好的理由的情况下,你永远不想对HTML标准进行重改,因此,在未来版本中更改网络工作方式的大范围工作可能永远不会发生。 。这使我们拥有了今天的网络,其中包括什么?

文件

当网络第一次出现时,人们并不像今天那样使用应序。你们中的某些人可能还记得使用充当瘦客户机的终端,从而为你提供了从大型机器到其他终端的物理连接。人们拥有的仅仅是屏幕上的几行文字的“应用程序”(如果可以这样称呼)。人们习惯于将事物作为文档处理,就像他们可以细读的手中的纸片一样。毫无疑问,生成HTML的文档是HTML页面的基础。如果你曾经使用过JavaScript,都会熟悉document.getElementById()的功能。你在网页上所做的一切都是生成页面,然后转换成文档。

传统上,大多数网页太高,在一个视口中无法容纳。因此,用户将不得不在页面上使用滑动或用鼠标滚动。我想不出我今天使用的网站能完全适合用户的视口(当然不是这种方法),因此开发人员将始终保证页面的某些部分在用户当前在其页面上查看的位置的上方或下方。

但是,你仍然希望网页的某些部分保持在特定位置或以特定方式对齐。为了控制元素的布局,你开始在CSS中使用position。一吨CSS属性(确切地说是520个),顾名思义,这些样式会层叠 到其子元素中。当你尝试使文档的特定部分以某种方式显示时,它可能会变得相当混乱。如果你使用的是现有的样式框架(例如Angular Material),那么当你开始覆盖内置CSS以获得所需的外观时,它也会变得非常时髦。CSS可让你使用!override,但是一旦你开始这样做,战斗就很大程度上失败了。如果你正在阅读此书,然后对自己进行思考,“那是什么?这个家伙听起来好像对CSS毫无希望,”那没关系,我不会在这一点上与你抗争。但是,当你的设计师追求某种外观时,CSS可能会变得非常复杂。

学习语言

为了创建一个简单的网站,你需要使用三种不同的语言,这纯粹是针对网站本身的。那就是HTML,JavaScript和CSS。你的网站必须具有良好的外观,如果你不知道如何高效的编写JavaScript或CSS样式,那就无法做到这一点。

如果你实际上希望网站执行任何操作,则可以使用Angular或React之类的框架。当你开始通过npm引入软件包时,应用程序的大小开始增长,因此你还将要使用捆绑包(如webpack),将所有软件包捆绑在一起并适当地缩小它们。Webpack本身就是一个主题(也是一个很大的话题),但它是一个值得考虑的主题,并且确实构成了构建Web应用程序的重要部分。

捆绑和转运

在拥有网站和包之后,你需要使用捆绑程序捆绑客户端序,并确保该程序可在其浏览器中正常工作。根据他们使用的浏览器,你还需要“填充”某些功能,以便用户的浏览器可以真实地使用你的网站。如果你使用的是TypeScript之类的语言,那么webpack还要转换为JavaScript。本质上没有什么不好,但是它非常复杂并且有很多活动部件。如果你的网站崩溃了,你是否混乱了代码,或者压缩了代码,或者webpack没有正确包含代码,或者翻译过程中出现了问题?这些复杂的问题可能会给调试或查程序问题的源头带来困难。

Flutter效果如何?

如果你听说过Flutter,那么你可能已经在手机APP开发的背景下听说过它。那么,它到底如何适用于网站?好吧,对于普通的HTML网页,你可以将该页面作为文档来处理。但是在Flutter中,“页面”(或用户与之交互的内容)实际上是绘制到HTML画布上的。Flutter实际上控制着绘制到屏幕上的每个像素,并且不使用HTML、JavaScript或CSS来定义其外观或逻辑。(从技术上讲,本机Dart代码是通过转换为JavaScript的dart2js,但是实际上没有用JavaScript编写任何业务逻辑的。)

你可能已经注意到了这句话使人震惊的两件事。首先,没有HTML。其次,我们将所有内容绘制到画布上。我明白了–听起来很奇怪,至少在直接绘制到画布上的情况下,效果不是很好。但是,让我们进一步研究一下。

画布中绘制而不是在文档中

第一点是我们不是在使用HTML编写网页,也不是在文档中编写东西。乍一看,这是完全瞎说。但是,当你使用HTML开发网页时,你到底在做什么?好的,正如我们在本文前面所讨论的那样,你创建的文档对于用户设备的视口来说太大了,然后滚动。当你在此页面上正在阅读的内容的文档高度大于视口的高度时,你需要滚动文章。

当你考虑它时,这不是设计用户界面,期望内容在垂直方向上太大,用户必须在其中滚动?如果你希望用户从左到右滚动而不是从上到下滚动怎么办?在普通网页上表达它并不是特别容易。

在Flutter中,如果要使特定的内容水平滚动而不是垂直滚动,就像将小部件包装在SingleChildScrollView中一样容易。你还可以轻松指定滚动条本身的方向,无论滚动条是在垂直轴还是水平轴上滚动。

因为Flutter基于将页面放在单个小部件中而不是在屏幕上绘制文档的概念,所以开发人员可以完全控制自己想要如何布局应用程序。

坚持一种语言

如上所述,创建一个出色的网站意味着你必须了解HTML,JavaScript和CSS。这也意味着你的知识不会在这些语言之间转移,例如,你不能在HTML中重用任何JavaScript知识。HTML纯粹是标记语言,CSS纯粹是样式语法,而JavaScript纯粹是编程语言。这些选项都不包含类型检查之类的内容,因此CSS可以是完整的东西,当用户尝试使用网页时,它只会无声地运行失败。

Flutter使用Dart作为其语言,并且所有应用程序的外观和业务逻辑都是用它编写的。Dart带有静态类型检查,并且空安全性即将上线,因此app中的每一行代码,无论是用于直观地描述程序、展现程序样式还是控制用程序的业务逻辑,都是完整的安全类型。

轻松布置你的应用

广义上讲,我们使用网站显示的数据是另一个资源:无论该来源是数据库、API还是其他,我们最终都希望显示数据。想象一下,我们有一个从API返回的对象数组,而你正在使用类似Angular的框架来显示它们。通常,你会将那些对象加载到支持组件中,然后用*ngFor遍历它们。你可能会将其附加到div。开箱即用,但是,对于一个无样式的div,它看起来很普通。你可能希望该列表中的项目显示在列或行中,因此你必须使用一些CSS或flexbox来实现。

相反,在Flutter中,你可以使用具有接受一系列对象属性的aColumn或aRow来布局子元素。多数情况下,考虑时,你可能希望将对象数组排成一行(并排)或成列(并排在彼此下方)。因为有了这些,在继续为列表中的各个项目设置样式之前,你可以更快地获得所需的视觉布局。以我的经验,这可以在不影响最终结果的情况下加快站点的脚手架和原型制作。

控制视口中的每个像素

由于Flutter会将每个像素渲染到屏幕上,因此,设计人员和开发人员可以完全控制自己想要在应用程序上展现的外观。渲染到屏幕上的每个像素听起来都会带来巨大的性能损失,但请不要误会我的意思,这肯定不如如今渲染原始HTML的速度快,但是GPU加速画布之类的东西在这种情况下提高了性能区域。传统上,用HTML设计网页意味着你必须考虑要使用的不同浏览器。但是,在Flutters的情况下,因为你Text使用某种字体对窗口小部件进行了布局,所以无论在何处显示都将看起来相同,因为Flutter可以控制每个像素的特定窗口小部件的外观。

再见,webpack!

因为Flutter使用的是Dart,所以在为其目标平台编译Flutter程序时,它也会将所有依赖包(也用Dart编写)也转换为JavaScript。Dart是一种安全类型的语言,不支持反射。因此,其效果是使编译器对程序调用什么以及不调用什么有了更好的了解。这样可以更好地摇晃程序并使其最小化。在Web上构建Flutter应用程序不会使用Webpack,因为它不需要Webpack,这对于Flutter本身(无论如何在我看来)来说是一个非常有力的案例。webpack没错;这是一个高质量的软件。但这是已经在很复杂的方案中的复杂工具。

但是在那里我们还没放弃

除了时髦的网页,精美的动画和精美的体验,网络上还有更多的内容。我们确实需要的不止于此。我们需要服务器端呈现(SSR),以便我们的网页可以被搜索引擎抓取,以执行任何类型的搜索引擎优化(SEO)。目前,Flutter网站只能由人解析,不能由搜索引擎解析,因此这将对人们在网站上搜索和查找信息的方式产生巨大影响。(人们对此问题进行了讨论,并且似乎在将来还没有解决方案)。

将所有内容绘制到画布上也有其性能影响,但是这些并不像你想的那样糟糕。我制作了一个测试app,该app大量使用了视觉效果,并且在MacBook上以接近60fps的速度运行。即使将图纸拖到屏幕上,它仍然可以正常工作,并逐渐增加后面图像的模糊度。我绝不是Dart的专家,因此毫无疑问,可以进一步优化此过程。

因此,在人们将其视为主流Web开发之前,Flutter需要改进几个关键领域。但是请想一想:Flutter仅在最近两年才真正问世,它已经具备的性能和功能集令人难以置信。

如果你可以创建一个性能卓越的网站,并且可以使用一种语言来设计,样式化和编写Web应用程序的业务逻辑,那将会是什么呢?如果webpack对你的开发渠道变得多余了?并且,如果你能及时获得服务器端渲染以及如今在基于HTML的传统网站中拥有的所有的SEO优势呢?

如果你拥有所有这些,那么Flutter可能会赢得网络。

本文正在参与「掘金 2021 春招闯关活动」, 点击查看 活动详情