Ide menjalankan perangkat lunak serumit Photoshop langsung di browser akan sulit dibayangkan beberapa tahun yang lalu. Namun, dengan menggunakan berbagai teknologi web baru, Adobe kini telah menghadirkan Photoshop versi publik ke web.
Selama tiga tahun terakhir, Chrome telah berupaya untuk memberdayakan aplikasi web yang ingin mendobrak batas kemungkinan di browser. Salah satu aplikasi web tersebut adalah Photoshop. Ide menjalankan perangkat lunak serumit Photoshop langsung di browser akan sulit dibayangkan beberapa tahun yang lalu. Namun, dengan menggunakan berbagai teknologi web baru, Adobe kini telah menghadirkan Photoshop versi publik ke web.
(Jika Anda lebih suka menonton daripada membaca, artikel ini juga tersedia sebagai video.)
Dalam postingan ini, pertama-tama kami ingin berbagi detail tentang bagaimana kolaborasi kami memperluas penggunaan Photoshop ke web. Anda juga bisa menggunakan semua API yang digunakan Adobe dan lainnya di aplikasi Anda sendiri. Pastikan untuk melihat postingan blog terkait kemampuan web kami untuk mendapatkan inspirasi dan tonton pelacak API kami untuk mengetahui informasi terbaru dan terbaik yang sedang kami kerjakan.
Mengapa Photoshop muncul di web
Seiring perkembangan web, satu hal yang tidak berubah adalah keuntungan inti yang ditawarkan situs web dan aplikasi web dibandingkan aplikasi khusus platform. Keuntungan ini mencakup banyak kemampuan unik seperti dapat ditautkan, sementara, dan universal, tetapi semuanya terpadu pada memungkinkan akses sederhana, berbagi yang mudah, dan kolaborasi yang hebat.
Keunggulan URL yang sederhana adalah siapa pun dapat mengkliknya dan langsung mengaksesnya. Yang Anda butuhkan hanyalah browser. Tidak perlu menginstal aplikasi atau khawatir dengan sistem operasi yang Anda jalankan. Untuk aplikasi web, hal itu berarti pengguna dapat mengakses aplikasi serta dokumen dan komentar mereka. Hal ini menjadikan web sebagai platform kolaborasi yang ideal, sesuatu yang menjadi semakin penting bagi tim kreatif dan pemasaran.
Google Dokumen merupakan pelopor dari penyederhanaan akses ini. Sebagian besar dari kita tahu betapa mudahnya membuat dokumen, mengirimkan link kepada seseorang, dan langsung membuka aplikasi, tetapi juga membuka dokumen atau komentar tertentu. Sejak saat itu, banyak aplikasi luar biasa, seperti yang telah kami pamerkan sebelumnya, telah menggunakan model ini dan kini Photoshop juga, akan memanfaatkannya.
Bagaimana Photoshop muncul di web
Web dimulai sebagai platform yang hanya cocok untuk dokumen, tetapi telah berkembang secara dramatis sepanjang sejarahnya. Aplikasi awal seperti Gmail menunjukkan bahwa interaktivitas dan aplikasi yang lebih kompleks setidaknya dapat dilakukan. Sejak saat itu, kami telah melihat pengembangan bersama yang mengesankan di mana aplikasi web mendorong batas-batas yang memungkinkan, dan vendor browser merespons dengan memperluas kemampuan web lebih lanjut. Iterasi terbaru dari loop yang menguntungkan ini telah mengaktifkan Photoshop di web.
Adobe sebelumnya menghadirkan Spark dan Lightroom ke web dan telah tertarik untuk menghadirkan Photoshop ke web selama bertahun-tahun. Namun, skrip ini terhalang oleh batasan performa JavaScript, tidak adanya target kompilasi yang baik untuk kodenya, dan kurangnya kemampuan web. Lanjutkan membaca untuk mempelajari apa saja yang terpasang di browser Chrome untuk mengatasi masalah ini.
Porting WebAssembly dengan Emscripten
WebAssembly dan toolchain C++-nya, Emscripten, telah menjadi kunci untuk membuka kemampuan Photoshop untuk membuka web, yang berarti Adobe tidak perlu memulai dari awal, tetapi dapat memanfaatkan codebase Photoshop yang sudah ada. WebAssembly adalah set petunjuk biner portabel yang dikirimkan di semua browser yang dirancang sebagai target kompilasi untuk bahasa pemrograman. Artinya, aplikasi seperti Photoshop yang ditulis dalam C++ dapat ditransfer langsung ke web tanpa memerlukan penulisan ulang dalam JavaScript. Untuk mulai melakukan porting sendiri, lihat dokumentasi Emscripten yang lengkap, atau ikuti contoh terpandu tentang cara mentransfer library.
Emscripten adalah toolchain berfitur lengkap yang tidak hanya membantu Anda mengompilasi C++ ke Wasm, tetapi juga menyediakan lapisan terjemahan yang mengubah panggilan POSIX API menjadi panggilan API web dan bahkan mengonversi OpenGL menjadi WebGL. Misalnya, Anda dapat mem-port aplikasi yang merujuk sistem file lokal dan Emscripten akan menyediakan sistem file yang diemulasikan untuk mempertahankan fungsi.
Emscripten telah mampu menghadirkan sebagian besar bagian Photoshop ke web untuk beberapa saat, namun itu belum tentu cukup cepat. Kami terus bekerja sama dengan Adobe untuk mencari tahu letak bottleneck dan meningkatkan Emscripten. Photoshop bergantung pada multithreading. Menghadirkan multithreading dinamis ke WebAssembly adalah persyaratan penting.
Selain itu, penanganan error berbasis pengecualian sangat umum di C++, tetapi tidak didukung dengan baik di Emscripten dan WebAssembly. Kami telah bekerja sama dengan WebAssembly Community Group di W3C untuk meningkatkan kualitas standar WebAssembly dan solusi untuk menghadirkan pengecualian C++ pada WebAssembly.
Emscripten tidak hanya berfungsi pada aplikasi besar, tetapi juga memungkinkan Anda memindahkan library atau project yang lebih kecil. Misalnya, Anda dapat melihat cara mengompilasi library OpenCV populer ke web melalui Emscripten.
Terakhir, WebAssembly menawarkan dasar performa lanjutan seperti petunjuk SIMD yang secara signifikan meningkatkan performa aplikasi web Anda. Misalnya, Halide sangat penting untuk performa Adobe, dan di sini SIMD memberikan kecepatan rata-rata 3–4×, dan dalam beberapa kasus, kecepatan 80–160×.
Proses debug WebAssembly
Tidak ada proyek besar yang akan berhasil diselesaikan tanpa alat yang sesuai untuk tugas tersebut, dan karena itulah tim Chrome mengembangkan dukungan proses debug WebAssembly berfitur lengkap. Ini menyediakan dukungan untuk menelusuri kode sumber, menyetel titik henti sementara dan berhenti sementara pada pengecualian, pemeriksaan variabel dengan dukungan jenis yang lengkap, dan bahkan dukungan dasar untuk evaluasi di konsol DevTools!
Pastikan untuk membaca panduan resmi tentang cara menggunakan Proses Debug WebAssembly.
Penyimpanan berperforma tinggi
Mengingat besarnya ukuran dokumen Photoshop, kebutuhan penting Photoshop adalah kemampuan untuk memindahkan data secara dinamis dari disk ke dalam memori saat pengguna berpindah-pindah. Di platform lain, hal ini biasanya dilakukan melalui pemetaan memori melalui mmap, tetapi hal ini belum memungkinkan secara performa di web—yaitu hingga handle akses sistem file pribadi origin dikembangkan dan diimplementasikan sebagai uji coba origin. Anda dapat membaca cara memanfaatkan API baru ini di dokumentasi.
Ruang warna P3 untuk kanvas
Secara historis, warna di web telah ditentukan dalam ruang warna sRGB, yang merupakan standar dari pertengahan tahun sembilan puluhan, berdasarkan kemampuan monitor tabung sinar katode. Kamera dan monitor telah berkembang pesat di seperempat abad yang lalu, dan banyak ruang warna yang lebih besar dan lebih canggih telah distandardisasi. Salah satu ruang warna modern yang paling populer adalah Display P3. Photoshop menggunakan Display P3 Canvas untuk menampilkan gambar dengan lebih akurat di browser. Secara khusus, gambar dengan warna putih cerah, warna cerah, dan detail bayangan akan ditampilkan sebaik mungkin di layar modern yang mendukung data Display P3. Display P3 Canvas API sedang dikembangkan lebih lanjut untuk mengaktifkan tampilan rentang dinamis tinggi.
Komponen Web dan Lit
Photoshop adalah aplikasi terkenal yang kaya fitur dan besar, dengan ratusan elemen UI yang mendukung lusinan alur kerja. Aplikasi ini dibuat oleh beberapa tim menggunakan berbagai alat dan praktik pengembangan, tetapi bagian-bagiannya yang berbeda harus disatukan menjadi satu kesatuan yang kohesif dan berperforma tinggi.
Untuk menghadapi tantangan ini, Adobe menggunakan Komponen Web dan library Lit. Elemen UI Photoshop berasal dari library Spectrum Web Components Adobe, implementasi sistem desain Adobe yang ringan dan berperforma tinggi yang berfungsi dengan framework apa pun, atau tanpa framework sama sekali.
Selain itu, seluruh aplikasi Photoshop dibuat menggunakan Komponen Web berbasis Lit. Dengan mengandalkan model komponen bawaan browser dan enkapsulasi Shadow DOM, tim dapat dengan mudah mengintegrasikan beberapa "pulau" kode React yang disediakan oleh tim Adobe lainnya dengan mudah.
Pembuatan cache pekerja layanan dengan Workbox
Pekerja layanan bertindak sebagai proxy lokal yang dapat diprogram, mencegat permintaan jaringan dan merespons dengan data dari jaringan, cache yang tahan lama, atau campuran keduanya.
Sebagai bagian dari upaya tim V8 untuk meningkatkan performa, saat pertama kali pekerja layanan merespons dengan respons WebAssembly yang di-cache, Chrome membuat dan menyimpan versi kode yang dioptimalkan—bahkan untuk skrip WebAssembly multi-megabyte, yang umum ditemukan di codebase Photoshop. Prakompilasi serupa terjadi saat JavaScript di-cache oleh pekerja layanan selama langkah install. Dalam kedua kasus tersebut, Chrome dapat memuat dan mengeksekusi versi skrip cache yang dioptimalkan dengan overhead runtime minimal.
Photoshop di web memanfaatkan ini dengan men-deploy pekerja layanan yang melakukan pra-cache terhadap banyak skrip JavaScript dan WebAssembly-nya. Karena URL untuk skrip ini dihasilkan pada waktu build, dan karena logika untuk terus memperbarui cache bisa sangat rumit, skrip ini beralih ke kumpulan library yang dikelola oleh Google yang disebut Workbox untuk menghasilkan pekerja layanan sebagai bagian dari proses build.
Pekerja layanan berbasis Workbox beserta caching skrip mesin V8 menghasilkan peningkatan performa yang terukur. Jumlah spesifiknya bervariasi berdasarkan perangkat yang menjalankan kode, tetapi tim memperkirakan bahwa pengoptimalan ini mengurangi waktu yang diperlukan untuk inisialisasi kode sebesar 75%.
Apa selanjutnya untuk Adobe di web
Peluncuran Photoshop beta hanyalah permulaan, dan kami telah melakukan beberapa peningkatan kinerja dan fitur yang sedang berjalan seiring Photoshop berjalan menuju peluncuran penuh mereka setelah versi beta ini. Adobe tidak berhenti menggunakan Photoshop dan berencana memperluas Creative Cloud ke web secara agresif, sehingga menjadikannya platform utama untuk pembuatan konten kreatif dan kolaborasi. Hal ini akan memungkinkan jutaan kreator pemula untuk menceritakan kisah mereka dan mendapatkan manfaat dari alur kerja inovatif di web.
Seiring Adobe terus mendobrak batas kemungkinan, tim Chrome akan melanjutkan kolaborasi kami untuk memajukan web bagi Adobe dan ekosistem developer web yang dinamis secara umum. Seiring browser lain juga mengejar kemampuan browser modern ini, kami senang melihat Adobe juga menyediakan produknya di sana. Nantikan informasi terbaru mendatang seiring kami terus memajukan web.
Anda dapat mempelajari lebih lanjut cara mengakses Photoshop di web (beta) di Pusat Bantuan Adobe.