Son üç yıldır Chrome, tarayıcıda mümkün olanın sınırlarını zorlamak isteyen web uygulamalarını güçlendirmek için çalışıyor. Böyle bir web uygulaması Photoshop olmuştur. Photoshop kadar karmaşık yazılımları doğrudan tarayıcıda çalıştırma fikrini sadece birkaç yıl önce hayal etmek bile zordu. Ancak Adobe, çeşitli yeni web teknolojilerini kullanarak Photoshop’un herkese açık bir beta sürümünü web’e getirdi.
(Okumak yerine izlemeyi tercih ederseniz, bu makale bir video.)
Bu gönderide, ilk kez işbirliğimizin Photoshop’u web’e nasıl genişlettiğinin ayrıntılarını paylaşmak istiyoruz. Adobe’nin kullandığı tüm API’leri ve daha fazlasını kendi uygulamalarınızda da kullanabilirsiniz. İlham almak için web yetenekleriyle ilgili blog yazılarımıza göz atmayı unutmayın ve API izleyici üzerinde çalıştığımız en son ve en büyük için.
Photoshop neden web’e geldi? #
Web geliştikçe, değişmeyen bir şey, web sitelerinin ve web uygulamalarının platforma özgü uygulamalara göre sunduğu temel avantajlardır. Bu avantajlar arasında bağlanabilirlik, kısa ömürlülük ve evrensellik gibi pek çok benzersiz yetenek yer alır, ancak bunlar basit erişim, kolay paylaşım ve mükemmel işbirliği sağlamakla özetlenir.
Bir URL’nin basit gücü, herkesin ona tıklayıp anında erişebilmesidir. Tek ihtiyacınız olan bir tarayıcı. Bir uygulama yüklemenize veya hangi işletim sistemini çalıştırdığınız konusunda endişelenmenize gerek yok. Web uygulamaları için bu, kullanıcıların uygulamaya, belgelerine ve yorumlarına erişebileceği anlamına gelir. Bu, web’i yaratıcı ve pazarlama ekipleri için giderek daha önemli hale gelen ideal bir işbirliği platformu haline getiriyor.
Google Dokümanlar bu basitleştirilmiş erişimin öncüsüydü. Çoğumuz bir belge başlatmanın, bağlantıyı birine göndermenin ve hemen yalnızca uygulamaya değil, aynı zamanda ilgili belgeye veya yoruma da atlamanın ne kadar kolay olduğunu biliriz. O zamandan beri, çok sayıda harika uygulama, örneğin geçmişte gösterdiklerimizbu modeli benimsedi ve şimdi Photoshop da bundan faydalanacak.
Photoshop web’e nasıl geldi? #
Web, yalnızca belgeler için uygun bir platform olarak başladı, ancak tarihi boyunca önemli ölçüde büyüdü. gibi erken uygulamalar Gmail en azından daha karmaşık etkileşim ve uygulamaların mümkün olduğunu gösterdi. O zamandan beri, web uygulamalarının mümkün olanın sınırlarını zorladığı ve tarayıcı satıcılarının web yeteneklerini daha da genişleterek yanıt verdiği etkileyici bir ortak geliştirme gördük. Bu verimli döngünün en son yinelemesi, web üzerinde Photoshop’u etkinleştiren şeydir.
Adobe daha önce getirdi Kıvılcım Ve Işık odası Web’e ve yıllardır Photoshop’u web’e getirmekle ilgileniyordu. Ancak, JavaScript’in performans sınırlamaları, kodları için iyi bir derleme hedefinin olmaması ve web yeteneklerinin olmaması nedeniyle engellendiler. Chrome’un bu sorunları çözmek için tarayıcıda ne oluşturduğunu öğrenmek için okumaya devam edin.
Emscripten ile WebAssembly taşıma #
WebAssembly ve C++ araç zinciri yazmak Adobe’nin sıfırdan başlamak zorunda kalmayacağı, ancak mevcut Photoshop kod tabanlarından yararlanabileceği anlamına geldiğinden, Photoshop’un web’e gelme yeteneğinin kilidini açmanın anahtarı olmuştur. WebAssembly, programlama dilleri için bir derleme hedefi olarak tasarlanmış, tüm tarayıcılarda sunulan taşınabilir bir ikili komut setidir. Bu, Photoshop gibi C++ ile yazılmış uygulamaların, JavaScript’te yeniden yazmaya gerek kalmadan doğrudan web’e taşınabileceği anlamına gelir. Kendinizi taşımaya başlamak için tam Emscripten belgeleriveya bir kitaplığın nasıl taşınacağına ilişkin bu rehberli örneği izleyin.
Emscripten, yalnızca C++’ınızı Wasm’a derlemenize yardımcı olmakla kalmayıp, aynı zamanda POSIX API çağrılarını web API çağrılarına ve hatta OpenGL’yi WebGL’ye dönüştüren bir çeviri katmanı sağlayan tam özellikli bir araç zinciridir. Örneğin, yerel dosya sistemine başvuran uygulamaları port edebilir ve Emscripten öykünülmüş bir dosya sistemi sağlayacaktır işlevselliği korumak için.
Emscripten bir süredir Photoshop’un çoğu bölümünü web’e taşıyabiliyordu, ancak yeterince hızlı değildi. Darboğazların nerede olduğunu bulmak ve Emscripten’i geliştirmek için Adobe ile sürekli olarak çalıştık. Photoshop çoklu iş parçacığı kullanımına bağlıdır. dinamik getirmek çoklu iş parçacığı WebAssembly için kritik bir gereksinimdi.
Ayrıca istisna tabanlı hata işleme, C++’da çok yaygındır, ancak Emscripten ve WebAssembly’de iyi desteklenmemiştir. ile çalıştık WebAssembly Topluluk Grubu W3C’de WebAssembly standardını ve etrafındaki araçları WebAssembly’a C++ istisnaları getirmek üzere geliştirmek için.
Emscripten yalnızca büyük uygulamalarda çalışmaz, aynı zamanda kitaplıkları veya daha küçük projeleri taşımanıza olanak tanır! Örneğin, görebilirsiniz popüler OpenCV kitaplığını nasıl derleyebilirsiniz? Emscripten aracılığıyla web’e.
Son olarak, WebAssembly aşağıdakiler gibi gelişmiş performans ilkeleri sunar: SIMD talimatları bu da web uygulamanızın performansını önemli ölçüde artırır. Örneğin, Halide Adobe’nin performansı için çok önemlidir ve burada SIMD, ortalama olarak 3–4 kat hızlanma ve bazı durumlarda 80–160 kat hızlanma sağlar.
WebAssembly hata ayıklama #
İş için uygun araçlar olmadan hiçbir büyük proje başarıyla tamamlanamaz ve bu nedenle Chrome ekibi tam özellikli WebAssembly hata ayıklama desteği geliştirdi. Kaynak kodunda adım adım ilerleme, kesme noktaları belirleme ve istisnalarda duraklatma, zengin tip desteğiyle değişken denetimi ve hatta DevTools konsolunda değerlendirme için temel destek sağlar!
kontrol ettiğinizden emin olun WebAssembly Hata Ayıklamanın nasıl kullanılacağına ilişkin yetkili kılavuz.
Yüksek performanslı depolama #
Photoshop belgelerinin ne kadar büyük olabileceği göz önüne alındığında, Photoshop için kritik bir ihtiyaç, kullanıcı gezinirken verileri diskten belleğe dinamik olarak taşıma yeteneğidir. Diğer platformlarda, bu genellikle bellek eşlemesi aracılığıyla gerçekleştirilir. mmap, ancak bu, web’de başarılı bir şekilde mümkün değildi; yani, orijinal özel dosya sistemi erişim tanıtıcıları bir orijinal deneme sürümü olarak geliştirilip uygulanana kadar! Bu yeni API’den nasıl yararlanacağınızı belgelerde okuyabilirsiniz.
Tuval için P3 renk alanı #
Tarihsel olarak, web üzerindeki renkler sRGB doksanların ortalarından itibaren bir standart olan, katot ışını tüpü monitörlerinin özelliklerine dayanan renk uzayı. Aradan geçen çeyrek yüzyılda kameralar ve monitörler çok yol kat etti ve daha büyük ve daha yetenekli birçok renk alanı standartlaştırıldı. En popüler modern renk uzaylarından biri Ekran P3. Photoshop bir kullanır P3 Canvas’ı Görüntüle görüntüleri tarayıcıda daha doğru görüntülemek için. Özellikle parlak beyazlara, parlak renklere ve gölgeli ayrıntılara sahip görüntüler, Display P3 verilerini destekleyen modern ekranlarda mümkün olan en iyi şekilde görüntülenir. Etkinleştirmek için Display P3 Canvas API’si daha da geliştiriliyor. yüksek dinamik aralık görüntüler.
Web Bileşenleri ve Lite #
Photoshop, düzinelerce iş akışını destekleyen yüzlerce UI öğesiyle ünlü, büyük ve zengin özelliklere sahip bir uygulamadır. Uygulama, çeşitli araçlar ve geliştirme uygulamaları kullanan birden fazla ekip tarafından oluşturulmuştur, ancak farklı parçalarının uyumlu, yüksek performanslı bir bütün halinde bir araya gelmesi gerekir.
Bu zorluğun üstesinden gelmek için Adobe, Web Bileşenleri ve yanan kütüphane. Photoshop’un kullanıcı arabirimi öğeleri Adobe’den gelir Spektrum Web Bileşenleri kitaplık, herhangi bir çerçeveyle veya hiç çerçeve olmadan çalışan Adobe tasarım sisteminin hafif, performanslı bir uygulaması.
Dahası, Photoshop uygulamasının tamamı Lit tabanlı Web Bileşenleri kullanılarak oluşturulmuştur. Ekip, tarayıcının yerleşik bileşen modeline ve Gölge DOM kapsüllemesine dayanarak, diğer Adobe ekipleri tarafından sağlanan birkaç React kodu “adasını” temiz bir şekilde entegre etmeyi kolay buldu.
Workbox ile önbelleğe alan hizmet çalışanı #
servis çalışanları ağ isteklerini yakalayan ve ağdan, uzun ömürlü önbelleklerden veya her ikisinin bir karışımından gelen verilerle yanıt veren programlanabilir bir yerel proxy olarak hareket eder.
parçası olarak V8 Ekibin performansı artırma çabaları sırasında, bir hizmet çalışanı önbelleğe alınmış bir WebAssembly yanıtıyla ilk kez yanıt verdiğinde Chrome, Photoshop kod tabanında yaygın olarak kullanılan çok megabaytlık WebAssembly komut dosyaları için bile kodun optimize edilmiş bir sürümünü oluşturur ve depolar. Benzer bir ön derleme şu durumlarda gerçekleşir: JavaScript önbelleğe alındı sırasında bir servis çalışanı tarafından install adım. Her iki durumda da Chrome, önbelleğe alınmış komut dosyalarının optimize edilmiş sürümlerini minimum çalışma zamanı ek yükü ile yükleyebilir ve yürütebilir.
Web üzerinde Photoshop, JavaScript ve WebAssembly betiklerinin birçoğunu önceden önbelleğe alan bir hizmet çalışanı dağıtarak bundan yararlanır. Bu komut dosyaları için URL’ler oluşturma sırasında oluşturulduğundan ve önbellekleri güncel tutma mantığı karmaşık olabileceğinden, bunlar Google tarafından sağlanan ve adı verilen bir dizi kitaplığa yöneldiler. çalışma kutusu oluşturma sürecinin bir parçası olarak hizmet çalışanlarını oluşturmak için.
Workbox tabanlı bir hizmet çalışanı, V8 motorunun komut dosyasını önbelleğe almasıyla birlikte ölçülebilir performans iyileştirmelerine yol açtı. Belirli sayılar, kodu yürüten cihaza göre değişir, ancak ekip, bu optimizasyonların kod başlatma için harcanan süreyi %75 oranında azalttığını tahmin ediyor.
Web’de Adobe için sırada ne var? #
Photoshop beta sürümünün lansmanı sadece bir başlangıç ve Photoshop bu beta sürümünden sonra tam sürüm lansmanına doğru ilerlerken halihazırda devam etmekte olan birkaç performans ve özellik iyileştirmemiz var. Adobe, Photoshop ile durmuyor ve agresif bir şekilde genişlemeyi planlıyor Yaratıcı bulut Web’i hem yaratıcı içerik oluşturma hem de işbirliği için birincil platform haline getiriyor. Bu, milyonlarca ilk kez içerik oluşturucunun hikayelerini anlatmasını ve web’deki yenilikçi iş akışlarından faydalanmasını sağlayacaktır.
Adobe, mümkün olanın sınırlarını zorlamaya devam ederken, Chrome ekibi de Adobe ve genel olarak canlı web geliştirici ekosistemi için web’i ileri götürmek üzere işbirliğimizi sürdürecektir. Diğer tarayıcılar da bu modern tarayıcı özelliklerini yakaladığından, Adobe’nin ürünlerini orada da kullanıma sunacağını görmekten heyecan duyuyoruz. Web’i ileriye taşımaya devam ederken gelecekteki güncellemeler için bizi izlemeye devam edin!
Web’de Photoshop’a (beta) erişim hakkında daha fazla bilgiyi şu adresten edinebilirsiniz: Adobe Yardım Merkezi.