原始的なAPIはインターネットのスケジュールを可能にし、クライアントは制約の傑作です。 Google カレンダーがどのように機能するか、そして私たちはエンジニアとしてそれから何を学ぶことができます。 アーキテクチャ : None (!). Just a few in-house libraries for things like authentication and shared utilities. 認証や共有ユーティリティなどのための内部ライブラリがいくつかあります。 Frontend framework CSS クラス名は、JS によって呼び出されています。 Frontend Styling : キャッシュストレージ、IndexedDB(オフラインモード)、CDN(イメージ&フォント) Frontend Storage スパナーDB API Storage Google Meet、Google Contacts、Google Auth External APIs : 心拍、イベント、通知。 Services JSをダウンロードし、より速く実行する内部コンパイラ。 Other 興味深い問題 もちろん、カレンダーは1つの大きなCRUDアプリですが、あなたを騙さないでください - 解決しなければならなかった多くの厳しい技術的な問題がありました。 火の日程 2011年からREST+JSON(元はREST+RSSスタイルのフィード) データモデルは、RFC 5545 iCalendar 再現文字列に大きく依存します(Microsoft と Apple は独自のオブジェクトを使用しています)。 クライアントは、イベントが変更されたときにWebhook通知を受け取るために視聴/サブスクリプトできます。 スピードのための増加同期をサポートします...しかし、あなた自身で expirations & re-syncs を処理する必要があります。 パフォーマンスの問題を軽減するために割引と利率制限を使用する 彼らはあなたに必要なことをするのに十分なものを与えますが、彼らはあなたのためにそれを発見しません。 HTMLレイアウト はい、HTMLの構造化は本当に興味深い! 暦のビューはコンテンツが豊富であるため、 要素が分離されていない場合 大規模なパフォーマンス問題が発生 以下は、最も重要なHTMLレイヤーです。 The grid: all-day row, day columns, timed events, container 行/列にロックできないプレビューイベント The drag layer. This allows you to DND tasks to the grid. これにより、DNDタスクをグリッドに移すことができます。 Forms: floating next to events on the grid and expanded into a full-screen dialog タグ : 確認メッセージ アルゴリズム Frontend 各カレンダークライアントにはいくつかのジュースなアルゴリズムがあります。 : the length, height, and coordinates (X, Y) of each event div. To compute this, you need to account for the event duration and view scale. Event position : The width and Y coordinates, which need to be adjusted based on the surrounding events. All-day event lengths : how to adjust events when they share times. Gcal’s implementation is more sophisticated compared to Outlook’s (which halves each event). Pseudo-code below. Overlapping events // 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 こちら これらのアルゴの完全な実装のために。 コンパス REPO サービス これらは、クライアントコードが単純で信頼できるようにする外部ワークホースです。 Heartbeat サービス — GCal が信頼できるようになり、優雅にオフラインモードに戻ります。 イベント サービス — クライアント向けの Webhooks をサポートする pub/sub スタイルのイベント. This allows other apps to build on the GCal API. 通知サービス - イベント前の通知のタイミングを調整します. クライアントは理論的にはこれを単独で行うことができますが、信頼性が低くなります。 [ Takeaways グローバル規模のCRUDアプリケーションの構築は、アーキテクチャ図から単純に見えるかもしれませんが、そのシンプルさは依然として高レベルの実行を必要とします。 API の信頼性: 多くのアプリケーションがユーザーの GCal との 2 つの方向の同期に依存しているため、API はシンプルで、拡張可能で、信頼性があります。 データセキュリティ:カレンダーデータは非常に敏感です. 彼らは、あなたが権限を与える人/アプリのみがあなたのデータにアクセスできるようにするための範囲ベースの役割に大きく依存します。 モニタリングサービス:健康チェック、ログアップ、および同期は舞台の後ろで絶え間なく行われています。 スケールの要求を考慮すると、あなたは単に自分自身の生活を容易にすることができます。 . 物事をしないこと 物事をしないこと あなたはトレンドステックを使用する必要はありません。 Angular でアプリを書き直すためにすべてを落とした場合を想像してください. 次に React. 次に Svelete. 次に NextJS. 次に HTMX. これらはすべて Google Calendar が発送された後に来ました。 すべてのプラットフォームで公開する必要はありません。今すぐGoogleカレンダーデスクトップアプリをアップしてください。 スタイリングのトレンドに従う必要はありません Bootstrap Bulma スタイリングコンポーネント Tailwind CSS クラス名 あなたは最高のUXを持っている必要はありません. 暗いモード. スペースを節約するフォーム. #FFFFFF ライトモード. フルページのフォーム。 あなたは最高のパフォーマンスを持っている必要はありません. パフォーマンスの彼らのライトハウスススコアは31/100です。 人生と同様に、製品を発送するときに自分自身を知ることは有益です。 Google Calendarは、エグゼクティブアシスタントが1日40回のミーティングをスケジュールするために使用する現代的なアプリではありません(Vimcalの目的はそれです)。 Google Calendar は、20 億ユーザーのいずれかが手をつないで操作できるシンプルなアプリになることを目指しています。 アクセシビリティの点数は 88/100 です。 UI は変わりません。 機能するだけです。 それが沢山です。 これらの深いダイビングをあなたのインボックスに取得するには、私のニュースレターにサブスクリプトし、 . フルスタックエンジニア
