Hace unos años, habría sido difícil imaginar la idea de ejecutar software tan complejo como Photoshop directamente en el navegador. Sin embargo, con el uso de varias tecnologías web nuevas, Adobe ahora lanzó una versión beta pública de Photoshop para la Web.
En los últimos tres años, Chrome ha trabajado para potenciar las aplicaciones web que quieren superar los límites de lo que es posible en el navegador. Una de esas aplicaciones web es Photoshop. Hace unos años, habría sido difícil imaginar la idea de ejecutar software tan complejo como Photoshop directamente en el navegador. Sin embargo, con el uso de varias tecnologías web nuevas, Adobe ahora lanzó una versión beta pública de Photoshop para la Web.
(Si prefieres mirar un video en vez de leer 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 extiende Photoshop a la Web. También puedes usar todas las APIs que usó Adobe y mucho más en tus propias apps. Asegúrate de consultar nuestras publicaciones de blog relacionadas con las funciones web para inspirarte y mira nuestro registrador de APIs para conocer las funciones más recientes en las que estamos trabajando.
Por qué Photoshop llegó a la Web
A medida que la Web ha evolucionado, 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 ser vinculables, efímeros y universales, pero se reducen a permitir un acceso sencillo, un uso compartido fácil y una gran colaboración.
La gran ventaja de una URL es que cualquier persona puede hacer clic en ella y acceder a ella de inmediato. Lo único que necesitas es un navegador. No es necesario instalar una aplicación ni preocuparse por el sistema operativo en el que se ejecuta. En el caso de las aplicaciones web, eso significa que los usuarios pueden tener acceso a la aplicación, a sus documentos y a sus comentarios. Esto hace que la Web sea la plataforma de colaboración ideal, algo que se vuelve cada vez más esencial para los equipos de creatividad y marketing.
Documentos de Google fue pionero en este acceso simplificado. La mayoría de nosotros sabemos lo fácil que es comenzar un documento, enviar el vínculo a alguien y, de inmediato, ir no solo a la aplicación, sino también al documento o comentario específico. Desde entonces, una gran cantidad de aplicaciones increíbles, 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 solo adecuada para documentos, pero creció de forma espectacular a lo largo de su historia. Las primeras apps, como Gmail, demostraron que, al menos, era posible lograr una interactividad y aplicaciones más complejas. Desde entonces, hemos visto un codesarrollo impresionante en el que las apps web superan los límites de lo posible y los proveedores de navegadores responden expandiendo aún más las capacidades web. La iteración más reciente de este ciclo virtuoso es lo que habilitó Photoshop en la Web.
Anteriormente, Adobe llevó Spark y Lightroom a la Web y tenía interés en llevar Photoshop a la Web desde hace muchos años. Sin embargo, las limitaciones de rendimiento de JavaScript, la ausencia de un buen destino de compilación para su código y la falta de capacidades web los detuvieron. Sigue leyendo para saber qué incorporó Chrome 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 eso significaba que Adobe no tendría que empezar desde cero, sino que podría aprovechar su base de código existente de Photoshop. WebAssembly es un conjunto de instrucciones binarias portátiles que se envía en todos los navegadores y que se diseñó como destino de compilación para lenguajes de programación. Esto significa que aplicaciones como Photoshop, escritas en C++, se pueden portar directamente a la Web sin necesidad de reescribirlas en JavaScript. Para comenzar a realizar la portabilidad por tu cuenta, consulta la documentación completa de Emscripten o sigue este ejemplo guiado para portar una biblioteca.
Emscripten es una cadena de herramientas con todas las funciones que no solo te ayuda a compilar tu código 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 y hasta convierte OpenGL en WebGL. Por ejemplo, puedes portar aplicaciones que hacen referencia al sistema de archivos local y Emscripten proporcionará un sistema de archivos emulado para mantener la funcionalidad.
Emscripten lleva bastante tiempo llevando la mayoría de las partes de Photoshop a la Web, pero no necesariamente era lo suficientemente rápido. Trabajamos continuamente con Adobe para determinar dónde se producen los cuellos de botella y mejorar Emscripten. Photoshop depende de la multitarea. Llevar el subproceso múltiple dinámico a WebAssembly era un requisito fundamental.
Además, el control de errores basado en excepciones es muy común en C++, pero no era muy compatible con Emscripten y WebAssembly. Trabajamos con el WebAssembly Community Group en el W3C para mejorar el estándar de WebAssembly y las herramientas relacionadas con él para llevar 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 compilar la popular biblioteca de OpenCV en la Web a través de Emscripten.
Por último, WebAssembly ofrece primitivas de rendimiento avanzadas, como las instrucciones SIMD, que mejoran notablemente el rendimiento de tu app web. Por ejemplo, Halide es esencial para el rendimiento de Adobe, y aquí SIMD proporciona una aceleración de 3 a 4 veces en promedio y, en algunos casos, de 80 a 160 veces.
Depuración de WebAssembly
No se puede completar ningún proyecto grande de forma exitosa sin las herramientas adecuadas para el trabajo, y es por este motivo que el equipo de Chrome desarrolló la compatibilidad con la depuración de WebAssembly con todas sus funciones. Proporciona compatibilidad para recorrer el código fuente, establecer puntos de interrupción y pausar en excepciones, inspección de variables con compatibilidad con tipos enriquecidos y hasta compatibilidad básica para la evaluación en la consola de DevTools.
Asegúrate de consultar la guía autorizada sobre cómo usar la depuración de WebAssembly.
Almacenamiento de alto rendimiento
Dado el gran tamaño que pueden tener los documentos de Photoshop, una necesidad fundamental de este programa es la capacidad de mover datos de forma dinámica del disco a la memoria mientras el usuario se desplaza. En otras plataformas, esto se logra, por lo general, a través de la asignación de memoria a través de mmap, pero esto no fue posible con un buen rendimiento en la Web, hasta que se desarrollaron e implementaron los controladores de acceso al sistema de archivos privados de origen como una prueba de origen. Puedes leer cómo aprovechar esta nueva API en la documentación.
Espacio de color P3 para lienzo
Históricamente, los colores en la Web se especificaban en el espacio de color sRGB, que es un estándar de mediados de los noventa, basado en las capacidades de los monitores de tubos de rayos catódicos. Las cámaras y los monitores han avanzado mucho en el último 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 usa un lienzo Display P3 para mostrar imágenes con mayor precisión en el navegador. En particular, las imágenes con blancos brillantes, colores brillantes y detalles en sombras se mostrarán de la mejor manera posible en pantallas modernas que admitan datos de Display P3. La API de Canvas P3 de Display se está desarrollando aún más para habilitar pantallas de alto rango dinámico.
Componentes web y Lit
Photoshop es una aplicación muy grande y con muchas funciones, con cientos de elementos de la IU que admiten decenas de flujos de trabajo. Varios equipos crean 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 cumplir con este desafío, Adobe recurrió a los componentes web y a la biblioteca Lit. Los elementos de la IU de Photoshop provienen de la biblioteca de Spectrum Web Components de Adobe, una implementación liviana y de alto rendimiento del sistema de diseño de Adobe que funciona con cualquier framework o sin él.
Además, toda la app de Photoshop se compila con componentes web basados en Lit. Con el modelo de componentes integrado del navegador y el encapsulamiento de Shadow DOM, el equipo pudo integrar fácilmente algunas "islas" de código de React proporcionadas por otros equipos de Adobe.
Almacenamiento en caché de service worker con Workbox
Los trabajadores de servicio actúan como un proxy local programable que intercepta las solicitudes de red y responde 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 trabajador de servicio responde con una respuesta de WebAssembly almacenada en caché, Chrome genera y almacena una versión optimizada del código, incluso para las secuencias de comandos de WebAssembly de varios megabytes, que son comunes en la base de código de Photoshop. Se produce una precompilación similar cuando un trabajador de servicio 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 entorno de ejecución.
Photoshop en la Web aprovecha esto a través de la implementación de un trabajador de servicio que almacena en caché muchas de sus secuencias de comandos de JavaScript y WebAssembly. Debido a que las URLs de estas secuencias de comandos se generan en el momento de la compilación y a que la lógica de mantener las cachés actualizadas puede ser compleja, recurrieron a un conjunto de bibliotecas que mantiene Google llamado Workbox para generar su trabajador de servicio como parte de su proceso de compilación.
Un service worker basado en Workbox junto con el almacenamiento en caché de la secuencia de comandos del motor V8 generó 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 en un 75% el tiempo dedicado a la inicialización del código.
Novedades de Adobe en la Web
El lanzamiento de la versión beta de Photoshop es solo el comienzo. Ya estamos trabajando en varias mejoras de rendimiento y funciones mientras Photoshop se prepara para su lanzamiento completo después de esta versión beta. Adobe no se detendrá con Photoshop y planea expandir de forma agresiva Creative Cloud a la Web, lo que la convertirá en una plataforma principal para la creación y la colaboración de contenido creativo. Esto permitirá que millones de creadores que se inician en la creación de contenido cuenten sus historias y se beneficien de flujos de trabajo innovadores en la Web.
A medida que Adobe sigue ampliando los límites de lo posible, el equipo de Chrome continuará con 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 funciones de navegadores modernos, nos complace ver que Adobe también pone sus productos a disposición allí. No te pierdas las novedades a medida que seguimos impulsando la Web.
Puedes obtener más información para acceder a Photoshop en la Web (beta) en el Centro de ayuda de Adobe.