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

जानें कि Excalidraw प्रोजेक्ट ने वेब वर्शन के पक्ष में, अपने Electron wrapper को बंद करने का फ़ैसला क्यों लिया.

Thomas Steiner

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

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

Excalidraw डेस्कटॉप कैसे बनाया गया

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

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

@voluntadpear ने तुरंत यह सुझाव दिया:

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

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

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

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

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

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

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

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

Excalidraw डेस्कटॉप को कहां छोड़ा था

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

Excalidraw के डेस्कटॉप वर्शन और वेब वर्शन में काफ़ी कम अंतर है

Excalibur के बारे में जानकारी मेन्यू, वर्शन के बारे में अहम जानकारी देता है

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

macOS पर Excalidraw Desktop का मेन्यू बार

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

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

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

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

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

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

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

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

Excalidraw की कैश मेमोरी में सेव किया गया कॉन्टेंट

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

Chrome में Excalidraw इंस्टॉल करने के लिए डायलॉग बॉक्स

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

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

macOS डॉक पर Excalidraw का आइकॉन

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

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

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

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

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

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

क्लिपबोर्ड से जुड़ी कार्रवाइयां करने की सुविधा देने वाला Excalidraw का संदर्भ मेन्यू

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

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

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

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

नतीजा

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

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

स्वीकार की गई

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