Criando um SDK para navegadores da Web: 3 coisas que aprendemos

Os SDKs no navegador são uma ótima maneira de levar seu projeto para a Web e simplificar a maneira como os desenvolvedores de aplicativos acessam seus serviços.

De fato, várias grandes empresas criaram uma biblioteca em torno de suas APIs dessa forma.

A Amazon, por exemplo, permite que os desenvolvedores criem serviços AWS em seus aplicativos da Web usando código JavaScript executado em um navegador. O Facebook, o Stripe e o Twilio estão fazendo coisas semelhantes.

Em Microblink, a maioria dos nossos produtos agora funciona em navegadores. Queríamos que os desenvolvedores pudessem criar experiências simples, porém poderosas, diretamente no front-end de seus aplicativos da Web, e que nossos usuários finais desfrutassem dessas experiências sem precisar sair da guia.

O maior problema que enfrentamos com essa meta foi: todos os nossos produtos exigem um processamento intenso de imagens no dispositivo, algo que os navegadores não conseguiam suportar… até recentemente.

Dica nº 1: O WebAssembly é o caminho a seguir se o seu código exigir muita computação

Antigamente, tudo o que os navegadores podiam fazer era renderizar páginas. Hoje, eles permitem que você codifique, edite vídeos e jogue jogos dentro deles.

Grande parte desse aumento de desempenho veio com a adoção generalizada do WebAssembly, um novo padrão da Web que é executado juntamente com o JavaScript para compilar código de baixo nível para que os navegadores possam executá-lo mais rapidamente. (1)

Devido ao seu formato binário compacto, o WebAssembly é ideal quando você precisa criar experiências semelhantes às nativas na Web. No nosso caso, trata-se de extração de dados em tempo real com uma grande quantidade de inteligência artificial sob o capô.

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 perfeitamente, apesar da baixa resolução de uma câmera de laptop.

Para nossos usuários finais, isso torna a inscrição ou o pagamento de algo on-line tão fácil quanto digitalizar os dados, com toda a experiência a apenas um link de distância.

Além do desempenho aprimorado, ao compilar o código para o WebAssembly, você terá mais vantagens:

• Maior segurança: O WebAssembly é executado em um ambiente seguro, em sandbox, e é muito mais difícil de fazer 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 uma variedade de sistemas operacionais e arquiteturas de conjuntos de instruções.

O código-fonte por trás de nossos SDKs é escrito em C++, mas você pode compilar o WebAssembly a partir de Rust, Go, AssemblyScript e muitas outras linguagens. outras linguagenstambém.

Aqui está uma visão geral de como é o processo. Você notará que escolhemos o Chrome para ilustrar nosso argumento, pois ele é o navegador preferido de aproximadamente dois terços dos usuários de Internet do mundo. (2)

Ainda assim, temos que pensar no terço restante. E isso significa desenvolver tendo em mente a compatibilidade entre navegadores.

Dica nº 2: lide com os problemas de compatibilidade do navegador aprimorando progressivamente o SDK

Trabalhar com novas APIs ou tecnologias de navegador, como o WebAssembly, muitas vezes fará com que alguns de seus recursos não funcionem em determinados navegadores, seja porque estão bloqueados por algo ou porque não têm suporte algum.

Por exemplo, chamar a API WebRTC para processar vídeo em tempo real no Chrome não funcionará em nenhum iPhone com iOS 14.2 ou anterior porque o WebView da Apple não é compatível com isso.

Suponha que você esteja criando um SDK de videoconferência para a Web. Agora você tem um problema em mãos, pois os usuários do iPhone que não atualizaram o software em alguns meses não poderão participar de uma reunião em nada além do Safari.

Enfrentamos o mesmo problema com o suporte a WebRTC e, para começar, alguns de nossos usuários podem não ter uma webcam. A maneira como contornamos esse problema é a mesma que você usa para chegar a qualquer beco sem saída: dando um passo atrás e redefinindo as prioridades.

Aprimoramento progressivo na prática

No desenvolvimento da Web, o aprimoramento progressivo significa que você está fornecendo recursos essenciais para todos primeiro, enquanto a funcionalidade mais avançada está disponível somente para os usuários dos navegadores mais modernos.

Sabemos que nosso principal recurso não é a digitalização em si, mas a extração de dados que se segue. Precisamos obter uma imagem do documento, mas o usuário pode simplesmente carregar uma imagem da galeria em vez de abrir a webcam.

Essa funcionalidade básica é algo que todos os nossos usuários veem. Depois de cobrirmos o essencial, verificamos se podemos acessar a câmera para realmente digitalizar o documento.

Será útil se você mapear a jornada do usuário desde o início e determinar o que acontecerá se e quando um recurso não for carregado. Veja como projetamos nosso fluxo antes de criar o SDK:

Detectar se um navegador é compatível com um recurso

Antes de estabelecer um nível básico de experiência do usuário, precisamos saber quais recursos poderão ou não ser executados nos navegadores.

Para fazer isso, você pode implementar seus próprios testes ou usar uma biblioteca existente, como a wasm-feature-detect do Google. Nós a usamos para carregar um pacote de WebAssembly apropriado para nossos usuários em tempo de execução, do mais compatível ao mais eficiente. 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>

Execute um teste entre navegadores para cada um de seus recursos, crie uma lógica de solução alternativa para a falta de suporte e, antes que você perceba, estará aprimorando progressivamente seu SDK.

Dica nº 3: Evite o trabalho maçante com a metaprogramação

Se você planeja criar vários SDKs (ou até mesmo aplicativos da Web) que compartilham funcionalidades semelhantes, talvez queira analisar a metaprogramação.

Metaprogramação é uma técnica na qual um programa de computador trata outros programas como seus dados. Ela permite que você automatize trabalhos demorados e muitas vezes tediosos, escrevendo programas que, por sua vez, escrevem programas.

Por exemplo, nossos SDKs no navegador têm arquitetura semelhante, mas resolvem problemas totalmente diferentes. A metaprogramação nos ajuda a transformar os arquivos JavaScript existentes e até mesmo a gerar novos arquivos JavaScript para cada SDK:

• Gerar código boilerplate a partir de um único metarepositório
• Adicione um novo recurso uma vez e faça com que ele funcione em todos os lugares
• Corrigir um bug em um local e alterar o comportamento indesejado em todos os SDKs
• Altere as chaves de licença em massa, modifique os caminhos dos arquivos do WebAssembly, etc.

Usamos duas técnicas diferentes de metaprogramação, dependendo do escopo das alterações que precisam ser feitas: metaprogramação de 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 o código é útil para modificar arquivos de código-fonte existentes, mantendo o estilo e a estrutura do código.

Analisaremos mais detalhadamente como você pode implementar essas duas técnicas em uma futura postagem do blog.

Navegadores, o lugar para você estar

À medida que os navegadores continuarem a evoluir, veremos um aumento nos SDKs que proporcionarão experiências mais simples e personalizadas na Web.

Esperamos que as descobertas que descrevemos acima ajudem você a construir o seu próprio, tendo em mente o desempenho, a acessibilidade e a engenharia inteligente.

Você gosta de trabalhar em SKDs incríveis no navegador? Venha trabalhar conosco