เมื่อไม่กี่ปีก่อน แนวคิดในการเรียกใช้ซอฟต์แวร์ที่ซับซ้อนพอๆ กับ 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 และ Emscripten ของชุดเครื่องมือ C++ เป็นกุญแจสำคัญในการปลดล็อกความสามารถในการเข้าถึงเว็บของ Photoshop เพราะทำให้ Adobe ไม่จำเป็นต้องเริ่มใหม่ตั้งแต่ต้น แต่สามารถใช้ประโยชน์จากฐานของโค้ด Photoshop ที่มีอยู่ได้ WebAssembly คือชุดคำแนะนำแบบไบนารีแบบพกพาที่ให้บริการในเบราว์เซอร์ทั้งหมด ซึ่งออกแบบมาเป็นเป้าหมายสำหรับการรวบรวมภาษาโปรแกรม ซึ่งหมายความว่าแอปพลิเคชัน เช่น Photoshop ที่เขียนด้วย C++ จะสามารถถ่ายโอนไปยังเว็บได้โดยตรง โดยไม่จำเป็นต้องเขียนใหม่ใน JavaScript หากต้องการเริ่มต้นการย้ายด้วยตนเอง โปรดดูเอกสาร Emscripten ฉบับเต็มหรือทำตามตัวอย่างที่แนะนำเกี่ยวกับวิธีโอนคลัง
Emscripten เป็นห่วงโซ่เครื่องมือที่มีฟีเจอร์ครบถ้วน ซึ่งไม่เพียงช่วยคุณคอมไพล์ C++ ไปยัง Wasm เท่านั้น แต่ยังมอบเลเยอร์การแปลที่เปลี่ยนการเรียก POSIX API เป็นการเรียก 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 ที่มีคุณลักษณะครบถ้วน ซึ่งให้การสนับสนุนสำหรับขั้นตอนการผ่านซอร์สโค้ด การตั้งค่าเบรกพอยท์ และการหยุดการยกเว้นชั่วคราว การตรวจสอบตัวแปรพร้อมการสนับสนุนประเภท Rich Text และแม้แต่การสนับสนุนพื้นฐานสำหรับการประเมินในคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บ
อย่าลืมอ่านคำแนะนำที่เชื่อถือได้เกี่ยวกับวิธีใช้ WebAssembly Debugging
พื้นที่เก็บข้อมูลประสิทธิภาพสูง
เนื่องจากเอกสาร Photoshop มีขนาดใหญ่มาก ความต้องการที่สำคัญสำหรับ Photoshop คือความสามารถในการย้ายข้อมูลจากดิสก์ไปยังในหน่วยความจำแบบไดนามิกขณะที่ผู้ใช้เลื่อนไปรอบๆ ในแพลตฟอร์มอื่นๆ โดยปกติขั้นตอนนี้จะทำได้ผ่านการแมปหน่วยความจำผ่าน mmap แต่วิธีนี้ก็ไม่เป็นไปอย่างมีประสิทธิภาพบนเว็บ เนื่องจากจนกว่าจะมีการพัฒนาและนำแฮนเดิลการเข้าถึงระบบไฟล์ส่วนตัวต้นทางมาใช้เป็นช่วงทดลองใช้จากต้นทาง อ่านวิธีใช้ประโยชน์จาก API ใหม่นี้ได้ในเอกสาร
พื้นที่สี P3 สำหรับภาพพิมพ์แคนวาส
ในอดีต สีบนเว็บได้รับการระบุในพื้นที่สี sRGB ซึ่งเป็นมาตรฐานตั้งแต่ช่วงกลางทศวรรษ 1990 โดยอิงตามความสามารถของอุปกรณ์ตรวจสอบท่อแคโทดเรย์ กล้องและจอภาพได้พัฒนาไปไกลมากในช่วงศตวรรษที่ 20 ทั้งยังมีพื้นที่สีที่มีขนาดใหญ่และมีความสามารถมากกว่าที่เคยได้รับการพัฒนาให้เป็นมาตรฐานเดียวกัน พื้นที่สีสมัยใหม่ที่ได้รับความนิยมมากที่สุดคือ Display P3 Photoshop ใช้ Display P3 Canvas เพื่อแสดงภาพในเบราว์เซอร์ได้แม่นยำยิ่งขึ้น โดยเฉพาะอย่างยิ่งรูปภาพสีขาวสว่าง สีสดใส และอยู่ในเงาจะแสดงรายละเอียดที่ดีที่สุดเท่าที่เป็นไปได้บนจอแสดงผลสมัยใหม่ที่รองรับข้อมูล Display P3 เรากำลังพัฒนา Display P3 Canvas API เพิ่มเติมเพื่อเปิดใช้จอแสดงผลแบบช่วงไดนามิกกว้าง
คอมโพเนนต์เว็บและ Lit
Photoshop เป็นแอปพลิเคชันที่มีขนาดใหญ่และโดดเด่นด้วยองค์ประกอบ UI หลายร้อยรายการที่รองรับเวิร์กโฟลว์ได้มากมาย แอปสร้างขึ้นโดยหลายทีมโดยใช้เครื่องมือและแนวทางปฏิบัติในการพัฒนาที่หลากหลาย แต่ส่วนต่างๆ ของแอปต้องทำงานร่วมกันเป็นทีมเดียวที่มีประสิทธิภาพสูง
Adobe ได้หันมาใช้คอมโพเนนต์เว็บและไลบรารีของ Lite เพื่อรับมือกับความท้าทายนี้ องค์ประกอบ UI ของ Photoshop มาจากไลบรารี Spectrum Web Elements ของ Adobe ซึ่งเป็นการนำระบบการออกแบบของ Adobe ไปใช้และมีน้ำหนักเบาและมีประสิทธิภาพสูง ซึ่งใช้งานได้กับทุกเฟรมเวิร์ก หรือไม่มีเฟรมเวิร์กเลย
ยิ่งไปกว่านั้น แอป Photoshop ทั้งหมดยังสร้างขึ้นโดยใช้ Web Elements แบบ Lit เมื่อใช้ประโยชน์จากโมเดลคอมโพเนนต์ในตัวของเบราว์เซอร์และการห่อหุ้ม Shadow DOM ทีมพบว่าการผสานรวมโค้ด React บางส่วนที่ทีม Adobe อื่นๆ จัดหาให้เป็นเรื่องง่าย
การแคช Service Worker ด้วย Workbox
Service Worker ทำหน้าที่เป็นพร็อกซีภายในที่ตั้งโปรแกรมได้ โดยจะสกัดกั้นคำขอของเครือข่ายและตอบกลับด้วยข้อมูลจากเครือข่าย แคชที่ใช้ได้นาน หรือทั้ง 2 อย่าง
เพื่อเป็นส่วนหนึ่งของความพยายามของทีม V8 ในการปรับปรุงประสิทธิภาพ ครั้งแรกที่โปรแกรมทำงานของบริการตอบสนองด้วยการตอบสนองของ WebAssembly ที่แคชไว้ Chrome จะสร้างและจัดเก็บโค้ดเวอร์ชันที่ได้รับการเพิ่มประสิทธิภาพ แม้แต่สำหรับสคริปต์ WebAssembly ที่มีหลายเมกะไบต์ ซึ่งจะพบได้ทั่วไปในฐานของโค้ดของ Photoshop การคอมไพล์ล่วงหน้าที่คล้ายกันจะเกิดขึ้นเมื่อโปรแกรมทำงานแคช JavaScript ระหว่างขั้นตอน install ในทั้ง 2 กรณี Chrome จะโหลดและเรียกใช้สคริปต์ที่แคชไว้ในเวอร์ชันที่เพิ่มประสิทธิภาพโดยมีค่าใช้จ่ายน้อยที่สุดในระหว่างรันไทม์
Photoshop บนเว็บใช้ประโยชน์จากจุดนี้โดยการปรับใช้ Service Worker ที่แคชสคริปต์ JavaScript และ WebAssembly จำนวนมากไว้ล่วงหน้า เนื่องจาก URL สำหรับสคริปต์เหล่านี้สร้างขึ้น ณ เวลาที่สร้าง และเนื่องจากตรรกะของการอัปเดตแคชให้เป็นข้อมูลล่าสุดอาจซับซ้อน พวกเขาจึงหันมาใช้ชุดไลบรารีที่ Google ดูแล ซึ่งเรียกว่า Workbox เพื่อสร้าง Service Worker ให้เป็นส่วนหนึ่งของกระบวนการสร้าง
โปรแกรมทำงานของบริการที่ใช้ Workbox และการแคชสคริปต์ของเครื่องมือ V8 นำไปสู่การปรับปรุงประสิทธิภาพที่วัดได้ ตัวเลขที่เจาะจงจะแตกต่างกันไปตามอุปกรณ์ที่เรียกใช้โค้ด แต่ทีมงานประเมินว่าการเพิ่มประสิทธิภาพเหล่านี้ช่วยลดเวลาที่ใช้ในการเริ่มต้นโค้ดลงได้ 75%
ก้าวต่อไปของ Adobe บนเว็บ
การเปิดตัว Photoshop รุ่นเบต้าเป็นเพียงจุดเริ่มต้นเท่านั้น และเรากำลังมีการปรับปรุงประสิทธิภาพและฟีเจอร์หลายๆ อย่างอยู่บ้างขณะที่ Photoshop ติดตามการเปิดตัวอย่างเต็มรูปแบบหลังจากรุ่นเบต้านี้ Adobe ไม่ได้หยุดอยู่แค่ Photoshop และมีแผนที่จะขยาย Creative Cloud ไปยังเว็บอย่างรวดเร็ว ซึ่งทำให้เป็นแพลตฟอร์มหลักสำหรับทั้งการสร้างคอนเทนต์ครีเอทีฟโฆษณาและการทำงานร่วมกัน วิธีนี้จะช่วยให้ผู้สร้างเนื้อหามือใหม่นับล้านได้บอกเล่าเรื่องราวของตนเองและได้ประโยชน์จากเวิร์กโฟลว์ที่เป็นนวัตกรรมบนเว็บ
ในขณะที่ Adobe พยายามขยายขอบเขตของสิ่งที่เป็นไปได้ ทีม Chrome จะทำงานร่วมกันอย่างต่อเนื่องเพื่อขับเคลื่อนเว็บไปข้างหน้าสำหรับ Adobe และระบบนิเวศของนักพัฒนาเว็บที่มีชีวิตชีวาโดยทั่วไป เบราว์เซอร์อื่นๆ เองก็นำความสามารถใหม่ๆ เหล่านี้ของเบราว์เซอร์เช่นกัน เราตื่นเต้นที่จะได้เห็น Adobe ให้บริการผลิตภัณฑ์ด้วยเช่นกัน โปรดติดตามการอัปเดตในอนาคตในขณะที่เราขับเคลื่อนเว็บไปข้างหน้า
คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับการเข้าถึง Photoshop บนเว็บ (เบต้า) ได้ในศูนย์ช่วยเหลือของ Adobe