SPA、共享元素过渡和重新评估技术

Nolan Lawson 在描述单页应用程序 (SPA) 的显著转变时，引发了一些讨论

像 Astro、Qwik 和 Elder.js 这样的新框架正在宣扬他们的 MPA [多页应用程序]，“默认情况下为 0kB JavaScript”。博客文章正在广泛流传，列出 SPA 的所有挑战：历史记录、焦点管理、滚动恢复、Cmd/Ctrl-单击、内存泄漏等。对 SPA 的欢快嘲讽正在进行。
我认为，近年来环境发生了变化，使 MPA 比 SPA 更占优势，这一点鲜为人知。

似乎许多人真的抓住了文章的第一部分，因为 Nolan 发布了后续文章来澄清 SPA 远未消亡

[T]he point of my post wasn’t to bury SPAs and dance on their grave. I think SPAs are great, I’ve worked on many of them, and I think they have a bright future ahead of them. My main point was: if the only reason you’re using an SPA is because “it makes navigations faster,” then maybe it’s time to re-evaluate that.

他说这话是有充分理由的。事实上，第一篇文章专门指出了正在共享元素过渡上进行的工作。如果它们向前发展，我们将拥有一个 API 用于在页面进入和退出时对元素进行动画/过渡/调整大小/定位。Jake Archibald 在 Google I/O 2022 上演示了它的工作原理，这段视频是一颗宝石。

如果您想知道一个页面如何过渡到另一个页面，浏览器会对传出页面和传入页面进行截图，然后在这两个截图之间进行过渡。因此，与其说是一个页面变成另一个页面，不如说是浏览器保存了两张图片，以便它可以在一个动画时另一个动画退出。Jake 说，幕后发生的事情是，一个 DOM 结构是由包含页面图像的伪元素创建的

<transition-container>
  <image-wrapper>
    <outgoing-image />
    <incoming-image />
  </>
</>

如果我们想隔离一个特定的元素并应用与页面其他部分不同的动画，我们可以“截图”它。

.site-header {
  page-transition-tag: site-header;
  contain: paint;
}

我们获得了可以连接并分配自定义 @keyframe 动画的伪元素。

<!-- ::page-transition=container(root)  -->
<transition-container>
  <!-- ::page-transition-image-wrapper(root)  -->
  <image-wrapper>
    <!-- ::page-transition-outgoing-image(root) -->
    <outgoing-image />
    <!-- ::page-transition-incoming-image(root) -->
    <incoming-image />
  </>
</>

真是太聪明了！

这也证明了 HTML、CSS 和 JavaScript 持续发展和改进的程度。Jeremy Keith 建议，现在是我们重新评估我们对一些技术的过去判断的时候了。

如果您不知道过去几年的变化，很容易仍然认为单页应用程序提供了一些事实上不再存在的独特优势。[…] 但开发人员仍然心存怀疑，仍然更愿意信任第三方库而不是原生浏览器功能。他们过去已经对这些库做出了决定。他们在过去评估了浏览器支持的状态。我希望他们会重新评估这些决定。

SPA 的具体成分

近年来，网络似乎取得了长足的进步：服务工作者、原生 JavaScript API，以及对 CSS 可以做什么的惊人提升。最重要的是，浏览器之间的互操作性越来越好。对新的 Web 标准的普遍支持比以往任何时候都快。

HTML、CSS 和 JavaScript：它仍然是城里最好的鸡尾酒。即使它需要一点时间才能赶上来。

发表评论 取消回复

发表评论取消回复