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

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

در پروژه 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 اضافه شده است. ظاهر و احساس برنامه تقریباً مشابه نسخه وب است.

برنامه Excalidraw Desktop در یک پوشش الکترونیکی اجرا می شود.
Excalidraw Desktop تقریباً از نسخه وب قابل تشخیص نیست
پنجره Excalidraw Desktop 'About' که نسخه پوشش Electron و برنامه وب را نمایش می دهد.
منوی درباره Excalibur بینش هایی را در مورد نسخه ها ارائه می دهد

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

نوار منو Excalidraw Desktop در macOS با گزینه منوی «File»، «Close Window» انتخاب شده است.
نوار منو Excalidraw Desktop در macOS

ما از 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 مربوط به فونت، و دیگری برای هر چیز دیگری.

تب Chrome DevTools Application که دو کش Excalidraw را نشان می دهد.
محتویات کش Excalidraw

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

Excalidraw از کاربر می خواهد برنامه را در کروم روی macOS نصب کند.
گفتگوی نصب Excalidraw در کروم

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

Excalidraw در پنجره خودش اجرا می شود.
Excalidraw PWA در یک پنجره مستقل
نماد Excalidraw در داک macOS.
نماد Excalidraw در داک macOS

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

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

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

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

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

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

منوی زمینه Excalidraw که آیتم های منو «کپی در کلیپ بورد به عنوان SVG» و «کپی در کلیپ بورد به عنوان PNG» را نشان می دهد.
منوی زمینه Excalidraw که اقدامات کلیپ‌بورد را ارائه می‌کند

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

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 بررسی شده است.

،

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

در پروژه 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 اضافه شده است. ظاهر و احساس برنامه تقریباً مشابه نسخه وب است.

برنامه Excalidraw Desktop در یک پوشش الکترونیکی اجرا می شود.
Excalidraw Desktop تقریباً از نسخه وب قابل تشخیص نیست
پنجره Excalidraw Desktop 'About' که نسخه پوشش Electron و برنامه وب را نمایش می دهد.
منوی درباره Excalibur بینش هایی را در مورد نسخه ها ارائه می دهد

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

نوار منو Excalidraw Desktop در macOS با گزینه منوی «File»، «Close Window» انتخاب شده است.
نوار منو Excalidraw Desktop در macOS

ما از 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 مربوط به فونت، و دیگری برای هر چیز دیگری.

تب Chrome DevTools Application که دو کش Excalidraw را نشان می دهد.
محتویات کش Excalidraw

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

Excalidraw از کاربر می خواهد برنامه را در کروم روی macOS نصب کند.
گفتگوی نصب Excalidraw در کروم

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

Excalidraw در پنجره خودش اجرا می شود.
Excalidraw PWA در یک پنجره مستقل
نماد Excalidraw در داک macOS.
نماد Excalidraw در داک macOS

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

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

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

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

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

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

منوی زمینه Excalidraw که آیتم های منو «کپی در کلیپ بورد به عنوان SVG» و «کپی در کلیپ بورد به عنوان PNG» را نشان می دهد.
منوی زمینه Excalidraw که اقدامات کلیپ‌بورد را ارائه می‌کند

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

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 بررسی شده است.

،

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

در پروژه 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 اضافه شده است. ظاهر و احساس برنامه تقریباً مشابه نسخه وب است.

برنامه Excalidraw Desktop در یک پوشش الکترونیکی اجرا می شود.
Excalidraw Desktop تقریباً از نسخه وب قابل تشخیص نیست
پنجره Excalidraw Desktop 'About' که نسخه پوشش Electron و برنامه وب را نمایش می دهد.
منوی درباره Excalibur بینش هایی را در مورد نسخه ها ارائه می دهد

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

نوار منو Excalidraw Desktop در macOS با گزینه منوی «File»، «Close Window» انتخاب شده است.
نوار منو Excalidraw Desktop در macOS

ما از 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 مربوط به فونت، و دیگری برای هر چیز دیگری.

تب Chrome DevTools Application که دو کش Excalidraw را نشان می دهد.
محتویات کش Excalidraw

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

Excalidraw از کاربر می خواهد برنامه را در کروم روی macOS نصب کند.
گفتگوی نصب Excalidraw در کروم

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

Excalidraw در پنجره خودش اجرا می شود.
Excalidraw PWA در یک پنجره مستقل
نماد Excalidraw در داک macOS.
نماد Excalidraw در داک macOS

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

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

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

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

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

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

منوی زمینه Excalidraw که آیتم های منو «کپی در کلیپ بورد به عنوان SVG» و «کپی در کلیپ بورد به عنوان PNG» را نشان می دهد.
منوی زمینه Excalidraw که اقدامات کلیپ‌بورد را ارائه می‌کند

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

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 بررسی شده است.

،

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

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

دسک تاپ Excalidraw چگونه به وجود آمد

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

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

واکنش فوری VoluntAdpear پیشنهاد این بود:

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

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

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

در حالی که کار روی تبدیل نسخه Excalidraw به PWA توسط VoluntAdpear و بعداً دیگران آغاز شد ، Lipis به طور مستقل جلو رفت و یک repo جداگانه برای دسک تاپ Excalidraw ایجاد کرد.

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

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

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

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

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

  • نصب کننده های ویندوز را می توان با نصب ویندوز ساخت. Readme از این پروژه برجسته می کند که "برای یک برنامه تولیدی باید برنامه خود را امضا کنید. فیلتر صفحه نمایش هوشمند اینترنت اکسپلورر برنامه شما را از بارگیری باز می کند و بسیاری از فروشندگان ضد ویروس برنامه شما را به عنوان بدافزار در نظر می گیرند ، مگر اینکه گواهی معتبر کسب کنید" [SIC].

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

جایی که دسک تاپ Excalidraw را ترک کرد

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

برنامه دسک تاپ Excalidraw که در یک بسته بندی الکترون اجرا می شود.
دسک تاپ Excalidraw تقریباً از نسخه وب قابل تشخیص نیست
پنجره ExcalidRaw Desktop 'About' Window که نسخه Electron Wrapper و برنامه وب را نشان می دهد.
منوی About Excalibur که بینش در مورد نسخه ها را ارائه می دهد

در MACOS ، اکنون یک منوی سطح سیستم در بالای برنامه وجود دارد ، اما از آنجا که هیچ یک از اقدامات منو-Apart از Window Close و در مورد Excalidraw- که به هر چیزی قلاب شده اند ، منو در وضعیت فعلی آن بسیار بی فایده است. در همین حال ، البته همه اقدامات را می توان از طریق نوار ابزار معمولی Excalidraw و منوی زمینه انجام داد.

نوار منوی Desktop ExcalidRaw در MacOS با مورد "پرونده" ، "بستن پنجره" مورد انتخاب شده است.
نوار منو دسک تاپ Excalidraw در MacOS

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

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

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

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

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

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

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

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

برگه برنامه Chrome DevTools که دو ذخیره سازی Excalidraw را نشان می دهد.
محتوای حافظه پنهان Excalidraw

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

Excalidraw باعث می شود کاربر بتواند برنامه را در Chrome در MacOS نصب کند.
گفتگوی نصب Excalidraw در Chrome

ExcalidRaw برای اجرای به عنوان یک برنامه مستقل تنظیم شده است ، بنابراین هنگام نصب آن ، برنامه ای را دریافت می کنید که در پنجره خود اجرا می شود. این کاملاً در UI چند وظیفه ای سیستم عامل یکپارچه شده است و نماد برنامه خود را در صفحه اصلی ، حوض یا نوار کار می کند. بسته به سکویی که در آن نصب می کنید.

Excalidraw در پنجره خود در حال اجرا است.
PWA Excalidraw در یک پنجره مستقل
نماد Excalidraw در حوض MacOS.
نماد Excalidraw در حوض MacOS

دسترسی به سیستم پرونده

Excalidraw برای دسترسی به سیستم فایل سیستم عامل از مرورگر-FS-Access استفاده می کند. در مورد مرورگرهای پشتیبانی ، این امکان را فراهم می کند تا یک ویرایش واقعی → ویرایش → ذخیره گردش کار و صرفه جویی بیش از حد واقعی و "Save As" را با یک بازگشت شفاف برای سایر مرورگرها ذخیره کنید. شما می توانید در مورد این ویژگی در پست وبلاگ من با خواندن و نوشتن پرونده ها و دایرکتوری ها با کتابخانه مرورگر-FS-Access اطلاعات بیشتری کسب کنید.

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

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

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

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

منوی زمینه ExcalidRaw که "کپی به کلیپ بورد را به عنوان SVG" و "کپی کردن به کلیپ بورد به عنوان PNG" منو نشان می دهد.
منوی زمینه Excalidraw که اقدامات کلیپ بورد را ارائه می دهد

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

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

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

نتیجه گیری

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

الکترونی به خوبی به ما خدمت کرده است ، اما در سال 2020 و بعد از آن ، ما می توانیم بدون آن زندگی کنیم. اوه ، و برای این هدف VJeux : از آنجا که فروشگاه Android Play اکنون PWA ها را در قالب کانتینر به نام فعالیت وب قابل اعتماد می پذیرد و از آنجا که فروشگاه مایکروسافت از PWA ها نیز پشتیبانی می کند ، می توانید در آینده نه چندان دور انتظار Excalidraw را در این فروشگاه ها داشته باشید. در ضمن ، شما همیشه می توانید از Excalidraw در و از مرورگر استفاده و نصب کنید.

قدردانی

این مقاله توسط Lipis ، Dwelle و Joe Medley بررسی شده است.