Google Calendar का गुप्त इंजीनियरिंग हथियार: संयम

इसका सरल API इंटरनेट के लिए शेड्यूलिंग सक्षम बनाता है, और इसका क्लाइंट संयम की उत्कृष्ट कृति है।

Google Calendar कैसे काम करता है, और एक इंजीनियर के रूप में हम इससे क्या सीख सकते हैं।

आर्किटेक्चर

फ्रंटएंड फ्रेमवर्क: कोई नहीं (!)। सिर्फ कुछ इन-हाउस लाइब्रेरीज प्रमाणीकरण और साझा utils जैसी चीजों के लिए।

फ्रंटएंड स्टाइलिंग: CSS classnames, JS द्वारा invoke किया गया।

फ्रंटएंड स्टोरेज: Cache Storage, IndexedDB (ऑफलाइन मोड), CDN (इमेज & फॉन्ट्स)।

API स्टोरेज: Spanner DB।

बाहरी APIs: Google Meet, Google Contacts, Google Auth।

सेवाएं: heartbeat, eventing, notifications।

अन्य: एक इन-हाउस कंपाइलर जो JS डाउनलोड और रन को तेज़ बनाता है।

रोचक समस्याएं

बेशक, एक कैलेंडर एक बड़ा CRUD ऐप है। लेकिन यह आपको मूर्ख न बनाए — इसमें कई चुनौतीपूर्ण तकनीकी समस्याओं को हल करना पड़ा।

Calendar API

• REST+JSON 2011 से (मूल रूप से REST+RSS-style feed)
• डेटा मॉडल RFC 5545 iCalendar recurrence strings पर बहुत अधिक निर्भर करता है (Microsoft & Apple प्रोप्राइटरी ऑब्जेक्ट्स का उपयोग करते हैं)
• क्लाइंट्स इवेंट बदलने पर webhook नोटिफिकेशन प्राप्त करने के लिए watch/subscribe कर सकते हैं
• गति के लिए इंक्रीमेंटल सिंक्स का समर्थन करता है...लेकिन आपको एक्सपायरेशन & री-सिंक्स को खुद हैंडल करना होता है
• परफॉर्मेंस समस्याओं को कम करने के लिए कोटा & रेट लिमिट्स का उपयोग करता है
• शक्तिशाली फिर भी सरल। वे आपको जो कुछ भी करने की जरूरत है उसके लिए पर्याप्त देंगे, लेकिन वे इसे आपके लिए समझ नहीं पाएंगे।

HTML लेआउट

हां, HTML को संरचित करना वास्तव में दिलचस्प हो सकता है! चूंकि कैलेंडर व्यू कंटेंट से भरपूर होते हैं, अगर एलिमेंट्स को अलग नहीं किया जाता है तो बड़ी परफॉर्मेंस समस्याएं आती हैं।

यहां सबसे महत्वपूर्ण HTML लेयर्स हैं:

• ग्रिड: पूरे दिन की पंक्ति, दिन के कॉलम, समयबद्ध इवेंट्स, कंटेनर
• प्रीव्यू इवेंट, जिसे किसी पंक्ति/कॉलम में लॉक नहीं किया जा सकता
• ड्रैग लेयर। यह आपको ग्रिड पर टास्क को DND करने की अनुमति देता है
• फॉर्म्स: ग्रिड पर इवेंट्स के बगल में फ्लोटिंग और फुल-स्क्रीन डायलॉग में विस्तारित
• टोस्ट्स: पुष्टि संदेशों के लिए

फ्रंटएंड एल्गोरिदम

प्रत्येक कैलेंडर क्लाइंट में कुछ रोचक एल्गोरिदम होते हैं

• इवेंट पोजीशन: प्रत्येक इवेंट div की लंबाई, ऊंचाई, और निर्देशांक (X, Y)। इसकी गणना करने के लिए, आपको इवेंट की अवधि और व्यू स्केल को ध्यान में रखना होगा।
• पूरे दिन की इवेंट लंबाई: चौड़ाई और 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 चुना, दाहिनी लेन में चला गया, और दशकों से 64MPH पर चल रहा है। किसी को परवाह नहीं है।
• आपको हर प्लेटफॉर्म पर प्रकाशित करने की आवश्यकता नहीं है। अभी Google Calendar डेस्कटॉप ऐप खोलें। मैं इंतजार करूंगा।
• आपको स्टाइलिंग ट्रेंड्स के साथ बने रहने की आवश्यकता नहीं है। Bootstrap। Bulma। styled-components। Tailwind। CSS class names।
• आपको सर्वश्रेष्ठ UX की आवश्यकता नहीं है। डार्क मोड। स्थान बचाने वाले फॉर्म्स। #FFFFFF लाइट मोड। फुल-पेज फॉर्म्स।
• आपको सर्वश्रेष्ठ परफॉर्मेंस की आवश्यकता नहीं है। परफॉर्मेंस पर उनका lighthouse स्कोर 31/100 है।

जीवन की तरह, प्रोडक्ट शिप करते समय खुद को जानने का फायदा होता है।

Google Calendar वह आधुनिक ऐप बनने की कोशिश नहीं कर रहा है जिसका उपयोग कार्यकारी सहायक दिन में 40 मीटिंग्स शेड्यूल करने के लिए करते हैं (वह Vimcal के लिए है)।

Google Calendar का उद्देश्य एक सरल ऐप होना है जिसे इसके 2 बिलियन उपयोगकर्ताओं में से कोई भी बिना मार्गदर्शन के संचालित कर सकता है। यह एक्सेसिबिलिटी पर 88/100 स्कोर करता है। UI नहीं बदलता। यह डाउन नहीं होता, और अगर होता है तो इसमें ऑफलाइन समर्थन है।

यह बस काम करता है।

यह काफी है।

अपने इनबॉक्स में ये गहन विश्लेषण प्राप्त करने के लिए, मेरे न्यूज़लेटर, Fullstack Engineer को सब्सक्राइब करें।

\