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

जानें कि Excalidraw प्रोजेक्ट ने अपने इलेक्ट्रोन रैपर को बंद करने का फ़ैसला क्यों किया और इसकी मदद से वेब का इस्तेमाल ज़्यादा किया वर्शन है.

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

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

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

Electronicn (या इसके बराबर) में Excalidraw को रैप करना और इसे [platform-specific] के रूप में प्रकाशित करना बहुत अच्छा होगा ऐप्लिकेशन स्टोर पर आसानी से लागू किए जा सकते हैं.

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

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

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

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

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

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

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

इलेक्ट्रॉन की खास बात यह है कि इससे आप अपने फ़ोन पर " JavaScript, एचटीएमएल, और सीएसएस वाले क्रॉस-प्लैटफ़ॉर्म डेस्कटॉप ऐप्लिकेशन". Electronicn से बने ऐप्लिकेशन "Mac, Windows, और Linux के साथ काम करता है", इसका मतलब है कि "इलेक्ट्रॉन ऐप्लिकेशन तीन कंप्यूटर पर बनते हैं और चलते हैं" प्लैटफ़ॉर्म" में बदल दिया जाता है. होम पेज के हिसाब से, 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].

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

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

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

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

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

macOS पर 'फ़ाइल' और 'विंडो बंद करें' के साथ, 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 डेस्कटॉप पर निवेश कर रहा है. हालांकि, हमारे लिए बड़ा तर्क यह था कि हम यह अनुमान लगाते हैं कि हमारे उपयोग के उदाहरण के लिए, हमें Electron ऑफ़र की सभी सुविधाओं की आवश्यकता नहीं है. वह सेट अगर हम बेहतर नहीं हुआ, तो बेहतर ढंग से काम करने में हमें मदद मिलेगी.

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

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

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

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

Chrome DevTools ऐप्लिकेशन टैब, जिसमें Excalidraw कैश मेमोरी दिख रही है.
Excalidraw का कैश कॉन्टेंट

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

Excalidraw, उपयोगकर्ता को macOS पर Chrome में ऐप्लिकेशन इंस्टॉल करने का प्रॉम्प्ट दे रहा है.
Chrome में Excalidraw इंस्टॉल करने का डायलॉग

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

अपनी खुद की खिड़की में दौड़ता हुआ एक्सकैलिड्रॉ.
एक स्टैंडअलोन विंडो में Excalidraw PWA का इस्तेमाल करें
macOS Dock पर Excalidraw आइकॉन.
macOS Dock पर Excalidraw आइकॉन

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

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

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

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

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

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

Excalidraw संदर्भ मेन्यू, 'क्लिपबोर्ड पर SVG के रूप में कॉपी करें' दिखा रहा है और 'png के रूप में क्लिपबोर्ड पर कॉपी करें' मेन्यू आइटम.
Excalidraw कॉन्टेक्स्ट मेन्यू, जिसमें क्लिपबोर्ड पर कार्रवाइयां करने की सुविधा मिलती है

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

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

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

नतीजा

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

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

स्वीकार की गई

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