Chỉ vài năm trước, ý tưởng chạy phần mềm phức tạp như Photoshop trực tiếp trong trình duyệt có lẽ đã rất khó hình dung. Tuy nhiên, bằng cách sử dụng nhiều công nghệ web mới khác nhau, Adobe giờ đây đã cung cấp phiên bản beta công khai của Photoshop lên web.
Trong ba năm qua, Chrome đã nỗ lực không ngừng để hỗ trợ các ứng dụng web muốn vượt khỏi những giới hạn của khả năng hiện thực của trình duyệt. Một trong những ứng dụng web như vậy là Photoshop. Chỉ vài năm trước, ý tưởng chạy phần mềm phức tạp như Photoshop trực tiếp trong trình duyệt có lẽ đã rất khó hình dung. Tuy nhiên, bằng cách sử dụng nhiều công nghệ web mới khác nhau, Adobe giờ đây đã cung cấp phiên bản beta công khai của Photoshop lên web.
(Nếu bạn muốn xem hơn so với việc đọc, bài viết này cũng có sẵn dưới dạng video.)
Trong bài đăng này, lần đầu tiên chúng tôi muốn chia sẻ chi tiết về cách cộng tác của chúng ta sẽ mở rộng Photoshop trên web. Bạn cũng có thể sử dụng tất cả các API mà Adobe đã sử dụng và nhiều API khác trong các ứng dụng của mình. Hãy nhớ xem các bài đăng trên blog liên quan đến các chức năng trên web của chúng tôi để có thêm cảm hứng và xem công cụ theo dõi API để nắm bắt những thông tin mới nhất và tuyệt vời nhất mà chúng tôi đang phát triển.
Lý do Photoshop xuất hiện trên web
Khi web phát triển, một điều không thay đổi đó là những ưu điểm cốt lõi mà trang web và ứng dụng web cung cấp so với các ứng dụng dành riêng cho nền tảng. Những ưu điểm này bao gồm nhiều khả năng độc đáo, chẳng hạn như khả năng có thể liên kết, tạm thời và phổ quát, nhưng cũng có trọng tâm là giúp người dùng truy cập một cách đơn giản, chia sẻ dễ dàng và cộng tác hiệu quả.
Sức mạnh đơn giản của URL là bất kỳ ai cũng có thể nhấp vào và truy cập ngay lập tức. Tất cả những gì bạn cần là một trình duyệt. Bạn không cần phải cài đặt ứng dụng hay lo lắng về việc mình đang chạy hệ điều hành nào. Đối với các ứng dụng web, điều đó có nghĩa là người dùng có thể truy cập vào ứng dụng cũng như tài liệu và nhận xét của họ. Điều này làm cho web trở thành nền tảng cộng tác lý tưởng. Nền tảng này ngày càng trở nên cần thiết đối với các nhóm sáng tạo và tiếp thị.
Google Tài liệu là đơn vị tiên phong áp dụng cách truy cập đơn giản này. Hầu hết chúng ta đều biết việc bắt đầu một tài liệu, gửi đường liên kết cho ai đó và lập tức đi ngay vào không chỉ ứng dụng mà còn cả tài liệu hoặc nhận xét cụ thể nữa. Kể từ đó, rất nhiều ứng dụng hữu ích, chẳng hạn như những ứng dụng chúng tôi từng giới thiệu, đã áp dụng mô hình này và giờ đây, Photoshop cũng sẽ được hưởng lợi.
Cách Photoshop xuất hiện trên web
Web ban đầu chỉ là một nền tảng chỉ phù hợp với các tài liệu, nhưng đã phát triển đáng kể trong suốt lịch sử của nó. Những ứng dụng đời đầu như Gmail cho thấy khả năng tương tác và các ứng dụng phức tạp hơn là ít nhất có thể. Kể từ đó, chúng tôi đã thấy được sự hợp tác phát triển rất ấn tượng, trong đó, các ứng dụng web vượt qua ranh giới của những gì có thể và các nhà cung cấp trình duyệt phản hồi bằng cách mở rộng hơn nữa các tính năng của web. Phiên bản mới nhất của vòng lặp khép kín này là tính năng đã kích hoạt Photoshop trên web.
Trước đây, Adobe từng đưa Spark và Lightroom lên web và quan tâm đến việc đưa Photoshop lên web trong nhiều năm qua. Tuy nhiên, chúng đã bị chặn bởi các giới hạn hiệu suất của JavaScript, thiếu mục tiêu biên dịch tốt cho mã cũng như thiếu các tính năng web. Hãy đọc tiếp để tìm hiểu những tính năng mà Chrome tích hợp trong trình duyệt nhằm giải quyết những vấn đề này.
Chuyển WebAssembly bằng Emscripten
WebAssembly và chuỗi công cụ C++ Emscripten là chìa khoá để khai thác khả năng kết nối web của Photoshop, vì điều đó có nghĩa là Adobe sẽ không phải bắt đầu lại từ đầu mà có thể tận dụng cơ sở mã Photoshop hiện có của họ. WebAssembly là một tập lệnh nhị phân di động vận chuyển trong mọi trình duyệt được thiết kế làm đích biên dịch cho các ngôn ngữ lập trình. Điều này có nghĩa là các ứng dụng như Photoshop được viết bằng C++ có thể được chuyển trực tiếp sang web mà không cần phải ghi lại trong JavaScript. Để bắt đầu tự chuyển đổi, hãy xem toàn bộ tài liệu về Mô phỏng hoặc làm theo ví dụ hướng dẫn về cách chuyển thư viện.
Emscripten là một chuỗi công cụ đầy đủ tính năng không chỉ giúp bạn biên dịch C++ thành Wasm mà còn cung cấp lớp dịch để biến lệnh gọi API POSIX thành lệnh gọi API web và thậm chí chuyển đổi OpenGL thành WebGL. Ví dụ: bạn có thể chuyển các ứng dụng tham chiếu đến hệ thống tệp cục bộ và Emscripten sẽ cung cấp một hệ thống tệp mô phỏng để duy trì chức năng.
Emscripten đã có thể đưa hầu hết các phần của Photoshop lên web trong một thời gian, nhưng tốc độ này chưa hẳn là đủ nhanh. Chúng tôi liên tục làm việc với Adobe để tìm ra điểm tắc nghẽn và cải thiện Emscripten. Photoshop phụ thuộc vào đa luồng. Việc đưa phương pháp đa luồng linh động lên WebAssembly là một yêu cầu tối quan trọng.
Ngoài ra, việc xử lý lỗi dựa trên ngoại lệ rất phổ biến trong C++, nhưng không được hỗ trợ tốt trong Emscripten và WebAssembly. Chúng tôi đã hợp tác với Nhóm cộng đồng WebAssembly trong W3C để cải thiện tiêu chuẩn WebAssembly và công cụ xoay quanh tiêu chuẩn này để đưa các ngoại lệ C++ vào WebAssembly.
Emscripten không chỉ hoạt động trên các ứng dụng lớn mà còn cho phép bạn chuyển các thư viện hoặc dự án nhỏ hơn! Ví dụ: bạn có thể xem cách biên dịch thư viện OpenCV phổ biến lên web thông qua Emscripten.
Cuối cùng, WebAssembly cung cấp các dữ liệu hiệu suất nâng cao như hướng dẫn SIMD, giúp cải thiện đáng kể hiệu suất của ứng dụng web. Ví dụ: Halide đóng vai trò thiết yếu đối với hiệu suất của Adobe và ở đây, SIMD cung cấp tốc độ trung bình gấp 3 – 4 lần và trong một số trường hợp, tốc độ tăng từ 80 – 160 ×.
Gỡ lỗi WebAssembly
Không thể hoàn thành thành công dự án lớn nào nếu không có các công cụ phù hợp cho công việc này, và đó là lý do nhóm Chrome đã phát triển dịch vụ hỗ trợ gỡ lỗi WebAssembly đầy đủ tính năng. Công cụ này cũng hỗ trợ bạn thực hiện bước qua mã nguồn, đặt điểm ngắt và tạm dừng ngoại lệ, kiểm tra biến với khả năng hỗ trợ loại phong phú và thậm chí là hỗ trợ cơ bản để đánh giá trong bảng điều khiển Công cụ cho nhà phát triển!
Hãy nhớ xem hướng dẫn đáng tin cậy về cách sử dụng Gỡ lỗi WebAssembly.
Bộ nhớ hiệu suất cao
Đối với các tài liệu Photoshop có kích thước lớn, một nhu cầu thiết yếu đối với Photoshop là khả năng tự động di chuyển dữ liệu từ ổ đĩa sang trong bộ nhớ khi người dùng di chuyển. Trên các nền tảng khác, điều này thường được thực hiện thông qua việc ánh xạ bộ nhớ thông qua mmap, nhưng điều này chưa thể hiệu quả trên web – tức là cho đến khi các trình xử lý truy cập hệ thống tệp riêng tư gốc được phát triển và triển khai dưới dạng bản dùng thử theo nguyên gốc! Bạn có thể đọc cách tận dụng API mới này trong tài liệu.
Hệ màu P3 cho canvas
Trước đây, màu sắc trên web được chỉ định trong hệ màu sRGB. Đây là một tiêu chuẩn có từ giữa những năm 90, dựa trên các chức năng của thiết bị giám sát ống tia âm cực. Máy ảnh và màn hình đã phát triển một bước dài trong một phần tư thế kỷ trước, và nhiều không gian màu lớn hơn và có tính năng cao hơn đã được chuẩn hoá. Một trong những không gian màu hiện đại phổ biến nhất là Display P3. Photoshop sử dụng Display P3 Canvas để hiển thị hình ảnh chính xác hơn trong trình duyệt. Đặc biệt, hình ảnh có màu trắng sáng, màu sáng và chi tiết trong bóng đổ sẽ hiển thị tốt nhất có thể trên màn hình hiện đại có hỗ trợ dữ liệu Display P3. Chúng tôi đang phát triển thêm Display P3 Canvas API để hỗ trợ các màn hình có dải động cao.
Thành phần web và văn bản
Photoshop là một ứng dụng lớn và nổi tiếng với nhiều tính năng, với hàng trăm thành phần trên giao diện người dùng hỗ trợ hàng chục quy trình công việc. Ứng dụng này do nhiều nhóm xây dựng bằng nhiều công cụ và phương pháp phát triển, nhưng các phần khác nhau của ứng dụng cần tập hợp lại thành một tổng thể nhất quán và có hiệu suất cao.
Để giải quyết thách thức này, Adobe đã chuyển sang sử dụng Thành phần web và thư viện Lit. Các thành phần trên giao diện người dùng của Photoshop đến từ thư viện Spectrum Web Components của Adobe. Đây là một cách triển khai gọn nhẹ, hiệu suất của hệ thống thiết kế Adobe, hoạt động với mọi khung hoặc hoàn toàn không có khung.
Hơn nữa, toàn bộ ứng dụng Photoshop được xây dựng bằng các Thành phần web dựa trên Lit. Dựa vào mô hình thành phần tích hợp sẵn của trình duyệt và phương thức đóng gói Shadow DOM, nhóm này nhận thấy dễ dàng tích hợp dễ dàng một số "đảo" mã React do các nhóm Adobe khác cung cấp.
Lưu vào bộ nhớ đệm của trình chạy dịch vụ với Workbox
Service worker đóng vai trò như một proxy cục bộ có thể lập trình, chặn các yêu cầu mạng và phản hồi bằng dữ liệu từ mạng, bộ nhớ đệm tồn tại trong thời gian dài hoặc kết hợp cả hai.
Trong nỗ lực cải thiện hiệu suất của nhóm V8, lần đầu tiên một trình chạy dịch vụ phản hồi bằng phản hồi WebAssembly được lưu vào bộ nhớ đệm, Chrome sẽ tạo và lưu trữ phiên bản được tối ưu hoá của mã — ngay cả đối với các tập lệnh WebAssembly nhiều megabyte, đây là điều phổ biến trong cơ sở mã Photoshop. Quá trình biên dịch tương tự diễn ra khi một trình chạy dịch vụ lưu JavaScript vào bộ nhớ đệm trong bước install của nó. Trong cả hai trường hợp, Chrome có thể tải và thực thi các phiên bản được tối ưu hoá của tập lệnh được lưu vào bộ nhớ đệm với mức hao tổn thời gian chạy tối thiểu.
Photoshop trên web tận dụng lợi thế này bằng cách triển khai một trình chạy dịch vụ giúp lưu trước nhiều tập lệnh JavaScript và WebAssembly vào bộ nhớ đệm. Vì URL cho các tập lệnh này được tạo trong thời gian xây dựng và do logic cập nhật bộ nhớ đệm có thể phức tạp, nên chúng đã chuyển sang sử dụng một nhóm thư viện do Google duy trì có tên là Workbox để tạo trình chạy dịch vụ trong quy trình xây dựng.
Trình chạy dịch vụ dựa trên Workbox cùng với bộ nhớ đệm tập lệnh của công cụ V8 đã dẫn đến những cải thiện hiệu suất có thể đo lường được. Các con số cụ thể thay đổi tuỳ theo thiết bị thực thi mã, nhưng nhóm nghiên cứu ước tính những hoạt động tối ưu hoá này đã giảm 75% thời gian dành cho việc khởi tạo mã.
Nội dung tiếp theo của Adobe trên web
Việc ra mắt phiên bản beta của Photoshop chỉ mới là bước khởi đầu. Chúng tôi đã có một số điểm cải tiến về hiệu suất và tính năng trong quá trình Photoshop hướng đến việc ra mắt chính thức sau phiên bản beta này. Adobe không dừng lại ở Photoshop mà còn có kế hoạch tích cực mở rộng Creative Cloud sang nền tảng web, biến đây thành nền tảng chính để cộng tác và sáng tạo nội dung sáng tạo. Việc này sẽ giúp hàng triệu nhà sáng tạo lần đầu chia sẻ câu chuyện của mình và hưởng lợi từ quy trình làm việc sáng tạo trên web.
Khi Adobe tiếp tục mở rộng những chân trời hiện có, nhóm Chrome sẽ tiếp tục cộng tác để thúc đẩy nền tảng web cho Adobe cũng như hệ sinh thái nhà phát triển web sôi động nói chung. Khi các trình duyệt khác cũng bắt kịp những tính năng hiện đại này của trình duyệt, chúng tôi rất vui mừng khi thấy Adobe cũng cung cấp các sản phẩm của họ ở đó. Hãy chú ý theo dõi thông tin cập nhật trong tương lai vì chúng tôi sẽ tiếp tục phát triển web!
Bạn có thể tìm hiểu thêm về cách truy cập vào Photoshop trên web (thử nghiệm) trong Trung tâm trợ giúp của Adobe.