Google Calendar 的秘密工程武器:克制

其原始API为互联网启用了日程安排功能,而其客户端是克制的杰作。

Google日历如何运作,以及我们作为工程师可以从中学到什么。

架构

前端框架:无(!)。只有一些内部库用于身份验证和共享工具等功能。

前端样式:CSS类名,由JS调用。

前端存储:缓存存储、IndexedDB(离线模式)、CDN(图像和字体)。

API存储:Spanner数据库。

外部API:Google Meet、Google通讯录、Google身份验证。

服务:心跳、事件处理、通知。

其他:使JS下载和运行更快的内部编译器。

有趣的问题

当然,日历是一个大型CRUD应用程序。但不要被这愚弄——有许多艰巨的技术问题必须解决。

日历API

• REST+JSON 自2011年以来(最初是REST+RSS样式提要)
• 数据模型 严重依赖RFC 5545 iCalendar重复字符串(Microsoft和Apple使用专有对象)
• 客户端可以观察/订阅以在事件更改时接收webhook通知
• 支持增量同步以提高速度……但也要求您自行处理过期和重新同步
• 使用配额和速率限制来减少性能问题
• 强大但原始。他们会给您足够的资源来做任何需要的事情,但不会为您弄清楚。

HTML布局

是的,构建HTML实际上可以很有趣!由于日历视图内容丰富,如果元素未隔离,则会出现重大性能问题。

以下是最重要的HTML层:

• 网格:全天行、日列、定时事件、容器
• 预览事件,无法锁定到行/列
• 拖动层。这允许您将任务拖放到网格
• 表单:浮动在网格上的事件旁边并展开为全屏对话框
• 提示:用于确认消息

前端算法

每个日历客户端都有一些有趣的算法

• 事件位置:每个事件div的长度、高度和坐标(X,Y)。要计算这个,您需要考虑事件持续时间和视图比例。
• 全天事件长度:宽度和Y坐标,需要根据周围事件进行调整。
• 重叠事件:当事件共享时间时如何调整事件。Gcal的实现比Outlook的更复杂(后者将每个事件减半)。伪代码如下。

// overlapping events logic if start or end of targetEvent overlaps with any(events): if start and end of targetEvent = start and end of any(events): orderEventsAlphabeticallyByTitle() if start of targetEvent = start of any(events) and end != end of any(events): orderByDuration() //longest events go behind shorter events if start or end of targetEvent != start or end of any(events): if targetEvent overlaps multiple events: targetEventGoesInFrontOfEvents() else: orderEventsByStart() //events that start earlier go behind

\

请参阅Compass存储库以获取这些算法的完整实现。

服务

这些是允许客户端代码保持简单和可靠的外部主力

• 心跳服务——允许GCal可靠并优雅地回退到离线模式
• 事件处理服务——为客户端提供webhook的发布/订阅式事件。这允许其他应用程序基于GCal API构建。
• 通知服务——协调事件前通知的时间。理论上客户端可以单独执行此操作,但可靠性会降低。

[

\

要点

构建全球规模的CRUD应用程序从架构图看起来可能很简单,但这种简单性仍然需要高水平的执行。

• API可靠性:由于许多应用程序依赖于与用户GCal的双向同步,因此API需要简单、可扩展且可靠。如果他们搞砸了,就会破坏下游的大量其他应用程序。
• 数据安全:日历数据极其敏感。他们严重依赖基于范围的角色来确保只有您授权的人/应用程序才能访问您的数据。
• 监控服务:健康检查、日志记录和同步在幕后不间断地进行。

鉴于规模需求,您可以通过简单地不做某些事情来让自己的生活更轻松。

• 您不需要使用流行的技术栈。想象一下,如果他们放下一切用Angular重写应用程序。然后是React。然后是Svelte。然后是NextJS。然后是HTMX。所有这些都是在Google日历发布后出现的。GCal选择了JS,靠右行驶,几十年来一直以64英里/小时的速度巡航。没人在乎。
• 您不需要在每个平台上发布。现在打开Google日历桌面应用程序。我等着。
• 您不需要跟上样式趋势。Bootstrap。Bulma。styled-components。Tailwind。CSS类名。
• 您不需要拥有最佳用户体验。深色模式。节省空间的表单。#FFFFFF浅色模式。全页表单。
• 您不需要拥有最佳性能。他们在性能方面的lighthouse得分是31/100。

就像生活中一样,发布产品时认识自己是值得的。

Google日历并不试图成为执行助理用来每天安排40次会议的现代应用程序(这就是Vimcal的用途)。

Google日历的目标是成为其20亿用户中的任何一个都可以在没有手把手指导的情况下操作的简单应用程序。它在可访问性方面获得88/100分。UI不会改变。它不会宕机,如果宕机了,它有离线支持。

它就是能用。

这就足够了。

要在收件箱中获取这些深入分析,请订阅我的新闻通讯Fullstack Engineer。

\