منسوخ شدن Excalidraw Electron به نفع نسخه وب

بیاموزید که چرا پروژه Excalidraw تصمیم گرفت که پوشش Electron خود را به نفع نسخه وب منسوخ کند.

Thomas Steiner

در پروژه Excalidraw ، ما تصمیم گرفته‌ایم که Excalidraw Desktop ، یک پوشش الکترونی برای Excalidraw را به نفع نسخه وب که می‌توانید و همیشه می‌توانید در excalidraw.com پیدا کنید، منسوخ کنیم. پس از تجزیه و تحلیل دقیق، ما تصمیم گرفتیم که برنامه وب پیشرو (PWA) آینده ای است که می خواهیم بر اساس آن بسازیم. ادامه مطلب را بخوانید تا بدانید چرا.

چگونه Excalidraw Desktop به وجود آمد

بلافاصله پس از اینکه @vjeux نسخه اولیه Excalidraw را در ژانویه 2020 ایجاد کرد و در مورد آن وبلاگ نویسی کرد ، موارد زیر را در شماره 561 پیشنهاد کرد:

بسیار عالی است که Excalidraw را درون Electron (یا معادل آن) قرار دهید و آن را به عنوان یک برنامه کاربردی [ویژه پلتفرم] در فروشگاه های برنامه مختلف منتشر کنید.

واکنش فوری توسط @voluntadpear این بود که پیشنهاد دهد:

در عوض آن را به یک PWA تبدیل کنیم؟ Android در حال حاضر از افزودن آنها به Play Store به عنوان Trusted Web Activities پشتیبانی می کند و امیدواریم iOS به زودی همین کار را انجام دهد. در دسک‌تاپ، Chrome به شما امکان می‌دهد میانبر دسک‌تاپ را به PWA دانلود کنید.

تصمیمی که @vjeux در پایان گرفت ساده بود:

ما باید هر دو رو انجام بدیم :)

در حالی که کار بر روی تبدیل نسخه Excalidraw به PWA توسط @voluntadpear و بعدها دیگران آغاز شد، @lipis به طور مستقل پیش رفت و یک مخزن جداگانه برای Excalidraw Desktop ایجاد کرد.

تا به امروز، هدف اولیه تعیین شده توسط @vjeux ، یعنی ارسال Excalidraw به فروشگاه های برنامه های مختلف، هنوز محقق نشده است. راستش را بخواهید، هیچ کس حتی فرآیند ارسال را به هیچ یک از فروشگاه ها شروع نکرده است. اما چرا اینطور است؟ قبل از پاسخ دادن، اجازه دهید به Electron، پلتفرم نگاه کنیم.

الکترون چیست؟

نقطه فروش منحصر به فرد Electron این است که به شما امکان می دهد "برنامه های دسکتاپ بین پلتفرمی را با جاوا اسکریپت، HTML و CSS بسازید" . برنامه های ساخته شده با Electron "سازگار با مک، ویندوز و لینوکس" هستند، یعنی "برنامه های الکترونیکی بر روی سه پلتفرم ساخته و اجرا می شوند" . طبق صفحه اصلی، بخش‌های سختی که Electron آسان می‌کند، به‌روزرسانی‌های خودکار ، منوها و اعلان‌ها در سطح سیستم ، گزارش خرابی ، اشکال‌زدایی و نمایه‌سازی و نصب‌کننده‌های ویندوز است. به نظر می رسد، برخی از ویژگی های وعده داده شده نیاز به نگاهی دقیق به چاپ کوچک دارند.

• برای مثال، به‌روزرسانی‌های خودکار "در حال حاضر فقط در macOS و Windows [پشتیبانی می‌شوند]. هیچ پشتیبانی داخلی برای به‌روزرسانی خودکار در لینوکس وجود ندارد، بنابراین توصیه می‌شود از مدیر بسته توزیع برای به‌روزرسانی برنامه خود استفاده کنید" .

• توسعه دهندگان می توانند با فراخوانی Menu.setApplicationMenu(menu) منوهای سطح سیستم ایجاد کنند. در ویندوز و لینوکس، منو به عنوان منوی بالای هر پنجره تنظیم می شود، در حالی که در macOS بسیاری از منوهای استاندارد تعریف شده توسط سیستم مانند منوی خدمات وجود دارد. برای تبدیل منوها به یک منوی استاندارد، توسعه دهندگان باید role منوی خود را بر این اساس تعیین کنند و Electron آنها را تشخیص داده و تبدیل به منوی استاندارد کند. این بدان معنی است که بسیاری از کدهای مرتبط با منو از بررسی پلتفرم زیر استفاده می کنند: const isMac = process.platform === 'darwin' .

• نصب کننده های ویندوز را می توان با windows-installer ساخت. README این پروژه تاکید می کند که "برای یک برنامه تولیدی باید برنامه خود را امضا کنید. فیلتر SmartScreen اینترنت اکسپلورر مانع از دانلود برنامه شما می شود و بسیاری از فروشندگان آنتی ویروس برنامه شما را به عنوان بدافزار در نظر می گیرند مگر اینکه گواهی معتبر دریافت کنید." [sic].

فقط با نگاهی به این سه مثال، واضح است که الکترون از "یک بار بنویس، همه جا اجرا شود" فاصله دارد. توزیع یک برنامه در فروشگاه های برنامه نیاز به امضای کد دارد، یک فناوری امنیتی برای تأیید مالکیت برنامه. بسته بندی یک برنامه مستلزم استفاده از ابزارهایی مانند الکترون فورج و فکر کردن در مورد محل میزبانی بسته ها برای به روز رسانی برنامه است. نسبتاً سریع پیچیده می شود، به خصوص زمانی که هدف واقعاً پشتیبانی از پلتفرم متقابل باشد. من می خواهم توجه داشته باشم که ایجاد برنامه های Electron خیره کننده با تلاش و تلاش کافی کاملاً امکان پذیر است. برای Excalidraw Desktop، ما آنجا نبودیم.

جایی که Excalidraw Desktop متوقف شد

Excalidraw Desktop تاکنون اساساً برنامه وب Excalidraw است که به عنوان یک فایل .asar همراه با یک پنجره درباره Excalidraw اضافه شده است. ظاهر و احساس برنامه تقریباً مشابه نسخه وب است.

در macOS، اکنون یک منوی سطح سیستم در بالای برنامه وجود دارد، اما از آنجایی که هیچ یک از عملکردهای منو - به غیر از Close Window و About Excalidraw - به هیچ چیز متصل نیست، منو در وضعیت فعلی خود زیبا است. بی فایده در همین حال، همه اقدامات را می توان از طریق نوار ابزار معمولی Excalidraw و منوی زمینه انجام داد.

ما از electron-builder استفاده می‌کنیم که از تداعی‌های نوع فایل پشتیبانی می‌کند. با دوبار کلیک کردن روی یک فایل .excalidraw ، برنامه Excalidraw Desktop باید باز شود. گزیده مربوطه از فایل electron-builder.json ما به این شکل است:

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

متأسفانه، در عمل، این همیشه آنطور که در نظر گرفته شده کار نمی کند، زیرا بسته به نوع نصب (برای کاربر فعلی، برای همه کاربران)، برنامه های ویندوز 10 از حقوق مرتبط کردن یک نوع فایل با خود برخوردار نیستند.

این کاستی‌ها و تلاش‌های معلق برای ایجاد تجربه واقعاً شبیه به برنامه در همه پلتفرم‌ها (که باز هم با تلاش کافی امکان‌پذیر است ) دلیل محکمی برای ما بود تا در سرمایه‌گذاری خود در Excalidraw Desktop تجدید نظر کنیم. با این حال، استدلال بزرگ‌تر برای ما این بود که پیش‌بینی می‌کنیم برای مورد استفاده خود ، به همه ویژگی‌هایی که Electron ارائه می‌دهد نیاز نداریم. مجموعه ای از قابلیت های رشد یافته و در حال رشد وب به همان اندازه به ما کمک می کند، اگر نگوییم بهتر.

چگونه وب امروز و در آینده به ما خدمت می کند

حتی در سال 2020، jQuery همچنان بسیار محبوب است. برای بسیاری از توسعه دهندگان استفاده از آن به یک عادت تبدیل شده است، علیرغم این واقعیت که امروزه ممکن است نیازی به jQuery نداشته باشند. منبع مشابهی برای Electron وجود دارد که به درستی به نام You Might Not Need Electron است. بگذارید توضیح دهم که چرا فکر می کنیم به الکترون نیاز نداریم.

برنامه وب پیشرو قابل نصب

Excalidraw امروز یک برنامه وب پیشرفته قابل نصب با یک سرویس دهنده و یک مانیفست برنامه وب است. تمام منابع خود را در دو کش ذخیره می کند، یکی برای فونت ها و CSS مربوط به فونت، و دیگری برای هر چیز دیگری.

این بدان معنی است که برنامه کاملاً آفلاین است و می تواند بدون اتصال به شبکه اجرا شود. مرورگرهای مبتنی بر Chromium هم در دسکتاپ و هم در تلفن همراه از کاربر می خواهند که برنامه را نصب کند. می توانید اعلان نصب را در تصویر زیر مشاهده کنید.

Excalidraw طوری پیکربندی شده است که به عنوان یک برنامه مستقل اجرا شود، بنابراین وقتی آن را نصب می کنید، برنامه ای دریافت می کنید که در پنجره خودش اجرا می شود. این به طور کامل در رابط کاربری چندوظیفه ای سیستم عامل ادغام شده است و نماد برنامه خود را در صفحه اصلی، داک یا نوار وظیفه دریافت می کند. بسته به پلتفرمی که آن را نصب می کنید.

دسترسی به فایل سیستم

Excalidraw از مرورگر-fs-access برای دسترسی به سیستم فایل سیستم عامل استفاده می کند. در مرورگرهای پشتیبانی کننده، این امکان را برای یک باز → ویرایش → ذخیره گردش کار و ذخیره بیش از حد واقعی و "ذخیره به عنوان" با یک بازگشت شفاف برای سایر مرورگرها فراهم می کند. شما می توانید در مورد این ویژگی در پست وبلاگ من اطلاعات بیشتری کسب کنید. خواندن و نوشتن فایل ها و فهرست ها با کتابخانه مرورگر-fs-access .

پشتیبانی را بکشید و رها کنید

فایل‌ها را می‌توان مانند برنامه‌های مخصوص پلتفرم، کشیده و در پنجره Excalidraw انداخت. در مرورگری که از File System Access API پشتیبانی می کند، یک فایل حذف شده را می توان بلافاصله ویرایش کرد و تغییرات را در فایل اصلی ذخیره کرد. این به قدری شهودی است که گاهی اوقات فراموش می کنید که با یک برنامه وب سروکار دارید.

دسترسی به کلیپ بورد

Excalidraw با کلیپ بورد سیستم عامل به خوبی کار می کند. تمام نقشه‌های Excalidraw یا فقط اشیاء جداگانه را می‌توان در قالب‌های image/png و image/svg+xml کپی و جای‌گذاری کرد، که امکان ادغام آسان با ابزارهای خاص پلتفرم مانند Inkscape یا ابزارهای مبتنی بر وب مانند SVGOMG را فراهم می‌کند.

رسیدگی به پرونده

Excalidraw قبلاً از File Handling API آزمایشی پشتیبانی می کند، به این معنی که فایل های .excalidraw را می توان در مدیر فایل سیستم عامل دوبار کلیک کرد و مستقیماً در برنامه Excalidraw باز شد، زیرا Excalidraw به عنوان یک کنترل کننده فایل برای فایل های .excalidraw در سیستم عامل ثبت می شود.

گرفتن پیوند اظهاری

نقشه های Excalidraw را می توان با پیوند به اشتراک گذاشت. در اینجا یک مثال است. در آینده، اگر افراد Excalidraw را به عنوان PWA نصب کرده باشند، چنین پیوندهایی در برگه مرورگر باز نمی شوند، بلکه یک پنجره مستقل جدید راه اندازی می کنند. در حال اجرا، این به لطف ثبت پیوندهای اعلامی ، یک پیشنهاد جدید در زمان نگارش برای یک ویژگی جدید پلت فرم وب، کار خواهد کرد.

نتیجه گیری

وب راه درازی را پیموده است، با ویژگی‌های بیشتر و بیشتری در مرورگرهایی که تنها چند سال یا حتی چند ماه پیش در وب غیرقابل تصور بودند و مختص برنامه‌های کاربردی پلتفرم خاص بودند. Excalidraw در خط مقدم آنچه در مرورگر ممکن است قرار دارد، در عین حال اذعان می کند که همه مرورگرها در همه پلتفرم ها از هر ویژگی که ما استفاده می کنیم پشتیبانی نمی کنند. با شرط بندی روی یک استراتژی بهبود پیشرونده، ما از جدیدترین و بهترین ها در هر کجا که ممکن است لذت می بریم، اما بدون اینکه کسی را پشت سر بگذاریم. بهترین مشاهده در هر مرورگر

الکترون به خوبی به ما خدمت کرده است، اما در سال 2020 و پس از آن، می‌توانیم بدون آن زندگی کنیم. اوه، و برای این هدف @vjeux : از آنجایی که فروشگاه Play Android اکنون PWA ها را در قالبی به نام Trusted Web Activity می پذیرد و از آنجایی که فروشگاه مایکروسافت از PWA ها نیز پشتیبانی می کند ، می توانید در آینده نه چندان دور منتظر Excalidraw در این فروشگاه ها باشید. در همین حال، همیشه می توانید Excalidraw را در مرورگر و از طریق مرورگر استفاده و نصب کنید.

قدردانی

این مقاله توسط @lipis ، @dwelle ، و Joe Medley بررسی شده است.