Hace unos años hubiera sido difícil imaginar la idea de ejecutar un software tan complejo como Photoshop. Sin embargo, mediante el uso de varias tecnologías web nuevas, Adobe presentó una versión beta pública de Photoshop en la Web.
Durante los últimos tres años, Chrome ha estado trabajando para potenciar las aplicaciones web que quieren desafiar los límites de lo que es posible en el navegador. Una de esas aplicaciones web es Photoshop. Hace unos años hubiera sido difícil imaginar la idea de ejecutar un software tan complejo como Photoshop. Sin embargo, mediante el uso de varias tecnologías web nuevas, Adobe presentó una versión beta pública de Photoshop en la Web.
(Si prefieres mirar el video en lugar de leerlo, este artículo también está disponible como video).
En esta publicación, queremos compartir por primera vez los detalles de cómo nuestra colaboración está ampliando Photoshop a la Web. También puedes usar en tus propias aplicaciones todas las APIs que usó Adobe y muchas más. Asegúrate de consultar nuestras entradas de blog relacionadas con las funciones web para inspirarte y mira nuestro seguimiento de APIs para conocer las novedades más recientes y geniales en las que estamos trabajando.
Por qué Photoshop llegó a la Web
Con la evolución de la Web, una cosa que no ha cambiado son las ventajas principales que ofrecen los sitios web y las aplicaciones web sobre las aplicaciones específicas de la plataforma. Estas ventajas incluyen muchas capacidades únicas, como las que se pueden vincular, las efímeras y las universales, pero se reducen a permitir un acceso sencillo, un uso compartido sencillo y una gran colaboración.
El simple poder de una URL es que cualquier persona puede hacer clic en ella y acceder a ella de manera instantánea. Lo único que necesitas es un navegador. No necesitas instalar una aplicación ni preocuparte por el sistema operativo que usas. En el caso de las aplicaciones web, eso significa que los usuarios pueden acceder a la aplicación, a sus documentos y comentarios. Esto convierte a la Web en la plataforma de colaboración ideal, algo que se está volviendo cada vez más esencial para los equipos creativos y de marketing.
Documentos de Google fue pionero de este acceso simplificado. La mayoría de nosotros sabemos lo fácil que es iniciar un documento, enviar el enlace a alguien y pasar inmediatamente no solo a la aplicación, sino también al documento o comentario específico. Desde entonces, una gran cantidad de aplicaciones asombrosas, como las que mostramos en el pasado, adoptaron este modelo y ahora Photoshop también se beneficiará.
Cómo llegó Photoshop a la Web
La Web comenzó como una plataforma apropiada solo para documentos, pero ha crecido notablemente a lo largo de su historia. Las primeras apps, como Gmail, demostraron que las aplicaciones y la interactividad más complejas eran, por lo menos, posibles. Desde entonces, hemos visto un impresionante desarrollo conjunto en el que las aplicaciones web desafían los límites de lo posible y los proveedores de navegadores responden ampliando aún más sus capacidades web. La última iteración de este bucle virtuoso es la que habilitó Photoshop en la Web.
Anteriormente, Adobe llevaba Spark y Lightroom a la Web y había estado interesado en llevar Photoshop a la Web durante muchos años. Sin embargo, estaban bloqueados por las limitaciones de rendimiento de JavaScript, la ausencia de un buen objetivo de compilación para su código y la falta de capacidades web. Continúa leyendo para saber qué Chrome incorporó en el navegador para resolver estos problemas.
Portabilidad de WebAssembly con Emscripten
WebAssembly y su cadena de herramientas de C++, Emscripten, fueron la clave para desbloquear la capacidad de Photoshop de llegar a la Web, ya que significaba que Adobe no tenía que empezar desde cero, sino que podía aprovechar su base de código existente de Photoshop. WebAssembly es un conjunto de instrucciones binaria portátil que se envía a todos los navegadores y se diseñó como un objetivo de compilación para lenguajes de programación. Esto significa que las aplicaciones como Photoshop escritas en C++ se pueden transferir directamente a la Web sin necesidad de reescribirlas en JavaScript. Para comenzar a portar tu biblioteca, consulta la documentación completa para la portabilidad o sigue este ejemplo guiado de cómo portar una biblioteca.
Emscripten es una cadena de herramientas con todas las funciones que no solo te ayuda a compilar tu C++ en Wasm, sino que también proporciona una capa de traducción que convierte las llamadas a la API de POSIX en llamadas a la API web e incluso convierte OpenGL en WebGL. Por ejemplo, puedes transferir aplicaciones que hagan referencia al sistema de archivos local y Emscripten proporcionará un sistema de archivos emulado para mantener la funcionalidad.
Emscripten fue capaz de llevar la mayoría de las partes de Photoshop a la Web durante un tiempo, pero no fue necesariamente lo suficientemente rápido. Trabajamos continuamente con Adobe para identificar dónde están los cuellos de botella y mejorar Emscripten. Photoshop depende de varios subprocesos. El multiprocesamiento dinámico en WebAssembly era un requisito fundamental.
Además, el manejo de errores basado en excepciones es muy común en C++, pero no se admitía bien en Emscripten y WebAssembly. Trabajamos con el grupo de la comunidad WebAssembly en el W3C para mejorar el estándar de WebAssembly y las herramientas correspondientes a fin de incorporar excepciones de C++ a WebAssembly.
Emscripten no solo funciona en aplicaciones grandes, sino que también te permite portar bibliotecas o proyectos más pequeños. Por ejemplo, puedes ver cómo puedes compilar la popular biblioteca OpenCV en la Web con Emscripten.
Por último, WebAssembly ofrece primitivas de rendimiento avanzadas, como las instrucciones SIMD, que mejoran de forma significativa el rendimiento de tu app web. Por ejemplo, Halide es esencial para el rendimiento de Adobe y, aquí, SIMD proporciona una velocidad promedio de 3 a 4 veces y, en algunos casos, una de 80 a 160 veces.
Depuración de WebAssembly
Ningún proyecto grande se puede completar con éxito sin las herramientas adecuadas para el trabajo, y es por este motivo que el equipo de Chrome desarrolló una completa compatibilidad con la depuración de WebAssembly. Ofrece compatibilidad para recorrer el código fuente, establecer puntos de interrupción y pausar en excepciones, inspeccionar variables con compatibilidad de tipos enriquecidos e incluso compatibilidad básica para evaluación en la consola de Herramientas para desarrolladores.
Asegúrate de consultar la guía autorizada sobre cómo usar la depuración de WebAssembly.
Almacenamiento de alto rendimiento
Dada el tamaño de los documentos de Photoshop, una necesidad fundamental de Photoshop es poder transferir de manera dinámica los datos del almacenamiento en el disco a la memoria a medida que el usuario se desplaza lateralmente. En otras plataformas, esto se logra a través de la asignación de memoria a través de mmap, pero el rendimiento no ha sido posible en la Web, es decir, hasta que los controladores de acceso al sistema de archivos privados de origen se desarrollan y se implementan como una prueba de origen. Para obtener más información sobre cómo aprovechar esta nueva API, consulta la documentación.
Espacio de color P3 para lienzo
Históricamente, los colores de la Web se especificaron en el espacio de color sRGB, que es un estándar de mediados de los años noventa, según las capacidades de los monitores de tubos de rayos cátodo. Las cámaras y los monitores han avanzado mucho durante el cuarto de siglo, y se estandarizaron muchos espacios de color más grandes y capaces. Uno de los espacios de color modernos más populares es Display P3. Photoshop utiliza Display P3 Canvas para mostrar imágenes con mayor precisión en el navegador. En particular, las imágenes con blancos brillantes, colores brillantes y detalles con sombras se mostrarán lo mejor posible en pantallas modernas que admitan datos P3 de Display. Se está compilando la API de Display P3 Canvas para habilitar pantallas de alto rango dinámico.
Componentes web y Lit
Photoshop es una aplicación notablemente grande y rica en funciones, con cientos de elementos de IU que admiten decenas de flujos de trabajo. Varios equipos compilan la app con una variedad de herramientas y prácticas de desarrollo, pero sus partes dispares deben unirse en un todo cohesivo y de alto rendimiento.
Para enfrentar este desafío, Adobe recurrió a los componentes web y la biblioteca de Lit. Los elementos de la IU de Photoshop provienen de la biblioteca Spectrum Web Components de Adobe, una implementación ligera y de alto rendimiento del sistema de diseño de Adobe que funciona con cualquier framework o con ninguno.
Además, toda la app de Photoshop se compila con componentes web basados en Lit. Al basarse en el modelo de componentes integrado del navegador y el encapsulamiento de Shadow DOM, el equipo descubrió que era fácil integrar sin problemas algunas "islas" de código de React que proporcionaban otros equipos de Adobe.
Almacenamiento en caché de service worker con Workbox
Los service worker actúan como un proxy local programable, interceptan solicitudes de red y responden con datos de la red, cachés de larga duración o una combinación de ambos.
Como parte de los esfuerzos del equipo de V8 para mejorar el rendimiento, la primera vez que un service worker responde con una respuesta de WebAssembly almacenada en caché, Chrome genera y almacena una versión optimizada del código, incluso para secuencias de comandos de WebAssembly de varios megabytes, que son comunes en la base de código de Photoshop. Se produce una compilación previa similar cuando un service worker almacena en caché JavaScript durante su paso install. En ambos casos, Chrome puede cargar y ejecutar las versiones optimizadas de las secuencias de comandos almacenadas en caché con una sobrecarga mínima del tiempo de ejecución.
Photoshop en la Web aprovecha esto al implementar un service worker que almacena en caché muchas de sus secuencias de comandos de JavaScript y WebAssembly. Debido a que las URLs de esas secuencias de comandos se generan en el momento de la compilación y a que la lógica para mantener las cachés actualizadas puede ser compleja, recurrieron a un conjunto de bibliotecas que mantiene Google y que se denomina Workbox para generar su service worker como parte de su proceso de compilación.
Un service worker basado en Workbox junto con el almacenamiento en caché de secuencias de comandos del motor V8 permitieron mejoras mensurables en el rendimiento. Las cifras específicas varían según el dispositivo que ejecuta el código, pero el equipo estima que estas optimizaciones redujeron el tiempo dedicado a la inicialización del código en un 75%.
Próximos pasos de Adobe en la Web
El lanzamiento de la versión beta de Photoshop es solo el comienzo, y ya estamos realizando varias mejoras en el rendimiento y las funciones a medida que Photoshop completa su lanzamiento tras la versión beta. Adobe no dejará de utilizar Photoshop y planea expandir Creative Cloud a la Web de forma drástica, lo que la convertirá en una plataforma principal para la creación y colaboración de contenido creativo. Esto permitirá que millones de creadores nuevos cuenten sus historias y se beneficien de los flujos de trabajo innovadores en la Web.
A medida que Adobe continúa ampliando los límites de lo posible, el equipo de Chrome continuará nuestra colaboración para impulsar la Web para Adobe y el vibrante ecosistema de desarrolladores web en general. A medida que otros navegadores también se ponen al día con estas modernas funciones de navegador, nos emociona ver que Adobe haga que sus productos estén disponibles allí también. No te pierdas las próximas actualizaciones a medida que seguimos trabajando en la Web.
Puedes obtener más información sobre cómo acceder a Photoshop en la Web (beta) en el Centro de ayuda de Adobe.