पिछले दो साल से, Goodnotes की इंजीनियरिंग टीम, एक प्रोजेक्ट पर काम कर रही है. इस प्रोजेक्ट का मकसद, iPad पर नोट लेने के लिए उपलब्ध इस ऐप्लिकेशन को दूसरे प्लैटफ़ॉर्म पर उपलब्ध कराना है. इस केस स्टडी में बताया गया है कि 2022 का iPad ऐप्लिकेशन ऑफ़ द ईयर, वेब टेक्नोलॉजी और WebAssembly की मदद से, वेब, ChromeOS, Android, और Windows पर कैसे उपलब्ध हुआ. इसके लिए, टीम ने उसी Swift कोड का फिर से इस्तेमाल किया जिस पर वह 10 साल से ज़्यादा समय से काम कर रही थी.
Goodnotes को वेब, Android, और Windows पर उपलब्ध कराने की वजह
साल 2021 में, Goodnotes सिर्फ़ iOS और iPad के लिए ऐप्लिकेशन के तौर पर उपलब्ध था. Goodnotes की इंजीनियरिंग टीम ने एक बड़ी तकनीकी चुनौती स्वीकार की: Goodnotes का नया वर्शन बनाना, लेकिन अन्य ऑपरेटिंग सिस्टम और प्लैटफ़ॉर्म के लिए. यह ज़रूरी है कि प्रॉडक्ट, iOS ऐप्लिकेशन के साथ पूरी तरह से काम करता हो और उसी तरह के नोट रेंडर करता हो. PDF के ऊपर लिया गया कोई भी नोट या अटैच की गई कोई भी इमेज, एक जैसी होनी चाहिए और उसमें वही स्ट्रोक दिखने चाहिए जो iOS ऐप्लिकेशन में दिखते हैं. जोड़ा गया कोई भी स्ट्रोक, iOS का इस्तेमाल करने वाले लोगों के बनाए गए स्ट्रोक जैसा होना चाहिए. इससे कोई फ़र्क़ नहीं पड़ता कि उपयोगकर्ता ने कौनसा टूल इस्तेमाल किया है. जैसे, पेन, हाइलाइटर, फ़ाउंटेन पेन, आकार या मिटाने वाला टूल.
ज़रूरतों और इंजीनियरिंग टीम के अनुभव के आधार पर, टीम ने तुरंत यह फ़ैसला लिया कि Swift कोडबेस का फिर से इस्तेमाल करना सबसे सही तरीका होगा. इसकी वजह यह है कि इसे पहले ही लिखा जा चुका है और कई सालों से इसकी अच्छी तरह से जांच की जा रही है. हालांकि, पहले से मौजूद iOS/iPad ऐप्लिकेशन को किसी दूसरे प्लैटफ़ॉर्म या Flutter या Compose Multiplatform जैसी टेक्नोलॉजी पर पोर्ट क्यों न किया जाए? किसी नए प्लैटफ़ॉर्म पर जाने के लिए, Goodnotes को फिर से लिखना होगा. ऐसा करने से, पहले से लागू iOS ऐप्लिकेशन और नए सिरे से बनाए जाने वाले नए ऐप्लिकेशन के बीच, डेवलपमेंट की होड़ शुरू हो सकती है. इसके अलावा, नए कोडबेस के तैयार होने तक, मौजूदा ऐप्लिकेशन पर नए डेवलपमेंट को रोकना पड़ सकता है. अगर Goodnotes, Swift कोड का फिर से इस्तेमाल कर सकती थी, तो iOS टीम की ओर से लागू की गई नई सुविधाओं से टीम को फ़ायदा मिल सकता था. इस दौरान, क्रॉस-प्लैटफ़ॉर्म टीम, ऐप्लिकेशन के बुनियादी फ़ंक्शन और सुविधाओं को एक जैसा बनाने पर काम कर रही थी.
इस प्रॉडक्ट ने iOS के लिए, कई दिलचस्प समस्याओं को हल कर लिया था, ताकि ये सुविधाएं जोड़ी जा सकें:
- नोट रेंडर हो रहे हैं.
- दस्तावेज़ और नोट सिंक करना.
- कॉन्फ़्रिक्ट-फ़्री डुप्लीकेट डेटा टाइप का इस्तेमाल करके, नोट के लिए कॉन्फ़्रिक्ट हल करना.
- एआई मॉडल के आकलन के लिए डेटा का विश्लेषण.
- कॉन्टेंट खोजने और दस्तावेज़ को इंडेक्स करने की सुविधा.
- कस्टम स्क्रोलिंग अनुभव और ऐनिमेशन.
- सभी यूज़र इंटरफ़ेस (यूआई) लेयर के लिए, मॉडल लागू करने की जानकारी देखें.
अगर इंजीनियरिंग टीम, iOS और iPad ऐप्लिकेशन के लिए पहले से काम कर रहे iOS कोडबेस को हासिल कर पाती है और उसे Goodnotes के किसी ऐसे प्रोजेक्ट के हिस्से के तौर पर लागू कर पाती है जिसे Windows, Android या वेब ऐप्लिकेशन के तौर पर शिप किया जा सकता है, तो इन सभी सुविधाओं को दूसरे प्लैटफ़ॉर्म पर लागू करना काफ़ी आसान होगा.
Goodnotes का टेक्नोलॉजी स्टैक
हालांकि, वेब पर मौजूदा Swift कोड का फिर से इस्तेमाल करने का एक तरीका था—WebAssembly (Wasm). Goodnotes ने ओपन सोर्स और कम्यूनिटी के बनाए गए प्रोजेक्ट SwiftWasm की मदद से, Wasm का इस्तेमाल करके एक प्रोटोटाइप बनाया. SwiftWasm की मदद से, Goodnotes की टीम पहले से लागू किए गए सभी Swift कोड का इस्तेमाल करके, Wasm बाइनरी जनरेट कर सकती थी. इस बाइनरी को Android, Windows, ChromeOS, और हर दूसरे ऑपरेटिंग सिस्टम के लिए, प्रगतिशील वेब ऐप्लिकेशन के तौर पर शिप किए गए वेब पेज में शामिल किया जा सकता है.
हमारा मकसद Goodnotes को PWA के तौर पर रिलीज़ करना था, ताकि इसे हर प्लैटफ़ॉर्म के स्टोर पर लिस्ट किया जा सके. इस प्रोजेक्ट में, iOS के लिए पहले से इस्तेमाल की जा रही प्रोग्रामिंग भाषा Swift के साथ-साथ, वेब पर Swift कोड को चलाने के लिए इस्तेमाल की जाने वाली WebAssembly के अलावा, इन टेक्नोलॉजी का इस्तेमाल किया गया है:
- TypeScript: वेब टेक्नोलॉजी के लिए, सबसे ज़्यादा इस्तेमाल की जाने वाली प्रोग्रामिंग भाषा.
- React और webpack: वेब के लिए सबसे लोकप्रिय फ़्रेमवर्क और बंडलर.
- PWA और सेवा वर्कर: इस प्रोजेक्ट के लिए ये बहुत ज़रूरी हैं. इसकी मदद से, टीम हमारे ऐप्लिकेशन को ऑफ़लाइन ऐप्लिकेशन के तौर पर शिप कर सकती है. यह ऐप्लिकेशन, iOS के किसी भी अन्य ऐप्लिकेशन की तरह ही काम करता है. साथ ही, इसे स्टोर या ब्राउज़र से इंस्टॉल किया जा सकता है.
- PWABuilder: Goodnotes का मुख्य प्रोजेक्ट, PWA को नेटिव Windows बाइनरी में रैप करने के लिए इस्तेमाल किया जाता है, ताकि टीम हमारे ऐप्लिकेशन को Microsoft Store से डिस्ट्रिब्यूट कर सके.
- भरोसेमंद वेब गतिविधियां: यह Android की सबसे अहम टेक्नोलॉजी है. इसका इस्तेमाल, कंपनी हमारे PWA को नेटिव ऐप्लिकेशन के तौर पर डिस्ट्रिब्यूट करने के लिए करती है.
इस इमेज में दिखाया गया है कि क्लासिक TypeScript और React का इस्तेमाल करके क्या लागू किया गया है और SwiftWasm और वैनिला JavaScript, Swift, और WebAssembly का इस्तेमाल करके क्या लागू किया गया है. प्रोजेक्ट के इस हिस्से में, JSKit का इस्तेमाल किया जाता है. यह Swift और WebAssembly के लिए, JavaScript इंटरऑपरेबिलिटी लाइब्रेरी है. टीम इस लाइब्रेरी का इस्तेमाल, ज़रूरत पड़ने पर अपने Swift कोड से एडिटर स्क्रीन में DOM को मैनेज करने के लिए करती है. साथ ही, यह ब्राउज़र के हिसाब से बनाए गए कुछ एपीआई का भी इस्तेमाल करती है.
Wasm और वेब का इस्तेमाल क्यों करना चाहिए?
Apple ने Wasm को आधिकारिक तौर पर मंज़ूरी नहीं दी है. हालांकि, Goodnotes की इंजीनियरिंग टीम को यह तरीका सबसे सही लगा, क्योंकि:
- कोड की 1,00,000 से ज़्यादा लाइनों का फिर से इस्तेमाल करना.
- मुख्य प्रॉडक्ट पर डेवलपमेंट जारी रखने के साथ-साथ, क्रॉस-प्लैटफ़ॉर्म ऐप्लिकेशन में भी योगदान देना.
- बार-बार होने वाली डेवलपमेंट प्रोसेस का इस्तेमाल करके, हर प्लैटफ़ॉर्म पर जल्द से जल्द उपलब्ध कराने की सुविधा.
- कारोबार के सभी लॉजिक को डुप्लीकेट किए बिना, एक ही दस्तावेज़ को रेंडर करने का कंट्रोल होना. साथ ही, लागू करने के तरीके में अंतर होना.
- एक ही समय पर हर प्लैटफ़ॉर्म पर की गई परफ़ॉर्मेंस से जुड़ी सभी सुधारों और हर प्लैटफ़ॉर्म पर लागू की गई सभी गड़बड़ियों को ठीक करने से फ़ायदा मिलता है.
1,00,000 से ज़्यादा लाइनों के कोड और रेंडरिंग पाइपलाइन को लागू करने वाले कारोबारी लॉजिक का फिर से इस्तेमाल करना ज़रूरी था. साथ ही, Swift कोड को अन्य टूलचेन के साथ काम करने लायक बनाने से, डेवलपर आने वाले समय में ज़रूरत पड़ने पर, इस कोड का इस्तेमाल अलग-अलग प्लैटफ़ॉर्म पर फिर से कर सकते हैं.
प्रॉडक्ट डेवलपमेंट का बार-बार किया जाने वाला तरीका
उपयोगकर्ताओं को जल्द से जल्द कुछ उपलब्ध कराने के लिए, टीम ने बार-बार कोशिश करने का तरीका अपनाया. Goodnotes को प्रॉडक्ट के रीड-ओनली वर्शन के साथ लॉन्च किया गया था. इसमें उपयोगकर्ता, शेयर किए गए किसी भी दस्तावेज़ को किसी भी प्लैटफ़ॉर्म से पढ़ सकते थे. सिर्फ़ एक लिंक की मदद से, वे वही नोट ऐक्सेस और पढ़ पाएंगे जिन्हें उन्होंने अपने iPad से लिखा था. बदलाव करने की सुविधाओं में जोड़ा गया अगला चरण, ताकि iOS के वर्शन के बराबर ही क्रॉस-प्लैटफ़ॉर्म वर्शन बनाए जा सकें.
रीड-ओनली प्रॉडक्ट के पहले वर्शन को तैयार करने में छह महीने लगे. इसके बाद के नौ महीने, बदलाव करने की सुविधाओं और यूज़र इंटरफ़ेस (यूआई) स्क्रीन पर काम करने में बीते. इस स्क्रीन पर, आपके बनाए गए या आपके साथ शेयर किए गए सभी दस्तावेज़ देखे जा सकते हैं. इसके अलावा, SwiftWasm टूलचेन की मदद से, iOS प्लैटफ़ॉर्म की नई सुविधाओं को क्रॉस-प्लैटफ़ॉर्म प्रोजेक्ट में आसानी से पोर्ट किया जा सकता है. उदाहरण के लिए, एक नई तरह की पेन बनाई गई और हज़ारों लाइनों के कोड का फिर से इस्तेमाल करके, उसे आसानी से अलग-अलग प्लैटफ़ॉर्म पर लागू किया गया.
इस प्रोजेक्ट को बनाना एक शानदार अनुभव रहा. इससे Goodnotes को बहुत कुछ सीखने को मिला. इसलिए, नीचे दिए गए सेक्शन में वेब डेवलपमेंट और वेब असेंब्ली के इस्तेमाल के बारे में दिलचस्प तकनीकी बातों पर फ़ोकस किया जाएगा. साथ ही, Swift जैसी भाषाओं के बारे में भी बताया जाएगा.
शुरुआती रुकावटें
इस प्रोजेक्ट पर काम करना कई मायनों में बहुत मुश्किल था. टीम को पहली समस्या SwiftWasm टूलचेन से जुड़ी मिली. टूलचेन, टीम के लिए बहुत मददगार साबित हुआ. हालांकि, iOS का हर कोड, Wasm के साथ काम नहीं करता. उदाहरण के लिए, आईओ या यूज़र इंटरफ़ेस (यूआई) से जुड़ा कोड, फिर से इस्तेमाल नहीं किया जा सकता. जैसे, व्यू लागू करना, एपीआई क्लाइंट या डेटाबेस का ऐक्सेस. इसलिए, टीम को ऐप्लिकेशन के कुछ हिस्सों को फिर से तैयार करना पड़ा, ताकि उन्हें क्रॉस-प्लैटफ़ॉर्म समाधान से फिर से इस्तेमाल किया जा सके. टीम ने जो ज़्यादातर पीआर बनाए थे वे एब्स्ट्रैक्ट डिपेंडेंसी के लिए रीफ़ैक्टर थे, ताकि टीम बाद में डिपेंडेंसी इंजेक्शन या मिलती-जुलती अन्य रणनीतियों का इस्तेमाल करके उन्हें बदल सके. iOS कोड में, मूल रूप से रॉ बिज़नेस लॉजिक को इनपुट/आउटपुट और यूज़र इंटरफ़ेस के लिए ज़रूरी कोड के साथ मिलाया गया था. इनपुट/आउटपुट और यूज़र इंटरफ़ेस के लिए ज़रूरी कोड को Wasm में लागू नहीं किया जा सकता, क्योंकि Wasm इनमें से किसी भी सुविधा के साथ काम नहीं करता. इसलिए, Swift के कारोबारी लॉजिक को प्लैटफ़ॉर्म के बीच फिर से इस्तेमाल करने के लिए तैयार होने के बाद, आईओ और यूज़र इंटरफ़ेस (यूआई) को TypeScript में फिर से लागू करना ज़रूरी था.
परफ़ॉर्मेंस से जुड़ी समस्याएं हल हो गईं
Goodnotes ने एडिटर पर काम करना शुरू करने के बाद, टीम को एडिटिंग के अनुभव से जुड़ी कुछ समस्याओं का पता चला. साथ ही, हमारे रोडमैप में तकनीकी समस्याओं से जुड़ी चुनौतियां भी आ गईं. पहली समस्या, परफ़ॉर्मेंस से जुड़ी थी. JavaScript एक सिंगल-थ्रेड वाली भाषा है. इसका मतलब है कि इसमें एक कॉल स्टैक और एक मेमोरी हेप है. यह कोड को क्रम से चलाता है और अगले कोड पर जाने से पहले, एक कोड को पूरा चलाना ज़रूरी है. यह सिंक होता है, लेकिन कभी-कभी यह नुकसान पहुंचा सकता है. उदाहरण के लिए, अगर किसी फ़ंक्शन को लागू होने में कुछ समय लगता है या उसे किसी चीज़ का इंतज़ार करना पड़ता है, तो इस दौरान वह सब कुछ फ़्रीज़ कर देता है. इंजीनियरों को इसी समस्या को हल करना था. रेंडरिंग लेयर या अन्य जटिल एल्गोरिदम से जुड़े हमारे कोडबेस में कुछ खास पाथ का आकलन करना, टीम के लिए एक समस्या थी. ऐसा इसलिए, क्योंकि ये एल्गोरिदम सिंक्रोनस थे और इन्हें लागू करने से मुख्य थ्रेड ब्लॉक हो रही थी. Goodnotes की टीम ने उन्हें तेज़ बनाने के लिए फिर से लिखा है. साथ ही, कुछ को असाइनोक्रोनस बनाने के लिए फिर से तैयार किया है. उन्होंने एक ऐसी रणनीति भी शुरू की है जिससे ऐप्लिकेशन, एल्गोरिदम को लागू करने की प्रोसेस को रोक सकता है और बाद में उसे फिर से शुरू कर सकता है. इससे ब्राउज़र, यूज़र इंटरफ़ेस (यूआई) को अपडेट कर पाता है और फ़्रेम ड्रॉप होने से बचता है. हालांकि, iOS ऐप्लिकेशन के लिए यह समस्या नहीं थी, क्योंकि यह थ्रेड का इस्तेमाल कर सकता है और बैकग्राउंड में इन एल्गोरिदम का आकलन कर सकता है. इस दौरान, iOS की मुख्य थ्रेड, यूज़र इंटरफ़ेस को अपडेट करती है.
इंजीनियरिंग टीम को एक और समस्या हल करनी थी. यह समस्या यह थी कि डीओएम से जुड़े एचटीएमएल एलिमेंट पर आधारित यूज़र इंटरफ़ेस (यूआई) को, फ़ुल-स्क्रीन कैनवस पर आधारित दस्तावेज़ यूआई में माइग्रेट करना था. इस प्रोजेक्ट ने किसी भी दूसरे वेब पेज की तरह, एचटीएमएल एलिमेंट का इस्तेमाल करके, किसी दस्तावेज़ से जुड़े सभी नोट और कॉन्टेंट को DOM स्ट्रक्चर के हिस्से के तौर पर दिखाना शुरू किया. हालांकि, बाद में इसे फ़ुल-स्क्रीन कैनवस पर माइग्रेट कर दिया गया, ताकि ब्राउज़र को DOM अपडेट पर काम करने में लगने वाले समय को कम करके, कम-एंड डिवाइसों पर परफ़ॉर्मेंस को बेहतर बनाया जा सके.
इंजीनियरिंग टीम ने इन बदलावों की पहचान की है. अगर ये बदलाव प्रोजेक्ट की शुरुआत में किए गए होते, तो हो सकता है कि कुछ समस्याओं को कम किया जा सकता था.
- ज़्यादा काम करने वाले एल्गोरिदम के लिए, वेब वर्कर्स का बार-बार इस्तेमाल करके, मुख्य थ्रेड को ज़्यादा ऑफ़लोड करें.
- शुरुआत से ही, JS-Swift इंटरऑपरेबल लाइब्रेरी के बजाय, एक्सपोर्ट किए गए और इंपोर्ट किए गए फ़ंक्शन का इस्तेमाल करें. इससे, Wasm कॉन्टेक्स्ट से बाहर निकलने पर परफ़ॉर्मेंस पर पड़ने वाले असर को कम किया जा सकता है. यह JavaScript इंटरऑप लाइब्रेरी, DOM या ब्राउज़र का ऐक्सेस पाने में मदद करती है. हालांकि, यह नेटिव Wasm एक्सपोर्ट किए गए फ़ंक्शन से धीमी होती है.
- पक्का करें कि कोड में,
OffscreenCanvasका इस्तेमाल करने की अनुमति हो. इससे ऐप्लिकेशन, मुख्य थ्रेड को ऑफ़लोड कर सकता है और नोट लिखते समय, Canvas API के सभी इस्तेमाल को वेब वर्कर्स पर ले जा सकता है. इससे ऐप्लिकेशन की परफ़ॉर्मेंस बेहतर होती है. - Wasm से जुड़े सभी एक्सीक्यूशन को वेब वर्कर्स या वेब वर्कर्स के पूल में ले जाएं, ताकि ऐप्लिकेशन मुख्य थ्रेड के वर्कलोड को कम कर सके.
टेक्स्ट एडिटर
एक और दिलचस्प समस्या, टेक्स्ट एडिटर टूल से जुड़ी थी.
इस टूल को iOS पर इस्तेमाल करने के लिए, NSAttributedString का इस्तेमाल किया जाता है. यह एक छोटा टूलसेट है, जो RTF का इस्तेमाल करता है. हालांकि, यह तरीका SwiftWasm के साथ काम नहीं करता. इसलिए, क्रॉस-प्लैटफ़ॉर्म टीम को सबसे पहले RTF ग्रैमर के आधार पर एक कस्टम पार्सर बनाना पड़ा. इसके बाद, RTF को HTML में बदलकर और इसके उलट, एडिट करने की सुविधा को लागू किया गया. इस बीच, iOS टीम ने इस टूल को नए तरीके से लागू करने पर काम करना शुरू कर दिया है. इसके लिए, आरटीएफ़ के इस्तेमाल को कस्टम मॉडल से बदल दिया गया है, ताकि ऐप्लिकेशन एक ही Swift कोड को शेयर करने वाले सभी प्लैटफ़ॉर्म के लिए, स्टाइल वाले टेक्स्ट को आसानी से दिखा सके.
यह प्रोजेक्ट के रोडमैप में सबसे दिलचस्प पॉइंट था, क्योंकि इसे उपयोगकर्ता की ज़रूरतों के आधार पर बार-बार हल किया गया था. यह एक ऐसी इंजीनियरिंग समस्या थी जिसे उपयोगकर्ताओं के हिसाब से तैयार किए गए तरीके का इस्तेमाल करके हल किया गया. इसमें टेक्स्ट को रेंडर करने के लिए, टीम को कोड का कुछ हिस्सा फिर से लिखना पड़ा. इससे, वे दूसरी रिलीज़ में टेक्स्ट में बदलाव करने की सुविधा चालू कर पाए.
बार-बार रिलीज़ करना
पिछले दो सालों में, इस प्रोजेक्ट में काफ़ी बदलाव हुए हैं. टीम ने प्रोजेक्ट के रीड-ओनली वर्शन पर काम करना शुरू किया. इसके कुछ महीने बाद, टीम ने एडिटिंग की कई सुविधाओं के साथ एक नया वर्शन लॉन्च किया. प्रोडक्शन में कोड में किए गए बदलावों को बार-बार रिलीज़ करने के लिए, टीम ने सुविधा के फ़्लैग का ज़्यादा से ज़्यादा इस्तेमाल करने का फ़ैसला लिया. हर रिलीज़ के लिए, टीम नई सुविधाएं चालू कर सकती है. साथ ही, नई सुविधाओं को लागू करने के लिए कोड में बदलाव करके, उन्हें रिलीज़ भी कर सकती है. उपयोगकर्ता को ये सुविधाएं हफ़्तों बाद दिखेंगी. हालांकि, टीम को लगता है कि कुछ चीज़ों को बेहतर किया जा सकता था! उनकी राय है कि डाइनैमिक सुविधा फ़्लैग सिस्टम को लॉन्च करने से, प्रोसेस को तेज़ करने में मदद मिलती. ऐसा इसलिए, क्योंकि इससे फ़्लैग की वैल्यू बदलने के लिए, फिर से डिप्लॉय करने की ज़रूरत नहीं पड़ती. इससे, Goodnotes को ज़्यादा सुविधाएं मिलेंगी. साथ ही, नई सुविधा को तेज़ी से डिप्लॉय किया जा सकेगा. ऐसा इसलिए, क्योंकि Goodnotes को प्रोजेक्ट डिप्लॉयमेंट को प्रॉडक्ट रिलीज़ से लिंक करने की ज़रूरत नहीं होगी.
ऑफ़लाइन काम करना
टीम ने ऑफ़लाइन सहायता की सुविधा पर काम किया है. इस तरह के किसी भी ऐप्लिकेशन से, अपने दस्तावेज़ों में बदलाव करने की सुविधा मिलनी चाहिए. हालांकि, यह सुविधा आसान नहीं है, क्योंकि Goodnotes में साथ मिलकर काम करने की सुविधा उपलब्ध है. इसका मतलब है कि अलग-अलग उपयोगकर्ताओं ने अलग-अलग डिवाइसों पर जो बदलाव किए हैं वे सभी डिवाइसों पर लागू हो जाएंगे. इसके लिए, उपयोगकर्ताओं को किसी भी तरह के बदलाव को ठीक करने के लिए नहीं कहा जाएगा. Goodnotes ने इस समस्या को हल करने के लिए, सीआरडीटी का इस्तेमाल किया है. Goodnotes, कॉन्फ़्लिक्ट-फ़्री डुप्लीकेट डेटा टाइप की मदद से, किसी भी उपयोगकर्ता के किसी भी दस्तावेज़ में किए गए सभी बदलावों को एक साथ जोड़ सकता है. साथ ही, बिना किसी कॉन्फ़्लिक्ट के बदलावों को मर्ज कर सकता है. वेब ब्राउज़र के लिए उपलब्ध स्टोरेज और IndexedDB का इस्तेमाल, वेब पर साथ मिलकर काम करने के ऑफ़लाइन अनुभव को बेहतर बनाने में काफ़ी मददगार साबित हुआ.
इसके अलावा, Goodnotes वेब ऐप्लिकेशन खोलने पर, Wasm बाइनरी साइज़ की वजह से, डाउनलोड करने के लिए शुरुआती तौर पर करीब 40 एमबी का शुल्क देना पड़ता है. शुरुआत में, Goodnotes की टीम अपने ऐप्लिकेशन बंडल और इस्तेमाल किए जाने वाले ज़्यादातर एपीआई एंडपॉइंट के लिए, सिर्फ़ ब्राउज़र की कैश मेमोरी पर निर्भर थी. हालांकि, अब उन्हें लगता है कि वे पहले ही Cache API और सेवा वर्कर का इस्तेमाल कर सकते थे, जो ज़्यादा भरोसेमंद हैं. टीम को शुरू में इस काम को मुश्किल लग रहा था, लेकिन आखिर में उन्हें पता चला कि Workbox की मदद से यह काम आसानी से किया जा सकता है.
वेब पर Swift का इस्तेमाल करते समय मिलने वाले सुझाव
अगर आपके पास ऐसा iOS ऐप्लिकेशन है जिसमें बहुत सारा कोड है और आपको उसका फिर से इस्तेमाल करना है, तो तैयार हो जाएं क्योंकि आपको एक बेहतरीन अनुभव मिलने वाला है. शुरू करने से पहले, यहां दी गई कुछ सलाह देखें.
- देखें कि आपको किस कोड का फिर से इस्तेमाल करना है. अगर आपके ऐप्लिकेशन का बिज़नेस लॉजिक, सर्वर साइड पर लागू किया गया है, तो हो सकता है कि आपको अपने यूज़र इंटरफ़ेस (यूआई) कोड का फिर से इस्तेमाल करना हो. ऐसे में, Wasm की मदद नहीं मिलेगी. टीम ने Tokamak को कुछ समय के लिए आज़माया. यह SwiftUI के साथ काम करने वाला एक फ़्रेमवर्क है, जिसका इस्तेमाल करके वेब असेंब्ली की मदद से ब्राउज़र ऐप्लिकेशन बनाए जा सकते हैं. हालांकि, यह ऐप्लिकेशन की ज़रूरतों के हिसाब से पूरी तरह तैयार नहीं था. हालांकि, अगर आपके ऐप्लिकेशन में क्लाइंट कोड के हिस्से के तौर पर, कारोबारी नियम या एल्गोरिदम लागू किए गए हैं, तो Wasm आपका सबसे अच्छा साथी होगा.
- पक्का करें कि आपका Swift कोडबेस तैयार हो. यूज़र इंटरफ़ेस लेयर या खास आर्किटेक्चर के लिए सॉफ़्टवेयर डिज़ाइन पैटर्न, आपके यूज़र इंटरफ़ेस लॉजिक और कारोबारी लॉजिक के बीच काफ़ी फ़र्क़ पैदा करते हैं. ये पैटर्न आपके लिए काफ़ी काम के साबित होंगे, क्योंकि यूज़र इंटरफ़ेस लेयर को फिर से लागू नहीं किया जा सकता. क्लीन आर्किटेक्चर या हेक्सागॉनल आर्किटेक्चर के सिद्धांत भी ज़रूरी होंगे, क्योंकि आपको आईओ से जुड़े सभी कोड के लिए, डिपेंडेंसी को इंजेक्ट और उपलब्ध कराना होगा. ऐसा करना तब आसान होगा, जब इन आर्किटेक्चर का पालन किया जाए. इनमें लागू करने की जानकारी को एब्स्ट्रैक्शन के तौर पर बताया जाता है और डिपेंडेंसी इनवर्ज़न सिद्धांत का ज़्यादा इस्तेमाल किया जाता है.
- Wasm, यूज़र इंटरफ़ेस (यूआई) कोड नहीं देता. इसलिए, यह तय करें कि आपको वेब के लिए किस यूज़र इंटरफ़ेस (यूआई) फ़्रेमवर्क का इस्तेमाल करना है.
- JSKit की मदद से, अपने Swift कोड को JavaScript के साथ इंटिग्रेट किया जा सकता है. हालांकि, अगर आपके पास कोई हॉटपाथ है, तो हो सकता है कि JS–Swift ब्रिज को क्रॉस करना महंगा हो. ऐसे में, आपको इसे एक्सपोर्ट किए गए फ़ंक्शन से बदलना होगा. आधिकारिक दस्तावेज़ और Swift में डाइनैमिक मेंबर लुकअप, एक छिपा हुआ रत्न! पोस्ट में, JSKit के काम करने के तरीके के बारे में ज़्यादा जानें.
- आर्किटेक्चर का फिर से इस्तेमाल किया जा सकता है या नहीं, यह इस बात पर निर्भर करता है कि आपका ऐप्लिकेशन किस आर्किटेक्चर का इस्तेमाल करता है और ऐसिंक कोड को लागू करने के लिए, किस लाइब्रेरी का इस्तेमाल किया जाता है. MVVP या कॉम्पोज़ेबल आर्किटेक्चर जैसे पैटर्न का इस्तेमाल करके, अपने व्यू मॉडल और यूज़र इंटरफ़ेस (यूआई) लॉजिक के कुछ हिस्से का फिर से इस्तेमाल किया जा सकता है. ऐसा करने के लिए, UIKit की उन डिपेंडेंसी का इस्तेमाल नहीं करना होगा जिनका इस्तेमाल Wasm के साथ नहीं किया जा सकता. ऐसा हो सकता है कि RXSwift और अन्य लाइब्रेरी, Wasm के साथ काम न करें. इसलिए, इस बात का ध्यान रखें, क्योंकि आपको Goodnotes के Swift कोड में OpenCombine, async/await, और स्ट्रीम का इस्तेमाल करना होगा.
- gzip या brotli का इस्तेमाल करके, Wasm बाइनरी को कंप्रेस करें. ध्यान रखें कि क्लासिक वेब ऐप्लिकेशन के लिए, बाइनरी का साइज़ काफ़ी बड़ा होगा.
- भले ही, पीडब्ल्यूए के बिना भी Wasm का इस्तेमाल किया जा सकता है, लेकिन पक्का करें कि आपने कम से कम एक सेवा वर्कर शामिल किया हो. भले ही, आपके वेब ऐप्लिकेशन में कोई मेनिफ़ेस्ट न हो या आपको उपयोगकर्ता को इसे इंस्टॉल न कराना हो. सेवा वर्कर, Wasm बाइनरी और ऐप्लिकेशन के सभी संसाधनों को बिना किसी शुल्क के सेव और उपलब्ध कराएगा. इससे उपयोगकर्ता को हर बार आपका प्रोजेक्ट खोलने पर, उन्हें डाउनलोड करने की ज़रूरत नहीं पड़ेगी.
- ध्यान रखें कि कर्मचारियों को भर्ती करना, उम्मीद से ज़्यादा मुश्किल हो सकता है. आपको Swift के कुछ अनुभव वाले बेहतरीन वेब डेवलपर या वेब के कुछ अनुभव वाले बेहतरीन Swift डेवलपर को काम पर रखना पड़ सकता है. अगर आपको ऐसे सामान्य इंजीनियर मिलें जिनके पास दोनों प्लैटफ़ॉर्म के बारे में कुछ जानकारी हो, तो यह बहुत बढ़िया होगा
मीटिंग में सामने आए नतीजे
चुनौतियों से भरे प्रॉडक्ट पर काम करते समय, जटिल टेक्नोलॉजी स्टैक का इस्तेमाल करके वेब प्रोजेक्ट बनाना एक शानदार अनुभव है. यह मुश्किल होगा, लेकिन इसका फ़ायदा ज़रूर मिलेगा. इस तरीके का इस्तेमाल किए बिना, Goodnotes iOS ऐप्लिकेशन के लिए नई सुविधाओं पर काम करते हुए, Windows, Android, ChromeOS, और वेब के लिए कोई वर्शन कभी रिलीज़ नहीं कर सकता था. इस टेक्नोलॉजी स्टैक और Goodnotes की इंजीनियरिंग टीम की मदद से, Goodnotes अब हर जगह उपलब्ध है. साथ ही, टीम अगली चुनौतियों पर काम जारी रखने के लिए तैयार है! अगर आपको इस प्रोजेक्ट के बारे में ज़्यादा जानना है, तो NSSpain 2023 में Goodnotes टीम की ओर से दी गई बातचीत देखें. Goodnotes for web को ज़रूर आज़माएं!