[Web翻译]Hummingbird与AngularDart

1,385 阅读5分钟

原文地址:medium.com/flutter-com…

原文作者:medium.com/@raveeshaga…

发布时间:2019年1月5日 - 5分钟阅读

更新(2019年5月10日): Hummingbird现在是Flutter for Web。它已经推出,我们现在可以在这里使用它的技术预览。

github.com/flutter/flu…

Hummingbird在12月4日的flutter发布会上宣布。这个项目将允许我们把flutter应用编译成成熟的Progressive Web Apps。那么......Angular Dart还值得吗?

我将尝试分享我目前收集到的信息,希望我的发现也能帮助到其他人。

他们准备得怎么样了?

:-p

第一个问题是我们是否真的可以使用这两个。

Angular Dart

目前AngularDart的版本是5.2.0,很稳定(已经有几年了),在Google的高影响力项目和世界各地的项目中使用。

Hummingbird

有人会说Hummingbird目前还处于alpha阶段。然而,我们所拥有的只是一个技术概述。更多的是一个命题,而不是其他任何东西,团队彻底讨论了他们正在考虑的技术方向。(这里:medium.com/flutter-io/…)

截至2019年1月5日,没有什么可以测试的。

它们到底有什么作用?

你在这里做什么?

很高兴你问了! 我们将尝试了解什么是单页应用,什么是渐进式Web应用,并看看Angular和Hummingbird的预期输出。这将帮助我们理解它们打算解决的问题。

SPA vs PWA

单页应用

单页应用程序(SPA)是一个网络应用程序或网站,它通过动态重写当前页面而不是从服务器加载整个新页面来与用户互动。- 维基百科

当字符#包含在URL中时,不仅不会导致页面重载,反而会在页面中引起一些互动。SPA就利用了这个浏览器功能。

例如,在维基百科中,如果我们点击索引中的一个标题,浏览器会带我们到页面的那个部分,而不是页面重载。

SPA正在将这一点提升到一个新的水平。整个应用程序及其所有的屏幕都在一个页面上工作,所有功能都使用基于#的URLs。

PWAs

渐进式网络应用是指具有网络影响力的用户体验,并且可靠、快速、吸引人。

  • developer.google.com

PWA是以某种方式优化的网站(可以是普通网站,也可以是单页应用),它们的特点是

  • 在离线和不可靠的互联网(Lie-Fi)情况下都能可靠地工作。
  • 速度快,优化了高感知性能。
  • 吸引人--感觉就像一个原生应用,而且不少。

AngularDart是做什么的?

AngularDart或Angular是一个用于编写SPA的框架。它为开发者提供了一种编写SPA的方法,其特点包括: 1:

  • 双向数据绑定
  • 路由
  • 模板
  • 指令

还有更多。实际的UI还是用HTML+CSS来写。Angular只是提供了一切其他的功能,让Web开发者能够开发他们的SPA。主要的是:

  • Angular Dart不是一个UI框架
  • Angular Dart应用程序可以或不可以成为PWA。

那什么是Angular Web Components呢?

它们是由angular_components包提供的一堆素材设计组件,作为模板来构建应用。

  • Internet Explorer不支持它们
  • 它们仍然是用HTML+CSS+Dart的方式编写的。

Hummingbird会怎么做?

到目前为止,这只是猜测。它的目标是将任何飞舞应用转换成PWA。它可能是也可能不是SPA(它很可能会)。然而它将尝试做flutter所做的一切。

有了它,我们可以使用Flutter UI框架,使用所有flutter SDK的功能,比如状态管理小部件和所有......并且一键,在我们已经拥有的Android和iOS应用旁边产生一个PWA!

这条路上有很多挑战,但如果谷歌意识到这一点,它将成为SDK的全部。

Dart全栈应用的状态

小飞现在很帅

让我们试着了解一下Flutter+AngularDart和Flutter+Hummingbird组合之间的区别,如果我们要为web和native写一套全镖的应用。

目前:Flutter + Angular Dart

对于编写这样一个应用,我们需要:

  • 编写一个包含所有业务逻辑的核心包,确保它没有Angular或flutter的依赖关系,并且所有这些依赖关系都会从外部注入到其中
  • 编写Angular PWA订阅核心的所有功能。
    • 使用HTML+CSS的UI或组成Angular组件。
    • 路由、状态管理与Angular的工作方式相结合
  • 编写一个Flutter应用程序,为所有功能订阅同一个核心。
    • 使用flutter UI框架的UI
    • 路由、状态管理等,用翩翩起舞的方式进行。
  • 从flutter项目编译到iOS和Android。
  • 从Angular项目编译到Web

代码共享会减少工作量吗?

虽然代码共享肯定会减少 "代码量",但根据我的经验,它并没有真正减少需要做的工作量。它需要我在这个过程中更加深思熟虑。

那么好处是什么呢?

  • 代码更干净,架构更好
  • 我是被迫的,现在我更容易保持各平台的功能均等性。

未来:Flutter + Hummingbird

对于编写这样的应用程序,我们需要。

  • 编写一个flutter应用程序
    • 采用flutter框架的用户界面
    • 路由、状态管理等,用Flutte方式进行
  • 在三个不同的平台上编译
  • 完成了

是不是少了点工作?

是的!

结束语

最高判决

就是这样。我们对flutter、angular dart、hummingbird和互相分享代码的了解的分析。

如果你现在正在开发一些东西... ...

走的是flutter + angular dart。虽然没有Hummingbird梦那么简单,但依然是最好的方式。

Hummingbird到现在为止还是一个遥远的梦想。我们绝对应该希望有一天能够实现,并且全力以赴支持的项目,但Dilli abhi door hai(未来是遥远的)。


通过( www.DeepL.com/Translator )(免费版)翻译