Angular Router : Route Resolver 和对 UX 的影响答案

【问题标题】：Angular Router : Route Resolver and the impact on the UXAngular Router : Route Resolver 和对 UX 的影响
【发布时间】：2018-01-04 16:01:45
【问题描述】：

我想知道如何决定使用路由解析器来预取给定容器（组件）所需的数据。如果在我的情况下，API 很慢，那么 UX 将受到响应缓慢的影响。用户将单击该链接，尝试导航到该路由，但 API 调用仍将处于活动状态，并且路由器在获取数据之前不会解析该路由。然后，我可以缓存数据以供后续路线导航使用。

但这里的主要问题/讨论是何时使用解析器（理想情况）以及何时避免使用它，这样用户就不会在响应后等待。最佳做法是什么？

【问题讨论】：

标签： angular

【解决方案1】：

国际海事组织：

当您可以确定它们会被快速处理时，解析器可用于非常小的轻量级请求。
但如果您需要请求一些重要信息，最好将 ngOnInit 与微调器或骨架组件一起使用（demo（单击“Reload with ghosts”））。

【讨论】：

【解决方案2】：

最佳做法是什么？

这实际上取决于您的应用及其使用情况。在大多数桌面应用程序上，确实没有必要。我想说这个用例是针对深思熟虑的用户体验。

解析器对于慢速/移动连接非常有用，它可以让您获得几毫秒的时间。但是如果请求需要 3 秒，那么解析器不足以让您的用户平静下来，您需要更深入并遵循“响应式 Web 应用程序”原则，并执行诸如显示组件的“骨架”以及何时显示数据之类的事情已加载。

解析器会为您的应用添加一些性能，但对于非常慢的连接来说，这还不够。

至于什么时候避免它，我真的没有看到更好的表现会变坏的情况。我想有时性能提升可能并不真正有价值，而花费的时间可能会更好地用于其他事情。

【讨论】：

你有关于这个主题（用于响应式网络应用程序）部分的资源吗？目前，我所做的是在 ngOnInit 方法上加载数据，显示一个微调器，然后在加载数据时移除微调器（逻辑方式）。
@NicolasBoulet-Lavoie 这是medium article 有很多来源，问题是与它们相关的“名称”。核心思想是通过很多领域（设计或技术）获得更好的用户体验。例如，谷歌将具有特定功能的针对移动使用的网站称为“Progressive Web App”here is a talk。但在它背后，它只是为了改进移动用户的用户体验。
@NicolasBoulet-Lavoie 在技术方面，围绕构建响应式/反应式应用程序有很多工作要做。像 redux 这样的东西已经被构建来通过事件处理复杂的 UI。有关反应式编程的更多一般性，请参阅Reactive Manifesto
很好的总结。谢谢。

【解决方案3】：

当用户悬停链接/按钮时，您可以通过预加载数据获得大约 300 毫秒的领先优势。

http://instantclick.io/click-test

【讨论】：

有趣。但是，如果用户错误地悬停了按钮（或者只是链接所在的位置），那么 API 调用会被白白回击怎么办？这是我在这个实践中看到的边缘案例，但我真的认为这个想法很棒。您是否在特定应用程序中实现了它？您是否测试过性能与误差增益？
确实很有趣 - 如果涉及到触摸，可悲的是有缺陷