A ideia de executar softwares tão complexos quanto o Photoshop diretamente no navegador teria sido difícil de imaginar há alguns anos. No entanto, ao usar várias novas tecnologias da web, a Adobe agora trouxe uma versão beta pública do Photoshop para a web.
Nos últimos três anos, o Chrome tem trabalhado para capacitar aplicativos da Web que querem expandir os limites do que é possível no navegador. Um desses aplicativos da Web é o Photoshop. A ideia de executar softwares tão complexos quanto o Photoshop diretamente no navegador teria sido difícil de imaginar há alguns anos. No entanto, ao usar várias novas tecnologias da web, a Adobe agora trouxe uma versão beta pública do Photoshop para a web.
Se você preferir assistir em vez de ler, este artigo também está disponível como vídeo.
Nesta postagem, gostaríamos de compartilhar pela primeira vez os detalhes de como nossa colaboração está estendendo o Photoshop para a Web. Você pode usar todas as APIs que a Adobe usou e muito mais nos seus próprios apps. Confira nossas postagens do blog relacionadas aos recursos da Web para se inspirar e confira nosso rastreador de API para saber o que estamos fazendo no momento.
Por que o Photoshop chegou à Web
Com a evolução da web, uma coisa que não mudou são as principais vantagens que sites e aplicativos da web oferecem em relação aos aplicativos específicos de plataforma. Essas vantagens incluem muitos recursos exclusivos, por exemplo, poder ser vinculado, efêmero e universal, mas se resumem à viabilização de acesso simples, compartilhamento fácil e excelente colaboração.
O simples poder de um URL é que qualquer pessoa pode clicar nele e acessá-lo instantaneamente. Você só precisa de um navegador. Não é preciso instalar um aplicativo nem se preocupar com o sistema operacional em que está sendo executado. Para aplicativos da Web, isso significa que os usuários podem ter acesso ao aplicativo e a seus documentos e comentários. Isso torna a Web a plataforma de colaboração ideal, algo que está se tornando cada vez mais essencial para as equipes de criação e marketing.
O Documentos Google foi pioneiro nesse acesso simplificado. A maioria de nós sabe como é fácil começar um documento, enviar o link para alguém e acessar imediatamente não apenas a inscrição, mas também o documento ou comentário específico. Desde então, uma infinidade de aplicativos incríveis, como os que mostramos no passado, adotaram esse modelo, e agora o Photoshop também, se beneficiará.
Como o Photoshop chegou à Web
A web começou como uma plataforma apenas para documentos, mas cresceu drasticamente ao longo de sua história. Apps como o Gmail mostraram que a interatividade e os aplicativos mais complexos eram pelo menos possíveis. Desde então, temos visto um codesenvolvimento impressionante no qual os aplicativos da Web ultrapassam os limites do que é possível e os fornecedores de navegadores respondem expandindo ainda mais os recursos da Web. A iteração mais recente desse loop virtuoso é o que habilitou o Photoshop na Web.
A Adobe havia levado o Spark e o Lightroom para a Web e, por muitos anos, estava interessada em levar o Photoshop para a Web. No entanto, eles foram bloqueados pelas limitações de desempenho do JavaScript, pela ausência de um bom destino de compilação para o código e pela falta de recursos Web. Continue lendo para saber quais são as funcionalidades do Chrome integradas ao navegador que podem resolver esses problemas.
Portabilidade do WebAssembly com Emscripten
O WebAssembly e seu conjunto de ferramentas em C++, Emscripten, foram a chave para aproveitar a capacidade do Photoshop de chegar à Web, já que a Adobe não precisaria começar do zero, mas poderia aproveitar a base de código existente do Photoshop. O WebAssembly é um serviço de envio de conjunto de instruções binárias portátil para todos os navegadores, desenvolvido como um destino de compilação para linguagens de programação. Isso significa que aplicativos como o Photoshop, escritos em C++, podem ser transferidos diretamente para a Web sem exigir uma regravação em JavaScript. Para começar a portabilidade, consulte a documentação completa do Emscripten ou siga este exemplo guiado de como transferir uma biblioteca.
O Emscripten é uma cadeia de ferramentas completa que não apenas ajuda a compilar seu C++ para o Wasm, mas fornece uma camada de tradução que transforma chamadas da API POSIX em chamadas de API da Web e até mesmo converte o OpenGL em WebGL. Por exemplo, é possível transferir aplicativos que fazem referência ao sistema de arquivos local, e o Emscripten fornecerá um sistema de arquivos emulado para manter a funcionalidade.
A Emscripten conseguiu trazer a maioria das partes do Photoshop para a Web por um tempo, mas isso não era necessariamente rápido o suficiente. Trabalhamos continuamente com a Adobe para descobrir os gargalos e melhorar o Emscripten. O Photoshop depende de várias linhas de execução. Levar a multissegmentação dinâmica para o WebAssembly era um requisito essencial.
Além disso, o tratamento de erros baseado em exceção é muito comum em C++, mas não tinha um bom suporte no Emscripten e no WebAssembly. Trabalhamos com o grupo da comunidade WebAssembly (link em inglês) no W3C para melhorar o padrão WebAssembly e as ferramentas relacionadas a ele para trazer exceções de C++ ao WebAssembly.
Além de funcionar em aplicativos grandes, o Emscripten também permite fazer a portabilidade de bibliotecas ou projetos menores. Por exemplo, você pode ver como compilar a conhecida biblioteca OpenCV para a Web usando o Emscripten.
Por fim, o WebAssembly oferece primitivos de desempenho avançados, como instruções SIMD, que melhoram drasticamente o desempenho do seu app da Web. Por exemplo, o Halide é essencial para o desempenho da Adobe. Aqui, a SIMD oferece, em média, uma velocidade de 3 a 4× e, em alguns casos, uma velocidade de 80 a 160×.
Depuração do WebAssembly
Nenhum projeto grande pode ser concluído sem as ferramentas adequadas para o trabalho, e é por esse motivo que a equipe do Chrome desenvolveu um suporte completo para depuração do WebAssembly. Ela oferece suporte para percorrer o código-fonte, definir pontos de interrupção e pausar em exceções, inspecionar variáveis com suporte de tipo avançado e até mesmo suporte básico para avaliação no console do DevTools!
Confira o guia oficial sobre como usar a depuração do WebAssembly (link em inglês).
Armazenamento de alto desempenho
Considerando o tamanho dos documentos do Photoshop, uma necessidade crítica para o Photoshop é a capacidade de mover dados dinamicamente do disco para a memória conforme o usuário movimenta o dispositivo. Em outras plataformas, isso geralmente é feito pelo mapeamento de memória pelo mmap, mas isso não era possível de maneira eficiente na Web, ou seja, até que os identificadores de acesso ao sistema de arquivos privados de origem foram desenvolvidos e implementados como um teste de origem. Saiba como aproveitar essa nova API na documentação.
Espaço de cores P3 para tela
Historicamente, as cores na Web foram especificadas no espaço de cores sRGB, um padrão da década de 90, com base nos recursos dos monitores de tubo de raios catódicos. As câmeras e os monitores avançaram muito nesse período, e muitos espaços de cores maiores e mais eficientes foram padronizados. Um dos espaços modernos de cores mais usados é o Display P3. O Photoshop usa um Display P3 Canvas para exibir imagens com mais precisão no navegador. Especificamente, imagens com brancos brilhantes, cores brilhantes e detalhes em sombras serão exibidas da melhor forma possível em telas modernas compatíveis com dados do Display P3. A API Display P3 Canvas está sendo desenvolvida ainda mais para permitir telas de alto alcance dinâmico.
Web Components e Lit
O Photoshop é um aplicativo famoso e rico em recursos, com centenas de elementos de interface do usuário que oferecem suporte a dezenas de fluxos de trabalho. O app é criado por várias equipes com diversas ferramentas e práticas de desenvolvimento, mas as partes distintas precisam se reunir em um todo coeso e de alto desempenho.
Para enfrentar esse desafio, a Adobe recorreu aos Web Components e à biblioteca Lit. Os elementos de interface do Photoshop são provenientes da biblioteca Spectrum Web Components da Adobe, uma implementação leve e de alto desempenho do sistema de design da Adobe que funciona com qualquer framework ou sem qualquer framework.
Além disso, todo o aplicativo do Photoshop é criado usando componentes da Web baseados em Lit. Baseando-se no modelo de componentes integrados do navegador e no encapsulamento do Shadow DOM, a equipe achou fácil integrar algumas "ilhas" de código do React fornecidas por outras equipes da Adobe.
Armazenamento em cache do service worker com o Workbox
Os service workers atuam como um proxy local programável, interceptando solicitações de rede e respondendo com dados da rede, caches de longa duração ou uma combinação de ambos.
Como parte dos esforços da equipe do V8 para melhorar o desempenho, na primeira vez que um service worker responde com uma resposta do WebAssembly em cache, o Chrome gera e armazena uma versão otimizada do código, mesmo para scripts WebAssembly de vários megabytes, que são comuns na base de código do Photoshop. Uma pré-compilação semelhante ocorre quando o JavaScript é armazenado em cache por um service worker durante a etapa install. Em ambos os casos, o Chrome consegue carregar e executar as versões otimizadas dos scripts em cache com sobrecarga mínima no tempo de execução.
O Photoshop na Web aproveita isso ao implantar um service worker que armazena previamente em cache muitos de seus scripts JavaScript e WebAssembly. Como os URLs desses scripts são gerados no tempo de compilação e como a lógica de manter os caches atualizados pode ser complexa, eles recorreram a um conjunto de bibliotecas mantidas pelo Google chamado Workbox para gerar o service worker como parte do processo de compilação.
Um service worker baseado em Workbox com o armazenamento em cache do script do mecanismo V8 levou a melhorias mensuráveis de desempenho. Os números específicos variam de acordo com o dispositivo que executa o código, mas a equipe estima que essas otimizações diminuíram o tempo gasto na inicialização do código em 75%.
O que está por vir para o Adobe na Web
O lançamento do Photoshop beta é apenas o começo, e nós já temos várias melhorias de desempenho e recursos em andamento, enquanto o Photoshop acompanha seu lançamento completo após essa versão beta. A Adobe não está parando com o Photoshop e planeja expandir consideravelmente o Creative Cloud para a Web, tornando-o uma plataforma principal para colaboração e criação de conteúdo criativo. Com isso, milhões de novos criadores poderão contar a própria história e se beneficiar de fluxos de trabalho inovadores na Web.
À medida que a Adobe continua ampliando os limites do que é possível, a equipe do Chrome continuará nossa colaboração para levar a Web adiante para a Adobe e o vibrante ecossistema de desenvolvedores da Web em geral. Como os outros navegadores também estão acompanhando esses recursos modernos, estamos entusiasmados com o fato de a Adobe disponibilizar seus produtos nesses navegadores também. Fique por dentro das próximas atualizações à medida que continuamos a levar a Web adiante.
Saiba mais sobre como acessar o Photoshop na Web (Beta) na Central de Ajuda da Adobe.