L'idea di eseguire software così complessi come Photoshop direttamente nel browser sarebbe stato difficile da immaginare solo pochi anni fa. Tuttavia, utilizzando varie nuove tecnologie web, Adobe ha ora messo a disposizione sul web una versione beta pubblica di Photoshop.
Negli ultimi tre anni, Chrome ha lavorato per potenziare le applicazioni web che vogliono superare i limiti di ciò che è possibile fare nel browser. Una di queste applicazioni web è stata Photoshop. L'idea di eseguire software così complessi come Photoshop direttamente nel browser sarebbe stato difficile da immaginare solo pochi anni fa. Tuttavia, utilizzando varie nuove tecnologie web, Adobe ha ora messo a disposizione sul web una versione beta pubblica di Photoshop.
Se preferisci guardare più che leggere, questo articolo è disponibile anche come video.
In questo post vorremmo condividere per la prima volta i dettagli di come la nostra collaborazione sta estendendo Photoshop al web. Puoi utilizzare tutte le API utilizzate da Adobe e altre ancora nelle tue app. Assicurati di dare un'occhiata ai nostri post del blog relativi alle funzionalità web per trovare l'ispirazione e guarda il nostro strumento di monitoraggio delle API per scoprire le novità e le novità a cui stiamo lavorando.
Perché Photoshop è approdato sul web
Con l'evoluzione del web, una cosa che non è cambiata sono i vantaggi principali che siti web e applicazioni offrono rispetto alle applicazioni specifiche delle piattaforme. Questi vantaggi includono molte funzionalità uniche come l'essere collegabile, temporaneo e universale, ma si limitano a consentire un accesso semplice, una facile condivisione e un'ottima collaborazione.
Il semplice vantaggio di un URL è che chiunque può fare clic e accedervi immediatamente. Tutto ciò che serve è un browser. Non è necessario installare un'applicazione né preoccuparsi del sistema operativo su cui è in esecuzione. Per le applicazioni web, significa che gli utenti possono avere accesso all'applicazione e ai loro documenti e commenti. Questo rende il web la piattaforma di collaborazione ideale, un aspetto che sta diventando sempre più essenziale per i team creativi e di marketing.
Documenti Google è stato un pioniere di questo accesso semplificato. La maggior parte di noi sa quanto sia facile creare un documento, inviare il link a qualcuno e accedere immediatamente non solo all'applicazione, ma anche al documento o commento specifico. Da allora, un sacco di applicazioni straordinarie, come quelle che abbiamo mostrato in passato, hanno adottato questo modello e ora anche Photoshop ne trarrà vantaggio.
Come Photoshop è approdato sul web
Il web è nato come una piattaforma adatta solo per i documenti, ma è cresciuto notevolmente nel corso della sua storia. Le prime app come Gmail hanno dimostrato che l'interattività e le applicazioni più complesse erano almeno possibili. Da allora, abbiamo assistito a uno sviluppo notevole in cui le app web si spingono oltre i confini del possibile e i fornitori di browser rispondono ampliando ulteriormente le funzionalità web. L'ultima iterazione di questo loop virtuoso è ciò che ha permesso a Photoshop sul web.
In passato Adobe aveva portato Spark e Lightroom sul web ed era interessato a portare Photoshop sul web da molti anni. Tuttavia, erano bloccati dalle limitazioni delle prestazioni di JavaScript, dall'assenza di un buon target di compilazione per il loro codice e dalla mancanza di funzionalità web. Continua a leggere per scoprire quali funzionalità ha integrato nel browser Chrome per risolvere questi problemi.
Portabilità di WebAssembly con Emscripten
WebAssembly e la sua toolchain C++ Emscripten sono state la chiave per sbloccare la capacità di Photoshop di raggiungere il web, in quanto significava che Adobe non avrebbe dovuto iniziare da zero, ma poteva sfruttare il codebase esistente di Photoshop. WebAssembly è un set di istruzioni binarie portatile disponibile in tutti i browser, progettato come destinazione di compilazione per i linguaggi di programmazione. Ciò significa che applicazioni come Photoshop scritte in C++ possono essere portate direttamente sul Web senza richiedere una riscrittura in JavaScript. Per iniziare a eseguire il trasferimento autonomamente, consulta la documentazione completa di Emscripten o segui questo esempio guidato su come trasferire una libreria.
Emscripten è una toolchain completa che non solo ti aiuta a compilare il tuo C++ in Wasm, ma fornisce un livello di traduzione che trasforma le chiamate API POSIX in chiamate API web e persino OpenGL in WebGL. Ad esempio, puoi trasferire applicazioni che fanno riferimento al file system locale ed Emscripten fornirà un file system emulato per mantenere la funzionalità.
Emscripten è riuscita a portare sul web gran parte di Photoshop per un certo periodo, ma non era necessariamente abbastanza veloce. Abbiamo costantemente collaborato con Adobe per capire dove sono presenti i colli di bottiglia e migliorare Emscripten. Photoshop dipende dal multi-threading. Portare il multi-threading dinamico in WebAssembly era un requisito fondamentale.
Inoltre, la gestione degli errori basata su eccezioni è molto comune in C++, ma non era ben supportata in Emscripten e WebAssembly. Abbiamo collaborato con il WebAssembly Community Group in W3C per migliorare lo standard WebAssembly e gli strumenti necessari per portare le eccezioni C++ in WebAssembly.
Emscripten non funziona solo su applicazioni di grandi dimensioni, ma consente anche di trasferire librerie o progetti più piccoli. Ad esempio, puoi scoprire come compilare la popolare libreria OpenCV sul web tramite Emscripten.
Infine, WebAssembly offre primitive avanzate per le prestazioni, come le istruzioni SIMD, che migliorano notevolmente le prestazioni dell'app web. Ad esempio, Halide è essenziale per le prestazioni di Adobe e qui SIMD offre una velocità media di 3-4 volte e, in alcuni casi, di 80-160 ×.
Debug di WebAssembly
Nessun progetto di grandi dimensioni può essere completato correttamente senza gli strumenti appropriati per il lavoro ed è per questo motivo che il team di Chrome ha sviluppato il supporto completo per il debug di WebAssembly. Offre supporto per l'esplorazione del codice sorgente, l'impostazione dei punti di interruzione e la messa in pausa delle eccezioni, l'ispezione delle variabili con supporto di tipo avanzato e persino il supporto di base per la valutazione nella console DevTools.
Assicurati di consultare la guida autorevole su come utilizzare il debug di WebAssembly.
Archiviazione ad alte prestazioni
Date le dimensioni dei documenti Photoshop, un'esigenza critica per Photoshop è la capacità di spostare dinamicamente i dati da un disco a un'altra in memoria mentre l'utente si sposta. Su altre piattaforme, questo è possibile di solito tramite la mappatura della memoria tramite mmap, ma questo non è stato possibile in modo efficiente sul web, fino a quando gli handle di accesso al file system privato dell'origine non sono stati sviluppati e implementati come prova dell'origine. Per sapere come utilizzare questa nuova API, puoi leggere nella documentazione.
Spazio colore P3 per canvas
Storicamente, i colori sul web sono stati specificati nello spazio colore sRGB, che è uno standard dalla metà degli anni novanta, in base alle capacità dei monitor a tubo catodico. Le videocamere e i monitor hanno fatto molta strada nel quarto secolo successivo e molti spazi colore più ampi e più efficaci sono stati standardizzati. Uno degli spazi colore moderni più popolari è Display P3. Photoshop utilizza un Display P3 Canvas per visualizzare le immagini in modo più accurato nel browser. In particolare, le immagini con bianchi brillanti, colori brillanti e dettagli in ombra verranno visualizzate al meglio sui display moderni che supportano i dati Display P3. L'API Display P3 Canvas è in fase di sviluppo per consentire la visualizzazione High Dynamic Range.
Componenti web e Lit
Photoshop è un'applicazione notoriamente di grandi dimensioni e ricca di funzionalità, con centinaia di elementi UI che supportano decine di flussi di lavoro. L'app viene creata da più team che utilizzano una varietà di strumenti e pratiche di sviluppo, ma le sue parti più eterogenee devono riunirsi in un unico tutto coeso e ad alte prestazioni.
Per superare questa sfida, Adobe ha adottato i componenti web e la libreria Lit. Gli elementi dell'interfaccia utente di Photoshop provengono dalla libreria Spectrum Web Componenti di Adobe, da un'implementazione leggera e ad alte prestazioni del sistema di progettazione Adobe compatibile con qualsiasi framework o senza alcun framework.
Inoltre, l'intera app Photoshop è realizzata usando componenti web basati su Lit. Sfruttando il modello dei componenti integrato nel browser e l'incapsulamento di Shadow DOM, il team ha trovato facile integrare in modo pulito alcune "isole" di codice React fornito da altri team di Adobe.
Memorizzazione nella cache del service worker con Workbox
I service worker agiscono come proxy locale programmabile, intercettando le richieste di rete e rispondendo con i dati della rete, dalle cache a lunga durata o da una combinazione di entrambi.
Nell'ambito degli sforzi del team V8 per migliorare le prestazioni, la prima volta che un service worker risponde con una risposta WebAssembly memorizzata nella cache, Chrome genera e archivia una versione ottimizzata del codice, anche per script WebAssembly multi-megabyte, comuni nel codebase di Photoshop. Una precompilazione simile avviene quando JavaScript viene memorizzato nella cache da un service worker durante il passaggio install. In entrambi i casi, Chrome è in grado di caricare ed eseguire le versioni ottimizzate degli script memorizzati nella cache con un overhead di runtime minimo.
Photoshop sul web sfrutta questa funzionalità implementando un service worker che memorizza nella cache molti dei suoi script JavaScript e WebAssembly. Poiché gli URL di questi script vengono generati in fase di compilazione e poiché la logica di mantenere aggiornate le cache può essere complessa, l'azienda si è affidata a un insieme di librerie gestite da Google, chiamato Workbox per generare il proprio service worker come parte del processo di compilazione.
Un service worker basato su Workbox e la memorizzazione nella cache degli script del motore V8 hanno portato a miglioramenti misurabili delle prestazioni. I numeri specifici variano in base al dispositivo su cui viene eseguito il codice, ma il team stima che queste ottimizzazioni abbiano ridotto del 75% il tempo dedicato all'inizializzazione del codice.
Passaggi successivi di Adobe sul web
Il lancio della versione beta di Photoshop è solo l'inizio. Sono già in corso diversi miglioramenti delle prestazioni e delle funzionalità mentre Photoshop procede al lancio completo dopo la versione beta. Adobe non si ferma con Photoshop e ha in programma di espandere in modo aggressivo Creative Cloud sul web, rendendolo una piattaforma principale sia per la creazione di contenuti creativi sia per la collaborazione. Ciò consentirà a milioni di creator alle prime armi di raccontare la propria storia e di trarre vantaggio da flussi di lavoro innovativi sul web.
Mentre Adobe continua a spingersi oltre i confini del possibile, il team di Chrome continuerà la nostra collaborazione per far progredire il web per Adobe e il vivace ecosistema di sviluppatori web in generale. Poiché anche altri browser si aggiornano su queste moderne funzionalità dei browser, siamo entusiasti di vedere che Adobe metterà a disposizione i loro prodotti anche in questo paese. Continua a seguirci per non perderti gli aggiornamenti futuri del web.
Puoi scoprire di più sull'accesso a Photoshop sul web (beta) nel Centro assistenza di Adobe.