Die Idee, eine so komplexe Software wie Photoshop direkt im Browser auszuführen, war noch vor wenigen Jahren kaum vorstellbar. Durch den Einsatz verschiedener neuer Webtechnologien hat Adobe jetzt eine öffentliche Betaversion von Photoshop ins Web gebracht.
In den letzten drei Jahren wurden mit Chrome Webanwendungen unterstützt, die die Grenzen des Browsererlebnisses erweitern möchten. Eine solche Webanwendung ist Photoshop. Die Idee, eine so komplexe Software wie Photoshop direkt im Browser auszuführen, war noch vor wenigen Jahren kaum vorstellbar. Durch den Einsatz verschiedener neuer Webtechnologien hat Adobe jetzt eine öffentliche Betaversion von Photoshop ins Web gebracht.
Wenn Sie sich die Inhalte lieber ansehen als lesen möchten, können Sie sich diesen Artikel auch als Video ansehen.
In diesem Beitrag möchten wir zum ersten Mal auf Details darüber eingehen, wie unsere Zusammenarbeit von Photoshop auf das Web ausgeweitet wird. Sie können alle von Adobe verwendeten und mehr APIs auch in Ihren eigenen Anwendungen verwenden. Lassen Sie sich von unseren Blogposts zu Webfunktionen inspirieren und sehen Sie sich unseren API-Tracker an, um über die neuesten Entwicklungen zu sprechen, an denen wir gerade arbeiten.
Warum Photoshop ins Web kam
Da sich das Web weiterentwickelt hat, sind die Kernvorteile von Websites und Webanwendungen gegenüber plattformspezifischen Anwendungen eine Sache, die sich nicht geändert hat. Zu diesen Vorteilen gehören viele einzigartige Funktionen, beispielsweise verknüpfbar, sitzungsspezifisch und universell, aber im Kern ermöglichen sie einfachen Zugriff, einfache Freigabe und hervorragende Zusammenarbeit.
Der Vorteil einer URL besteht darin, dass jeder darauf klicken und sofort darauf zugreifen kann. Sie benötigen lediglich einen Browser. Sie müssen keine App installieren und müssen sich auch keine Gedanken darüber machen, welches Betriebssystem Sie verwenden. Bei Webanwendungen bedeutet dies, dass Nutzer Zugriff auf die Anwendung und ihre Dokumente und Kommentare haben können. Das macht das Web zur idealen Plattform für die Zusammenarbeit, die für Kreativ- und Marketingteams immer wichtiger wird.
Google Docs war ein Vorreiter für diesen vereinfachten Zugriff. Die meisten von uns wissen, wie einfach es ist, ein Dokument zu erstellen, den Link an jemanden zu senden und sofort die Anwendung aufzurufen, sondern auch das Dokument oder den Kommentar. Seitdem wird dieses Modell für eine Fülle an erstaunlichen Anwendungen eingesetzt, zum Beispiel die, die wir in der Vergangenheit gezeigt haben, und jetzt wird auch Photoshop davon profitieren.
So kam Photoshop ins Web
Ursprünglich war das Web eine Plattform, die nur für Dokumente geeignet war, hat aber im Laufe seiner Geschichte stark gewachsen. Frühe Apps wie Gmail zeigten, dass komplexere Interaktivität und Anwendungen zumindest möglich waren. Seitdem gab es eindrucksvolle Co-Entwicklungen, bei denen Webanwendungen die Grenzen des Möglichen überschreiten und Browseranbieter darauf reagieren, indem sie ihre Webfunktionen weiter ausbauen. Die letzte Iteration dieser positiven Schleife hat Photoshop im Web ermöglicht.
Adobe hat bereits Spark und Lightroom ins Web gebracht und sich schon seit vielen Jahren dafür interessiert, Photoshop im Web verfügbar zu machen. Sie wurden jedoch durch die Leistungseinschränkungen von JavaScript, das Fehlen eines geeigneten Kompilierungsziels für den Code und das Fehlen von Webfunktionen blockiert. Lesen Sie weiter, um zu erfahren, welche Funktionen Chrome im Browser integriert hat, um diese Probleme zu lösen.
WebAssembly-Portierung mit Emscripten
WebAssembly und die C++-Toolchain Emscripten waren der Schlüssel, um Photoshop ins Internet zu bringen, da Adobe nicht von Grund auf neu beginnen musste, sondern seine vorhandene Photoshop-Codebasis nutzen konnte. WebAssembly ist ein tragbarer binärer Befehlssatz, der in allen Browsern als Kompilierungsziel für Programmiersprachen verwendet werden kann. Das bedeutet, dass in C++ geschriebene Anwendungen wie Photoshop direkt ins Web übertragen werden können, ohne dass eine Neuerstellung in JavaScript erforderlich ist. Wenn Sie mit der Mitnahme beginnen möchten, lesen Sie die vollständige Emscripten-Dokumentation oder folgen Sie dieser Anleitung zum Portieren einer Bibliothek.
Emscripten ist eine voll funktionsfähige Toolchain, mit der Sie nicht nur C++-Dateien in Wasm kompilieren können, sondern auch eine Übersetzungsebene bietet, die POSIX-API-Aufrufe in Web-API-Aufrufe umwandelt und sogar OpenGL in WebGL konvertiert. Sie können beispielsweise Anwendungen portieren, die auf das lokale Dateisystem verweisen. Emscripten stellt dann ein emuliertes Dateisystem bereit, um die Funktionalität aufrechtzuerhalten.
Emscripten war schon seit einiger Zeit in der Lage, die meisten Teile von Photoshop ins Web zu bringen, aber das war nicht unbedingt schnell genug. Wir haben kontinuierlich mit Adobe zusammengearbeitet, um Engpässe zu ermitteln und Emscripten zu verbessern. Photoshop hängt vom Multithreading ab. Die Einbindung von dynamischem Multithreading in WebAssembly war eine wichtige Anforderung.
Außerdem ist eine ausnahmebasierte Fehlerbehandlung in C++ sehr üblich, wurde jedoch in Emscripten und WebAssembly nicht gut unterstützt. Wir haben mit der WebAssembly Community Group im W3C zusammengearbeitet, um den WebAssembly-Standard und die entsprechenden Tools zu verbessern und C++-Ausnahmen in WebAssembly zu ermöglichen.
Emscripten funktioniert nicht nur für große Anwendungen, sondern ermöglicht auch das Portieren von Bibliotheken oder kleineren Projekten! Sie können sich beispielsweise ansehen, wie Sie die beliebte OpenCV-Bibliothek über Emscripten im Web kompilieren können.
Und schließlich bietet WebAssembly erweiterte Leistungselemente wie SIMD-Anweisungen, mit denen sich die Leistung Ihrer Webanwendung erheblich verbessern lässt. Halide ist beispielsweise für die Leistung von Adobe unerlässlich. Hier bietet SIMD eine durchschnittliche 3- bis 4-fache Beschleunigung und in einigen Fällen eine 80- bis 160-fache Beschleunigung.
WebAssembly-Debugging
Ohne die entsprechenden Tools kann kein großes Projekt erfolgreich abgeschlossen werden. Daher hat das Chrome-Team umfassende Unterstützung für das WebAssembly-Debugging entwickelt. Sie bietet Unterstützung für das Durchlaufen des Quellcodes, das Festlegen von Haltepunkten und das Anhalten bei Ausnahmen, die Variablenprüfung mit Rich-Type-Unterstützung und sogar grundlegende Unterstützung für die Bewertung in der DevTools-Konsole.
Sehen Sie sich unbedingt den autoritativen Leitfaden zur Nutzung von WebAssembly Debugging an.
Hochleistungsspeicher
Angesichts der Größe von Photoshop-Dokumenten ist es eine wichtige Notwendigkeit für Photoshop, Daten dynamisch von der Festplatte in den Arbeitsspeicher zu verschieben, wenn der Nutzer die Ansicht schwenkt. Auf anderen Plattformen erfolgt dies in der Regel durch die Speicherzuordnung über mmap. Im Web war dies jedoch nicht leistungsfähig – also bis zur Entwicklung und Implementierung von Handles für den Zugriff auf private Dateisysteme des Ursprungs als Ursprungstest. Informationen zur Nutzung der neuen API finden Sie in der Dokumentation.
P3-Farbraum für Canvas
In der Vergangenheit wurden die Farben im Web im sRGB angegeben, einem Standard aus der Mitte der 90er, der auf den Funktionen von Kathodenstrahlröhrenmonitoren basiert. Kameras und Monitore haben sich im dahinter liegenden Vierteljahrhundert stark weiterentwickelt und viele größere und leistungsstärkere Farbräume wurden standardisiert. Einer der beliebtesten modernen Farbräume ist Display P3. Photoshop verwendet einen Display P3 Canvas, um Bilder im Browser präziser darzustellen. Insbesondere Bilder mit leuchtendem Weiß, leuchtenden Farben und Details in Schatten werden auf modernen Displays, die Display P3-Daten unterstützen, so gut wie möglich dargestellt. Die Display P3 Canvas API wird weiter ausgebaut, um Bildschirme mit High Dynamic Range zu ermöglichen.
Web Components und Lit
Photoshop ist eine berühmt-berühmte Anwendung mit vielen Funktionen und Hunderten von UI-Elementen, die Dutzende von Workflows unterstützen. Die App wird von mehreren Teams mit einer Vielzahl von Tools und Entwicklungspraktiken entwickelt, aber die unterschiedlichen Teile müssen zu einem zusammenhängenden, leistungsfähigen Ganzen vereinen.
Adobe nutzte deshalb Webkomponenten und die Lit-Bibliothek, um diese Herausforderung zu meistern. Die UI-Elemente von Photoshop stammen aus der Spectrum Web Components-Bibliothek von Adobe, einer schlanken, leistungsfähigen Implementierung des Adobe-Designsystems, die mit jedem Framework oder sogar mit keinem Framework funktioniert.
Darüber hinaus wurde die gesamte Photoshop-App mithilfe von lit-basierten Webkomponenten erstellt. Das Team stützte sich auf das integrierte Komponentenmodell des Browsers und die Shadow-DOM-Kapselung, um ein paar „Inseln“ von React-Code von anderen Adobe-Teams problemlos zu integrieren.
Service Worker-Caching mit Workbox
Service Worker fungieren als programmierbarer lokaler Proxy, fangen Netzwerkanfragen ab und antworten mit Daten aus dem Netzwerk, langlebigen Caches oder einer Mischung aus beidem.
Im Rahmen der Bemühungen des V8-Teams, die Leistung zu verbessern, generiert und speichert Chrome bei der ersten Antwort eines Service Workers mit einer im Cache gespeicherten WebAssembly-Antwort eine optimierte Version des Codes – selbst für WebAssembly-Skripte mit mehreren Megabyte, die in der Photoshop-Codebasis häufig vorkommen. Eine ähnliche Vorkompilierung findet statt, wenn ein Service Worker während des install-Schritts JavaScript im Cache speichert. In beiden Fällen kann Chrome die optimierten Versionen der im Cache gespeicherten Skripts mit minimalem Laufzeitaufwand laden und ausführen.
Photoshop im Web macht sich dies zunutze, indem er einen Service Worker bereitstellt, der viele seiner JavaScript- und WebAssembly-Skripte vorab im Cache speichert. Da die URLs für diese Skripts bei der Erstellung generiert werden und die Logik für die Aktualisierung der Caches sehr komplex sein kann, nutzte das Team eine Reihe von von Google verwalteten Bibliotheken namens Workbox, um im Rahmen des Build-Prozesses seinen Service Worker zu generieren.
Ein auf Workbox basierender Service Worker und das Skript-Caching der V8-Engine führten zu messbaren Leistungsverbesserungen. Die genauen Zahlen variieren je nach Gerät, das den Code ausführt, aber das Team schätzt, dass diese Optimierungen den Zeitaufwand für die Codeinitialisierung um 75 % reduzieren.
Wie geht es mit der Webversion von Adobe weiter?
Die Einführung der Photoshop-Beta ist erst der Anfang. Wir haben bereits einige Leistungs- und Funktionsverbesserungen vorgenommen, während Photoshop nach dieser Betaversion seine vollständige Veröffentlichung erreichen wird. Adobe hört mit Photoshop nicht auf und plant, Creative Cloud offen auf das Internet auszuweiten, um die Plattform zur primären Plattform sowohl für die Erstellung kreativer Inhalte als auch für die Zusammenarbeit zu machen. So können Millionen von neuen Creatorn ihre Geschichte erzählen und von innovativen Workflows im Web profitieren.
Adobe spornt die Grenzen des Möglichen weiter an und wird das Chrome-Team an der Weiterentwicklung des Webs für Adobe und der lebendigen Webentwickler-Umgebung im Allgemeinen weiter voranbringen. Da auch andere Browser auf dem neuesten Stand sind, freuen wir uns, dass Adobe ihre Produkte auch dort anbieten wird. Wir halten dich auf dem Laufenden, während wir das Web kontinuierlich voranbringen.
Weitere Informationen zum Zugriff auf Photoshop im Web (Beta) finden Sie in der Adobe-Hilfe.