flutter框架的简介（Flutter即将赢得Web应用开发的胜利）

跨平台框架提供了最引人注目的Web开发经验

> Picture created by Author (Flutter logo obtained from Flutter Brand Guidelines, HTML5 Logo from W3C). The graph represents nothing.

如今的网站，包括您现在正在使用的网站，都是用HTML，JavaScript和CSS编写的。您可能已经读了一下，并仔细考虑了，是的，这显然是显而易见的。如果我告诉您创建网站而不使用这三种技术中的任何一种，您可能会遇到一些问题。

然而，在整个历史过程中，我们在这个领域有很多参与者。我们拥有Flash，Silverlight和所有竞争技术，这些技术都试图削减浏览器市场的份额，以使开发人员可以使用其他技术来创建网站。但是他们中没有一个真正起飞过。那么，亲爱的读者，我怎么可能来找您，并告诉您在这个领域又可能有竞争对手？尤其是在经过多年努力之后，在这个领域几乎没有其他参与者能走到哪里？

好吧，让我们花一点时间来欣赏一下这些过去尝试的共同点：

• 他们需要一个浏览器插件才能运行。他们通常需要特定于平台的浏览器插件才能在目标平台上运行。Silverlight是一个很好的例子-当时，使用Linux的人无法观看Netflix，因为该站点依赖Silverlight（不适用于Linux）。当然，有开源替代品，但没有第一方。
• 他们引入了安全漏洞。Flash为此而臭名昭著（已知漏洞超过1000个）。浏览器将必须加载插件才能显示内容，并且此时，浏览器的安全保护措施都无关紧要，因为插件可以完全访问主机。
• 性能不如纯HTML。就加载插件和显示一些文本是否更快而言，以原始HTML和CSS进行加载总是比尝试加载插件为您显示一些内容要快得多。
• HTML5来了，CSS得到了改进。突然之间，创造美丽，参与的体验并非不可能。更好的是，讨厌标准的浏览器，使用怪异的hack或使用特定于供应商的实现，而不是使用等同于它们的CSS的浏览器（例如Internet Explorer）被杀死。

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

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

我们在历史的那部分中，因为这是关于网络开始变得越来越正式的时间，以及我们写作网站的方式变得更加标准化。随着时间的推移，我们获得了我们可以使用的HTML4等标准，并且这些标准确保您在世界上写入的HTML将为大多数情况下工作，如果不是全部，则为HTML解释器。级联样式表（CSS）也在1996年进入流通，并在此之前，JavaScript也进入了现场。你能想象看到或使用没有JavaScript或CSS的网站吗？这不是一个愉快的经历，这是肯定的。

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

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

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

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

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

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

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

如果您听说过扑振，则您可能会在手机应用程序开发的背景下听说过它。那么地球上如何适用于网站？嗯，使用正常的HTML网页，您可以处理页面作为文档。虽然闪动，但“页面”（或用户交互的页面）实际上被绘制到HTML画布。扑振实际上控制屏幕绘制的每个像素，而不使用HTML，JavaScript或CSS来定义其外观或逻辑中的任何一个。（从技术上讲，本机Dart代码通过Dart2J转发给JavaScript，但实际上没有用JavaScript编写业务逻辑。）

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

> Photo by Keila Hötzel on Unsplash

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

考虑一下，这不是设计用户界面，期望内容在垂直方向上太大而用户必须在其中滚动浏览的一种怪异方法吗？如果您希望用户从左到右滚动而不是从上到下滚动怎么办？在普通网页上表达它并不是特别容易。

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

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

如前所述，创建一个伟大的网站意味着您必须知道HTML，JavaScript和CSS。这也意味着您的知识不会在这些语言之间传输，并且您无法在HTML中重用任何JavaScript知识。HTML纯粹是您的标记语言，CSS纯粹是您的样式语法，而JavaScript纯粹是您的编程语言。这些选项都没有包括类型检查的内容，因此您的CSS可以完成铺位，并且当用户尝试使用您的网页时，它将静静地失败。

Flutter使用Dart作为其语言，并在其中编写了应用程序的所有外观和业务逻辑。Dart具有静态类型检查功能，并且安全性即将降落，因此应用程序中的每一行代码，无论是用于直观地描述应用程序，提供应用程序样式或控制应用程序的业务逻辑，都是完整的类型-安全的。

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

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

由于Flutter会将每个像素渲染到屏幕上，因此可以使设计人员和开发人员完全掌控他们想要其应用程序或体验的外观。渲染到屏幕上的每个像素听起来都会带来巨大的性能损失，但请不要误会我的意思，这肯定不如如今渲染原始HTML的速度快，但是GPU加速画布之类的东西在这方面却提高了性能区域。传统上，使用HTML设计网页意味着您必须考虑要使用的不同浏览器。不过，在Flutters的情况下，因为您使用某种字体布置了一个文本小部件，所以无论在何处显示它都一样，因为Flutter会控制每个像素的外观。

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

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

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

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

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

如果你有那么一切，那么扑腾就可以赢得网络。

(本文由闻数起舞翻译自Lew C的文章《Flutter Is About To Win Over the Web》，转载请注明出处，原文链接：https://medium.com/better-programming/flutter-is-about-to-win-over-the-web-be0a205af03d)