تصور اجرای نرم‌افزاری به پیچیدگی فتوشاپ مستقیماً در مرورگر چند سال پیش دشوار بود. با این حال، با استفاده از فناوری‌های مختلف وب جدید، ادوبی اکنون یک نسخه بتا عمومی فتوشاپ را به وب آورده است.
در طول سه سال گذشته، Chrome تلاش کرده است تا برنامه‌های کاربردی وب را تقویت کند که می‌خواهند مرزهای آنچه را که در مرورگر ممکن است جابجا کنند. یکی از این برنامه های وب فتوشاپ بوده است. تصور اجرای نرم‌افزاری به پیچیدگی فتوشاپ مستقیماً در مرورگر چند سال پیش دشوار بود. با این حال، با استفاده از فناوری‌های مختلف وب جدید، ادوبی اکنون یک نسخه بتا عمومی فتوشاپ را به وب آورده است.
(اگر تماشا کردن را به خواندن ترجیح می دهید، این مقاله به صورت ویدیویی نیز موجود است.)
در این پست، مایلیم برای اولین بار جزئیات نحوه گسترش فتوشاپ به وب را با همکاری ما به اشتراک بگذاریم. می‌توانید از همه APIهایی که Adobe استفاده کرده و بیشتر در برنامه‌های خود استفاده کنید. حتماً پست‌های وبلاگ مرتبط با قابلیت‌های وب ما را برای الهام گرفتن بررسی کنید و ردیاب API ما را برای آخرین و بهترین‌هایی که روی آن کار می‌کنیم تماشا کنید.
چرا فتوشاپ وارد وب شد
همانطور که وب تکامل یافته است، یکی از مواردی که تغییر نکرده است مزایای اصلی وب سایت ها و برنامه های وب نسبت به برنامه های کاربردی پلت فرم خاص است. این مزایا شامل بسیاری از قابلیت‌های منحصربه‌فرد مانند قابل پیوند بودن، زودگذر بودن و جهانی بودن است، اما به امکان دسترسی ساده، اشتراک‌گذاری آسان و همکاری عالی خلاصه می‌شود.
قدرت ساده یک URL این است که هر کسی می تواند روی آن کلیک کرده و فوراً به آن دسترسی پیدا کند. تنها چیزی که نیاز دارید یک مرورگر است. نیازی به نصب برنامه یا نگرانی در مورد سیستم عاملی که روی آن اجرا می کنید وجود ندارد. برای برنامه های وب، این بدان معناست که کاربران می توانند به برنامه و اسناد و نظرات آنها دسترسی داشته باشند. این امر وب را به پلتفرم همکاری ایده‌آل تبدیل می‌کند، چیزی که برای تیم‌های خلاق و بازاریابی ضروری‌تر می‌شود.
Google Docs پیشگام این دسترسی ساده بود. بسیاری از ما می دانیم که چقدر آسان است که یک سند را شروع کنیم، پیوند را برای شخصی ارسال کنیم، و بلافاصله نه تنها به برنامه، بلکه به سند یا نظر خاص نیز بپردازیم. از آن زمان، تعداد زیادی از برنامه‌های کاربردی شگفت‌انگیز، مانند برنامه‌هایی که در گذشته به نمایش گذاشته‌ایم ، از این مدل استفاده کرده‌اند و اکنون فتوشاپ نیز از آن سود خواهد برد.
نحوه ورود فتوشاپ به وب
وب به عنوان یک پلتفرم فقط برای اسناد شروع شد، اما در طول تاریخ خود رشد چشمگیری داشته است. برنامه های اولیه مانند Gmail نشان دادند که تعامل و برنامه های کاربردی پیچیده تر حداقل امکان پذیر است. از آن زمان، ما شاهد توسعه مشترک چشمگیر بوده‌ایم که در آن برنامه‌های وب مرزهای ممکن را جابجا می‌کنند و فروشندگان مرورگر با گسترش بیشتر قابلیت‌های وب پاسخ می‌دهند. آخرین تکرار این حلقه با فضیلت همان چیزی است که فتوشاپ را در وب فعال کرده است.
ادوبی قبلا اسپارک و لایت روم را به وب آورده بود و سال ها بود که علاقه مند بود فتوشاپ را به وب بیاورد. با این حال، محدودیت‌های عملکرد جاوا اسکریپت، عدم وجود یک هدف کامپایل خوب برای کدشان و فقدان قابلیت‌های وب، مسدود شدند. برای اینکه بدانید کروم برای حل این مشکلات چه چیزی در مرورگر ساخته است، ادامه دهید.
انتقال WebAssembly با Emscripten
WebAssembly و زنجیره ابزار C++ آن Emscripten کلیدی برای باز کردن قابلیت فتوشاپ برای ورود به وب بوده است، زیرا به این معنی است که Adobe مجبور نیست از ابتدا شروع کند، اما می تواند از پایگاه کد فتوشاپ موجود خود استفاده کند. WebAssembly یک مجموعه دستورالعمل باینری قابل حمل است که در تمام مرورگرها ارسال می شود که به عنوان یک هدف تلفیقی برای زبان های برنامه نویسی طراحی شده است. این بدان معنی است که برنامه هایی مانند فتوشاپ که با زبان ++C نوشته شده اند را می توان مستقیماً بدون نیاز به بازنویسی در جاوا اسکریپت به وب منتقل کرد. برای شروع به انتقال خود، مستندات کامل Emscripten را بررسی کنید، یا این مثال راهنمای نحوه پورت کردن کتابخانه را دنبال کنید.
Emscripten یک زنجیره ابزار با امکانات کامل است که نه تنها به شما کمک می کند C++ خود را به Wasm کامپایل کنید، بلکه یک لایه ترجمه فراهم می کند که فراخوانی های API POSIX را به تماس های API وب تبدیل می کند و حتی OpenGL را به WebGL تبدیل می کند. به عنوان مثال، می توانید برنامه هایی را که به سیستم فایل محلی ارجاع می دهند، پورت کنید و Emscripten یک سیستم فایل شبیه سازی شده برای حفظ عملکرد ارائه می دهد .
Emscripten برای مدتی قادر به آوردن بیشتر بخش های فتوشاپ به وب بوده است، اما لزوما به اندازه کافی سریع نبود. ما به طور مستمر با Adobe کار کرده‌ایم تا بفهمیم گلوگاه‌ها کجا هستند و Emscripten را بهبود ببخشیم. فتوشاپ به چند رشته ای بستگی دارد. آوردن چند رشته ای پویا به WebAssembly یک نیاز حیاتی بود.
همچنین، مدیریت خطاهای مبتنی بر استثنا در C++ بسیار رایج است، اما در Emscripten و WebAssembly به خوبی پشتیبانی نمی‌شود. ما با گروه انجمن WebAssembly در W3C برای بهبود استاندارد WebAssembly و ابزارهای اطراف آن برای آوردن استثناهای C++ به WebAssembly کار کرده ایم.
Emscripten فقط بر روی برنامه های کاربردی بزرگ کار نمی کند، بلکه به شما اجازه می دهد کتابخانه ها یا پروژه های کوچکتر را پورت کنید! به عنوان مثال، می توانید ببینید که چگونه می توانید کتابخانه محبوب OpenCV را از طریق Emscripten در وب کامپایل کنید .
در نهایت، WebAssembly عملکردهای ابتدایی پیشرفته ای مانند دستورالعمل های SIMD را ارائه می دهد که به طور چشمگیری عملکرد برنامه وب شما را بهبود می بخشد. به عنوان مثال، Halide برای عملکرد Adobe ضروری است، و در اینجا SIMD به طور متوسط سرعت 3-4× و در برخی موارد سرعت 80-160× را ارائه می دهد.
اشکال زدایی WebAssembly
هیچ پروژه بزرگی را نمی توان بدون ابزارهای مناسب برای کار با موفقیت به پایان رساند، و به همین دلیل است که تیم کروم پشتیبانی کامل از اشکال زدایی WebAssembly را توسعه داده است. این پشتیبانی برای عبور از کد منبع، تنظیم نقاط شکست و مکث در استثناها، بازرسی متغیر با پشتیبانی از نوع غنی، و حتی پشتیبانی اولیه برای ارزیابی در کنسول DevTools را فراهم می کند!
حتماً راهنمای معتبر نحوه استفاده از WebAssembly Debugging را بررسی کنید.
ذخیره سازی با کارایی بالا
با توجه به اینکه اسناد فتوشاپ چقدر می توانند بزرگ باشند، یک نیاز اساسی برای فتوشاپ توانایی انتقال پویا داده ها از روی دیسک به حافظه داخلی در حین حرکت کاربر است. در پلتفرم‌های دیگر، این کار معمولاً از طریق نگاشت حافظه از طریق mmap انجام می‌شود، اما این کار به طور کامل در وب امکان‌پذیر نبوده است - تا زمانی که دستگیره‌های دسترسی سیستم فایل خصوصی مبدا توسعه و به‌عنوان آزمایشی اصلی پیاده‌سازی نشده بودند! می‌توانید نحوه استفاده از این API جدید را در مستندات بخوانید.
فضای رنگی P3 برای بوم
از لحاظ تاریخی، رنگ‌ها در وب در فضای رنگی sRGB که استانداردی از اواسط دهه نود است، بر اساس قابلیت‌های مانیتورهای لوله پرتو کاتدی مشخص شده‌اند. دوربین ها و مانیتورها در ربع قرن اخیر راه طولانی را پیموده اند و بسیاری از فضاهای رنگی بزرگتر و توانمندتر استاندارد شده اند. یکی از محبوب ترین فضاهای رنگی مدرن، Display P3 است. فتوشاپ از Display P3 Canvas برای نمایش دقیقتر تصاویر در مرورگر استفاده می کند. به طور خاص، تصاویر با سفید روشن، رنگ‌های روشن و جزئیات در سایه‌ها در نمایشگرهای مدرنی که داده‌های Display P3 را پشتیبانی می‌کنند، به بهترین شکل ممکن نمایش داده می‌شوند. Display P3 Canvas API بیشتر برای فعال کردن نمایشگرهای با دامنه دینامیکی بالا ساخته شده است.
اجزای وب و روشن
فتوشاپ یک برنامه معروف و بزرگ و غنی است که صدها عنصر UI از ده ها گردش کار پشتیبانی می کند. این برنامه توسط چندین تیم با استفاده از ابزارها و شیوه‌های توسعه مختلف ساخته شده است، اما بخش‌های متفاوت آن باید در یک مجموعه منسجم و با عملکرد بالا گرد هم آیند.
برای مقابله با این چالش، Adobe به Web Components و کتابخانه Lit روی آورد. عناصر رابط کاربری فتوشاپ از کتابخانه Adobe's Spectrum Web Components می آیند، یک پیاده سازی سبک وزن و عملکردی از سیستم طراحی Adobe که با هر چارچوبی یا اصلاً هیچ چارچوبی کار می کند.
علاوه بر این، کل برنامه فتوشاپ با استفاده از اجزای وب مبتنی بر Lit ساخته شده است. تیم با تکیه بر مدل مؤلفه داخلی مرورگر و محصورسازی Shadow DOM، ادغام چند جزیره از کد React ارائه شده توسط سایر تیم‌های Adobe را آسان کرد.
سرویس‌کار در حال ذخیره‌سازی با Workbox
کارکنان خدمات به عنوان یک پروکسی محلی قابل برنامه ریزی عمل می کنند، درخواست های شبکه را رهگیری می کنند و با داده های شبکه، حافظه پنهان طولانی مدت یا ترکیبی از هر دو پاسخ می دهند.
به عنوان بخشی از تلاش‌های تیم V8 برای بهبود عملکرد، اولین باری که یک سرویس‌کار با یک پاسخ WebAssembly حافظه پنهان پاسخ می‌دهد، Chrome نسخه بهینه‌سازی شده کد را تولید و ذخیره می‌کند — حتی برای اسکریپت‌های WebAssembly چند مگابایتی، که در پایگاه کد فتوشاپ رایج است. . یک پیش کامپایل مشابه زمانی انجام می شود که جاوا اسکریپت توسط یک سرویس دهنده در مرحله install آن ذخیره شود . در هر دو مورد، کروم می‌تواند نسخه‌های بهینه‌سازی شده اسکریپت‌های ذخیره‌شده را با حداقل سربار زمان اجرا بارگیری و اجرا کند.
فتوشاپ در وب با استقرار یک سرویس دهنده که بسیاری از اسکریپت های جاوا اسکریپت و WebAssembly خود را پیش کش می کند از این مزیت استفاده می کند. از آنجا که آدرس‌های اینترنتی این اسکریپت‌ها در زمان ساخت تولید می‌شوند و از آنجا که منطق به‌روز نگه‌داشتن حافظه پنهان می‌تواند پیچیده باشد، آنها به مجموعه‌ای از کتابخانه‌های نگهداری شده توسط Google به نام Workbox روی آوردند تا سرویس کارگر خود را به عنوان بخشی از فرآیند ساخت خود تولید کنند.
یک سرویس‌کار مبتنی بر Workbox همراه با ذخیره‌سازی اسکریپت موتور V8 منجر به بهبود عملکرد قابل اندازه‌گیری شد. اعداد خاص بر اساس دستگاهی که کد را اجرا می کند متفاوت است، اما تیم تخمین می زند که این بهینه سازی ها زمان صرف شده برای مقداردهی اولیه کد را تا 75 درصد کاهش داده است.
آینده Adobe در وب چیست
راه‌اندازی فتوشاپ بتا تنها آغاز راه است و ما چندین بهبود عملکرد و ویژگی‌ها را در حال حاضر در دست اجرا داریم زیرا فتوشاپ به دنبال راه‌اندازی کامل آنها پس از این بتا است. ادوبی با فتوشاپ متوقف نمی شود و قصد دارد به طور تهاجمی Creative Cloud را در وب گسترش دهد و آن را به یک پلتفرم اصلی برای ایجاد محتوای خلاقانه و همکاری تبدیل کند. این به میلیون‌ها خالق برای اولین بار این امکان را می‌دهد که داستان خود را تعریف کنند و از جریان‌های کاری نوآورانه در وب بهره ببرند.
از آنجایی که Adobe همچنان مرزهای ممکن را پیش می‌برد، تیم Chrome به همکاری ما برای پیشبرد وب برای Adobe و به طور کلی اکوسیستم توسعه‌دهنده وب پر جنب و جوش ادامه خواهد داد. از آنجایی که سایر مرورگرها نیز به این قابلیت‌های مرورگر مدرن دست پیدا می‌کنند، ما خوشحالیم که Adobe محصولات خود را در آنجا نیز در دسترس قرار می‌دهد. منتظر به‌روزرسانی‌های آینده باشید، زیرا ما به پیشرفت وب ادامه می‌دهیم!
می‌توانید درباره دسترسی به فتوشاپ در وب (بتا) در مرکز راهنمای Adobe اطلاعات بیشتری کسب کنید.