Photoshop kadar karmaşık bir yazılımı doğrudan tarayıcıda çalıştırmak birkaç yıl önce hayal bile edilemezdi. Ancak Adobe, çeşitli yeni web teknolojilerini kullanarak Photoshop'un herkese açık beta sürümünü web'e getirdi.
Chrome, son üç yıldır tarayıcıda mümkün olanın sınırlarını zorlamak isteyen web uygulamalarını güçlendirmek için çalışıyor. Bu web uygulamalarından biri de Photoshop'tur. Photoshop kadar karmaşık bir yazılımı doğrudan tarayıcıda çalıştırmak birkaç yıl önce hayal bile edilemezdi. Ancak Adobe, çeşitli yeni web teknolojilerini kullanarak Photoshop'un herkese açık beta sürümünü web'e getirdi.
(Okumak yerine izlemeyi tercih ediyorsanız bu makaleyi video olarak da bulabilirsiniz.)
Bu yayında, iş birliğimizin Photoshop'u web'e nasıl genişlettiğiyle ilgili ayrıntıları ilk kez paylaşmak istiyoruz. Adobe'un kullandığı tüm API'leri ve daha fazlasını kendi uygulamalarınızda da kullanabilirsiniz. İlham almak için web özellikleriyle ilgili blog yayınlarımıza göz atın ve üzerinde çalıştığımız en yeni ve en iyi özellikler için API takipçimizi izleyin.
Photoshop'un web'e gelmesinin nedeni
Web geliştikçe, web sitelerinin ve web uygulamalarının platforma özel uygulamalara kıyasla sunduğu temel avantajlar değişmedi. Bu avantajlar arasında bağlantı oluşturma, geçici olma ve evrensel olma gibi birçok benzersiz özellik yer alsa da bunların özü basit erişim, kolay paylaşım ve mükemmel ortak çalışma sunmaktır.
URL'lerin en büyük avantajı, herkes tarafından tıklanıp anında erişilebilmesidir. Tek ihtiyacınız olan bir tarayıcıdır. Uygulama yüklemenize veya hangi işletim sistemini kullandığınızdan endişelenmenize gerek yoktur. Web uygulamaları için bu, kullanıcıların uygulamaya, dokümanlarına ve yorumlarına erişebileceği anlamına gelir. Bu da web'i, kreatif ve pazarlama ekipleri için giderek daha önemli hale gelen ideal bir ortak çalışma platformu haline getirir.
Google Dokümanlar, bu basitleştirilmiş erişimin öncülerindendi. Çoğumuz, bir doküman oluşturmanın, bağlantısını başka birine göndermenin ve hemen hem uygulamaya hem de belirli bir dokümana veya yoruma atlamanın ne kadar kolay olduğunu biliriz. O zamandan beri geçmişte tanıttığımız gibi birçok muhteşem uygulama bu modeli benimsedi. Artık Photoshop da bu modelden yararlanacak.
Photoshop'un web'e gelişi
Web, yalnızca dokümanlara uygun bir platform olarak başladı ancak zaman içinde önemli ölçüde büyüdü. Gmail gibi ilk uygulamalar, daha karmaşık etkileşim ve uygulamaların en azından 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ı tedarikçilerinin web özelliklerini daha da genişleterek buna karşılık verdiği etkileyici bir ortak geliştirme süreci gördük. Bu olumlu döngünün en son iterasyonu, Photoshop'un web'de kullanılmasını sağladı.
Adobe daha önce Spark ve Lightroom'u web'e taşımıştı ve Photoshop'u web'e taşımak için uzun süredir çalışıyordu. Ancak JavaScript'in performans sınırlamaları, kodları için iyi bir derleme hedefi olmaması ve web özelliklerinin eksikliği nedeniyle bu çalışmalar engellendi. Chrome'un bu sorunları çözmek için tarayıcıya ne gibi özellikler eklediğini öğrenmek için okumaya devam edin.
Emscripten ile WebAssembly'i taşıma
WebAssembly ve C++ araç zinciri Emscripten, Adobe'un sıfırdan başlamak yerine mevcut Photoshop kod tabanından yararlanabilmesini sağladığı için Photoshop'un web'e gelmesinin anahtarı oldu. WebAssembly, programlama dilleri için derleme hedefi olarak tasarlanmış ve tüm tarayıcılarda gönderilen taşınabilir bir ikili talimat kümesidir. Bu, C++ ile yazılmış Photoshop gibi uygulamaların JavaScript'te yeniden yazılmasına gerek kalmadan doğrudan web'e taşınabileceği anlamına gelir. Kendi başınıza taşıma işlemine başlamak için Emscripten dokümantasyonunun tamamını inceleyin veya bir kitaplığın nasıl taşınacağına dair bu rehber örnekte açıklananları uygulayın.
Emscripten, yalnızca C++'nizi Wasm'e derlemenize yardımcı olmakla kalmayıp POSIX API çağrılarını web API çağrılarına ve hatta OpenGL'i WebGL'ye dönüştüren bir çeviri katmanı da sağlayan tam özellikli bir araç zinciridir. Örneğin, yerel dosya sistemine referans veren uygulamaları taşıyabilirsiniz. Emscripten, işlevselliği korumak için taklit edilmiş bir dosya sistemi sağlar.
Emscripten, Photoshop'un çoğu bölümünü bir süredir web'e getirebiliyordu ancak bu süreç yeterince hızlı değildi. Darboğazların nerede olduğunu belirlemek ve Emscripten'i iyileştirmek için Adobe ile sürekli olarak çalıştık. Photoshop, çoklu iş parçacıklılığa bağlıdır. WebAssembly'e dinamik çoklu iş parçacığı desteğini eklemek kritik bir şarttı.
Ayrıca, istisnaya dayalı hata işleme C++'ta çok yaygındır ancak Emscripten ve WebAssembly'de yeterince desteklenmemiştir. WebAssembly standardını ve C++ istisnalarını WebAssembly'e getirmek için W3C'deki WebAssembly Topluluk Grubu ile birlikte çalıştık.
Emscripten yalnızca büyük uygulamalarda değil, kitaplıkları veya küçük projeleri de taşımanıza olanak tanır. Örneğin, Emscripten aracılığıyla popüler OpenCV kitaplığını web'e nasıl derleyebileceğinizi görebilirsiniz.
Son olarak WebAssembly, web uygulamanızın performansını önemli ölçüde artıran SIMD talimatları gibi gelişmiş performans temel öğeleri sunar. Örneğin, Halide Adobe'ın performansı için çok önemlidir ve burada SIMD ortalama 3-4 kat, bazı durumlarda ise 80-160 kat hız artışı sağlar.
WebAssembly hata ayıklama
Büyük projeler, işe uygun araçlar olmadan başarılı bir şekilde tamamlanamaz. Bu nedenle Chrome ekibi, tam özellikli WebAssembly hata ayıklama desteği geliştirdi. Kaynak kodunda adımlama, kesme noktası ayarlama ve istisnalarda duraklatma, zengin tür desteğiyle değişken inceleme ve hatta DevTools konsolunda değerlendirme için temel destek sağlar.
WebAssembly hata ayıklama özelliğini kullanmayla ilgili yetkili kılavuzu inceleyin.
Yüksek performanslı depolama
Photoshop belgelerinin ne kadar büyük olabileceği göz önüne alındığında, kullanıcı ekranı kaydırırken verilerin diskten belleğe dinamik olarak taşınabilmesi Photoshop için kritik bir ihtiyaçtır. Diğer platformlarda bu işlem genellikle mmap aracılığıyla bellek eşleme yoluyla gerçekleştirilir. Ancak bu işlem, kaynak özel dosya sistemi erişim mülklerinin geliştirilip kaynak denemesi olarak uygulandığı zamana kadar web'de verimli bir şekilde mümkün değildi. Bu yeni API'den nasıl yararlanacağınızı dokümanlarda okuyabilirsiniz.
Tuval için P3 renk alanı
Web'deki renkler geçmişte, katot ışınlı tüp monitörlerin özelliklerine göre doksanlı yılların ortalarından kalma bir standart olan sRGB renk alanında belirtiliyordu. Kameralar ve monitörler, geçen çeyrek yüzyılda ç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 alanlarından biri Display P3'tür. Photoshop, resimleri tarayıcıda daha doğru bir şekilde görüntülemek için Display P3 kanvası kullanır. Özellikle parlak beyazlar, parlak renkler ve gölgelerdeki ayrıntıların yer aldığı resimler, Display P3 verilerini destekleyen modern ekranlarda mümkün olduğunca iyi görüntülenir. Display P3 Canvas API, yüksek dinamik aralıklı ekranları etkinleştirmek için daha da geliştiriliyor.
Web Bileşenleri ve Lit
Photoshop, düzinelerce iş akışını destekleyen yüzlerce kullanıcı arayüzü öğesine sahip, büyük ve zengin özelliklere sahip bir uygulamadır. Uygulama, çeşitli araçlar ve geliştirme uygulamaları kullanılarak birden fazla ekip tarafından oluşturulur ancak farklı parçalarının uyumlu ve yüksek performanslı bir bütün halinde bir araya gelmesi gerekir.
Adobe bu zorlukla başa çıkmak için Web Bileşenleri ve Lit kitaplığına başvurdu. Photoshop'un kullanıcı arayüzü öğeleri, Adobe'un Spectrum Web Bileşenleri kitaplığından gelir. Bu kitaplık, Adobe tasarım sisteminin hafif ve performanslı bir uygulamasıdır ve herhangi bir çerçeveyle veya çerçeve olmadan çalışır.
Dahası, Photoshop uygulamasının tamamı Lit tabanlı web bileşenleri kullanılarak oluşturulmuştur. Takım, tarayıcının yerleşik bileşen modelini ve Gölge DOM kapsüllemesini kullanarak diğer Adobe ekipleri tarafından sağlanan birkaç React kodu "adasını" kolayca entegre etti.
Workbox ile hizmet çalışanı önbelleğe alma
Hizmet çalışanları, ağ isteklerini durdurup ağdaki verilerle, uzun ömürlü önbellekler veya her ikisinin bir karışımıyla yanıt veren programlanabilir bir yerel proxy gibi çalışır.
V8 ekibinin performansı iyileştirme çalışmaları kapsamında, bir servis çalışanı ilk kez önbelleğe alınmış bir WebAssembly yanıtıyla yanıt verdiğinde Chrome, Photoshop kod tabanında yaygın olan çok megabaytlık WebAssembly komut dosyaları için bile kodun optimize edilmiş bir sürümünü oluşturup depolar. Benzer bir ön derleme, hizmet çalışanı install adımı sırasında JavaScript'i önbelleğe aldığında gerçekleşir. Her iki durumda da Chrome, önbelleğe alınmış komut dosyalarının optimize edilmiş sürümlerini minimum çalışma zamanı yükü ile yükleyip çalıştırabilir.
Web'de Photoshop, JavaScript ve WebAssembly komut dosyalarının çoğunu önceden önbelleğe alan bir hizmet çalışanı dağıtarak bu avantajdan yararlanır. Bu komut dosyalarının URL'leri derleme sırasında oluşturulduğundan ve önbellekleri güncel tutma mantığı karmaşık olabileceğinden, derleme sürecinin bir parçası olarak hizmet işçilerini oluşturmak için Google tarafından yönetilen Workbox adlı bir kitaplık grubuna başvurdular.
V8 motorunun komut dosyası önbelleğe alma özelliğiyle birlikte Workbox tabanlı bir hizmet çalışanı, ölçülebilir performans iyileştirmelerine yol açtı. Kesin sayılar, kodu yürüten cihaza göre değişir ancak ekip, bu optimizasyonların kod başlatmaya harcanan süreyi %75 oranında azalttığını tahmin ediyor.
Adobe'un web'deki yenilikleri
Photoshop beta sürümünün kullanıma sunulması sadece başlangıç. Bu beta sürümünden sonra Photoshop'un tam sürümünün kullanıma sunulması için performans ve özellik iyileştirmeleri üzerinde çalışmaya devam ediyoruz. Adobe, Photoshop'la yetinmiyor ve Creative Cloud'u web'e genişleterek hem yaratıcı içerik oluşturma hem de ortak çalışma için birincil bir platform haline getirmeyi planlıyor. Bu sayede, ilk kez içerik üretmeye başlayan milyonlarca kullanıcı hikayelerini anlatabilir ve web'deki yenilikçi iş akışlarından yararlanabilir.
Adobe, mümkün olanın sınırlarını zorlamaya devam ederken Chrome Ekibi, Adobe ve genel olarak canlı web geliştirici ekosistemi için web'i ileriye taşımak amacıyla birlikte çalışmaya devam edecektir. Diğer tarayıcılar da bu modern tarayıcı özelliklerini kullanmaya başladığından Adobe'ın ürünlerini bu tarayıcılarda da kullanıma sunmasından memnuniyet duyuyoruz. Web'i geliştirmeye devam ederken gelecekteki güncellemeler için bizi takip edin.
Web'de Photoshop'a (beta) erişme hakkında daha fazla bilgiyi Adobe Yardım Merkezi'nde bulabilirsiniz.