Doğrudan tarayıcıda Photoshop kadar karmaşık bir yazılım çalıştırma fikri birkaç yıl önce hayal bile edilemezdi. Ancak Adobe, çeşitli yeni web teknolojilerini kullanarak Photoshop'un herkese açık bir beta sürümünü web'e taşıdı.
Chrome son üç yıldır, tarayıcıda nelerin mümkün olduğunun sınırlarını zorlamak isteyen web uygulamalarını güçlendirmek için çalışıyor. Photoshop da buna örnek bir uygulamadır. Doğrudan tarayıcıda Photoshop kadar karmaşık bir yazılım çalıştırma fikri birkaç yıl önce hayal bile edilemezdi. Ancak Adobe, çeşitli yeni web teknolojilerini kullanarak Photoshop'un herkese açık bir beta sürümünü web'e taşıdı.
(Okumayı tercih ediyorsanız bu makaleyi video olarak da bulabilirsiniz.)
Bu yayında, ortak çalışmamızın Photoshop'u web'e nasıl genişlettiğine ilişkin ayrıntıları ilk kez 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 özellikleriyle ilgili blog yayınlarımıza göz atmayı ve üzerinde çalıştığımız en son ve en iyi özellikler için API izleyicimizi izlemeyi unutmayın.
Photoshop neden web'e taşındı?
Web geliştikçe, web sitelerinin ve web uygulamalarının platforma özgü uygulamalara kıyasla sunduğu temel avantajlar değişmedi. Bu avantajlar arasında bağlanabilir, geçici ve evrensel olma gibi pek çok benzersiz özellik bulunur. Ancak bu avantajlar bir arada basit erişim, kolay paylaşım ve mükemmel bir ortak çalışma olanağını sunma anlamına gelir.
Bir URL'nin basit gücü, herkesin tıklayıp hemen erişebilmesidir. İhtiyacınız olan tek şey bir tarayıcıdır. Bir uygulama yüklemeniz veya hangi işletim sistemini kullandığınız konusunda endişelenmeniz gerekmez. 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 ideal bir ortak çalışma platformu haline getiriyor ve bu durum, kreatif ve pazarlama ekipleri için giderek daha önemli hale geliyor.
Google Dokümanlar, bu basitleştirilmiş erişimin öncüsüdür. Çoğumuz bir doküman başlatmanın, bağlantıyı birine göndermenin ve hemen yalnızca uygulamaya değil, belirli bir doküman veya açıklamaya da atlamanın ne kadar kolay olduğunu biliriz. O zamandan beri, geçmişte gösterdiklerimiz gibi birçok muhteşem uygulama bu modeli benimsedi ve artık Photoshop da bundan faydalanıyor.
Photoshop web'e nasıl geldi?
Web, başlangıçta yalnızca belgelere uygun bir platform olarak ortaya çıktı, ancak tarihi boyunca önemli ölçüde büyüdü. Gmail gibi ilk uygulamalar, 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 özelliklerini daha da genişleterek buna yanıt verdiği etkileyici bir ortak geliştirme gördük. Bu verimli döngünün en son hali, web'de Photoshop'un kullanılabilmesini sağlar.
Adobe daha önce Spark ve Lightroom'u web'e taşımış ve yıllardır Photoshop'u web'e taşımakla ilgileniyordu. Ancak, JavaScript'in performans sınırlamaları, kodları için iyi bir derleme hedefinin olmaması ve web özelliklerinin eksikliği nedeniyle engellenmiştir. Bu sorunları çözmek üzere Chrome'un tarayıcıda neleri içerdiğini öğrenmek için okumaya devam edin.
Emscripten ile WebAssembly taşıma
WebAssembly ve C++ araç zinciri Emscripten, Adobe'nin sıfırdan başlamak zorunda olmadığı ancak mevcut Photoshop kod tabanından yararlanabileceği anlamına geliyordu. Bu şekilde, Photoshop'un web'e girebilmesinin anahtarı oldu. WebAssembly, programlama dilleri için derleme hedefi olarak tasarlanmış, tüm tarayıcılarda taşınabilir bir ikili program komut setidir. Bu, C++ dilinde yazılan Photoshop gibi uygulamaların, JavaScript'te yeniden yazılmasına gerek kalmadan doğrudan web'e taşınabileceği anlamına gelir. Kendinizi taşımaya başlamak için Emscripten dokümanlarının tamamını inceleyin veya kitaplık taşımayla ilgili bu kılavuzlu örneği uygulayın.
Emscripten, yalnızca C++ içeriğinizi Wasm'de derlemenize yardımcı olmakla kalmayıp, POSIX API çağrılarını web API çağrılarına dönüştüren 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 referans veren uygulamaları taşıyabilirsiniz. Bu durumda, işlevselliği sürdürmek için Emscripten, emüle edilmiş bir dosya sistemi sağlar.
Emscripten, bir süredir Photoshop'un çoğu bölümünü web'e taşıyabiliyordu, ancak bu özellik yeterince hızlı değildi. Performans sorunlarını tespit etmek ve Emscripten'ı iyileştirmek için sürekli olarak Adobe ile birlikte çalıştık. Photoshop, çoklu iş parçacığı işlemeye bağlıdır. WebAssembly'ye dinamik çoklu iş parçacığı özelliğinin sunulması kritik bir gereklilikti.
Ayrıca, istisnaya dayalı hata işleme C++'ta çok yaygındır ancak Emscripten ve WebAssembly'de pek desteklenmemektedir. WebAssembly standardını ve WebAssembly'ye C++ istisnaları getirmek amacıyla kullanılan araçları iyileştirmek için W3C'deki WebAssembly Topluluk Grubu ile birlikte çalıştık.
Emscripten yalnızca büyük uygulamalarda çalışmakla kalmaz, aynı zamanda kitaplıkları veya daha küçük projeleri de taşımanıza olanak tanır! Örneğin, Emscripten üzerinden popüler OpenCV kitaplığını web'de nasıl derleyebileceğinizi görebilirsiniz.
Son olarak, WebAssembly, SIMD talimatları gibi web uygulamanızın performansını önemli ölçüde artıran gelişmiş temel performans öğeleri sunar. Örneğin, Halide, Adobe'nin performansı için esastır ve burada SIMD ortalama 3-4×, bazı durumlarda 80-160× hız sağlar.
WebAssembly hata ayıklaması
İş için uygun araçlar olmadan hiçbir büyük proje başarılı bir şekilde tamamlanamaz. Bu nedenle, Chrome ekibi eksiksiz WebAssembly hata ayıklama desteğini geliştirdi. Kaynak kodda adım adım ilerleme, ayrılma noktaları ayarlama ve istisnalarda duraklatma, zengin tür desteğiyle değişken inceleme, hatta DevTools konsolunda temel değerlendirme desteği sunar.
WebAssembly Hata Ayıklaması'nı kullanmayla ilgili yetkili kılavuzu incelemeyi unutmayın.
Yüksek performanslı depolama alanı
Photoshop dokümanlarının ne kadar büyük olabileceği göz önünde bulundurulduğunda Photoshop'un kritik ihtiyacı, kullanıcı sayfada gezinirken verileri diskten belleğe dinamik olarak taşıyabilmesidir. Diğer platformlarda ise bu işlem genellikle mmap üzerinden bellek eşlemesi kullanılarak gerçekleştirilir. Ancak bu, web'de yüksek performans gösteremiyordu. Ta ki kaynak özel dosya sistemi erişim işleyicileri geliştirilip kaynak denemesi olarak uygulanmaya başlamıştı. Bu yeni API'den nasıl yararlanabileceğinizi belgelerde bulabilirsiniz.
Kanvas için P3 renk alanı
Web'deki renkler geçmişte, katot ışını tüplü monitörlerin özelliklerine dayalı olarak doksanlı yılların ortalarından itibaren bir standart olan sRGB renk alanında belirtilmiştir. Kameralar ve monitörler, aradan geçen çeyrek yüzyılda büyük yol katetti ve artık çok daha büyük, daha yetenekli renk alanları standart hale getirildi. 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 Tuvali kullanır. Özellikle parlak beyazlar, parlak renkler ve gölgelerde ayrıntılar içeren resimler, Display P3 verilerini destekleyen modern ekranlarda mümkün olan en iyi şekilde görüntülenir. Display P3 Canvas API, yüksek dinamik aralıklı ekranları etkinleştirmek için daha da geliştirilmektedir.
Web Bileşenleri ve Yazı
Photoshop, düzinelerce iş akışını destekleyen yüzlerce kullanıcı arayüzü öğesine sahip, ünlü ve büyük özelliklere sahip bir uygulamadır. Uygulama, çeşitli araçlar ve geliştirme yöntemleri kullanılarak birden fazla ekip tarafından oluşturulmuştur, ancak birbirinden farklı parçalarının uyumlu, yüksek performanslı bir bütün halinde bir araya getirilmesi gerekir.
Adobe, bu zorluğun üstesinden gelmek için Web Bileşenleri ve Lit kitaplığı'nı kullandı. Photoshop'un kullanıcı arayüzü öğeleri, Adobe'nin Spectrum Web Bileşenleri kitaplığından gelir. Bu kitaplık, Adobe tasarım sisteminin herhangi bir çerçeveyle çalışan veya hiçbir çerçeveyle çalışan hafif, etkili bir uygulamasıdır.
Dahası, Photoshop uygulamasının tamamı Lit Tabanlı Web Bileşenleri kullanılarak oluşturulmuştur. Tarayıcının yerleşik bileşen modeline ve Gölge DOM kapsüllemesinden yararlanan ekip, diğer Adobe ekipleri tarafından sağlanan birkaç "adayı" kolayca entegre etmenin kolay olduğunu fark etti.
Workbox ile hizmet çalışanı önbelleğe alma
Service Worker'lar programlanabilir yerel proxy olarak görev yapar, ağ isteklerine müdahale eder ve ağ, uzun ömürlü önbelleklerden veya ikisinin karışımından gelen verilerle yanıt verir.
V8 ekibinin performansı iyileştirme çalışmalarının bir parçası olarak, 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 olan çok megabaytlı WebAssembly komut dosyaları için bile kodun optimize edilmiş bir sürümünü oluşturur ve saklar. install adımında bir hizmet çalışanı tarafından JavaScript önbelleğe alındığında da benzer bir önceden derleme gerçekleştirilir. Chrome, her iki durumda da, önbelleğe alınan komut dosyalarının optimize edilmiş sürümlerini minimum çalışma zamanı ek yüküyle yükleyip yürütebilir.
Web'de Photoshop, JavaScript ve WebAssembly komut dosyalarının çoğunu önbelleğe alan bir hizmet çalışanı dağıtarak bu özellikten yararlanır. Bu komut dosyalarının URL'leri derleme zamanında oluşturulduğundan ve önbellekleri güncel tutma mantığı karmaşık olabileceğinden, derleme işlemlerinin bir parçası olarak hizmet çalışanlarını oluşturmak için Google tarafından sağlanan Workbox adlı bir kitaplık grubuna yöneldiler.
Workbox tabanlı bir hizmet çalışanı ve V8 motorunun komut dosyası önbelleğe alma özelliği, performansın ölçülebilir şekilde artmasını sağladı. Belirli sayılar, kodu çalıştıran cihaza göre değişiklik gösterse de ekip, bu optimizasyonların kodu başlatmada harcanan süreyi %75 azalttığını tahmin ediyor.
Web'de Adobe için sırada ne var?
Photoshop beta sürümü yalnızca bir başlangıç. Ayrıca, bu beta sürümünden sonra Photoshop'un tam lansmanına doğru ilerlerken performans ve özellik iyileştirmeleri yapmaya başladık. Adobe, Photoshop ile çalışmayı bırakmıyor ve Creative Cloud'u web'de yoğun şekilde kullanıma sunarak hem yaratıcı içerik üretimi hem de ortak çalışma için birincil platform hâline getirmeyi planlıyor. Bu sayede, hikayelerini ilk kez paylaşan milyonlarca içerik üretici, hikayelerini anlatabilecek ve web'deki yenilikçi iş akışlarından yararlanabilecek.
Adobe, yapabileceklerinin sınırlarını zorlamaya devam ederken Chrome ekibi, hem Adobe hem de genel olarak canlı web geliştiricisi ekosistemi için web'i ileriye taşımak üzere iş birliğimizi sürdürecek. Diğer tarayıcılar da bu modern tarayıcı özelliklerini yakalarken, Adobe'nin ürünlerini de bu platformda kullanıma sunmasını heyecanla bekliyoruz. Web'i daha ileriye taşımaya devam ederken gelecek güncellemeler için bizi takip etmeye devam edin!
Adobe Yardım Merkezi'nde Photoshop'a web'de (beta) erişme hakkında daha fazla bilgi edinebilirsiniz.