Criação de um SDK para navegadores da web: três lições que aprendemos
Os SDKs para navegadores são uma ótima maneira de levar seu projeto para a web e simplificar o acesso dos desenvolvedores de aplicativos aos seus serviços.
Na verdade, várias grandes empresas criaram uma biblioteca em torno de suas APIs dessa maneira.
A Amazon, por exemplo, permite que desenvolvedores integrem serviços da AWS em seus aplicativos da web usando código JavaScript executado em um navegador. O Facebook, o Stripe e o Twilio também estão fazendo coisas semelhantes.
Na Microblink, a maioria dos nossos produtos agora funciona em navegadores. Queríamos que os desenvolvedores pudessem criar experiências simples, mas poderosas, diretamente no front-end de seus aplicativos web, e queríamos que nossos usuários finais pudessem desfrutar dessas experiências sem precisar sair da aba em que estão.
O maior problema que enfrentamos com esse objetivo foi o seguinte: todos os nossos produtos exigem um processamento intenso de imagens no próprio dispositivo, algo que os navegadores não conseguiam lidar… até recentemente.
Dica nº 1: O WebAssembly é a melhor opção se o seu código exigir muitos recursos computacionais
Antigamente, tudo o que os navegadores podiam fazer era exibir páginas. Hoje, eles permitem que você programe, edite vídeos e jogue jogos diretamente neles.
Grande parte desse aumento no desempenho deveu-se à ampla adoção do WebAssembly, um novo padrão da web que funciona em conjunto com o JavaScript para compilar código de baixo nível, permitindo que os navegadores o executem mais rapidamente. (1)
Devido ao seu formato binário compacto, o WebAssembly é ideal quando é necessário criar experiências semelhantes às de aplicativos nativos na web. No nosso caso, trata-se da extração de dados em tempo real com uma quantidade considerável de inteligência artificial por trás dos bastidores.
Como você pode ver, o WebAssembly é rápido. A lógica complexa usada para detectar, reconhecer e ler cartões de crédito a partir do fluxo de vídeo de um usuário funciona com extrema fluidez, apesar da baixa resolução da imagem capturada pela câmera de um laptop.
Para nossos usuários finais, isso torna o cadastro ou o pagamento online tão fácil quanto digitalizar os dados – com toda a experiência a apenas um clique de distância.
Além do melhor desempenho, compilar seu código para WebAssembly nos traz:
- Maior segurança: o WebAssembly é executado em um ambiente seguro e isolado (sandbox) e é muito mais difícil de ser submetido à engenharia reversa do que o JavaScript, devido ao seu formato de bytecode.
- Acessibilidade e interoperabilidade: o WebAssembly tornou-se recentemente o padrão oficial do World Wide Web Consortium (W3C) (assim como o HTML e o CSS).
- Portabilidade: O WebAssembly também pode ser executado fora do navegador, em diversos sistemas operacionais e arquiteturas de conjunto de instruções.
O código-fonte dos nossos SDKs é escrito em C++, mas você também pode compilar WebAssembly a partir de Rust, Go, AssemblyScript e muitas outras linguagens.
Aqui está uma visão geral de como funciona o processo. Você vai perceber que escolhemos o Chrome para ilustrar nosso argumento, já que ele é o navegador preferido por cerca de dois terços dos usuários de internet do mundo. (2)
Ainda assim, precisamos levar em conta o terço restante. E isso significa desenvolver levando em conta a compatibilidade entre navegadores.
Dica nº 2: Resolva problemas de compatibilidade com navegadores aprimorando progressivamente seu SDK
Trabalhar com novas APIs de navegadores ou tecnologias como o WebAssembly muitas vezes fará com que alguns dos seus recursos não funcionem em determinados navegadores, seja porque são bloqueados por algum motivo, seja porque simplesmente não são compatíveis.
Por exemplo, chamar a API do WebRTC para processar vídeo em tempo real no Chrome não funcionará em nenhum iPhone com iOS 14.2 ou versão anterior, pois o WebView da Apple não oferece suporte a isso.
Suponha que você esteja desenvolvendo um SDK de videoconferência para a web. Agora você se depara com um problema, pois os usuários de iPhone que não atualizaram seu software há alguns meses não poderão participar de uma reunião a não ser pelo Safari.
Enfrentamos o mesmo problema com o suporte ao WebRTC, e alguns de nossos usuários podem nem ter uma webcam. A maneira como contornamos esse problema é a mesma que se usa para lidar com qualquer impasse: dando um passo atrás e redefinindo as prioridades.
O aprimoramento progressivo na prática
No desenvolvimento web, o aprimoramento progressivo significa que você oferece primeiro os recursos essenciais a todos, enquanto as funcionalidades mais avançadas ficam disponíveis apenas para os usuários dos navegadores mais modernos.
Sabemos que nosso recurso principal não é a digitalização em si, mas sim a extração de dados que se segue. Precisamos obter uma imagem do documento, mas o usuário pode simplesmente enviar uma da galeria, em vez de ativar a webcam.
Essa funcionalidade básica é algo que todos os nossos usuários veem. Depois de abordarmos os pontos essenciais, verificamos se podemos acessar a câmera para, de fato, digitalizar o documento.
É útil mapear a jornada do usuário desde o início e determinar o que acontece caso um recurso não carregue. Veja como projetamos nosso fluxo antes de desenvolver o SDK:
Verificar se um navegador oferece suporte a um recurso
Antes de definir um nível básico de experiência do usuário, precisamos saber quais recursos funcionarão e quais não funcionarão nos diferentes navegadores.
Para isso, você pode implementar seus próprios testes ou usar uma biblioteca já existente, como a wasm-feature-detect, do Google. Nós a utilizamos para carregar um pacote WebAssembly adequado para nossos usuários em tempo de execução, desde o mais compatível até o de melhor desempenho. Aqui está um exemplo de como verificar se o SIMD, um dos recursos do WebAssembly, é compatível.
<script type="module">
import { simd } from "https://unpkg.com/wasm-feature-detect?module";
simd().then(simdSupported => {
if (simdSupported) {
/* SIMD is supported */
} else {
/* SIMD isn't supported */
}
});
</script>Faça um teste de compatibilidade entre navegadores para cada um dos seus recursos, desenvolva soluções alternativas para lidar com a falta de suporte e, antes que você perceba, estará aprimorando progressivamente seu SDK.
Dica nº 3: Evite o trabalho monótono com a metaprogramação
Se você planeja desenvolver vários SDKs (ou até mesmo aplicativos web) que compartilhem funcionalidades semelhantes, talvez seja interessante explorar a metaprogramação.
A metaprogramação é uma técnica na qual um programa de computador trata outros programas como seus dados. Ela permite automatizar tarefas demoradas e, muitas vezes, tediosas, por meio da criação de programas que, por sua vez, escrevem outros programas.
Por exemplo, nossos SDKs para navegadores têm uma arquitetura semelhante, mas resolvem problemas totalmente diferentes. A metaprogramação nos ajuda a transformar arquivos JavaScript existentes e até mesmo a gerar novos para cada SDK, a fim de:
- Gerar código padrão a partir de um único metarrepositório
- Adicione um novo recurso uma única vez e ele funcionará em todos os lugares
- Corrigir um bug em um único lugar e alterar o comportamento indesejado em todos os SDKs
- Alterar chaves de licença em lote, modificar caminhos para arquivos WebAssembly, etc.
Utilizamos duas técnicas diferentes de metaprogramação, dependendo do escopo das alterações que precisam ser feitas: metaprogramação por modelos (TMP) e manipulação da árvore de sintaxe abstrata (AST).
A metaprogramação de modelos é útil quando você precisa gerar vários arquivos JavaScript a partir de um único arquivo genérico.
O uso de ASTs para manipular código é útil para modificar arquivos de código-fonte existentes, mantendo o estilo e a estrutura do código.
Em uma próxima postagem no blog, vamos analisar mais detalhadamente como você pode implementar essas duas técnicas.
Navegadores: o lugar certo para se estar
À medida que os navegadores continuam a evoluir, certamente veremos um aumento no número de SDKs que possibilitarão experiências mais simples e personalizadas na web.
Esperamos que as conclusões que apresentamos acima ajudem você a criar o seu próprio — levando em conta o desempenho, a acessibilidade e a engenharia inteligente.
Gosta de trabalhar com SKDs incríveis no navegador? Venha trabalhar conosco
