Lista das APIs da Web mais úteis ou pontualmente interessantes!

20/02/2024

Quem já trabalha na nossa área sabe que um dos pontos chave pra ser um desenvolvedor de software é saber como e principalmente onde pesquisar, certo? No entanto, essa estratégia de aprender somente por demanda pode não ser a melhor estratégia em todas as situações e vou explicar o motivo que me faz pensar desta forma.

Um dev que conheci através de um meetup da DevParaná me perguntou como eu consigo ter ideias “fora da caixa” pra projetos, ele perguntou o que eu fazia pra ter boas sacadas, comentando que ele tinha um pouco de dificuldade em fazer isso, no momento da pergunta eu não soube responder. Porém, sem intencionalidade, percebi que essa pergunta continuou ecoando por outras vezes na minha cabeça, essa pergunta instigou a minha própria curiosidade em descobrir se eu fazia algo de diferente das quais a maioria das pessoas fazem, eis então que algumas respostas me foram apresentadas e minha conclusão foi:

Eu frequentemente reservo tempo pra não fazer nada. Pode parecer contra intuitivo, mas o ato de não fazer nada, pode ser mais produtivo do que você possa imaginar. O tédio é de extrema importância para nós. Muitos produtos que você utiliza ou consome hoje são frutos de momentos do tédio de alguém. Permita-se parar por um período do seu dia, sem distrações, você e sua mente. Aprenda descartar, relacionar e selecionar pensamentos.
Eu gosto de saber quais instrumentos o máximo que posso sobre o que temos disponível pra uso, pois isso não somente facilita ligar soluções a problemas, como também ajuda em insights reversos, mas o que seria um insight reverso? Pra ser sincero acredito que isso nem exista como um termo conhecido, mas tenho convicção que muitos o praticam. Podemos criar produtos tentando usar recursos existentes. Veja as APIs nativas da Web como uma prateleira de soluções que temos disponíveis pra trabalhar em cima e, ao invés de esperar por problemas pra só então buscar soluções, podemos criar soluções pra problemas combinando soluções disponíveis.

Além do mais, todo profissional que se preze deve saber quais recursos carrega no cinto de ferramentas, pense comigo, qual seria a credibilidade que você daria a um médico que aprende como um coração funciona durante a cirurgia no seu coração? Não lhe parece um método amador ou até negligente? Estou ciente que nossa área tem muita informação e não seria possível saber sobre tudo, mas conhecer as APIs da Web não é uma tarefa difícil e deveriam ser vistas como nossa base, aliás, que venham mais delas! Pois pra cada nova API da Web, uma dezena de bibliotecas se tornam desnecessárias, resumindo, elas ajudam evitar dependências.

Por estes motivos resolvi selecionar as APIs da Web mais úteis ou muito interessantes e compartilhar isso com mais pessoas. A web está cada dia mais poderosa e duvido você não concordar comigo após conferir essa lista de possibilidades aí em baixo. 🙂

Nossa missão é ir até o limite que a web tem a nos oferecer, contribuindo para sua evolução.

Web Components API

Web Components - APIs da Web | MDN

Vejo que a quantidade de desenvolvedores Front-end que não sabem sobre componentes web sem uso de frameworks como React, Angular, Vite e demais é maior do que gostaríamos, então começamos com ela, a Web Components API ou também conhecido como Custom Elements.

<aside> <img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/8752581b-78b0-4861-852d-56ef78dfc589/2b65c792-bbf1-44c6-8980-3d12a8636955/whatwg_html.svg" alt="https://prod-files-secure.s3.us-west-2.amazonaws.com/8752581b-78b0-4861-852d-56ef78dfc589/2b65c792-bbf1-44c6-8980-3d12a8636955/whatwg_html.svg" width="40px" /> Link da documentação oficial - whatwg

</aside>

Navigation API

Navigation API - Web APIs | MDN

Pois é, tem um bom tempo que trabalhamos com gerenciamento de navegação em aplicações SPA e, conseguirmos fazer isso nativamente é um baita ganho pois muitos apps simples são criados utilizando frameworks apenas pra ter um controle de rotas facilitado.

Eu diria que essa é a funcionalidade de maior importância na web e vejo a Navigation API como um inicio de solução que ainda tem um caminho de evolução que merece ser bem projetada e não pode de maneira alguma cair no mesmo limbo que a Web Components API está atualmente.

</aside>

CSS View Transitions API

View Transitions API - Web APIs | MDN

É um mecanismo que cria transições animadas entre diferentes estados do DOM ao mesmo tempo, ou seja, atualizar vários conteúdos no DOM em uma única etapa.

<aside> <img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/8752581b-78b0-4861-852d-56ef78dfc589/252e39ae-cc92-4e5e-8283-bd61a2b4fe5b/w3c.svg" alt="https://prod-files-secure.s3.us-west-2.amazonaws.com/8752581b-78b0-4861-852d-56ef78dfc589/252e39ae-cc92-4e5e-8283-bd61a2b4fe5b/w3c.svg" width="40px" /> Link da especificação oficial - w3c

</aside>

WebOTP API

WebOTP API - Web APIs | MDN

A WebOTP API preenche uma entrada de formulário (input) automaticamente quando um SMS é recebido pelo telefone, desde que a mensagem siga um padrão definido. Massa né?

<aside> <img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/8752581b-78b0-4861-852d-56ef78dfc589/6292ac3f-9d89-45ff-9f75-e73f0e82e4ef/w3c_community.svg" alt="https://prod-files-secure.s3.us-west-2.amazonaws.com/8752581b-78b0-4861-852d-56ef78dfc589/6292ac3f-9d89-45ff-9f75-e73f0e82e4ef/w3c_community.svg" width="40px" /> Link da especificação oficial - w3c community

</aside>

Idle Detection API

Idle Detection API - Web APIs | MDN

Imagine encaminhar notificações para o dispositivo móvel de um usuário quando ele se levantar para tomar um café, o aplicativo de mensagens pode detectar que ele não está utilizando o desktop e começar a enviar mensagens push para o telefone enquanto marca as notificações no desktop como "ocultar quando ativas". Se o usuário ainda estivesse em sua mesa, mas usando um aplicativo diferente, ele começaria a receber notificações perturbadoras no seu telefone. Esta proposta tenta evitar que o desktop seja capaz ou não de suprimir interações possivelmente perturbadoras. Porém, conseguir fazer isso de forma bem-sucedida requer coordenação de vários dispositivos.

</aside>

Launch Handler API

Launch Handler API - Web APIs | MDN

Permite controlar como PWAs são iniciados, por exemplo, determinar se será carregado em uma janela existente ou criar uma nova e também tratamentos para URL destino da inicialização.

</aside>

Keyboard API

Keyboard API - Web APIs | MDN

Da acesso ao layout do teclado e assim conseguimos recuperar o valor de uma tecla pelo nome dela ao invés do código, como estamos acostumados quando interceptamos o KeyboardEvent.

</aside>

Ink API

Ink API - Web APIs | MDN

Permite acessar dispositivos de desenhos com caneta digital (mesa digitalizadora) disponíveis no nível do sistema operacional, reduzindo assim a latência e aumentando o desempenho.

</aside>

Canvas API

Canvas - APIs da Web | MDN

Acredito que todos lendo este conteúdo conhecerão mas não poderia deixa-la de fora. Permite que façamos desenhos gráficos utilizando JavaScript.

</aside>

CSS Painting API

CSS Painting API - Web APIs | MDN

Podemos desenhar diretamente no background ou borda de elementos usando uma API parecida com a Canvas API, fantástico, não?!

Link da especificação oficial - w3c

</aside>

CSS Font Loading API

CSS Font Loading API - Web APIs | MDN

Esta API fornece eventos e interfaces para carregar recursos de fontes dinamicamente.

</aside>

Barcode Detection API

Barcode Detection API - Web APIs | MDN

Quer reconhecer e traduzir códigos de barra ou qrcodes usando a câmera? tem nativo também…