वेब वर्शन के पक्ष में Excalidraw Electron का इस्तेमाल बंद करना

जानें कि Excalidraw प्रोजेक्ट ने वेब वर्शन के लिए, अपने इलेक्ट्रॉन रैपर को बंद क्यों किया.

Thomas Steiner

ध्यान दें: Excalidraw एक वर्चुअल व्हाइटबोर्ड है, जो मिलकर काम करने की सुविधा देता है. इसकी मदद से, हाथ से बने डायग्राम को आसानी से स्केच किया जा सकता है. यह लेख क्रॉस-पोस्ट किया गया था और पहली बार Excalidraw ब्लॉग पर दिखा था.

Excalidraw प्रोजेक्ट में, हमने Excalidraw के लिए Electron रैपर Excalidraw डेस्कटॉप को बंद करने का फ़ैसला किया है, जो कि excalidraw.com पर मिल सकता है और हमेशा किया जा सकता है. बारीकी से विश्लेषण करने के बाद, हमने यह फ़ैसला लिया है कि यह आने वाले समय में प्रोग्रेसिव वेब ऐप्लिकेशन (PWA) बनाना है. ऐसा क्यों है, जानने के लिए आगे पढ़ें.

Excalidraw डेस्कटॉप की शुरुआत कैसे हुई

इसके तुरंत बाद, @vjeux ने जनवरी 2020 में Excalidraw का शुरुआती वर्शन बनाने और इसके बारे में ब्लॉग करने के बाद, समस्या #561 में यह सुझाव दिया:

Excalidraw को Electron (या इसके बराबर) में रैप करके अलग-अलग ऐप स्टोर में इसे [प्लैटफ़ॉर्म के हिसाब से] ऐप्लिकेशन के तौर पर पब्लिश कर दें.

@voluntadpear ने तुरंत यह प्रतिक्रिया दी कि:

इसके बजाय, इसे PWA बनाने के बारे में क्या ख्याल है? Android फ़िलहाल उन्हें Play Store में भरोसेमंद वेब गतिविधियों के रूप में जोड़ने की सुविधा देता है और हमें उम्मीद है कि जल्द ही iOS भी यही काम करेगा. डेस्कटॉप पर, Chrome आपको PWA का डेस्कटॉप शॉर्टकट डाउनलोड करने की सुविधा देता है.

आखिर में @vjeux ने जो फ़ैसला लिया वह बहुत आसान था:

हमें दोनों काम करने चाहिए :)

Excalidraw के वर्शन को PWA में बदलने का काम @voluntadpear ने शुरू किया था और बाद में कुछ अन्य लोगों ने @lipis ने स्वतंत्र रूप से आगे बढ़कर Excalidraw डेस्कटॉप के लिए एक अलग रेपो बनाया.

आज तक, @vjeux ने अलग-अलग ऐप स्टोर पर Excalidraw को सबमिट करने का जो शुरुआती लक्ष्य तय किया है वह अभी तक पूरा नहीं हुआ है. सच तो यह है कि किसी ने भी किसी भी स्टोर में सबमिट करने की प्रक्रिया शुरू नहीं की है. लेकिन ऐसा क्यों? जवाब देने से पहले, चलिए प्लैटफ़ॉर्म Electron को देखते हैं.

इलेक्ट्रॉन क्या है?

Electron की खास बात यह है कि इसकी मदद से "JavaScript, एचटीएमएल, और सीएसएस की मदद से क्रॉस-प्लैटफ़ॉर्म डेस्कटॉप ऐप्लिकेशन बनाए जा सकते हैं". Electron की मदद से बनाए गए ऐप्लिकेशन "Mac, Windows, और Linux के साथ काम करते हैं". इसका मतलब है कि "Electron ऐप्लिकेशन तीन प्लैटफ़ॉर्म पर चलते और चलते हैं". होम पेज के मुताबिक, अपने-आप होने वाले अपडेट, सिस्टम-लेवल के मेन्यू और सूचनाएं, क्रैश रिपोर्टिंग, डीबग और प्रोफ़ाइलिंग, और Windows इंस्टॉलर जो मुश्किल काम करते हैं वे Electron को आसान बना सकते हैं. उम्मीद है कि उन सुविधाओं के छोटे वर्शन में भी विस्तार से जानकारी देने की ज़रूरत होगी.

• उदाहरण के लिए, अपने-आप अपडेट होने की सुविधा "macOS और Windows पर [फ़िलहाल] सिर्फ़ [काम करती] है. Linux पर अपने-आप अपडेट होने की सुविधा के लिए, पहले से मौजूद कोई सुविधा उपलब्ध नहीं है. इसलिए, हमारा सुझाव है कि आप ऐप्लिकेशन को अपडेट करने के लिए, डिस्ट्रिब्यूशन के पैकेज मैनेजर का इस्तेमाल करें".

• डेवलपर, Menu.setApplicationMenu(menu) को कॉल करके सिस्टम-लेवल के मेन्यू बना सकते हैं. Windows और Linux पर, मेन्यू को हर विंडो के टॉप मेन्यू के तौर पर सेट किया जाएगा. वहीं, macOS पर, सिस्टम की ओर से तय किए गए कई स्टैंडर्ड मेन्यू उपलब्ध होंगे, जैसे कि सेवा मेन्यू. किसी मेन्यू को स्टैंडर्ड मेन्यू बनाने के लिए, डेवलपर को उसके मेन्यू के हिसाब से role सेट करना होगा. इसके बाद, Electron उन्हें पहचान कर स्टैंडर्ड मेन्यू बना देगा. इसका मतलब है कि मेन्यू से जुड़े कई कोड, प्लैटफ़ॉर्म की इस जांच का इस्तेमाल करेंगे: const isMac = process.platform === 'darwin'.

• Windows इंस्टॉलर, windows-installer की मदद से बनाए जा सकते हैं. प्रोजेक्ट की README में यह बताया गया है कि "प्रोडक्शन ऐप्लिकेशन के लिए, आपको अपने ऐप्लिकेशन पर हस्ताक्षर करने होंगे. Internet Explorer का SmartScreen फ़िल्टर, आपके ऐप्लिकेशन को डाउनलोड होने से रोक देगा. साथ ही, कई एंटी-वायरस वेंडर आपके ऐप्लिकेशन को तब तक मैलवेयर मानेंगे, जब तक कि आपको मान्य सर्टिफ़िकेट नहीं मिल जाता" [sic].

सिर्फ़ इन तीन उदाहरणों को देखकर, यह साफ़ तौर पर पता चलता है कि इलेक्ट्रॉन "एक बार लिखें, हर जगह दौड़ें" से बहुत दूर है. किसी ऐप्लिकेशन को ऐप स्टोर पर लोगों तक पहुंचाने के लिए, कोड साइनिंग की ज़रूरत होती है. यह ऐप्लिकेशन के मालिकाना हक की पुष्टि करने के लिए एक सुरक्षा टेक्नोलॉजी है. ऐप्लिकेशन की पैकेजिंग करने के लिए, electron-forge जैसे टूल इस्तेमाल करने ज़रूरी होते हैं. साथ ही, इस बारे में भी सोचना होता है कि ऐप्लिकेशन के अपडेट के लिए पैकेज कहां होस्ट करें. हालांकि, यह बहुत जल्दी मुश्किल हो जाता है, खासकर तब, जब मकसद का मकसद क्रॉस प्लैटफ़ॉर्म पर सहायता देना हो. मैं ध्यान देना चाहता हूं कि काफ़ी मेहनत और लगन से शानदार Electron ऐप्लिकेशन बनाना बहुत ही संभव है. Excalidraw डेस्कटॉप के लिए, हम इस प्लैटफ़ॉर्म पर उपलब्ध नहीं थे.

Excalidraw डेस्कटॉप ने कहां बंद किया था

अब तक का Excalidraw डेस्कटॉप, मूल रूप से Excalidraw वेब ऐप्लिकेशन है. इसे .asar फ़ाइल के तौर पर बंडल किया गया है, जिसमें Excalidraw के बारे में विंडो है. इस ऐप्लिकेशन का लुक और स्टाइल, काफ़ी हद तक वेब वर्शन जैसा ही होता है.

Excalidraw डेस्कटॉप और वेब वर्शन को इतना ही पहचाना जा सकता है

एक्सकैलिबर के बारे में जानकारी मेन्यू, जो वर्शन के बारे में अहम जानकारी देता है

macOS पर, अब ऐप्लिकेशन में सबसे ऊपर एक सिस्टम-लेवल मेन्यू होता है. हालांकि, Closed Window और About Excalidraw के अलावा, कोई भी मेन्यू नहीं होता है. इसलिए, मेन्यू अपनी मौजूदा स्थिति में किसी काम का नहीं होता. हालांकि, सभी कार्रवाइयां सामान्य Excalidraw टूलबार और संदर्भ मेन्यू के ज़रिए की जा सकती हैं.

macOS पर Excalidraw डेस्कटॉप का मेन्यू बार

हम इलेक्ट्रॉन-बिल्डर का इस्तेमाल करते हैं, जो फ़ाइल टाइप असोसिएशन के साथ काम करता है. किसी .excalidraw फ़ाइल पर दो बार क्लिक करने पर, Excalidraw डेस्कटॉप ऐप्लिकेशन खुल जाएगा. हमारी electron-builder.json फ़ाइल से लिया गया हिस्सा ऐसा दिखता है:

{
  "fileAssociations": [
    {
      "ext": "excalidraw",
      "name": "Excalidraw",
      "description": "Excalidraw file",
      "role": "Editor",
      "mimeType": "application/json"
    }
  ]
}

माफ़ करें, व्यावहारिक तौर पर, यह हमेशा सही तरीके से काम नहीं करता है, क्योंकि इंस्टॉल करने के टाइप (मौजूदा उपयोगकर्ता के लिए, सभी उपयोगकर्ताओं के लिए) के आधार पर, Windows 10 पर मौजूद ऐप्लिकेशन को खुद से फ़ाइल टाइप जोड़ने का अधिकार नहीं होता है.

इन कमियों और सभी प्लैटफ़ॉर्म पर अनुभव को ऐप्लिकेशन जैसा बनाने के लिए किया गया बाकी काम (जो एक बार फिर, काफ़ी कोशिश करने के बाद भी किया जा सकता है), हमारे लिए Excalidraw Desktop में निवेश करने के बारे में फिर से विचार करने के लिए बहुत मायने रखते थे. हालांकि, हमारे बीच एक बड़ा तर्क यह था कि हमारे इस्तेमाल के उदाहरण में, हमें Electron की सभी सुविधाओं की ज़रूरत नहीं पड़ती. वेब की क्षमताओं का बढ़ता हुआ और अब भी बढ़ रहा है. अगर इससे बेहतर न हो, तो हम भी उतना ही बेहतर तरीके से हमारी मदद कर पाते हैं.

आज और आने वाले समय में, वेब की मदद से हमें किस तरह की सेवा मिलेगी

साल 2020 में भी, jQuery अब भी बहुत लोकप्रिय है. कई डेवलपर की इसे इस्तेमाल करने की आदत बन चुकी है. हालांकि, आज-कल शायद उन्हें jQuery की ज़रूरत न पड़े. इलेक्ट्रॉन के लिए भी एक मिलता-जुलता संसाधन है. इसे यू माइट नॉट नीड इलेक्ट्रॉन कहते हैं. मुझे बताने दें कि हमें इलेक्ट्रॉन की ज़रूरत क्यों नहीं है.

इंस्टॉल किया जा सकने वाला प्रोग्रेसिव वेब ऐप्लिकेशन

मौजूदा समय में Excalidraw, सर्विस वर्कर और वेब ऐप्लिकेशन मेनिफ़ेस्ट वाला एक इंस्टॉल किया जा सकने वाला प्रोग्रेसिव वेब ऐप्लिकेशन है. यह अपने सभी रिसॉर्स को दो कैश मेमोरी में सेव करता है. पहला फ़ॉन्ट और फ़ॉन्ट से जुड़े सीएसएस के लिए है और दूसरा बाकी सभी के लिए.

Excalidraw की कैश मेमोरी का कॉन्टेंट

इसका मतलब है कि ऐप्लिकेशन पूरी तरह से ऑफ़लाइन है और बिना इंटरनेट के भी चल सकता है. डेस्कटॉप और मोबाइल, दोनों पर Chromium का इस्तेमाल करने वाले ब्राउज़र, लोगों को ऐप्लिकेशन इंस्टॉल करने का निर्देश देते हैं. नीचे दिए गए स्क्रीनशॉट में, इंस्टॉल करने का अनुरोध देखा जा सकता है.

Chrome में, Excalidraw इंस्टॉल डायलॉग

Excalidraw को एक स्टैंडअलोन ऐप्लिकेशन के तौर पर चलाने के लिए कॉन्फ़िगर किया गया है. इसलिए, इसे इंस्टॉल करने पर, आपको एक ऐसा ऐप्लिकेशन मिलेगा जो अपनी विंडो में चलता है. यह ऑपरेटिंग सिस्टम के मल्टीटास्किंग यूज़र इंटरफ़ेस (यूआई) में पूरी तरह से इंटिग्रेट किया गया है. होम स्क्रीन, डॉक या टास्क बार पर इसे अपना ऐप्लिकेशन आइकॉन मिलता है. यह उस प्लैटफ़ॉर्म पर निर्भर करता है जहां इसे इंस्टॉल किया जा रहा है.

स्टैंडअलोन विंडो में Excalidraw PWA

macOS Dock पर Excalidraw आइकॉन

फ़ाइल सिस्टम का ऐक्सेस

Excalidraw, ऑपरेटिंग सिस्टम के फ़ाइल सिस्टम को ऐक्सेस करने के लिए ब्राउज़र-fs-access का इस्तेमाल करता है. साथ काम करने वाले ब्राउज़र पर, इसकी मदद से सही, ओपन→बदलाव→वर्कफ़्लो और असल में ज़रूरत से ज़्यादा सेव करना और "इस रूप में सेव करें" की सुविधा मिलती है. साथ ही, दूसरे ब्राउज़र के लिए यह एक पारदर्शी फ़ॉलबैक भी देता है. इस सुविधा के बारे में ज़्यादा जानने के लिए, मेरी ब्लॉग पोस्ट पढ़ें ब्राउज़र-fs-access लाइब्रेरी की मदद से, फ़ाइलों और डायरेक्ट्री को पढ़ना और लिखना.

खींचें और छोड़ें सुविधा

प्लैटफ़ॉर्म के हिसाब से अलग-अलग ऐप्लिकेशन की तरह ही, फ़ाइलों को खींचकर Excalidraw विंडो पर छोड़ा जा सकता है. File System Access API के साथ काम करने वाले ब्राउज़र पर, छोड़ी गई फ़ाइल में तुरंत बदलाव किया जा सकता है. साथ ही, उन बदलावों को ओरिजनल फ़ाइल में सेव किया जा सकता है. यह इतना आसान है कि आप कभी-कभी भूल जाते हैं कि आप किसी वेब ऐप्लिकेशन का उपयोग कर रहे हैं.

क्लिपबोर्ड का ऐक्सेस

Excalidraw, ऑपरेटिंग सिस्टम के क्लिपबोर्ड के साथ सबसे अच्छी तरह काम करता है. पूरी Excalidraw ड्रॉइंग या सिर्फ़ अलग-अलग ऑब्जेक्ट को image/png और image/svg+xml फ़ॉर्मैट में कॉपी करके चिपकाया जा सकता है. इससे Inkscape जैसे दूसरे प्लैटफ़ॉर्म के खास टूल या SVGOMG जैसे वेब पर आधारित टूल के साथ आसानी से इंटिग्रेशन किया जा सकता है.

Excalidraw संदर्भ मेन्यू, जिसमें क्लिपबोर्ड पर कार्रवाइयां की जा सकती हैं

फ़ाइल मैनेज करना

Excalidraw पहले से ही प्रयोग के तौर पर काम करने वाले फ़ाइल हैंडलिंग एपीआई के साथ काम करता है. इसका मतलब है कि .excalidraw फ़ाइलों को ऑपरेटिंग सिस्टम के फ़ाइल मैनेजर में दो बार क्लिक किया जा सकता है और सीधे Excalidraw ऐप्लिकेशन में खोला जा सकता है, क्योंकि Excalidraw, ऑपरेटिंग सिस्टम में .excalidraw फ़ाइलों के लिए फ़ाइल हैंडलर के तौर पर रजिस्टर होता है.

डिक्लेरेटिव लिंक कैप्चर करना

एक्सकैलिड्रॉ ड्रॉइंग को लिंक की मदद से शेयर किया जा सकता है. यहां एक उदाहरण दिया गया है. आने वाले समय में, अगर लोगों ने Excalidraw को PWA के तौर पर इंस्टॉल किया है, तो ऐसे लिंक ब्राउज़र टैब में नहीं खुलेंगे, बल्कि एक नई स्टैंडअलोन विंडो लॉन्च होगी. इन्हें लागू करने के लिए, डिक्लेरेटिव लिंक कैप्चर करने की मदद ली जा सकती है.

नतीजा

वेब पर अब ऐसी बहुत सारी खूबियां आ रही हैं, जैसे कि ब्राउज़र में ऐसी नई सुविधाएं आ रही हैं जिनके बारे में सिर्फ़ कुछ साल या कुछ महीने पहले ही वेब पर सोचा भी नहीं जा सकता था. साथ ही, ये सुविधाएं खास तौर पर प्लैटफ़ॉर्म के लिए बने ऐप्लिकेशन के लिए थीं. ब्राउज़र में जो भी संभव है, उसमें Excalidraw सबसे आगे है. साथ ही, हम यह स्वीकार करते हैं कि सभी प्लैटफ़ॉर्म पर मौजूद सभी ब्राउज़र हमारे इस्तेमाल की जाने वाली हर सुविधा के साथ काम नहीं करते. इसे बेहतर बनाने के लिए, हम एक बेहतर रणनीति बनाते हुए सबसे नए और बेहतरीन कॉन्टेंट का आनंद लेते हैं. हालांकि, हम किसी को पीछे छोड़कर आगे नहीं बढ़ते. किसी भी ब्राउज़र में सबसे अच्छी तरह देखा गया.

Electron ने हमारे लिए अच्छी सेवा दी है, लेकिन 2020 और उसके बाद भी हम इसके बिना जी सकते हैं. साथ ही, @vjeux के इस मकसद के लिए: Android Play Store अब भरोसेमंद वेब गतिविधि नाम के कंटेनर फ़ॉर्मैट में PWA स्वीकार करता है. साथ ही, Microsoft Store, PWA की सुविधा देता है भी, इसलिए आप आने वाले समय में इन स्टोर में Excalidraw की उम्मीद कर सकते हैं. इस दौरान, आपके पास हमेशा ब्राउज़र में और ब्राउज़र से Excalidraw इस्तेमाल करने और इंस्टॉल करने का विकल्प होता है.

स्वीकार हैं

इस लेख की समीक्षा @lipis, @dwelle, और जो मेडली ने की है.