从 React 到 HTML-First：Microsoft Edge 推出“WebUI 2.0”

作者：Terry2024.10.30来源：Web前端之家浏览：318评论:0

关键词：Gmail

Gmail 在 2004 年改变了网络平台——我们是否将要看到微软 Edge 带来的类似转变？而且这一次，JavaScript 更少了。

二十年前，基于浏览器的应用程序（Web 应用程序）在功能上实现了巨大飞跃。2004 年 4 月，谷歌推出了首批与原生应用程序一样运行的 Web 应用程序之一：Gmail。其背后的技术是一种 JavaScript 技术，后来被称为“Ajax”（异步 JavaScript 和 XML），它允许 Web 应用程序异步发送和从服务器检索数据，这意味着用户无需重新加载网页。

突然之间，2004 年的互联网变得更加互动。Gmail 使用 Ajax 实现了电子邮件的即时加载和实时搜索。其他网络应用也迅速效仿——其中包括 Flickr、Bloglines 和 Basecamp。后来，Facebook 使用 Ajax 异步提交和检索评论和点赞，允许这些操作立即在页面上更新，而无需完全重新加载。这真是太神奇了，它让“网络即平台”（又名 Web 2.0）在接下来的十年里蓬勃发展。

当你加倍投入 JavaScript 时会发生什么

但后来发生了一件奇怪的事情。从大约 2014 年到现在，开发人员加倍投入 JavaScript — 好东西不可能太多，对吧？因此，Web 应用变得更加复杂，尤其是在引入新的 JavaScript 库（如 React（于 2013 年首次亮相））和相关框架（如 Next.js（2016 年））之后。虽然这无疑有助于 Web 应用扩展并在用户界面上实现更多神奇的功能，但它也增加了用户设备上要处理的 JavaScript 数量。这也增加了开发人员的维护负担。

JavaScript 生态系统已经变得过于庞大，网络社区的知名成员开始呼吁回归网络平台的本质。过去几年我一直在报道这一现象，但到目前为止，我还没有看到任何网络应用（至少是规模较大的）能够体现“回归本质”的趋势。

但也许现在我已经找到了，微软的最新升级版基于Chromium 的 Edge浏览器。本周它引起了我的注意，原因有几个。第一，它减少了对 React 的依赖；第二，它增加了对Web Components的使用，这是一种 HTML 优先的 Web 开发方法。

“……从 React 转向现代 Web Components + HTML 优先架构为用户带来了*巨大*的好处。”
– Edge 合作产品经理 Alex Russell

Edge 如何减少其 React 代码？

微软关于新版Edge（版本 122）的博客文章实际上并没有提到 Reac t。相反，它专注于用户将体验到的内容：更快的速度。该公司是这样说的：

“从 Edge 122 开始，Browser Essentials UI 的响应速度更快。对于 Edge 用户来说，UI 现在快了 42%，而对于没有 SSD 或 RAM 少于 8GB 的设备用户来说，UI 快了 76%！”

但微软的 Edge 合作伙伴产品经理 Alex Russell（在此之前，他是 Web Components 的创建者之一）在 Mastodon 上证实了开发细节：

“如今，我们用网络‘东西’构建了很多浏览器（比如书签、历史记录、下载、设置、新标签页等），而从 React 转向现代 Web Components + HTML 优先架构为用户带来了巨大好处，尤其是使用低端硬件的用户。”

实际上，这意味着 Edge 中更少的用户界面是用 JavaScript 代码呈现的。更少的 JavaScript 意味着更小的占用空间，这意味着用户的 Web 体验更快。

“WebUI 2.0”是Edge的新UI机制，在本次演示中速度明显更快。

请注意，目前，Edge UI 中只有某些方面经历了这种变化。在回复一位询问此事的 Mastodon 用户时，Russell 确认这是“一项持续不断的努力”，并且 Edge 团队正在“逐个进行转换，目前已完成约 15%”。

您可能还想知道为什么浏览器首先使用 React。这是因为浏览器中的很多 UI 基本上都是网页。而且似乎主流浏览器在过去十年中都像其他人一样陷入了 React 的泥潭。因此，诸如“浏览器基本信息”屏幕（视频中显示）或浏览器收藏夹之类的功能 — — 都呈现为网页。微软表示，其他 Edge 功能，如“历史记录、下载、钱包等”，也将在未来几个月内转换为“WebUI 2.0”。