לפני כמה שנים היה קשה לדמיין את הרעיון של הפעלת תוכנה מורכבת כמו Photoshop ישירות בדפדפן. עם זאת, באמצעות מגוון טכנולוגיות אינטרנט חדשות, Adobe הביאה עכשיו גרסת בטא ציבורית של Photoshop לאינטרנט.
בשלוש השנים האחרונות, Chrome פעל להעצמה של אפליקציות אינטרנט שרוצות להרחיב את גבולות האפשר בדפדפן. אפליקציית אינטרנט אחת היא Photoshop. לפני כמה שנים היה קשה לדמיין את הרעיון של הפעלת תוכנה מורכבת כמו Photoshop ישירות בדפדפן. עם זאת, באמצעות מגוון טכנולוגיות אינטרנט חדשות, Adobe הביאה עכשיו גרסת בטא ציבורית של Photoshop לאינטרנט.
(אם אתם מעדיפים לצפות במקום לקרוא את המאמר, המאמר הזה זמין גם כסרטון).
בפוסט הזה אנחנו רוצים לשתף בפעם הראשונה פרטים על האופן שבו שיתוף הפעולה שלנו מרחיב את Photoshop לאינטרנט. תוכלו להשתמש בכל ממשקי ה-API ש-Adobe משתמשת בהם ועוד באפליקציות שלכם. אל תשכחו להציץ בפוסטים בבלוג שלנו בנושא יכולות האינטרנט כדי לקבל השראה, ולבדוק את הכלי למעקב אחר ממשקי API כדי לקבל את העדכונים האחרונים והטובים ביותר שאנחנו עובדים עליהם.
למה Photoshop הגיע לאינטרנט
עם התפתחות האינטרנט, דבר אחד שלא השתנה הוא היתרונות העיקריים שיש לאתרים וליישומי אינטרנט להציע על פני יישומים ספציפיים לפלטפורמה. היתרונות האלה כוללים יכולות ייחודיות רבות, כמו יכולת לבצע קישור, זמני ואוניברסלי, אבל למעשה הם מאפשרים גישה פשוטה, שיתוף קל ושיתוף פעולה מעולה.
כוחה הפשוט של כתובת אתר הוא שכל אחד יכול ללחוץ עליה ולגשת אליה מיד. כל מה שצריך הוא דפדפן. אין צורך להתקין אפליקציה או לדאוג לגבי מערכת ההפעלה שפועלת בה. באפליקציות אינטרנט, המשמעות היא שמשתמשים יכולים לקבל גישה לאפליקציה ולמסמכים ולתגובות שלהם. לכן האינטרנט הוא הפלטפורמה האידיאלית לשיתוף פעולה, שהופך להיות יותר ויותר חיוני לצוותי הקריאייטיב והשיווק.
Google Docs היה חלוץ הגישה הפשוטה הזו. רובנו יודעים כמה קל להתחיל מסמך, לשלוח את הקישור למישהו ומיד נכנסים לא רק לאפליקציה, אלא גם למסמך הספציפי או לתגובה הספציפית. מאז, שפע של יישומים מדהימים, כמו יישומים שהצגנו בעבר, משתמשים במודל הזה ועכשיו גם Photoshop יפיקו תועלת.
איך Photoshop הגיע לאינטרנט
האינטרנט התחיל כפלטפורמה שמתאימה רק למסמכים, אבל הוא צמח בצורה דרמטית לאורך כל ההיסטוריה של האינטרנט. אפליקציות מוקדמות כמו Gmail הראו שאינטראקטיביות ואפליקציות מורכבות יותר הן לפחות אפשריות. מאז, ראינו פיתוח משותף מרשים שבו יישומי אינטרנט מותחים את גבולות האפשר, וספקי דפדפנים מגיבים על ידי הרחבת יכולות האינטרנט. האיטרציה האחרונה של הלולאה האופטימית הזו אפשרה את Photoshop באינטרנט.
Adobe הביאה בעבר את Spark ו-Lightroom לאינטרנט, ורצתה להביא את Photoshop לאינטרנט במשך שנים רבות. עם זאת, הם נחסמו עקב מגבלות הביצועים של JavaScript, היעדר יעד הידור טוב עבור הקוד שלהם והיעדר יכולות האינטרנט. בהמשך מוסבר איזה דפדפן Chrome יצר בדפדפן כדי לפתור את הבעיות האלה.
ניוד WebAssembly באמצעות Emscripten
WebAssembly ו Emscripten בכלי C++ שלה היו המפתח לשיפור היכולת של Photoshop להגיע לאינטרנט, כי המשמעות היא ש-Adobe לא תצטרך להתחיל מאפס, אלא תוכל למנף את בסיס הקוד הקיים של Photoshop. WebAssembly הוא שירות משלוחים בינארי נייד בכל הדפדפנים, שתוכנן כיעד הידור לשפות תכנות. כלומר, ניתן לנייד אפליקציות כמו Photoshop שנכתבות ב-C++ ישירות לאינטרנט, ללא צורך בכתיבה מחדש ב-JavaScript. כדי להתחיל לנייד, כדאי לעיין בתיעוד המלא של Emscript או לפעול לפי הדוגמה המודרכת הזו לניוד ספרייה.
Emscripten הוא אוסף כלים שכולל את כל התכונות ועוזרות לכם להדר את C++ ל-Wasm, אלא גם מספק שכבת תרגום שהופכת קריאות ל-API של POSIX לקריאות ל-API באינטרנט, ואפילו ממירה את OpenGL ל-WebGL. לדוגמה, אפשר להעביר אפליקציות שמפנות למערכת הקבצים המקומית ו-Emscripten יספק מערכת קבצים מדמה כדי לשמור על פונקציונליות.
Emscripten הצליח להביא את רוב החלקים של ה-Photoshop לאינטרנט במשך תקופה, אבל לא היה בהכרח מהיר מספיק. עבדנו ללא הרף עם Adobe כדי להבין היכן נמצאים צווארי בקבוק ולשפר את Emscripten. Photoshop תלוי בשרשורים מרובים. הייתה דרישה קריטית להוסיף multithreading דינמי ל-WebAssembly.
בנוסף, טיפול בשגיאות מבוסס-חריגים נפוץ מאוד ב-C++, אבל לא נתמך היטב ב-Emscripten וב-WebAssembly. עבדנו עם קבוצת הקהילה WebAssembly ב-W3C כדי לשפר את תקן WebAssembly ואת הכלים שסביבה כדי להביא החרגות של C++ ל-WebAssembly.
Emscripten לא עובד רק באפליקציות גדולות, אלא גם מאפשר להעביר ספריות או פרויקטים קטנים יותר. לדוגמה, אפשר לראות איך אפשר להדר באינטרנט את ספריית OpenCV הפופולרית באמצעות Emscripten.
לסיום, WebAssembly מציע תכונות מתקדמות לשיפור הביצועים, כמו הוראות לכרטיס SIMD, שמשפרים משמעותית את הביצועים של אפליקציית האינטרנט. לדוגמה, Halide הוא חיוני לביצועים של Adobe, וכאן SIMD מספק מהירות האצה של פי 3-4 בממוצע ובמקרים מסוימים, האצה של פי 80-160.
ניפוי באגים ב-WebAssembly
אי אפשר להשלים פרויקט גדול ללא הכלים המתאימים למשימה, ולכן צוות Chrome פיתח תמיכה מלאה לניפוי באגים ב-WebAssembly. היא מספקת תמיכה במעבר אל קוד המקור, הגדרת נקודות עצירה (breakpoint) והשהיה של חריגים, בדיקה משתנה עם תמיכה בסוגים עשירים ואפילו תמיכה בסיסית בהערכה במסוף כלי הפיתוח!
מומלץ לקרוא את המדריך הרשמי לשימוש בניפוי באגים ב-WebAssembly.
אחסון עם ביצועים גבוהים
מכיוון שמסמכי Photoshop גדולים, אחד הצורך ב-Photoshop הוא היכולת להעביר נתונים באופן דינמי מהדיסק לזיכרון כשהמשתמשים זזים ממקום למקום. בפלטפורמות אחרות ניתן לעשות זאת בדרך כלל באמצעות מיפוי זיכרון דרך mmap, אבל ההבדל הוא ברמת הביצועים באינטרנט – זאת עד שקבוצות הגישה של מערכת הקבצים הפרטית של המקור פותחו והוטמעו בתור גרסת מקור לניסיון! במסמכי התיעוד אפשר לקרוא איך להשתמש ב-API החדש.
מרחב צבעים P3 לתמונות על קנבס
בעבר, צבעים באינטרנט צוינו במרחב הצבעים sRGB, שהוא תקן מאמצע שנות ה-90, על סמך היכולות של מוניטורים באמצעות צינורות קרן זרם. המצלמות וצגים עברו דרך ארוכה במחצית השנייה של המאה ה-20, ומרחבי צבע רבים יותר, גדולים ומסוגלים יותר, עברו סטנדרטיזציה. אחד ממרחבי הצבע המודרניים הפופולריים ביותר הוא Display P3. ב-Photoshop נעשה שימוש בDisplay P3 Canvas כדי להציג תמונות בצורה מדויקת יותר בדפדפן. באופן ספציפי, תמונות עם צבעים לבנים בהירים, צבעים בהירים ופרטים באזורים צללים יוצגו בצורה הטובה ביותר במסכים מודרניים שתומכים בנתונים של Display P3. אנחנו מרחיבים את ה-Display P3 Canvas API כדי לאפשר הצגה של טווח דינמי גבוה.
רכיבי אינטרנט ו-Lit
Photoshop הוא אפליקציה גדולה ומפורסמת עם מגוון רחב של תכונות, עם מאות אלמנטים של ממשק משתמש שתומכים בעשרות תהליכי עבודה. האפליקציה נוצרה על ידי צוותים רבים באמצעות מגוון כלים ושיטות פיתוח, אך החלקים השונים שלה צריכים להתאחד וליצור מכלול אחיד ובעל ביצועים טובים.
כדי לעמוד באתגר הזה, Adobe צריכה להשתמש ברכיבי אינטרנט ובספריית Lite. רכיבי ממשק המשתמש של Photoshop מגיעים מספריית Spectrum Web Components של Adobe, שהיא הטמעה קלה וביצועיםנית של מערכת העיצוב של Adobe שעובדת עם כל framework, או בלי מסגרת בכלל.
בנוסף, כל אפליקציית Photoshop בנויה באמצעות רכיבי אינטרנט מבוססי Lit. הצוות נשען על מודל הרכיב המובנה בדפדפן ועל מעטפת ה-DOM של Shadow, ומצא שקל לשלב בצורה חלקה כמה 'איים' של קוד React שסופק על ידי צוותי Adobe אחרים.
שמירה במטמון של Service Worker באמצעות Workbox
Service Workers פועלים בתור שרת proxy מקומי שניתן לתכנות, והם מיירטים בקשות רשת ומגיבים עם נתונים מהרשת, ממטמון לטווח ארוך או שילוב של השניים.
כחלק מהמאמצים של צוות V8 לשפר את הביצועים, בפעם הראשונה ש-Service Worker מגיב עם תגובת WebAssembly שנשמרה במטמון, Chrome יוצר ומאחסן גרסה של הקוד שעברה אופטימיזציה – אפילו לסקריפטים של WebAssembly בנפח של מספר מגה-בייט, שנפוצים ב-codebase של Photoshop. הידור מראש דומה מתבצע כאשר JavaScript נשמר במטמון על ידי קובץ שירות (service worker) במהלך השלב install. בשני המקרים, Chrome יכול לטעון ולהפעיל את הגרסאות שעברו אופטימיזציה של סקריפטים שנשמרו במטמון עם תקורה מינימלית של זמן ריצה.
Photoshop באינטרנט מנצל את היתרונות האלה על ידי פריסת קובץ שירות (service worker) ששומר מראש רבים מהסקריפטים של JavaScript ו-WebAssembly שלו. מאחר שכתובות ה-URL של הסקריפטים האלה נוצרות בזמן ה-build, ומאחר שהלוגיקה של עדכון המטמון יכולה להיות מורכבת, הארגון החל להשתמש בקבוצה של ספריות ש-Google מחזיקה בשם Workbox כדי ליצור את קובץ השירות (service worker) כחלק מתהליך ה-build.
קובץ שירות (service worker) מבוסס של תיבת עבודה, יחד עם שמירת סקריפט של מנוע V8 במטמון, הובילו לשיפורים ניתנים למדידה. המספרים הספציפיים משתנים בהתאם למכשיר שמריץ את הקוד, אבל הצוות מעריך שהאופטימיזציות האלה הפחיתו את משך הזמן שנדרש לאתחול הקוד ב-75%.
מה השלב הבא לגבי Adobe באינטרנט
ההשקה של גרסת הבטא של Photoshop היא רק ההתחלה, והוספנו כמה שיפורים בביצועים ובתכונות, מאחר ש-Photoshop מתחילים לקראת ההשקה המלאה של גרסת הבטא הזו. Adobe לא מפסיקה לעבוד עם Photoshop, ומתכננת להרחיב באופן אגרסיבי את Creative Cloud לאינטרנט, כך שתהיה פלטפורמה עיקרית ליצירת תוכן יצירתי ולשיתוף פעולה. כך מיליוני יוצרים חדשים יוכלו לספר את הסיפור שלהם וליהנות מתהליכי עבודה חדשניים באינטרנט.
ככל ש-Adobe ממשיכה לפרוץ את גבולות האפשר, הצוות של Chrome ימשיך בשיתוף הפעולה שלנו כדי לקדם את האינטרנט עבור Adobe והסביבה העסקית התוססת של מפתחי האתרים באופן כללי. מאחר שדפדפנים אחרים גם מתעדכנים ביכולות הדפדפן המודרניות האלה, אנחנו שמחים לראות ש-Adobe מציעה גם שם את המוצרים שלה. אנחנו ממשיכים לקדם את האינטרנט, אז כדאי להמשיך להתעדכן בעדכונים הבאים.
במרכז העזרה של Adobe אפשר לקבל מידע נוסף על הגישה ל-Photoshop באינטרנט (בטא).