แนวคิดในการเรียกใช้ซอฟต์แวร์ที่ซับซ้อนอย่าง Photoshop ในเบราว์เซอร์โดยตรงคงเป็นเรื่องยากที่จะจินตนาการได้เมื่อไม่กี่ปีที่ผ่านมา อย่างไรก็ตาม Adobe ได้เปิดตัว Photoshop รุ่นเบต้าแบบสาธารณะบนเว็บแล้วโดยใช้เทคโนโลยีเว็บใหม่ๆ ต่างๆ
ในช่วง 3 ปีที่ผ่านมา Chrome มุ่งมั่นที่จะเพิ่มขีดความสามารถของเว็บแอปพลิเคชันที่พยายามขยายขอบเขตสิ่งที่เป็นไปได้ในเบราว์เซอร์ ตัวอย่างเว็บแอปพลิเคชันดังกล่าวคือ Photoshop แนวคิดในการเรียกใช้ซอฟต์แวร์ที่ซับซ้อนอย่าง Photoshop ในเบราว์เซอร์โดยตรงคงเป็นเรื่องยากที่จะจินตนาการได้เมื่อไม่กี่ปีที่ผ่านมา อย่างไรก็ตาม Adobe ได้เปิดตัว Photoshop รุ่นเบต้าแบบสาธารณะบนเว็บแล้วโดยใช้เทคโนโลยีเว็บใหม่ๆ ต่างๆ
(หากต้องการดูแทนการอ่าน บทความนี้มีวิดีโอให้ดูด้วย)
ในโพสต์นี้ เราต้องการแชร์รายละเอียดเป็นครั้งแรกเกี่ยวกับวิธีที่การทำงานร่วมกันของเราขยายการให้บริการ Photoshop ไปยังเว็บ คุณสามารถใช้ API ทั้งหมดที่ Adobe ใช้และอื่นๆ ในแอปของคุณเองได้ด้วย อย่าลืมอ่านบล็อกโพสต์เกี่ยวกับความสามารถของเว็บเพื่อหาแรงบันดาลใจ และดูเครื่องมือติดตาม API เพื่อดูข้อมูลล่าสุดและดีที่สุดที่เรากำลังพัฒนา
เหตุผลที่ Photoshop มาถึงเว็บ
เมื่อเวลาผ่านไป สิ่งหนึ่งที่ไม่เปลี่ยนแปลงคือข้อได้เปรียบหลักที่เว็บไซต์และเว็บแอปมีเหนือแอปพลิเคชันเฉพาะแพลตฟอร์ม ข้อดีเหล่านี้รวมถึงความสามารถพิเศษมากมาย เช่น ความสามารถในการลิงก์ เป็นแบบชั่วคราว และเป็นแบบสากล แต่ข้อดีที่สำคัญที่สุดคือช่วยให้เข้าถึงได้ง่าย แชร์ได้สะดวก และทำงานร่วมกันได้อย่างยอดเยี่ยม
พลังอันเรียบง่ายของ URL คือทุกคนสามารถคลิกและเข้าถึงได้ทันที ใช้แค่เบราว์เซอร์เท่านั้น คุณไม่จำเป็นต้องติดตั้งแอปพลิเคชันหรือกังวลเกี่ยวกับระบบปฏิบัติการที่ใช้ สําหรับเว็บแอปพลิเคชัน หมายความว่าผู้ใช้จะมีสิทธิ์เข้าถึงแอปพลิเคชัน รวมถึงเอกสารและความคิดเห็นของตน ด้วยเหตุนี้ เว็บจึงกลายเป็นแพลตฟอร์มการทำงานร่วมกันที่เหมาะที่สุด ซึ่งเป็นสิ่งที่จําเป็นต่อทีมครีเอทีฟโฆษณาและทีมการตลาดมากขึ้นเรื่อยๆ
Google เอกสารเป็นผู้บุกเบิกการเข้าถึงที่ง่ายขึ้นนี้ เราส่วนใหญ่ทราบดีว่าการเริ่มเอกสาร ส่งลิงก์ให้ผู้อื่น และไปยังแอปพลิเคชัน รวมถึงเอกสารหรือความคิดเห็นที่ต้องการได้ทันทีนั้นเป็นเรื่องง่ายเพียงใด ตั้งแต่นั้นมา แอปพลิเคชันที่น่าทึ่งมากมาย เช่น แอปพลิเคชันที่เราเคยแสดงในอดีต ได้นำมาใช้งานรูปแบบนี้ และตอนนี้ Photoshop ก็จะได้ประโยชน์จากรูปแบบนี้ด้วย
ประวัติความเป็นมาของ Photoshop บนเว็บ
เว็บเริ่มต้นจากแพลตฟอร์มที่เหมาะกับเอกสารเท่านั้น แต่ได้เติบโตขึ้นอย่างมากตลอดประวัติศาสตร์ แอปยุคแรกๆ เช่น Gmail แสดงให้เห็นว่าแอปพลิเคชันและการทำงานแบบอินเทอร์แอกทีฟที่ซับซ้อนมากขึ้นนั้นเป็นไปได้อย่างน้อย นับจากนั้นมา เราได้เห็นการพัฒนาร่วมกันที่น่าประทับใจซึ่งเว็บแอปได้ขยายขีดความสามารถให้ไกลกว่าที่เคย และผู้ให้บริการเบราว์เซอร์ก็ตอบสนองด้วยการขยายความสามารถของเว็บให้มากขึ้น การทำซ้ำล่าสุดของวงจรที่มีประสิทธิภาพนี้ทำให้ Photoshop ใช้งานได้บนเว็บ
ก่อนหน้านี้ Adobe ได้เปิดตัว Spark และ Lightroom บนเว็บ และสนใจที่จะนำ Photoshop ไปไว้ในเว็บมาหลายปีแล้ว อย่างไรก็ตาม แนวคิดเหล่านี้ถูกบล็อกด้วยข้อจำกัดด้านประสิทธิภาพของ JavaScript, ไม่มีเป้าหมายการคอมไพล์ที่ดีสำหรับโค้ด และไม่มีความสามารถของเว็บ อ่านต่อเพื่อดูสิ่งที่ Chrome สร้างขึ้นในเบราว์เซอร์เพื่อแก้ปัญหาเหล่านี้
การพอร์ต WebAssembly ด้วย Emscripten
WebAssembly และ toolchain C++ อย่าง Emscripten เป็นกุญแจสำคัญในการปลดล็อกความสามารถของ 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 Community Group ใน W3C เพื่อปรับปรุงมาตรฐาน WebAssembly และเครื่องมือต่างๆ ที่เกี่ยวข้องเพื่อนำข้อยกเว้น C++ มาใช้กับ WebAssembly
Emscripten ไม่เพียงทำงานกับแอปพลิเคชันขนาดใหญ่เท่านั้น แต่ยังให้คุณพอร์ตไลบรารีหรือโปรเจ็กต์ขนาดเล็กได้ด้วย เช่น คุณดูวิธีคอมไพล์ไลบรารี OpenCV ที่ได้รับความนิยมไปยังเว็บผ่าน Emscripten ได้
สุดท้าย WebAssembly ยังมีองค์ประกอบพื้นฐานด้านประสิทธิภาพขั้นสูง เช่น คำสั่ง SIMD ซึ่งช่วยปรับปรุงประสิทธิภาพเว็บแอปได้อย่างมาก ตัวอย่างเช่น Halide มีความสำคัญต่อประสิทธิภาพของ Adobe และ SIMD จะช่วยเพิ่มความเร็วได้ 3-4 เท่าโดยเฉลี่ย และในบางกรณีจะเพิ่มความเร็วได้ 80-160 เท่า
การแก้ไขข้อบกพร่อง WebAssembly
โปรเจ็กต์ขนาดใหญ่จะสำเร็จไม่ได้หากไม่มีเครื่องมือที่เหมาะสมสำหรับงาน ด้วยเหตุนี้ ทีม Chrome จึงพัฒนาการสนับสนุนการแก้ไขข้อบกพร่อง WebAssembly แบบเต็มรูปแบบ โดยรองรับการไปยังส่วนต่างๆ ของซอร์สโค้ด การตั้งจุดหยุดพักและหยุดชั่วคราวเมื่อพบข้อยกเว้น การตรวจสอบตัวแปรที่รองรับประเภทข้อมูลต่างๆ และแม้แต่การรองรับพื้นฐานสําหรับการประเมินในคอนโซลเครื่องมือสําหรับนักพัฒนาซอฟต์แวร์
อย่าลืมอ่านคู่มือที่เชื่อถือได้เกี่ยวกับวิธีใช้การแก้ไขข้อบกพร่อง WebAssembly
พื้นที่เก็บข้อมูลประสิทธิภาพสูง
เอกสาร Photoshop อาจมีขนาดใหญ่มาก ความต้องการที่สำคัญสำหรับ Photoshop จึงอยู่ที่ความสามารถในการย้ายข้อมูลจากในดิสก์ไปยังในหน่วยความจำแบบไดนามิกเมื่อผู้ใช้เลื่อนไปรอบๆ ในแพลตฟอร์มอื่นๆ การดำเนินการนี้มักจะทำได้ผ่านการแมปหน่วยความจำผ่าน mmap แต่การดำเนินการนี้ไม่สามารถทำได้อย่างมีประสิทธิภาพบนเว็บ จนกระทั่งมีการพัฒนาและติดตั้งใช้งานแฮนเดิลการเข้าถึงระบบไฟล์ส่วนตัวของต้นทางเป็นการทดลองใช้ต้นทาง คุณสามารถอ่านวิธีใช้ประโยชน์จาก API ใหม่นี้ได้ในเอกสารประกอบ
พื้นที่สี P3 สำหรับภาพพิมพ์แคนวาส
ที่ผ่านมา สีบนเว็บได้รับการระบุในพื้นที่สี sRGB ซึ่งเป็นมาตรฐานจากช่วงกลางทศวรรษ 90 โดยอิงตามความสามารถของจอภาพแบบ CRT กล้องและจอภาพพัฒนาไปมากในช่วง 25 ปีที่ผ่านมา และพื้นที่สีที่ใหญ่ขึ้นและมีประสิทธิภาพมากขึ้นจำนวนมากได้รับการกำหนดมาตรฐานแล้ว พื้นที่สีสมัยใหม่ที่ได้รับความนิยมมากที่สุดอย่างหนึ่งคือ Display P3 Photoshop ใช้ Display P3 Canvas เพื่อแสดงรูปภาพอย่างถูกต้องมากขึ้นในเบราว์เซอร์ โดยเฉพาะอย่างยิ่ง รูปภาพที่มีสีขาวสว่าง สีสด และรายละเอียดในส่วนเงาจะแสดงผลได้ดีที่สุดบนจอแสดงผลสมัยใหม่ซึ่งรองรับข้อมูล Display P3 เรากําลังพัฒนา Display P3 Canvas API เพิ่มเติมเพื่อเปิดใช้จอแสดงผลแบบช่วงไดนามิกสูง
คอมโพเนนต์เว็บและ Lit
Photoshop เป็นแอปพลิเคชันขนาดใหญ่ที่มีชื่อเสียงและเต็มไปด้วยฟีเจอร์ต่างๆ โดยมีองค์ประกอบ UI หลายร้อยรายการที่รองรับเวิร์กโฟลว์หลายสิบรายการ แอปสร้างขึ้นโดยทีมต่างๆ โดยใช้เครื่องมือและแนวทางการพัฒนาที่หลากหลาย แต่ส่วนต่างๆ ของแอปต้องรวมกันเป็นหนึ่งเดียวที่มีประสิทธิภาพสูง
Adobe จึงหันมาใช้ Web Components และไลบรารี Lit เพื่อรับมือกับปัญหานี้ องค์ประกอบ UI ของ Photoshop มาจากไลบรารี Spectrum Web Components ของ Adobe ซึ่งเป็นการใช้งานระบบการออกแบบของ Adobe ที่มีประสิทธิภาพและน้ำหนักเบา ซึ่งทำงานร่วมกับเฟรมเวิร์กใดก็ได้หรือไม่ต้องใช้เฟรมเวิร์กเลย
นอกจากนี้ แอป Photoshop ทั้งหมดยังสร้างขึ้นโดยใช้คอมโพเนนต์ของเว็บที่อิงตาม Lit ทีมใช้ประโยชน์จากรูปแบบคอมโพเนนต์ในตัวของเบราว์เซอร์และการรวม Shadow DOM ทำให้ผสานรวม "เกาะ" โค้ด React 2-3 รายการที่ทีม Adobe อื่นๆ ให้มาได้อย่างง่ายดาย
การแคช Service Worker ด้วย Workbox
Service Worker ทำหน้าที่เป็นพร็อกซีในเครื่องที่โปรแกรมได้ โดยจะสกัดกั้นคําขอเครือข่ายและตอบกลับด้วยข้อมูลจากเครือข่าย แคชที่มีอายุการใช้งานยาวนาน หรือทั้ง 2 อย่างผสมกัน
ทีม V8 พยายามปรับปรุงประสิทธิภาพอยู่เสมอ เมื่อ Service Worker ตอบกลับด้วยคำตอบ WebAssembly ที่แคชไว้เป็นครั้งแรก Chrome จะสร้างและจัดเก็บโค้ดเวอร์ชันที่ได้รับการเพิ่มประสิทธิภาพไว้ แม้จะเป็นสคริปต์ WebAssembly ที่มีขนาดใหญ่หลายเมกะไบต์ ซึ่งพบได้ทั่วไปในโค้ดเบสของ Photoshop การคอมไพล์ล่วงหน้าที่คล้ายกันจะเกิดขึ้นเมื่อ Service Worker แคช JavaScript ไว้ในขั้นตอน install ในกรณีทั้ง 2 รูปแบบ Chrome จะโหลดและเรียกใช้สคริปต์ที่แคชไว้เวอร์ชันที่ได้รับการเพิ่มประสิทธิภาพโดยมีค่าใช้จ่ายเพิ่มเติมในรันไทม์น้อยที่สุด
Photoshop บนเว็บใช้ประโยชน์จากข้อดีนี้ด้วยการใช้ Service Worker ที่แคชสคริปต์ JavaScript และ WebAssembly จำนวนมากไว้ล่วงหน้า เนื่องจาก URL ของสคริปต์เหล่านี้สร้างขึ้นเมื่อสร้าง และเนื่องจากตรรกะในการทำให้แคชเป็นเวอร์ชันล่าสุดอาจมีความซับซ้อน พวกเขาจึงหันมาใช้ชุดไลบรารีที่ Google ดูแลรักษาที่เรียกว่า Workbox เพื่อสร้าง Service Worker เป็นส่วนหนึ่งของกระบวนการสร้าง
Service Worker ที่ใช้ Workbox ร่วมกับการแคชสคริปต์ของเครื่องยนต์ V8 ส่งผลให้เกิดประสิทธิภาพที่ดีขึ้นซึ่งวัดผลได้ ตัวเลขที่เจาะจงจะแตกต่างกันไปตามอุปกรณ์ที่ใช้โค้ด แต่ทีมประเมินว่าการเพิ่มประสิทธิภาพเหล่านี้ช่วยลดเวลาในการเริ่มต้นโค้ดได้ 75%
ก้าวต่อไปของ Adobe บนเว็บ
การเปิดตัวเวอร์ชันเบต้าของ Photoshop เป็นเพียงจุดเริ่มต้นเท่านั้น และเราได้ดำเนินการปรับปรุงประสิทธิภาพและฟีเจอร์หลายอย่างแล้วเมื่อ Photoshop มุ่งสู่เวอร์ชันที่เปิดตัวอย่างเต็มรูปแบบหลังจากเวอร์ชันเบต้านี้ Adobe ไม่ได้หยุดพัฒนาแค่ Photoshop แต่ยังมีแผนที่จะขยาย Creative Cloud ไปยังเว็บอย่างจริงจัง เพื่อทำให้แพลตฟอร์มนี้เป็นแพลตฟอร์มหลักสำหรับทั้งการสร้างและการทำงานร่วมกันในเนื้อหาที่สร้างสรรค์ ซึ่งจะช่วยให้ครีเอเตอร์หน้าใหม่หลายล้านคนได้บอกเล่าเรื่องราวและได้รับประโยชน์จากเวิร์กโฟลว์ที่แปลกใหม่บนเว็บ
ขณะที่ Adobe ยังคงพัฒนาขีดความสามารถของเทคโนโลยีให้ก้าวหน้าไปเรื่อยๆ ทีม Chrome จะยังคงทำงานร่วมกับ Adobe เพื่อพัฒนาเว็บต่อไป และเพื่อพัฒนาระบบนิเวศของนักพัฒนาเว็บที่มีชีวิตชีวาโดยทั่วไป เมื่อเบราว์เซอร์อื่นๆ พัฒนาความสามารถให้ทันสมัยขึ้น เรายินดีที่ Adobe ให้บริการผลิตภัณฑ์ของตนในเบราว์เซอร์เหล่านั้นด้วย โปรดติดตามข้อมูลอัปเดตในอนาคตขณะที่เราพัฒนาเว็บต่อไป
ดูข้อมูลเพิ่มเติมเกี่ยวกับการเข้าถึง Photoshop บนเว็บ (เบต้า) ได้ในศูนย์ช่วยเหลือของ Adobe