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

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

Thomas Steiner

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

איך Excalidraw Desktop נוצר

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

כדאי לארוז את Excalidraw בתוך Electron (או שווה ערך) ולפרסם אותו בתור [platform-specific] לחנויות האפליקציות השונות.

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

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

ההחלטה שהתקבלה בסופו של דבר על ידי @vjeux הייתה:

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

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

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

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

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

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

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

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

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

הנקודה שבה Excalidraw Desktop הופסק

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

ב-macOS, עכשיו יש תפריט ברמת המערכת בחלק העליון של האפליקציה, אבל מכיוון שכל התפריט הפעולות, מלבד סגירת החלון ומידע על 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. אבל הנימוק הגדול ביותר מבחינתנו היה שחזנו בתרחיש שלנו, אנחנו לא צריכים את כל התכונות של Electron. קבוצה שהולכת וגדלה היכולות של האינטרנט משרתות אותנו באותה מידה, אם לא טוב יותר.

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

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

Progressive Web App להתקנה

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

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

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

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

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

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

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

גישה ללוח

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

טיפול בקבצים

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

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

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

סיכום

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

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

אישורים

המאמר הזה נבדק על ידי @lipis, @dwelle, וגם ג'ו מדלי.