Секретное инженерное оружие Google Calendar: сдержанность

Его примитивный API обеспечивает планирование для интернета, а его клиент является шедевром сдержанности.

Как работает Google Calendar и чему мы можем научиться у него как инженеры.

Архитектура

---

Фронтенд-фреймворк: Отсутствует (!). Только несколько внутренних библиотек для таких вещей, как аутентификация и общие утилиты.

Стилизация фронтенда: CSS classnames, вызываемые через JS.

Хранилище фронтенда: Cache Storage, IndexedDB (офлайн-режим), CDN (изображения и шрифты).

Хранилище API: Spanner DB.

Внешние API: Google Meet, Google Contacts, Google Auth.

Сервисы: heartbeat, eventing, notifications.

Другое: Внутренний компилятор, который ускоряет загрузку и выполнение JS.

Интересные проблемы

---

Конечно, календарь — это одно большое CRUD-приложение. Но не дайте этому обмануть вас — было множество сложных технических проблем, которые необходимо было решить.

Calendar API

• REST+JSON с 2011 года (изначально REST+RSS-стиль фида)
• Модель данных в значительной степени опирается на строки повторения iCalendar RFC 5545 (Microsoft и Apple используют собственные объекты)
• Клиенты могут отслеживать/подписываться, чтобы получать webhook-уведомления при изменении мероприятий
• Поддерживает инкрементные синхронизации для скорости… но также требует самостоятельно обрабатывать истечения и повторные синхронизации
• Использует квоты и ограничения скорости для снижения проблем с производительностью
• Мощный, но примитивный. Они дадут вам достаточно, чтобы сделать все, что вам нужно, но не будут разбираться за вас.

HTML-разметка

Да, структурирование HTML может быть действительно интересным! Поскольку представления календаря богаты контентом, возникают большие проблемы с производительностью, если элементы не изолированы.

Вот наиболее важные HTML-слои:

• Сетка: строка для событий на весь день, столбцы дней, события с временем, контейнер
• Предварительный просмотр события, который не может быть привязан к строке/столбцу
• Слой перетаскивания. Это позволяет перетаскивать задачи на сетку
• Формы: плавающие рядом с событиями на сетке и развернутые в полноэкранный диалог
• Всплывающие уведомления: Для подтверждающих сообщений

Фронтенд-алгоритмы

Каждый клиент календаря имеет несколько интересных алгоритмов

• Позиция события: длина, высота и координаты (X, Y) каждого div события. Для вычисления этого необходимо учитывать продолжительность события и масштаб представления.
• Длины событий на весь день: Ширина и Y-координаты, которые необходимо корректировать в зависимости от окружающих мероприятий.
• Перекрывающиеся события: как корректировать события, когда они имеют общее время. Реализация Gcal более сложная по сравнению с Outlook (который делит каждое событие пополам). Псевдокод ниже.

// логика перекрывающихся событий 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() //самые длинные события располагаются позади более коротких if start or end of targetEvent != start or end of any(events): if targetEvent overlaps multiple events: targetEventGoesInFrontOfEvents() else: orderEventsByStart() //события, которые начинаются раньше, располагаются позади

\

Смотрите репозиторий Compass для нашей полной реализации этих алгоритмов.

Сервисы

Это внешние рабочие лошадки, которые позволяют клиентскому коду оставаться простым и надежным

• Heartbeat сервис — Позволяет GCal быть надежным и плавно переходить в офлайн-режим
• Eventing сервис — события в стиле pub/sub, которые обеспечивают работу webhooks для клиентов. Это позволяет другим приложениям строиться на основе GCal API.
• Notifications сервис — координация времени ваших уведомлений перед событием. Клиент теоретически мог бы делать это самостоятельно, но это было бы менее надежно.

[

\

Выводы

---

Создание CRUD-приложения глобального масштаба может выглядеть простым с точки зрения диаграммы архитектуры, но эта простота все равно требует высокого уровня исполнения.

• Надежность API: Поскольку так много приложений полагаются на двустороннюю синхронизацию с GCal пользователя, API должен быть простым, расширяемым и надежным. Если они допустят ошибку, они сломают армию других приложений ниже по течению.
• Безопасность данных: Данные календаря чрезвычайно чувствительны. Они в значительной степени полагаются на роли на основе областей видимости, чтобы гарантировать, что только люди/приложения, которым вы дали разрешение, могут получить доступ к вашим данным.
• Мониторинг сервисов: Проверки работоспособности, логирование и синхронизация происходят безостановочно за кулисами.

Учитывая требования к масштабу, вы можете облегчить себе жизнь, просто не делая вещи.

• Вам не нужно использовать трендовый стек. Представьте, если бы они бросили все, чтобы переписать свое приложение на Angular. Потом React. Потом Svelete. Потом NextJS. Потом HTMX. Все они появились после выпуска Google Calendar. GCal выбрал JS, перешел в правую полосу и двигается со скоростью 64 миль/ч уже десятилетиями. Никому нет дела.
• Вам не нужно публиковаться на каждой платформе. Откройте десктопное приложение Google Calendar прямо сейчас. Я подожду.
• Вам не нужно следовать трендам стилизации. Bootstrap. Bulma. styled-components. Tailwind. CSS class names.
• Вам не нужно иметь лучший UX. Темный режим. Формы, экономящие пространство. #FFFFFF светлый режим. Полноэкранные формы.
• Вам не нужно иметь лучшую производительность. Их оценка lighthouse по производительности составляет 31/100.

Так же, как и в жизни, окупается знание самого себя при выпуске продукта.

Google Calendar не пытается быть современным приложением, которое исполнительные помощники используют для планирования 40 встреч в день (Для этого есть Vimcal).

Google Calendar стремится быть простым приложением, которым любой из его 2 миллиардов пользователей может пользоваться без посторонней помощи. Оно набирает 88/100 по доступности. Интерфейс не меняется. Оно не падает, а если падает, то есть поддержка офлайн-режима.

Оно просто работает.

Этого вполне достаточно.

---

Чтобы получать эти подробные разборы в свой почтовый ящик, подпишитесь на мою рассылку Fullstack Engineer.

\