Senjata Teknik Rahasia Google Calendar: Pengendalian Diri

API primitifnya memungkinkan penjadwalan untuk internet, dan kliennya adalah mahakarya kesederhanaan.

Bagaimana Google Calendar bekerja, dan apa yang bisa kita pelajari darinya sebagai insinyur.

Arsitektur

Frontend framework: Tidak ada (!). Hanya beberapa library internal untuk hal-hal seperti autentikasi dan utilitas bersama.

Frontend Styling: Nama kelas CSS, dipanggil oleh JS.

Frontend Storage: Cache Storage, IndexedDB (mode offline), CDN (gambar & font).

API Storage: Spanner DB.

External APIs: Google Meet, Google Contacts, Google Auth.

Services: heartbeat, eventing, notifikasi.

Lainnya: Compiler internal yang membuat unduhan dan menjalankan JS lebih cepat.

Masalah Menarik

Tentu, kalender adalah satu aplikasi CRUD besar. Tapi jangan tertipu — ada banyak masalah teknis yang menuntut yang harus diselesaikan.

Calendar API

• REST+JSON sejak 2011 (awalnya REST+feed bergaya RSS)
• Model data sangat bergantung pada string perulangan iCalendar RFC 5545 (Microsoft & Apple menggunakan objek proprietary)
• Klien dapat watch/subscribe untuk menerima notifikasi webhook ketika event berubah
• Mendukung sinkronisasi inkremental untuk kecepatan…tetapi juga mengharuskan Anda menangani kedaluwarsa & sinkronisasi ulang sendiri
• Menggunakan kuota & batas rate untuk mengurangi masalah performa
• Kuat namun primitif. Mereka akan memberi Anda cukup untuk melakukan apa pun yang Anda butuhkan, tetapi mereka tidak akan mengetahuinya untuk Anda.

Layout HTML

Ya, menyusun HTML sebenarnya bisa menarik! Karena tampilan kalender kaya dengan konten, masalah performa besar terjadi jika elemen tidak terisolasi.

Berikut adalah lapisan HTML yang paling penting:

• Grid: baris sepanjang hari, kolom hari, event berjadwal, container
• Preview event, yang tidak dapat dikunci ke baris/kolom
• Drag layer. Ini memungkinkan Anda melakukan DND tugas ke grid
• Formulir: mengambang di sebelah event pada grid dan diperluas menjadi dialog layar penuh
• Toasts: Untuk pesan konfirmasi

Algoritma Frontend

Setiap klien kalender memiliki beberapa algoritma menarik

• Posisi event: panjang, tinggi, dan koordinat (X, Y) dari setiap div event. Untuk menghitung ini, Anda perlu memperhitungkan durasi event dan skala tampilan.
• Panjang event sepanjang hari: Lebar dan koordinat Y, yang perlu disesuaikan berdasarkan event di sekitarnya.
• Event yang tumpang tindih: cara menyesuaikan event ketika mereka berbagi waktu. Implementasi Gcal lebih canggih dibandingkan dengan Outlook (yang membagi dua setiap event). Pseudo-code di bawah ini.

// logika event yang tumpang tindih 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() //event terpanjang berada di belakang event yang lebih pendek if start or end of targetEvent != start or end of any(events): if targetEvent overlaps multiple events: targetEventGoesInFrontOfEvents() else: orderEventsByStart() //event yang dimulai lebih awal berada di belakang

\

Lihat repo Compass untuk implementasi lengkap kami dari algoritma ini.

Services

Ini adalah pekerja keras eksternal yang memungkinkan kode klien tetap sederhana dan andal

• Heartbeat service — Memungkinkan GCal untuk andal dan beralih ke mode offline dengan anggun
• Eventing service — event gaya pub/sub yang menggerakkan webhook untuk klien. Ini memungkinkan aplikasi lain untuk membangun di atas API GCal.
• Notifications service — mengoordinasikan waktu notifikasi pra-event Anda. Klien bisa melakukan ini sendiri secara teori, tetapi akan kurang andal.

[

\

Kesimpulan

Membangun aplikasi CRUD skala global mungkin terlihat mudah dari diagram arsitektur, tetapi kesederhanaan itu masih menuntut tingkat eksekusi yang tinggi.

• Keandalan API: Karena begitu banyak aplikasi bergantung pada sinkronisasi dua arah dengan GCal pengguna, API perlu sederhana, dapat diperluas, dan andal. Jika mereka mengacaukan, mereka merusak sejumlah aplikasi lain di hilir.
• Keamanan data: Data kalender sangat sensitif. Mereka sangat bergantung pada peran berbasis cakupan untuk memastikan bahwa hanya orang/aplikasi yang Anda otorisasi yang dapat mengakses data Anda.
• Layanan pemantauan: Pemeriksaan kesehatan, logging, dan sinkronisasi terjadi tanpa henti di belakang layar.

Mengingat tuntutan skala, Anda dapat membuat hidup lebih mudah untuk diri sendiri dengan hanya tidak melakukan hal-hal.

• Anda tidak perlu menggunakan stack yang sedang tren. Bayangkan jika mereka meninggalkan semuanya untuk menulis ulang aplikasi mereka di Angular. Kemudian React. Kemudian Svelte. Kemudian NextJS. Kemudian HTMX. Semua itu datang setelah Google Calendar diluncurkan. GCal memilih JS, pindah ke jalur kanan, dan telah melaju dengan kecepatan 64MPH selama beberapa dekade. Tidak ada yang peduli.
• Anda tidak perlu mempublikasikan di setiap platform. Buka aplikasi desktop Google Calendar sekarang. Saya akan menunggu.
• Anda tidak perlu mengikuti tren styling. Bootstrap. Bulma. styled-components. Tailwind. Nama kelas CSS.
• Anda tidak perlu memiliki UX terbaik. Mode gelap. Formulir yang menghemat ruang. Mode terang #FFFFFF. Formulir halaman penuh.
• Anda tidak perlu memiliki performa terbaik. Skor lighthouse mereka pada Performa adalah 31/100.

Seperti dalam hidup, penting untuk mengenal diri sendiri ketika mengirimkan produk.

Google Calendar tidak berusaha menjadi aplikasi modern yang digunakan asisten eksekutif untuk menjadwalkan 40 pertemuan sehari (Itulah gunanya Vimcal).

Google Calendar bertujuan menjadi aplikasi sederhana yang dapat dioperasikan oleh salah satu dari 2 miliar penggunanya tanpa bimbingan. Skornya 88/100 pada aksesibilitas. UI tidak berubah. Tidak down, dan memiliki dukungan offline jika terjadi.

Ini hanya bekerja.

Itu sudah cukup.

Untuk mendapatkan pembahasan mendalam ini di kotak masuk Anda, berlangganan newsletter saya, Fullstack Engineer.

\