كان من الصعب تخيل تشغيل برنامج معقّد مثل Photoshop مباشرةً في المتصفّح قبل بضع سنوات فقط. ومع ذلك، باستخدام تقنيات الويب الجديدة المختلفة، طرحت Adobe الآن إصدارًا تجريبيًا متاحًا للجميع من Photoshop على الويب.
على مدار الأعوام الثلاثة الماضية، عمل فريق Chrome على مساعدة تطبيقات الويب في توسيع نطاق الإمكانات المتاحة في المتصفّح. ومن بين تطبيقات الويب هذه Photoshop. كان من الصعب تخيل تشغيل برنامج معقّد مثل Photoshop مباشرةً في المتصفّح قبل بضع سنوات فقط. ومع ذلك، من خلال استخدام تقنيات الويب الجديدة المختلفة، طرحت Adobe الآن إصدارًا تجريبيًا متاحًا للجميع من Photoshop على الويب.
(إذا كنت تفضّل المشاهدة على القراءة، تتوفّر هذه المقالة أيضًا في شكل فيديو.)
في هذا المنشور، نريد أن نشارك لأول مرة تفاصيل حول كيفية توسيع نطاق Photoshop ليشمل الويب من خلال تعاوننا. يمكنك استخدام جميع واجهات برمجة التطبيقات التي استخدمتها Adobe والمزيد في تطبيقاتك أيضًا. ننصحك بالاطّلاع على المشاركات في مدوّنتنا المتعلّقة بإمكانات الويب للحصول على أفكار جديدة، ومتابعة تتبُّع واجهة برمجة التطبيقات لمعرفة أحدث الميزات التي نعمل عليها.
سبب توفّر Photoshop على الويب
مع تطور الويب، لم تتغيّر المزايا الأساسية التي تقدّمها المواقع الإلكترونية وتطبيقات الويب مقارنةً بالتطبيقات المخصّصة للمنصات. وتشمل هذه المزايا العديد من الإمكانات الفريدة، مثل إمكانية ربطها بصفحات أخرى واستخدامها لمرة واحدة فقط واستخدامها في جميع أنحاء العالم، ولكنّها تعود إلى تمكين الوصول البسيط والمشاركة السهلة والتعاون الرائع.
إنّ ميزة عنوان URL هي أنّه يمكن لأي شخص النقر عليه والوصول إليه على الفور. ما عليك سوى استخدام متصفّح. ولا تحتاج إلى تثبيت تطبيق أو القلق بشأن نظام التشغيل الذي تستخدمه. بالنسبة إلى تطبيقات الويب، يعني ذلك أنّه يمكن للمستخدمين الوصول إلى التطبيق ومستنداتهم وتعليقاتهم. وهذا يجعل الويب المنصة المثالية للتعاون، وهو أمر يزداد أهميته بالنسبة إلى فِرق التصميم والتسويق.
كان محرّر مستندات Google من أوائل التطبيقات التي وفّرت إمكانية الوصول المبسّط. نعلم جميعًا مدى سهولة إنشاء مستند وإرسال الرابط إلى شخص ما والانتقال فورًا إلى التطبيق والمستند أو التعليق المحدّدَين أيضًا. ومنذ ذلك الحين، تم استخدام هذا النموذج في العديد من التطبيقات الرائعة، مثل التطبيقات التي عرضناها في السابق، وسيتم الآن الاستفادة منه في Photoshop أيضًا.
كيف وصل Photoshop إلى الويب
بدأت شبكة الويب كمنصة مناسبة للمستندات فقط، ولكنّها شهدت نموًا كبيرًا على مرّ تاريخها. أظهرت التطبيقات الأولى، مثل Gmail، أنّ التطبيقات والتفاعلات الأكثر تعقيدًا كانت ممكنة على الأقل. ومنذ ذلك الحين، شهدنا تطويرًا مشترَكًا رائعًا حيث تتخطى تطبيقات الويب الحدود الممكنة، ويردّ مورّدو المتصفّحات من خلال توسيع إمكانات الويب بشكل أكبر. وقد أدّى أحدث إصدار من هذه العملية إلى إتاحة Photoshop على الويب.
سبق أن طرحت Adobe تطبيقَي Spark وLightroom على الويب، وكانت مهتمة بطرح Photoshop على الويب لعدة سنوات. ومع ذلك، واجهت الشركة قيودًا في أداء JavaScript، وعدم توفّر هدف ترجمة جيد لرمزها البرمجي، وعدم توفّر إمكانات الويب. اطّلِع على ما يلي لمعرفة الميزات التي يوفّرها متصفّح Chrome لحلّ هذه المشاكل.
نقل WebAssembly باستخدام Emscripten
كان WebAssembly ومجموعة أدوات C++ Emscripten هما المفتاحان لتوفير إمكانية استخدام Photoshop على الويب، لأنّ ذلك يعني أنّ شركة Adobe لن تضطر إلى البدء من الصفر، بل يمكنها الاستفادة من قاعدة رموز Photoshop الحالية. WebAssembly هي مجموعة تعليمات ثنائية محمولة يتم شحنها في جميع المتصفّحات، وقد تم تصميمها كهدف تجميع للغات البرمجة. ويعني ذلك أنّه يمكن نقل تطبيقات مثل Photoshop المكتوبة بلغة C++ إلى الويب مباشرةً بدون الحاجة إلى إعادة كتابتها بلغة JavaScript. لبدء عملية النقل بنفسك، يمكنك الاطّلاع على مستندات Emscripten الكاملة أو اتّباع هذا المثال الإرشادي حول كيفية نقل مكتبة.
Emscripten هي سلسلة أدوات مزوّدة بميزات كاملة لا تساعدك فقط في تجميع C++ إلى Wasm، بل توفّر أيضًا طبقة ترجمة تحوّل طلبات بيانات POSIX API إلى طلبات بيانات 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. وتوفّر هذه الميزة إمكانية التنقّل في الرمز المصدر وضبط نقاط التوقف وإيقاف التنفيذ مؤقتًا عند حدوث استثناءات، وفحص المتغيّرات مع دعم الأنواع الغنية، وحتى دعم أساسي للتقييم في وحدة تحكّم "أدوات مطوّري البرامج في Chrome".
احرص على الاطّلاع على الدليل الرسمي حول كيفية استخدام WebAssembly Debugging.
مساحة تخزين عالية الأداء
نظرًا لحجم ملفات Photoshop الكبير، من الضروري أن يكون بإمكان Photoshop نقل البيانات ديناميكيًا من القرص إلى الذاكرة أثناء تنقّل المستخدم. على الأنظمة الأساسية الأخرى، يتم عادةً إجراء ذلك من خلال ربط الذاكرة عبر mmap، ولكن لم يكن ذلك ممكنًا على الويب بأداء جيد إلى أن تم تطوير عناصر التحكم في الوصول إلى نظام الملفات الخاص بالإصدار الأصلي وتنفيذها كإصدار تجريبي للإصدار الأصلي. يمكنك الاطّلاع على كيفية الاستفادة من واجهة برمجة التطبيقات الجديدة هذه في المستندات.
مساحة ألوان P3 للوحة
في السابق، كانت الألوان على الويب محدّدة في مساحة ألوان sRGB، وهي معيار من منتصف التسعينيات استنادًا إلى إمكانات شاشات أنبوب أشعة الكاثود. شهدت الكاميرات والشاشات تطورًا كبيرًا خلال الربع قرن الماضي، وتمّ وضع معايير للعديد من مساحات الألوان الأكبر حجمًا والأكثر كفاءة. من بين مساحات الألوان الحديثة الأكثر شيوعًا Display P3. يستخدم Photoshop لوحة العرض P3 لعرض الصور بدقة أكبر في المتصفّح. وعلى وجه الخصوص، سيتم عرض الصور التي تحتوي على ألوان بيضاء ساطعة وألوان زاهية وتفاصيل في التظليل بأفضل شكل ممكن على الشاشات الحديثة التي تتوافق مع بيانات Display P3. يتم تطوير Display P3 Canvas API بشكل أكبر لتفعيل شاشات النطاق الديناميكي العالي.
Web Components وLit
يُعدّ Photoshop تطبيقًا كبيرًا وغنيًا بالميزات، ويضمّ مئات عناصر واجهة المستخدم التي توفّر عشرات سير العمل. يتم إنشاء التطبيق من قِبل فِرق متعدّدة باستخدام مجموعة متنوّعة من الأدوات وممارسات التطوير، ولكن يجب أن تتكامل أجزاؤه المتفرقة لإنشاء تطبيق موحّد وعالي الأداء.
لمواجهة هذا التحدي، لجأت Adobe إلى Web Components ومكتبة Lit. تأتي عناصر واجهة المستخدم في Photoshop من مكتبة Spectrum Web Components من Adobe، وهي عملية تنفيذ خفيفة الوزن وعالية الأداء لنظام تصميم Adobe الذي يعمل مع أي إطار عمل أو بدون إطار عمل على الإطلاق.
بالإضافة إلى ذلك، تم إنشاء تطبيق Photoshop بالكامل باستخدام مكوّنات الويب المستندة إلى Lit. استنادًا إلى نموذج المكوّنات المضمّن في المتصفّح وتغليف Shadow DOM، وجد الفريق أنّه من السهل دمج بعض "الجزر" من رمز React المقدَّم من فِرق Adobe الأخرى.
التخزين المؤقت لمشغّل الخدمات باستخدام Workbox
تعمل خدمات Worker كوكيل محلي قابل للبرمجة، حيث تعترض طلبات الشبكة وتردّ عليها بالبيانات من الشبكة أو ذاكرات التخزين المؤقت طويلة الأمد أو مزيج من الاثنين.
في إطار جهود فريق V8 لتحسين الأداء، في المرة الأولى التي يستجيب فيها عامل الخدمة باستجابة WebAssembly محفوظة في ذاكرة التخزين المؤقت، ينشئ Chrome نسخة محسّنة من الرمز البرمجي ويخزّنها، حتى بالنسبة إلى النصوص البرمجية WebAssembly التي تبلغ حجمها عدة ميغابايت والتي تكون شائعة في قاعدة رموز Photoshop البرمجية. تحدث عملية تجميع مسبق مشابهة عندما يخزن مشغّل الخدمة JavaScript مؤقتًا أثناء خطوة install. وفي كلتا الحالتَين، يمكن لمتصفّح Chrome تحميل النُسخ المحسّنة من النصوص البرمجية المخزّنة مؤقتًا وتنفيذها بأقل قدر ممكن من الوقت المستغرَق في وقت التشغيل.
يستفيد تطبيق Photoshop على الويب من ذلك من خلال نشر مشغّل خدمات يُخزِّن مؤقتًا العديد من النصوص البرمجية لـ JavaScript وWebAssembly. وبما أنّه يتم إنشاء عناوين URL لهذه النصوص البرمجية في وقت الإنشاء، ولأنّ منطق إبقاء ذاكرات التخزين المؤقت محدّثة قد يكون معقّدًا، لجأ الفريق إلى مجموعة من المكتبات التي تديرها Google تُسمى Workbox لإنشاء عامل الخدمة كجزء من عملية الإنشاء.
أدّى استخدام مشغّل خدمات مستند إلى Workbox إلى جانب ميزة التخزين المؤقت للنصوص البرمجية في محرّك V8 إلى تحقيق تحسينات قابلة للقياس في الأداء. تختلف الأرقام المحدّدة حسب الجهاز الذي ينفذ الرمز، ولكن يقدّر الفريق أنّ هذه التحسينات خفضت الوقت المستغرَق في بدء تشغيل الرمز بنسبة %75.
الخطوات التالية التي تتّخذها Adobe على الويب
إنّ إطلاق الإصدار التجريبي من Photoshop هو مجرد البداية، ونحن بصدد إجراء العديد من التحسينات على الأداء والميزات في الوقت الحالي بينما يخطّط فريق Photoshop لإطلاق الإصدار الكامل بعد هذا الإصدار التجريبي. لا تتوقف Adobe عند Photoshop، بل تخطّط لتوسيع نطاق Creative Cloud على الويب بشكل كبير، ما يجعلها منصة أساسية لكل من إنشاء المحتوى الإبداعي والتعاون. سيتيح ذلك لملايين صنّاع المحتوى لأول مرة سرد قصصهم والاستفادة من سير العمل المبتكرة على الويب.
مع مواصلة Adobe توسيع نطاق الإمكانات، سيواصل فريق Chrome التعاون معنا لتطوير الويب في Adobe والمنظومة المتكاملة النشطة لمطوّري الويب بشكل عام. ونحن نتطلّع إلى رؤية Adobe توفّر منتجاتها على هذه المتصفحات أيضًا. ننصحك بمتابعتنا لمعرفة آخر الأخبار بينما نواصل تطوير الويب.
يمكنك الاطّلاع على مزيد من المعلومات حول الوصول إلى Photoshop على الويب (إصدار تجريبي) في مركز مساعدة Adobe.