הוצאנו משימוש את Excalidraw Electron לטובת גרסת האינטרנט

למה בפרויקט Excalidraw החליטו להוציא משימוש את Electron wrapper לטובת גרסת האינטרנט.

Thomas Steiner

בפרויקט Excalidraw.com החלטנו להוציא משימוש את Excalidraw Desktop, wrapper של Electron עבור Excalidraw, לטובת גרסת האינטרנט שאפשר ותמיד אפשר – למצוא ב-excalidraw.com. אחרי ניתוח קפדני, החלטנו שProgressive Web App (PWA) הוא העתיד שאנחנו רוצים לפתח. בהמשך מוסבר למה זה יכול לקרות.

איך נוצר השימוש של Excalidraw Desktop

זמן קצר אחרי ש-@vjeux יצר את הגרסה הראשונית של Excalidraw בינואר 2020 ופרסם פוסט בבלוג, הוא הציע את הדברים הבאים בגיליון מס' 561:

כדאי לכלול את התהליך של אקספרס בתוך אלקטרון (או שווה ערך) ולפרסם אותו כאפליקציה [ספציפית לפלטפורמה] בחנויות האפליקציות השונות.

התגובה המיידית של @voluntadpear הייתה:

מה קורה במקום להגדיר PWA? נכון לעכשיו, Android תומך בהוספתם לחנות Play כ'פעילויות אינטרנט מהימנות', ובתקווה גם ב-iOS זה יקרה בקרוב. במחשב שולחני, Chrome מאפשר להוריד קיצור דרך בשולחן העבודה ל-PWA.

ההחלטה של @vjeux הייתה פשוטה:

אנחנו צריכים לבצע את שתי הפעולות :)

הצוות של @voluntadpear החל את העבודה על המרת הגרסה של Excalidraw ל-PWA והמשתתפים האחרים @lipis התקדמנו, ויצרנו מאגר נפרד של Excalidraw Desktop.

עד היום, היעד הראשוני שהוגדר על ידי @vjeux, כלומר לשלוח Excalidraw לחנויות האפליקציות השונות, עדיין לא הושג. באמת, אף אחד אפילו לא התחיל את תהליך השליחה לאף אחת מהחנויות. אבל למה זה קורה? לפני שנענה, בואו נסתכל על Electron, הפלטפורמה.

מה זה אלקטרון?

היתרון הייחודי של Electron הוא שהכלי מאפשר "ליצור אפליקציות למחשבים בפלטפורמות שונות באמצעות JavaScript, HTML ו-CSS". אפליקציות שפותחו עם Electron "תואמות ל-Mac, ל-Windows ול-Linux", כלומר, "אפליקציות Electron פותחות ופועלות בשלוש פלטפורמות". על פי דף הבית, החלקים הקשים ש-Eelectron מאפשרים לבצע בקלות הם עדכונים אוטומטיים, תפריטים והתראות ברמת המערכת, דיווח על קריסה, ניפוי באגים ופרופיל, ומנהלי התקנה של Windows. בסופו של דבר, חלק מהתכונות שהובטחו מחייבות מבט מפורט על האותיות הקטנות.

• למשל, עדכונים אוטומטיים "כרגע [נתמכים] רק ב-macOS וב-Windows. ב-Linux אין תמיכה מובנית בעדכון אוטומטי, ולכן מומלץ להשתמש במנהל החבילות של ההפצה כדי לעדכן את האפליקציה.

• מפתחים יכולים ליצור תפריטים ברמת המערכת על ידי קריאה ל-Menu.setApplicationMenu(menu). ב-Windows וב-Linux, התפריט מוגדר כתפריט העליון של כל חלון, וב-macOS יש תפריטים רגילים רבים שהוגדרו על ידי המערכת, כמו התפריט Services. כדי להפוך תפריטים לתפריט רגיל, מפתחים צריכים להגדיר בהתאם את role בתפריט, ואז Electron יזהה אותם ויגרום להם להפוך לתפריטים רגילים. כלומר, הרבה קודים שקשורים לתפריט ישתמשו בבדיקת הפלטפורמה הבאה: const isMac = process.platform === 'darwin'.

• ניתן ליצור מנהלי התקנה של Windows באמצעות windows-installer. בקובץ ה-README של הפרויקט מודגש ש"באפליקציה בסביבת ייצור צריך לחתום על האפליקציה. מסנן SmartScreen של Internet Explorer יחסום את הורדת האפליקציה, וספקי אנטי-וירוס רבים יתייחסו לאפליקציה כאל תוכנה זדונית אם לא תשיגו אישור חוקי." [sic]

אם נסתכל על שלוש הדוגמאות האלה, ברור ש-Eectron רחוק מאוד מ "כתיבה פעם אחת, הרצה בכל מקום". כדי להפיץ אפליקציה בחנויות אפליקציות צריך חתימת קוד, טכנולוגיית אבטחה לאישור הבעלות על האפליקציה. כדי לארוז אפליקציות, צריך להשתמש בכלים כמו חיוג אלקטרוני ולחשוב איפה לארח חבילות לעדכוני האפליקציה. הוא נהיה מורכב יחסית במהירות, במיוחד כשהמטרה באמת היא תמיכה בפלטפורמות שונות. חשוב לציין שבהחלט אפשר ליצור אפליקציות מדהימות של Electron עם מספיק מאמץ ומחויבות. לא היינו שם.

המקום שבו הפסקת את הפעולה 'ביטול הזמנה' במחשב

בשלב הזה, הכלי Excalidraw Desktop הוא אפליקציית האינטרנט Excalidraw שכוללת קובץ .asar עם חלון מידע על אקספלור. המראה והתחושה של האפליקציה כמעט זהים לגרסת האינטרנט.

ב-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"
    }
  ]
}

לצערי, בפועל זה לא תמיד עובד כמו שצריך, כי בהתאם לסוג ההתקנה (למשתמש הנוכחי ולכל המשתמשים), לאפליקציות ב-Windows 10 אין את הזכויות לשייך סוגי קבצים לעצמם.

החסרונות האלה והעבודה שבהמתנה לשיפור חוויית השימוש באפליקציה בכל הפלטפורמות (שגם, במאמץ מספיק כן) היו טיעון חזק מבחינתנו לשקול מחדש את ההשקעה שלנו ב-Excalidraw Desktop. עם זאת, הטענה הגדולה ביותר מבחינתנו הייתה שבתרחיש שלנו, לא נזדקק לכל התכונות ש-Eectron מציעה. היכולות של האינטרנט, שגדלות והולכות וגדלות, משרתות אותנו באותה מידה, אם לא טוב יותר.

איך האינטרנט משרת אותנו היום ובעתיד

גם בשנת 2020, jQuery עדיין פופולרי במיוחד. מפתחים רבים משתמשים ב-jQuery באופן קבוע, למרות העובדה שכיום יכול להיות שהם לא צריכים את jQuery. יש משאב דומה גם ל-Electron, שנקרא You Might Not Need Electron. אני רוצה להסביר למה לדעתנו אנחנו לא צריכים את Electron.

אפליקציית אינטרנט מסוג Progressive Web App ניתנת להתקנה

Excalidraw היום הוא Progressive Web App שניתן להתקין עם service worker ומניפסט של אפליקציית האינטרנט. הוא מאחסן את כל המשאבים שלו בשני מטמוני מטמון, אחד לגופנים ול-CSS שקשור לגופנים, ואחד לכל השאר.

המשמעות היא שהאפליקציה מסוגלת לפעול באופן מלא במצב אופליין ויכולה לפעול ללא חיבור לרשת. בדפדפנים המבוססים על Chromium גם במחשבים וגם בניידים, מבקשים מהמשתמש להתקין את האפליקציה. ניתן לראות את בקשת ההתקנה בצילום המסך שלמטה.

בקשת ההסרה מוגדרת להרצה כאפליקציה עצמאית, ולכן כשמתקינים אותה, מקבלים אפליקציה שפועלת בחלון משלה. הוא משולב באופן מלא בממשק המשתמש של מערכת ההפעלה לריבוי משימות, ומקבל סמל אפליקציה משלו במסך הבית, ב-Dock או בשורת המשימות, בהתאם לפלטפורמה שבה מתקינים אותו.

גישה למערכת קבצים

כדי לגשת למערכת הקבצים של מערכת ההפעלה, יש להשתמש ב-browser-fs-access. בדפדפנים תומכים, הפעולה הזו מאפשרת פתיחה אמיתית ← עריכה ← שמירה של תהליך העבודה ושמירת יתר בפועל ו'שמירה בשם', עם חלופה שקופה לדפדפנים אחרים. תוכל לקבל מידע נוסף על התכונה הזו בפוסט שלי בבלוג קריאה וכתיבה של קבצים וספריות באמצעות הספרייה Browser-fs-access.

תמיכה בגרירה ושחרור

ניתן לגרור קבצים ולשחרר אותם בחלון Extalidraw, בדיוק כמו באפליקציות ספציפיות לפלטפורמה. בדפדפן שתומך ב-File System Access API, אפשר לערוך קובץ ששוחרר מיד ולשמור את השינויים בקובץ המקורי. זה כל כך אינטואיטיבי עד שתשכחו לפעמים שאתם עובדים עם אפליקציית אינטרנט.

גישה ללוח

התכונה exalidraw פועלת בצורה טובה עם הלוח של מערכת ההפעלה. אפשר להעתיק ולהדביק שרטוטים שלמים של Excalidraw או רק אובייקטים בודדים בפורמטים image/png ו-image/svg+xml, כדי שיהיה קל לשלב אותם עם כלים אחרים ספציפיים לפלטפורמה, כמו Inkscape או עם כלים מבוססי אינטרנט כמו SVGOMG.

טיפול בקבצים

התכונה exalidraw כבר תומכת ב-File Treatment API הניסיוני, כלומר אפשר ללחוץ פעמיים על קובצי .excalidraw במנהל הקבצים של מערכת ההפעלה ולפתוח אותם ישירות באפליקציית Excalidraw, כי Excalidraw נרשם כ-handler של קבצים ב-.excalidraw קבצים במערכת ההפעלה.

תיעוד הצהרתי של קישורים

אפשר לשתף שרטוטים במקרים של שחרור באמצעות קישור. כאן יש דוגמה. בעתיד, אם אנשים התקינו את Excalidraw כ-PWA, קישורים כאלה לא ייפתחו בכרטיסייה בדפדפן, אלא ייפתחו חלון עצמאי חדש. לאחר שההטמעה תושלם, זה יעבוד עם תיעוד קישור הצהרתי. ההצעה הזו הייתה בזמן הכתיבה לתכונה חדשה של פלטפורמת אינטרנט.

סיכום

האינטרנט התקדם מאוד, עם יותר ויותר תכונות שפועלות בדפדפנים, שרק לפני כמה שנים או אפילו חודשים לא ניתן היה לדמיין אותם באינטרנט, והם בלעדיים לאפליקציות ספציפיות לפלטפורמה. התכונה 'הסרת הסרה' נמצאת בראש סדר העדיפויות של כל מה שאפשר לעשות בדפדפן, תוך הכרה בכך שלא כל הדפדפנים בכל הפלטפורמות תומכים בכל תכונה שבה אנחנו משתמשים. אנחנו מהמרים על אסטרטגיה לשיפור ההתקדמות, כך שאנחנו נהנים מהעדכניות והטובות ביותר ככל האפשר, אבל בלי להשאיר אף אחד בצד. הוצג בצורה הטובה ביותר בכל דפדפן.

Electron נתנו לנו שירות טוב, אבל ב-2020 ואילך אנחנו יכולים לחיות בלי זה. אה, וגם למטרה הזו של @vjeux: מכיוון שחנות Play ל-Android מקבלת עכשיו אפליקציות PWA בפורמט קונטיינר שנקרא Trusted Web Activity, וגם ב-Microsoft Store יש תמיכה באפליקציות PWA, אפשר יהיה להסיר אותן בחנויות האלה בעתיד הקרוב. בינתיים, תמיד אפשר להשתמש באפשרות אי הכללה בדפדפן ולהתקין אותה.

אישורים

המאמר הזה נבדק על ידי @lipis, @dwelle ו-Joe Medley.