单页应用SPA是个错误 - gomakethings

22-03-03 banq

多年来,我们行业的趋势一直是构建单页应用程序或 SPA。
使用 SPA,整个网站或应用程序都存在于单个 HTML 文件中。初始加载后,应用程序的所有内容都由 JavaScript 处理。从理论上讲,这应该会导致 Web 应用程序感觉与原生应用程序一样快速和快速。
 

SPA适合什么?
首先,让我把这个问题说出来:有几个狭义的例子说明SPA有意义,是正确的选择。

YouTube是一个很好的例子。当你探索其他视频时,能够保持视频的播放是非常好的。像SoundCloud这样的音频网站也是如此,在那里你可以在浏览和探索其他艺术家时继续播放一首歌曲。所以......媒体网站,真的。

不过,一般来说,SPA作为一种行业趋势或 "最佳实践 "是错误的。
 

我们不断地重新发明轮子
浏览器为你免费提供了大量的东西:直接内置,开箱即用。
SPA打破了这一切,并迫使你用JavaScript重新创建它。
大多数开发者都做错了,而对于那些做对了的人来说,这导致了大量的额外代码来重新创建浏览器已经免费给你的功能。

在SPA中,当有人点击一个链接时,你需要...

  • 确定该链接是指向当前网站还是一个外部位置。
  • 如果是当前网站,则将URL路径与内容相匹配。
  • 如果是API驱动的内容,则通过fetch()请求获得它。
  • 更新URL路径和浏览器历史记录,不触发页面重载。
  • 将内容渲染到页面上。
  • 如果URL中有一个锚定链接,滚动到锚定元素。
  • 将焦点转移到文档的顶部,或锚定元素(大多数SPA都会犯这个错误)。
  • 向屏幕阅读器用户宣布页面加载/内容改变(许多SPA也会犯这个错误)。
  • 如果你正在运行的任何脚本依赖于特定的DOM结构,或附着于特定的元素,请重新初始化它们。

 
你还需要检测用户何时点击浏览器的前进/后退按钮,并重复上述大部分步骤作为回应。

在传统的MPA/网站上,几乎所有这些东西都是由浏览器为你完成的。其中一些很容易。有些则是复杂而微妙的,或者容易出错,或者容易忘记。所有这些都给你的网站增加了大量的代码。

结果是,我们建立的东西很脆弱,很容易损坏。我们得到了 "改进的用户体验",当所有的星星都完美地排列在一起时,我们就走上了这条路,而在一些边缘情况下,用户体验会差很多很多。

SPA是一个错误。
明天,我将向你展示我们如何建立和SPA一样性能的MPA,而且复杂性和脆弱性更低。

2