Il y a quelques années à peine, l'idée d'exécuter un logiciel aussi complexe que Photoshop directement dans le navigateur aurait été difficile à imaginer. Toutefois, en utilisant diverses nouvelles technologies Web, Adobe propose désormais une version bêta publique de Photoshop sur le Web.
Depuis trois ans, Chrome s'efforce de donner aux applications Web les moyens de repousser les limites du navigateur. Parmi elles, Photoshop. Il y a quelques années à peine, l'idée d'exécuter un logiciel aussi complexe que Photoshop directement dans le navigateur aurait été difficile à imaginer. Toutefois, en utilisant diverses nouvelles technologies Web, Adobe propose désormais une version bêta publique de Photoshop sur le Web.
(Si vous préférez regarder autre chose que la lecture, cet article est également disponible sous forme de vidéo.)
Dans ce message, nous souhaitons vous présenter pour la première fois la manière dont notre collaboration permet d'étendre Photoshop au Web. Vous pouvez également utiliser toutes les API utilisées par Adobe et d'autres dans vos propres applications. N'oubliez pas de consulter nos articles de blog sur les fonctionnalités Web pour vous inspirer et de regarder notre outil de suivi des API pour connaître les derniers éléments sur lesquels nous travaillons.
Pourquoi Photoshop a été lancé sur le Web
À mesure que le Web a évolué, une chose n'a pas changé : les principaux avantages qu'offrent les sites Web et les applications Web par rapport aux applications spécifiques à une plate-forme. Ces avantages incluent de nombreuses fonctionnalités uniques, telles que la possibilité d'être reliées, éphémères et universels, mais ils se résument à faciliter l'accès, le partage et la collaboration.
L'avantage d'une URL est que n'importe qui peut cliquer dessus et y accéder instantanément. Tout ce dont vous avez besoin, c'est d'un navigateur. Vous n'avez pas besoin d'installer d'application ni de vous soucier du système d'exploitation sur lequel vous exécutez l'application. Pour les applications Web, cela signifie que les utilisateurs peuvent avoir accès à l'application, ainsi qu'à leurs documents et commentaires. Le Web est donc la plate-forme de collaboration idéale, un aspect de plus en plus essentiel pour les équipes marketing et créatives.
Google Docs a été l'un des premiers à proposer cet accès simplifié. La plupart d'entre nous savent à quel point il est facile de créer un document, d'envoyer le lien à quelqu'un et d'accéder immédiatement non seulement à l'application, mais également au document ou au commentaire spécifique. Depuis, de nombreuses applications incroyables, telles que celles que nous avons présentées par le passé, ont adopté ce modèle et, désormais, en tireront également profit.
Comment Photoshop a été lancé sur le Web
À l'origine, le Web était une plate-forme réservée aux documents, puis s'est considérablement développée au fil de son histoire. Les premières applications comme Gmail ont démontré qu'il était tout au moins possible d'utiliser des applications et des interactions plus complexes. Depuis, nous avons assisté à d'impressionnants co-développements où les applications Web repoussent les limites du possible et où les fournisseurs de navigateurs répondent en étendant encore plus leurs fonctionnalités Web. La dernière itération de cette boucle vertueuse a permis à Photoshop sur le Web de fonctionner.
Adobe a déjà introduit Spark et Lightroom sur le Web et cherchait à mettre Photoshop sur le Web depuis de nombreuses années. Cependant, elles étaient bloquées par les limitations de performances de JavaScript, l'absence d'une cible de compilation correcte pour leur code et l'absence de capacités Web. Poursuivez votre lecture pour découvrir comment Google Chrome a intégré le navigateur pour résoudre ces problèmes.
Portage WebAssembly avec Emscripten
WebAssembly et sa chaîne d'outils C++ Emscripten ont joué un rôle clé pour permettre à Photoshop de se rendre sur le Web. En effet, Adobe n'avait pas besoin de repartir de zéro, mais a pu exploiter son codebase Photoshop existant. WebAssembly est un ensemble d'instructions binaire portable expédié dans tous les navigateurs. Il a été conçu comme une cible de compilation pour les langages de programmation. Cela signifie que les applications telles que Photoshop écrites en C++ peuvent être portées directement sur le Web sans nécessiter de réécriture en JavaScript. Pour commencer à effectuer le transfert par vous-même, consultez la documentation complète d'Emscripten ou suivez cet exemple guidé de portage d'une bibliothèque.
Emscripten est une chaîne d'outils complète qui vous aide non seulement à compiler votre C++ sur Wasm, mais fournit également une couche de traduction qui transforme les appels d'API POSIX en appels d'API Web et qui convertit même OpenGL en WebGL. Par exemple, vous pouvez transférer des applications qui font référence au système de fichiers local, et Emscripten fournira un système de fichiers émulé pour maintenir la fonctionnalité.
Emscripten est capable de publier la plupart des éléments de Photoshop sur le Web depuis un certain temps, mais ce n'est pas assez rapide. Nous travaillons en permanence avec Adobe afin d'identifier les goulots d'étranglement et d'améliorer Emscripten. Photoshop repose sur le multithreading. Intégrer le multithread dynamique à WebAssembly était une exigence critique.
De plus, la gestion des erreurs basée sur les exceptions est très courante en C++, mais n'était pas bien prise en charge dans Emscripten et WebAssembly. Nous avons travaillé avec le Groupe de la communauté WebAssembly du W3C pour améliorer la norme WebAssembly et les outils associés afin d'intégrer des exceptions C++ à WebAssembly.
Emscripten ne fonctionne pas seulement sur les applications volumineuses, mais vous permet également de transférer des bibliothèques ou des projets plus petits. Découvrez par exemple comment compiler la bibliothèque OpenCV populaire sur le Web via Emscripten.
Enfin, WebAssembly propose des primitives de performances avancées, telles que les instructions SIM, qui améliorent considérablement les performances de votre application Web. Par exemple, Halide est essentiel aux performances d'Adobe. Dans le cas présent, SIMD offre une accélération de 3 à 4 fois supérieure en moyenne et, dans certains cas, une accélération de 80 à 160 fois.
Débogage WebAssembly
Aucun projet de grande envergure ne peut être mené à bien sans les outils appropriés. C'est pour cette raison que l'équipe Chrome a développé une assistance complète au débogage WebAssembly. Il permet de parcourir le code source, de définir des points d'arrêt et de suspendre les exceptions, d'inspecter des variables avec une prise en charge avancée des types, et même d'effectuer l'évaluation de base dans la console des outils de développement.
N'oubliez pas de consulter le guide faisant autorité sur l'utilisation du débogage WebAssembly.
Stockage hautes performances
Compte tenu de la taille des documents Photoshop, il est essentiel que Photoshop ait besoin de pouvoir déplacer les données de manière dynamique du disque vers la mémoire lorsque l'utilisateur fait un panoramique. Sur d'autres plates-formes, cela se fait généralement via un mappage de mémoire via mmap, mais cela n'a pas été possible de manière optimale sur le Web, jusqu'à ce que des poignées d'accès privés au système de fichiers d'origine aient été développés et implémentés en phase d'évaluation. Pour découvrir comment tirer parti de cette nouvelle API, consultez la documentation.
Espace colorimétrique P3 pour le canevas
Historiquement, les couleurs sur le Web ont été spécifiées dans l'espace colorimétrique sRGB, qui est une norme datant des années 1990 et qui repose sur les capacités des moniteurs à tube cathode. Les caméras et les écrans ont beaucoup progressé au cours du quart de siècle, et de nombreux espaces colorimétriques plus grands et plus performants ont été standardisés. L'un des espaces de couleurs modernes les plus populaires est le Display P3. Photoshop utilise un canevas P3 d'affichage pour afficher les images avec plus de précision dans le navigateur. En particulier, les images avec des blancs éclatants, des couleurs vives et des détails dans les ombres s'afficheront de manière optimale sur les écrans modernes compatibles avec les données Display P3. Nous perfectionnons l'API Display P3 Canvas pour permettre l'affichage en haute plage dynamique.
Composants Web et Lit
Photoshop est une application célèbre et riche en fonctionnalités, avec des centaines d'éléments d'interface utilisateur compatibles avec des dizaines de workflows. L'application est conçue par plusieurs équipes à l'aide d'une variété d'outils et de pratiques de développement, mais ses parties disparates doivent s'assembler en un ensemble cohérent et performant.
Pour relever ce défi, Adobe s'est tourné vers Web Components (Composants Web) et la bibliothèque Lit. Les éléments d'interface utilisateur de Photoshop proviennent de la bibliothèque Spectrum Web Components d'Adobe, une implémentation légère et performante du système de conception Adobe qui fonctionne avec n'importe quel framework, voire aucun framework.
De plus, toute l'application Photoshop est conçue à l'aide de composants Web basés sur Lit. En s'appuyant sur le modèle de composants intégré au navigateur et sur l'encapsulation Shadow DOM, l'équipe a pu facilement intégrer quelques "îlots" de code React fourni par d'autres équipes Adobe.
Mettre en cache un service worker avec Workbox
Les service workers agissent comme un proxy local programmable. Ils interceptent les requêtes réseau et répondent avec des données du réseau, des caches de longue durée ou un mélange des deux.
Dans le cadre des efforts déployés par l'équipe V8 pour améliorer les performances, la première fois qu'un service worker répond avec une réponse WebAssembly mise en cache, Chrome génère et stocke une version optimisée du code, même pour les scripts WebAssembly de plusieurs mégaoctets, qui sont courants dans le codebase Photoshop. Une précompilation similaire se produit lorsqu'un service worker met en cache du code JavaScript au cours de son étape install. Dans les deux cas, Chrome peut charger et exécuter les versions optimisées des scripts mis en cache avec un temps d'exécution minimal.
Photoshop sur le Web tire parti de cette approche en déployant un service worker qui met en cache un grand nombre de ses scripts JavaScript et WebAssembly. Les URL de ces scripts étant générées au moment de la compilation, et la logique de mise à jour des caches peut être complexe, l'équipe s'est tournée vers un ensemble de bibliothèques gérées par Google, appelé Workbox, pour générer le service worker dans le cadre de son processus de compilation.
L'utilisation d'un service worker basé sur Workbox et la mise en cache des scripts du moteur V8 ont permis d'améliorer de façon mesurable les performances. Les chiffres varient en fonction de l'appareil qui exécute le code, mais l'équipe estime que ces optimisations ont permis de réduire de 75 % le temps consacré à l'initialisation du code.
L'avenir d'Adobe sur le Web
Le lancement de la version bêta de Photoshop ne fait que commencer. Nous avons déjà commencé à améliorer les performances et les fonctionnalités de Photoshop en vue de son lancement complet après cette phase bêta. Adobe ne s'arrête pas à Photoshop et prévoit de déployer intensivement Creative Cloud sur le Web, ce qui en fait une plate-forme principale pour la création de contenus créatifs et la collaboration. Des millions de nouveaux créateurs pourront ainsi raconter leur histoire et bénéficier de flux de travail innovants sur le Web.
Alors qu'Adobe continue de repousser les limites du possible, l'équipe Chrome poursuivra sa collaboration pour faire progresser le Web pour Adobe et l'écosystème dynamique des développeurs Web en général. Alors que d'autres navigateurs rattrapent leur retard sur ces capacités modernes, nous sommes heureux de voir Adobe proposer également ses produits sur cette plate-forme. Tenez-vous informé des prochaines mises à jour à mesure que nous continuons à développer le Web !
Pour en savoir plus sur l'accès à Photoshop sur le Web (version bêta), consultez le Centre d'aide Adobe.