התוכנה הפרימיטיבית שלה מאפשרת תזמון לאינטרנט, והקבלן שלה הוא יצירת מופת של מגבלות. How Google Calendar works, and what we can learn from it as engineers. Architecture : None (!). Just a few in-house libraries for things like authentication and shared utils. Frontend framework CSS class names, invoked by JS. Frontend Styling : Cache Storage, IndexedDB (offline mode), CDN (images & fonts). Frontend Storage : Spanner DB. API Storage Google Meet, Google Contacts ו- Google Auth External APIs : פעימות לב, התרחשות, הודעות Services : An in-house compiler that makes JS download and run faster. Other בעיות מעניינות Sure, a calendar is one big CRUD app. But don’t let that fool you — there were plenty of demanding technical problems that had to be solved. Calendar API REST+JSON מאז 2011 (מקור REST+RSS-style feed) leans heavily on RFC 5545 iCalendar recurrence strings (Microsoft & Apple use proprietary objects) Data model Clients can to receive a webhook notification when events change watch/subscribe Supports for speed…but also requires you to handle expirations & re-syncs on your own incremental syncs Uses to reduce performance issues quotas & rate limits . They’ll give you enough to do whatever you need to, but they won’t figure it out for you. Powerful yet primitive HTML layout כן, מבנה HTML יכול להיות באמת מעניין! מאז תצוגות לוח שנה עשירות בתוכן, if elements aren’t isolated. big performance issues occur Here are the most important HTML layers: הרשת: סדר יום שלם, עמודות יום, אירועים מתוכננים, מיכל אירוע התצוגה מקדימה, שאינו ניתן לסגור בשורה/עמודה . This allows you to DND tasks to the grid The drag layer : floating next to events on the grid and expanded into a full-screen dialog Forms תגיות: הודעות אישור Frontend Algorithms Each calendar client has a few juicy algorithms : 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 See כדי להבטיח את ההצלחה המלאה של הארגונים האלה. the Compass repo Services These are the external workhorses that allow the client code to stay simple and reliable service — Allows GCal to be reliable and fall back to offline mode gracefully Heartbeat service — pub/sub style events that power the webhooks for clients. This allows other apps to build upon the GCal API. Eventing שירות ההודעות – מתאם את לוח הזמנים של ההודעות לפני האירוע.הלקוח יכול לעשות זאת לבד בתיאוריה, אבל זה יהיה פחות אמין. [ Takeaways Building a global-scale CRUD app might look straightforward from the architecture diagram, but that simplicity still demands a high level of execution. אמין של API: מאחר שאפליקציות רבות כל כך מסתמכות על סינכרון משני הכיוונים עם GCal של המשתמש, ה- API צריך להיות פשוט, מתרחב ואמין. אבטחת נתונים: נתוני לוח שנה רגישים מאוד, והם מסתמכים מאוד על תפקידים מבוססי טווח כדי להבטיח שרק האנשים / היישומים שאתה מאשר יכולים לגשת לנתונים שלך. : Health checks, logging, and syncing are happening non-stop behind the scenes. Monitoring services Given the scale demands, you can make life easier for yourself by simply . not doing things not doing things . Imagine if they dropped everything to rewrite their app in Angular. Then React. Then Svelete. Then NextJS. Then HTMX. All of those came after Google Calendar shipped. GCal picked JS, pulled over to the right lane, and has been coasting at 64MPH for decades. No one cares. You don’t need to use the trending stack . Pull up the Google Calendar desktop app right now. I’ll wait. You don’t need to publish on every platform . Bootstrap. Bulma. styled-components. Tailwind. CSS class names. You don’t need to keep up with the styling trends . Dark mode. Forms that conserve space. #FFFFFF light mode. Full-page forms. You don’t need to have the best UX . Their lighthouse score on Performance is 31/100. You don’t need to have the best performance כמו בחיים, זה משתלם להכיר את עצמך כאשר משלוח מוצר. Google Calendar isn’t trying to be the modern app that executive assistants use to schedule 40 meetings a day (That’s what Vimcal is for). Google Calendar aims to be a simple app that any one of its 2 billion users can operate without hand-holding. It scores 88/100 on accessibility. The UI doesn’t change. It doesn’t go down, and it has offline support if it does. It just works. That’s plenty. To get these deep dives in your inbox, subscribe to my newsletter, . Fullstack Engineer
