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