【AICon】探索八个行业创新案例,教你在教育、金融、医疗、法律等领域实践大模型技术! >>> 了解详情
写点什么

Web 的下一个转型:单页应用?是时候换个思路了

  • 2023-04-18
    北京
  • 本文字数:2258 字

    阅读完需:约 7 分钟

Web 的下一个转型:单页应用?是时候换个思路了

Remix 软件的联合创始人兼软件工程师 Kent C. Dodds,讲述了当前备受欢迎的单页应用程序(SPA)架构中存在的缺陷。


Dodds 介绍了从纯 HTML 和多页面应用(MPA)开始的不同种类 Web 应用方式的简短历史。他说,MPA 因其简单的心智模型而出名,这种方式虽然专注于开发者的体验,但每次与服务器的互动都需要全页面刷新导致其用户体验很差。开发者们转而使用被 Dodds 称作是 “逐步增强的多页面应用(PEMPAs)”。该方法使用 JavaScript 结合 AJAX(异步 JavaScript 和 XML)和后续的 Fetch API,在无需全页面刷新的情况下即可调用服务器端点。


Dodds 称,PEMPA 的最大问题在于代码的重复。服务器生成了一份 HTML,但为避免全页面的刷新,开发者们将代码放在浏览器客户端又渲染了一份 HTML。“这是 PEMPA 中避无可避的问题”,Dodds 说,“(这个问题)不仅存在于用户界面,还有验证方面。”


对此问题的解决方案是仅在服务器上运行 REST API 的 SPA(单页应用)。“我们干掉了服务器端的渲染层,” Dodds 说。这种方式规避了代码重复,成为了现代网页应用的默认方式。然而,Dodds 也提到规避了代码重复是 SPA 应用相较 PEMPA 而言的唯一优势点。他说,PEMPA 的问题 SPA 一个不少,此外,SPA 还有增多的捆绑大小、高网络流量、运行时性能差,以及困难的状态管理等问题。在状态管理这一点上,Dodds 将其描述为“非常地折磨。只要看看 NPM,就能找到上百个尝试解决这一问题的模块。”其中,NPM 是 Node.js 模块的包注册。



PESPA(逐步增强的单页应用)—— QCon 上所展示的幻灯片


Dodds 认为,他所说的 PESPA(逐步增强的单页应用)应是 Web 的下一个合理过渡。“解决代码重复问题的方法是在两侧都使用同样的代码”,他说,“由此得出的心智模型与十多年前简单的 MPA 心智模型很类似。”


PESPA 模型也包括 Dodds 所称的模拟浏览器。“用于实现这一架构的框架,就是把它看作是浏览器。这就是得出这种心智模型的方式。” Dodds 称,在实践中,多数代码都会在服务器上,而框架则负责调用这些代码。


“许多框架都在采用这种架构,”Dodds 说,“但我印象最深的还是 Remix……不过老实说,我也是 Remix 的联合创始人,”虽然 Dodds 已经于 2022 年离开了公司,去追寻不同的道路。Remix 使用的是 React,也就是 Dodds 所说的“UI 框架”,他也说,未来 Remix 将支持其他 UI 框架。Dodds 还称 Remix 本身即是一个“浏览器模拟器”,可以使用请求对象等标准 web API,但是在服务器端运行。


但 Remix 真的就是答案所在吗?在最新的 React 文档中,该框架确实被称作是“具有嵌套路由的全栈 React 框架”,也是仅有的几个被提及的框架之一。也有其他框架在采用类似的想法,尤其是被 React 团队誉为当前采用 React 服务器组件最佳方式的 Next.js,React 团队称:“(Next.js)将多页应用这种服务器为中心的、简单的请求返回心智模型,和以客户侧为中心、无缝交互式的单页应用相结合,带来两个世界的最佳效果。"


此外,Deno 项目也一直在为服务器端渲染和其自身的 Fresh 框架做准备。


Web 应用框架领域发展迅速,尽管 Dodds 的演讲主题是“Web 的下一个转型“,还是留存了许多供人猜测的空间。


附 QCon 伦敦 Kent C. Dodds 主题演讲内容概述。


Kent C. Dodds 谈 Web 的下一次转型


DOdds 解释了近年来 Web 所经历的一系列变化,从静态 HTML 文件开始,并迅速演变为动态服务器生成的 HTML 响应。如今,REST 或 GraphQL API 已经通过 Jamstack 得到 JavaScript 重型客户端的广泛使用。Web 的最新转型可谓前所未有,现代基础设施和技术已经重新定义了卓越用户体验的评判基准。在这个全新时代,旧实践正得到全面改造,而现代方法也日益暴露出自己的局限性。



在演讲中,DOdds 分享了上述转变给用户体验和开发效率带来的影响。即将到来的 Web 时代将以去中心化为共性,强调更快的速度、更低的成本和更加令人向往的发展前景。


用于构建当今 Web 的技术早在 25 年前就进行过首次标准化,包括诞生于九十年代中期的 HTTP、HTML、CSS 和 JS。多年以来,Web 已经发展成无处不在的重要应用程序平台。随着 Web 的发展,用于创建这些应用程序的开发架构也在同步改进。虽然当今 Web 开发者采用的核心架构多种多样,但单页应用程序(SPA)仍是其中应用最广泛的类别。而如今,我们正进一步过渡至新的、更加强大的 Web 应用程序构建架构。


最近,Web 的开发生产力又迎来另一波影响深远的冲击。借助现代 Web 开发工具和流程,开发人员能够更快完成任务,显著减少新 Web 应用程序的开发和启动时间。此外,新变化也让开发者能够将更多精力放在应用程序的业务逻辑上,而非底层支持基础设施上,从而带来更富成效、更令人满意 的成果。


把握这些新技术和新方法的潜在优势、积极适应不断变化的数字环境可谓至关重要。开发人员可以利用现代基础设施和程序的功能,设计出速度更快、可靠性更高、开发和维护成本更低的新一代 Web 应用程序。


总而言之,Web 的最新变化标志着开发人员迎来了提高生产力、改善用户体验的又一个激动人心的历史性时刻。随着我们的进步,特别是对新趋势和新技术的密切关注,未来的 Web 开发方式必将呈现出不同于以往的全新面貌。


参考链接:


https://devclass.com/2023/03/28/single-page-applications-time-to-move-on-says-remix-co-founder-at-qcon/


https://qconlondon.com/presentation/mar2023/webs-next-transition

相关阅读:


使用 Lambda Web Adapter 在 Lambda 上 构建 web 应用

Tech Talk 宣传 | 如何高效、极简构造无服务器 Web 应用

你可以错过Web3,但不要错过Web5

Web3当下,最佳投资就是投资自己

2023-04-18 12:276329

评论

发布
暂无评论
发现更多内容

Apache Doris (incubating) 1.0 Release 版本正式发布!

ApacheDoris

数据库 大数据 开源 OLAP apache doris

论利润中心内部核算和集团核算

秋去冬来春未远

阿米巴 利润中心 集团成本

深圳助力建设全国「数据交易」大市场,「隐私计算」技术赋能数据要素安全流通

洞见科技

OceanBase 杨传辉参与数据库技术与应用发展研讨会

OceanBase 数据库

oceanbase

在线YAML转CSV工具

入门小站

工具

国产化云平台如何实现多云管控,黄河云来“打样儿”

BoCloud博云

国产化 云管理平台

Java 操作 Office:POI word 之文档信息提取

程序员架构进阶

内容审核 4月日更 文档识别 4月月更

火遍全网的MBTI人格测试,为什么会有那么多人相信?

小炮

MBTI

如何做好任务管理,手把手教你怎么做最高效的任务管理

阿里云云效

云计算 阿里云 云原生 研发团队 项目协作

过去一周热点回顾|Hoo虎符研究院 区块链简报 20220418期

区块链前沿News

虎符交易所

linux之rpm命令

入门小站

Linux

在线CSV转Plaintext(txt)工具

入门小站

工具

什么是代码加密?基于云效 Codeup的代码仓库加密是如何实现的

阿里云云效

云计算 阿里云 代码管理 Codeup 代码加密

TASKCTL 连接不到服务器的4种情况

TASKCTL

分布式 调度引擎 ETL 自动化运维 调度任务

易周金融观点:遏制NFT金融化等打下监管良基

易观分析

NFT

高效进行接口测试,简单易懂!

Liam

测试 Jmeter Postman swagger 测试工具

博云 BeyondCMP 云管理平台 5.6 版本发布

BoCloud博云

云管理平台

【ELT.ZIP】OpenHarmony啃论文俱乐部——这些小风景你不应该错过

ELT.ZIP

神经网络 OpenHarmony ELT.ZIP

图数据库|正反向边的最终一致性——TOSS 介绍

NebulaGraph

图数据库 知识图谱

TDesign 更新周报(2022 年 4 月第 3 周)

TDesign

移动端日历组件设计与实现

CRMEB

优秀程序员的30种思维(29/100)

hackstoic

技术思维

【ELT.ZIP】OpenHarmony啃论文俱乐部——浅析稀疏表示医学图像

ELT.ZIP

OpenHarmony 医学影像 稀疏矩阵 ELT.ZIP

安全之花如何盛开在华为云空间的每个角落?

脑极体

企业管理理念之人本善还是本恶

秋去冬来春未远

企业管理 人性本善 人性本恶 一念之差

HLP分词后的文本如何在web端高亮显示

lo

前端 4月月更

用css制作旋转的立方体

云智慧AIOps社区

CSS 前端 大前端 3D css特效

物联网低代码平台常用《组件介绍》

AIRIOT

开发 物联网 平台搭建、

以OceanBase为例,分析事务型评测基准对分布式数据库的适用性

OceanBase 数据库

分布式数据库 oceanbase

Serverless 让我们的运维更轻松

领创集团Advance Intelligence Group

#Serverless

【愚公系列】2022年04月 二十三种设计模式(零)-简单工厂模式(Simple Factory Pattern)

愚公搬代码

4月月更

Web 的下一个转型:单页应用?是时候换个思路了_语言 & 开发_马可薇_InfoQ精选文章