كان من الصعب تخيل فكرة تشغيل برامج معقّدة مثل برنامج 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 إلى استدعاءات واجهة برمجة تطبيقات الويب، وتحول 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. وتوفّر هذه الأداة أيضًا إمكانية التنقّل بين رموز المصدر وتحديد نقاط التوقف والإيقاف المؤقت للاستثناءات، بالإضافة إلى فحص المتغيّرات من خلال دعم النصوص البرمجية الغنية بصريًا، كما تتيح أيضًا إجراء تقييم أساسي في وحدة تحكُّم أدوات مطوّري البرامج.
تأكد من مراجعة الدليل المعتمد عن كيفية الاستفادة من تصحيح أخطاء WebAssembly.
مساحة تخزين عالية الأداء
نظرًا لكبر حجم مستندات Photoshop، فإنّ أحد الاحتياجات المهمة لبرنامج Photoshop هو القدرة على نقل البيانات ديناميكيًا من القرص إلى الذاكرة أثناء تنقّل المستخدم. على الأنظمة الأساسية الأخرى، يتم تحقيق ذلك عادةً من خلال عملية ربط الذاكرة عبر mmap، ولكن لم يكن ذلك ممكنًا على الويب بشكل جيد، أي إلى أن يتم تطوير مؤشرات الوصول إلى نظام الملفات الخاصة المصدر وتنفيذها في مرحلة التجربة والتقييم. يمكنك الاطّلاع على كيفية الاستفادة من واجهة برمجة التطبيقات الجديدة هذه في المستندات.
مساحة لون P3 للوحة الرسم
تاريخيًا، كان يتم تحديد الألوان على الويب في مساحة اللون sRGB، وهي معيار يعود إلى منتصف التسعينيات، استنادًا إلى إمكانات شاشات أنابيب أشعة المهبط. قطعت الكاميرات والشاشات شوطًا طويلاً خلال الربع المتداخل، وتم توحيد العديد من مساحات الألوان الأكبر والأكثر قدرة. إحدى مساحات الألوان الحديثة الأكثر رواجًا هي Display P3. يستخدم برنامج Photoshop لوحة عرض P3 Canvas لعرض الصور بدقة أكبر في المتصفِّح. على وجه الخصوص، سيتم عرض الصور ذات الألوان البيضاء الزاهية والألوان الزاهية والتفاصيل في الظلال بأفضل شكل ممكن على الشاشات الحديثة التي تدعم بيانات العرض P3. يجري إنشاء Display P3 Canvas API بشكل أكبر لتفعيل الشاشات ذات النطاق العالي الديناميكية.
مكونات الويب والإضاءة
Photoshop هو تطبيق مشهور وغني بالميزات ويحتوي على مئات من عناصر واجهة المستخدم التي تدعم العشرات من عمليات سير العمل. تم إنشاء التطبيق بواسطة فرق متعددة باستخدام مجموعة متنوعة من الأدوات وممارسات التطوير، ولكن يجب أن يتم تجميع أجزائه المختلفة معًا في منظومة كاملة متماسكة وعالية الأداء.
ولتلبية هذا التحدي، لجأت Adobe إلى مكوّنات الويب والمكتبة المبسّطة. تأتي عناصر واجهة المستخدم في Photoshop من مكتبة Spectrum Web Components في Adobe، وهي طريقة تنفيذ بسيطة وفعّالة لنظام تصميم Adobe يعمل مع أي إطار عمل، أو بدون إطار عمل على الإطلاق.
بالإضافة إلى ذلك، تم تصميم تطبيق Photoshop بالكامل باستخدام مكوّنات الويب المستندة إلى Lit. واستنادًا إلى نموذج المكوِّن المضمَّن في المتصفح وتغليف Shadow DOM، وجد الفريق أنه من السهل إجراء عملية دمج بسيطة لبعض "الجزر" من رمز React الذي توفّره فِرق Adobe الأخرى.
التخزين المؤقت لمشغّلي الخدمات باستخدام Workbox
يعمل مشغِّلو الخدمات كخادم وكيل محلي قابل للبرمجة، ويعترضون طلبات الشبكة والاستجابة بالبيانات الواردة من الشبكة أو ذاكرات التخزين المؤقت طويلة الأجل أو كليهما.
في إطار الجهود التي يبذلها فريق 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.