Desenvolvedores da Adobe usam WebAssembly para melhorar a vida dos usuários

A Adobe tem falado abertamente sobre como está desenvolvendo e contando com o WebAssembly para oferecer suporte à experiência do cliente-usuário – e muitas pesquisas interessantes estão sendo feitas para desenvolvimentos futuros.

O aplicativo Photoshop, que consome muitos recursos da Adobe, quando executado em um PC, agora está disponível no navegador. O usuário acessa os comandos e funcionalidades do Photoshop sem precisar baixar o software (novamente, graças ao Wasm). A Adobe trabalhou com a equipe do Google Chrome para trazer os recursos mais recentes do WebAssembly para seus aplicativos da web, como Pthreads, OPFS (sistema de arquivos privados de origem), identificadores de acesso e suporte para depuração DWARF (depuração com formatos de registro atribuídos). Os navegadores suportados incluem Google Chrome, Microsoft Edge (versão 102 e superior (64 bits)) e Firefox (versão 111 e superior em desktop).

Como o Dr. Thomas Steiner, engenheiro de relações com desenvolvedores do Google, descreveu em um vídeo “Chrome for Developers” “Trazendo a Creative Cloud da Adobe para a Web: começando com o Photoshop”, tornou-se óbvio o poder do WebAssembly para distribuição de aplicativos desde o início, após o ceticismo inicial. “Sempre que um de nossos parceiros me perguntava se eles deveriam criar para a web, eu sempre respondia: ‘Sim, a menos que você esteja criando algo como o Photoshop.’ Usei o Photoshop como exemplo genérico para um aplicativo que eu nunca poderia imaginar que fosse construído na web – cara, eu estava errado”, disse Steiner. Então, durante uma demonstração, “a Adobe surpreendeu a todos, inclusive a minha”, disse Steiner.

A disponibilidade do Photoshop para rodar no navegador se deve em grande parte ao uso de scripts de código aberto pela Adobe. Emscripten é um conjunto de ferramentas de compilador para módulos Wasm para C ou C++. Isso significa que você pode usar emscripten para compilar código escrito em C ou C++ ou outras linguagens que usam LLVM no WebAssembly que pode ser executado não apenas no navegador, mas em Node.js ou outros tempos de execução do WebAssembly.

No entanto, embora o Emscripten ofereça uma excelente maneira de portar tempos de execução C++ para WebAssembly, cada projeto individual muitas vezes pode exigir muito trabalho, de acordo com uma postagem no blog. Este trabalho pode envolver a configuração do código C++ ou, no caso do Photoshop, a adaptação da criptografia para uso em outros módulos WebAssembly. Infelizmente, o Photoshop já era executado em navegadores anteriormente, mas era muito lento, mesmo com o Chrome.

De acordo com a postagem do blog “Photoshop’s Journey to the Web”, Nabeel Al-Shamma, principal cientista aposentado da Adobe, e Thomas Nattestad, gerente de projeto do Google, Google e Adobe colaboraram para resolver gargalos associados à execução do Photoshop no navegador. Essa colaboração foi crucial para portar o Photoshop para a web por meio do WebAssembly no Chrome. Além disso, um trabalho significativo foi feito no tratamento de erros baseado em exceções, para o qual o Emscripten não estava bem configurado, de acordo com Al-Shamma e Nattestad. Eles descreveram como trabalharam com o grupo da comunidade WebAssembly no W3C para melhorar as ferramentas para lidar com esses erros ao portar tempos de execução C++ para WebAssembly.

Além disso, o WebAssembly oferece primitivos de desempenho avançados, incluindo instruções SIMD, para melhorar o desempenho de aplicativos em navegadores ou aplicativos da web, escreveram Al-Shamma e Nattestad. Como exemplo, citaram o Halide, essencial para a atuação da Adobe na web. Ele fornece uma aceleração média de 3 a 4x e, em alguns casos, uma aceleração de 80 a 160x, escreveram eles.

Além disso, houve um grande esforço para oferecer suporte à depuração do WebAssembly, conforme detalhado na postagem do blog. O Chrome fornece suporte para percorrer o código-fonte, definir pontos de interrupção, pausar exceções e inspeção de variáveis ​​com suporte de tipo avançado. Além disso, está disponível suporte básico para avaliação no console DevTools, escreveram Al-Shamma e Nattestad.

Mais por vir

A Adobe também está trabalhando com Wasm e o padrão de componente WASI para permitir que os usuários assinem um documento no Adobe Sign ou editem uma imagem no Lightroom da Adobe. Mas esse esforço continua sendo um trabalho em andamento: “Espero que um dia o façamos, mas ainda não”, disse Colin Murphy, engenheiro de software sênior da Adobe, ao The New Stack. “Ainda não estamos usando WASI em produção, apenas Wasm no navegador por enquanto.”

Na verdade, muitos dos recursos da Adobe para estender aplicativos pela Web no navegador com Wasm e além dependem do padrão WASI. O WASI Preview 2 do WebAssembly foi lançado recentemente com uma promessa para o futuro. O trabalho de padronização WASI está em andamento há muito tempo, antecedendo grande parte do uso generalizado do WebAssembly em aplicativos e ainda não está completamente pronto.

A evolução do Wasm levou à necessidade de um modelo de componente e principalmente de seu relacionamento com o WASI, que é a interface ou API padrão que liga os módulos web assembly aos componentes. Um componente WebAssembly desempenha um papel crítico na forma como os tempos de execução executados dentro dos módulos WebAssembly são implantados.

Uma vez finalizado, um modelo de componente que permitirá ao WebAssembly não apenas ver seu uso em expansão além de navegadores e servidores da Web – mas também permitirá que os usuários implantem diferentes aplicativos executados em vários módulos leves em velocidades muito altas em milhares de terminais simultaneamente por meio de um interface de componente chamada sem alterar um pingo de código.

“O lançamento do WASI Preview 2 é um marco importante para o padrão WASI, não apenas por ser um alvo estável para plataformas e cadeias de ferramentas de linguagem, mas também por não ser mais simplesmente uma interface que permite o Wasm fora do navegador”, Murphy disse. “O modelo de componente WASI é uma divergência do navegador Webassembly e permite novas formas radicais de construir sistemas backend.”

O conjunto de ferramentas Jco permite que componentes WebAssembly sejam transpilados para módulos ES6, mas o suporte nativo em mecanismos de navegador para componentes não parece provável por algum tempo, disse Murphy. “Estou otimista de que a Adobe continuará a ser líder em Wasm/WASI, assim como tem feito no navegador WebAssembly. “Quase todos os microsserviços da Adobe poderiam ser reimplementados com Wasm/WASI”, disse Murphy.

Outros no trabalho

A Adobe e o já mencionado Google certamente não são as únicas entidades que trabalham duro no desenvolvimento do padrão WebAssembly. As empresas que o utilizam para transmitir vídeo incluem Netflix, Amazon Prime, Disney e outras. A Microsoft não é muito detalhada sobre grande parte de seu trabalho anterior no WebAssembly (a Microsoft não pôde comentar um artigo anterior quando questionada), mas foi confirmado que a empresa já começou a usar o WebAssembly para apoiar suas operações principalmente enquanto continua a contribuir ativamente para o desenvolvimento do Wasm para a comunidade. No caso da Microsoft, seu trabalho com o WebAssembly remonta a anos atrás. O Microsoft Flight Simulator já há alguns anos usa o WebAssembly para proteção contra mods, por exemplo, quando foi demonstrado que melhora a segurança e a portabilidade para complementos distribuídos como módulos WebAssembly. Excel Online usa WebAssembly para calcular funções Lambda.

A maior parte do trabalho da Microsoft agora consiste em investir no próximo modelo de componentes e no WASI. Por exemplo, a Microsoft está expandindo a visualização do WASI NodePool do Azure Kubernetes Service e fornecendo aos seus serviços proteção adicional de hipervisor por solicitação no topo da sandbox Wasm com o projeto Hyperlight. Fora do navegador de ponta, a Microsoft está investindo principalmente no Wasm baseado em servidor e no ecossistema de componentes Wasm em torno da Bytecode Alliance, bem como em infraestrutura e ferramentas de linguagem para permitir o uso produtivo e WASI, é claro.

A postagem Desenvolvedores da Adobe usam WebAssembly para melhorar a vida dos usuários apareceu pela primeira vez em The New Stack.