为什么大家突然讨厌起了单页应用(SPA)?

75 阅读5分钟

为什么“突然”大家讨厌起了单页应用(SPA)?

如果你在过去几周上过互联网,你可能会注意到突然涌现了大量批评单页应用(SPA)的文章。导火索是Next.js的创始人兼Vercel的CEO Guillermo Rauch发布的推文:

图片.png

截至本文撰写,该推文已获得超过24.1万次浏览,引发了一系列评论和博客文章。

随后,一个星期后的2月4日,Alex Russell发布了《柠檬市场》,进一步助长了争论的火势。在Alex出色的帖子中,他指出了SPA的承诺以及用于构建它们的框架未能兑现。实际上,许多人由于这些框架所带来的复杂性以及为重新创建浏览器中已有功能所需的大量JavaScript而变得更糟。

然而,Alex对于这些框架提供者的批评可能有些过分,因为我们都无法免受认知偏见的影响。

作为回应,我们看到了许多博客文章,比如:

然而,对单页应用作为构建Web应用程序的方式提出质疑并不是一种新现象。将近一年前,Nolan Lawson撰写了两篇文章,《平衡已从单页应用转移》《关于单页应用的更多思考》,详细说明了为什么你的下一个应用程序可能不需要是单页应用。Nolan是众多在过去十年中质疑用单页应用解决所有问题的人之一。

我构建单页应用是愚蠢的吗?

不,当然不是。

你才不是因为衣柜最后面的那件穿不出去的衣服而愚蠢,尽管你曾劝说自己可以。由于你花了太多钱购买它,你不忍心送人或捐赠。这被称为沉没成本谬误。扔掉它吧,你会感觉更好,而且衣柜会有更多空间,但嘿,我不了解你的生活。

图片.png

我也不知道你的工作背景和限制条件。你可能擅长构建单页应用,或者有一些必须采用某种技术的工作。不要因为你尽力而为而被任何人责备。跟上技术的发展变化是非常困难的,而且步伐只会变得更快。

单页应用是如何变得流行的?

十多年前,我曾在IBM和后来在Adobe工作,参与了开源项目 Apache Cordova/Adobe PhoneGap。Apache Cordova允许你使用HTML、CSS和JavaScript构建移动应用程序,同时针对多个平台使用一个代码库。在今天的技术环境中,移动领域主要由iOS和Android主导。在2010年代初,我们的移动平台涵盖了BlackBerry、Microsoft、Firefox、Tizen等多个平台。从一个代码库中针对多个平台,包括Web,进行开发是为过劳的开发团队带来了性的变化。

在针对这些移动平台进行开发时,你会将HTML、CSS和JavaScript打包成从各个应用商店下载的二进制文件。然后,你的应用程序只会通过网络请求数据。由于这种混合应用程序在手机上运行在Web视图容器中,而不是在Web浏览器中,因此你的文件是从磁盘加载的,而不是从Web服务器提供的。

图片.png

这种架构需要复制Web浏览器和Web服务器提供的功能。例如,浏览器使用锚点标签来处理页面导航,而单页应用需要客户端路由器来隐藏和显示HTML视图,甚至连后退按钮的行为都不容忽视。

这正是SPA架构的最佳使用场景。十年前的手机不像今天的多核巨兽那样强大。如果没有SPA架构,你的设备将需要在每个页面上加载、解析和执行JavaScript。在低端Android手机上,这会导致糟糕的用户体验。有了SPA架构,JavaScript只在启动时加载一次,通常在启动屏幕后面,以避免这种性能损耗。

另一个关键点是,我们今天享受的许多浏览器API,如地理位置、拍照和通知,当时都不存在。如果没有这种混合方法,Web在本地应用旁边将显得相形见绌。

那么,我还应该构建单页应用吗?

不,很可能不需要,但这只是我的个人意见。

现代多页应用程序(MPA)比以往任何时候都拥有更多的能力,减少了构建SPA以获得类似本地应用程序体验的需求。

  • 回退/前进缓存使应用程序内的页面导航比以往更快。
  • 使用服务工作者可以实现离线支持。
  • Web组件提供了可重用的UI组件层。

是时候整理一下你的衣柜了

不要再像那件令人尴尬的卫衣一样,你知道我在说哪件,那是一件有着许多洞和污渍的卫衣。是时候重新评估你用于构建Web应用程序的工具和框架了。你是否需要使用这些框架来重现Web平台已经提供的功能?也许是时候像那条从COVID之前就不合身的牛仔裤一样摒弃它们了?

图片.png

我也不知道你从哪里开始。你可能会尝试像阿斯特罗(Astro)Qwik11tyEnhance这样的卓越方法,这些方法围绕着首次使用HTML的承诺构建,利用了平台的优势。如果你决定尝试Enhance,请告诉我们你的想法,因为我们很愿意听取反馈。在Mastodon上关注我们,加入我们的Discord

缓慢即是流畅,流畅即是快速。
—— 美国海军海豹突击队

存在许多值得注意的新方法,如Astro、Qwik、11ty和Enhance,它们围绕着HTML为先的承诺构建,并利用了平台的优势。如果你决定尝试Enhance,请告诉我们你的想法,因为我们很愿意听取反馈。在Mastodon上关注我们,加入我们的Discord