编辑注:以下内容最初由高级软件工程师 u/arbeitrary 发布在 Reddit 的博客上。请继续阅读,了解 Reddit 如何使用 React 来启用 AMP。
在 Reddit,我们最近构建了一些评论页面的备用版本,它们使用了加速移动页面 (AMP) 技术——一项由 Google 和开源世界中的其他人设计,以确保页面在移动设备上的搜索结果中即时加载。我们已实施此技术来改善移动用户的 Reddit 体验。
我们使用 React 和 Redux 构建了此技术,作为 Node.js 应用程序。React 是一个现代 Web 框架,它解决了 Web 开发过程中出现的一些问题。Redux 是一个有助于维护 UI 应用程序状态的库,它将状态转换从用户控件和 API 回调中抽象出来,为视图组件提供了一个不可变的、关于应用程序状态的单一真实来源。对于一个本质上呈现静态标记的应用程序来说,React 和 Redux 似乎是一个奇怪的选择,但我们发现这种组合非常有效。我们的决定更多地关乎人员和生产力,而不是代码本身。
我们有一个很棒的团队,正在努力使用 React 和 Redux 开发我们移动 Web 应用程序的新版本。它将取代目前在 m.reddit.com 上运行的网站,并将在未来几周内发布。新应用程序是一个单页面应用程序,这意味着客户端 JavaScript 代码处理点击、向 API 发出数据请求并在浏览器中实时呈现新视图,而不是服务器呈现每个页面。为了在应用程序首次加载时支持出色的体验,我们还支持在服务器端对页面进行完全和部分呈现。
我们选择技术来构建 AMP 应用程序的主要目标是让我们在创建出色的用户体验的同时快速行动。由于 AMP 从根本上来说是一种移动体验,因此我们选择使用基于 React 和 Redux 的移动 Web 应用程序的新版本作为起点,但仅将其与服务器端呈现一起使用。从现有的代码库开始,让我们可以专注于 Reddit 的 AMP 体验与核心移动 Web 体验有何不同。React 让我们能够像使用任何 HTML 元素一样使用 amp-img 或 amp-accordion 等 AMP 组件来构建我们的视图,因此我们在不为每个新组件添加粘合剂的情况下,与其他 React 项目保持了一致的范例。
随着我们的 AMP 流量增加,我们在生产中了解了更多有关 AMP 的信息,并且我们继续探索为移动 Reddit 用户提供更多服务的方法,我们 AMP 应用程序和核心移动 Web 应用程序之间的界限可能会变得模糊。我们有意地为合并我们的 AMP 应用程序和移动 Web 应用程序留下了余地。在基本层面上,这简化了代码共享,同时让我们能够灵活地利用快速加载的 AMP 来优雅地丰富我们页面的交互性,因为新用户会成为常规 Reddit 用户。
从技术和用户体验的角度来看,我们对 AMP 和 React 等新工具和生态系统感到兴奋。两者都使开发人员能够编写更好的代码,以实现快速且引人入胜的网络。任何事情都是公平的游戏,当它帮助我们构建可靠的技术来帮助 redditors 在互联网上找到他们的家时。
由 u/arbeitrary 发布