DEV Community: Douglas Biazioli

Conhecendo o structuredClone

Douglas Biazioli — Sat, 30 Jul 2022 01:23:37 +0000

Mais um artigo da (quem sabe vire uma) série: "Conhecendo"! 😄 O tema da vez é um método muuuito útil que foi incorporado nos navegadores, o structuredClone.

Mas antes de falar dele, vamos entender um pouco sobre shallow copy e deep copy.

Pra começar, vamos criar um objeto e colocar alguns valores:

const objetoOriginal = {
    a: 'valor1',
    b: 'valor2',
    c: {
        d: 'valor3',
    }
};

Quando executamos esse código, o javascript vai armazenar esses valores em memória e vai criar uma referência a esse endereço de memória para que possamos alterar e acessar quando necessário.

Agora, se fizermos uma cópia simples (shallow copy), estaremos fazendo uma cópia dessa referência, e não do valor que está lá na memória.

Então quando fazemos isso:

const objetoNovo = objetoOriginal;

Por baixo dos panos o que vai acontecer é:

Isso acontece porque o shallow copy é, bem como o nome diz, apenas uma cópia superficial. Dessa forma, se alteramos algum valor no objetoNovo, essa alteração pode acabar refletindo no objetoOriginal e dependendo da situação pode causar muitos problemas.

Já no deep copy a cópia é feita por completo, criando um novo endereço em memória para armazenar o novo objeto.

Dessa forma podemos alterar a cópia livremente, sem risco de causar algum efeito colateral indesejado.

Esse tipo de cópia costuma ser um pouco mais custosa, muitas vezes sendo feita manualmente ou utilizando alguma biblioteca externa, como o lodash.

Voltemos agora à nossa estrela de hoje: o structuredClone!

A sintaxe do structuredClone é super simples. Basta passar qual a variável a ser copiada, e será retornado uma cópia completa do que foi passado. Mesmo se for um objeto complexo, com vários níveis, tudo será espelhado.

const objetoClone = structuredClone(objetoOriginal);

Simples assim! 🤩 Não precisamos nem importar nada.

Internamente, o structuredClone implementa um algoritmo de cópia recursiva, que também dá suporte a referências circulares.

Como parâmetro, podemos passar quaaase qualquer tipo de variável. Caso o valor que você tente clonar não seja copiável, será disparado um erro do tipo DataCloneError.

Também temos um segundo parâmetro opcional, que recebe uma lista e nos permite transferir valores. Fazendo com que passem a existir apenas na cópia e não mais no original.

Mas atenção: Não é qualquer valor que pode ser movido. Apenas objetos dos tipos chamados de Transferable podem ser passados nesse parâmetro, entram nessa lista os Buffers, Streams, etc... Mas isso é assunto pra um outro artigo 😉

Em aplicações com bastante manipulação de dados, o structuredClone é extremamente útil! Prático de usar, reduz dependências, além de já ter bastante suporte entre os navegadores, então pode usar sem medo!

Quer ver mais a fundo sobre o structuredClone?

Então dá uma olhada nessa página da MDN, ou veja diretamente a especificação!

E você, já conhecia o structuredClone? Faz cópias de alguma forma diferente? Comenta aqui! 😁

Conhecendo o inputmode

Douglas Biazioli — Tue, 12 Jul 2022 00:28:13 +0000

Uma das coisas que mais me incomoda quando estou preenchendo algum formulário é quando o teclado não condiz com a informação que preciso preencher.

Se o campo só vai aceitar números, é muito chato ter que ficar mudando entre os teclados.

Seria tão legal se houvesse uma forma de falar pro dispositivo como o teclado deveria aparecer, né?

O legal é que existe!

O inputmode é um atributo padrão do HTML que já tem suporte em praticamente todos os navegadores. Sua função é basicamente dizer pro dispositivo qual tipo de teclado deve ser exibido.

Pode ser usado com um dos seguintes valores:

none

O none é a forma que temos para desativar o teclado. Geralmente é utilizado quando a entrada de dados vem de algum dispositivo externo (como um leitor de código de barras), ou quando um teclado customizado é criado.

text

O text é o valor padrão. Com ele, será carregado o teclado padrão do dispositivo, sem muitas surpresas aqui.

numeric

Com o numeric teremos o teclado numérico básico, com apenas dígitos de 0 a 9. Também sem nada demais aqui.

decimal

O decimal é bem parecido com o numeric. A diferença aqui é a presença do separador de decimais, que geralmente será ponto ou vírgula.

tel

O tel é mais um da família do numeric. A diferença nesse é que teremos alguns caracteres adicionais, como +, * e #.

Uma dica aqui é substituir o uso desse inputmode pelo type="tel", que será mais fácil de validar o que foi inserido.

search

O search é beeem parecido com o text comum, mas ele costuma trazer um atalho para o disparo da busca. Também pode ser substituído pelo type com o mesmo valor.

email

Seguindo a linha do anterior, o email também é um teclado de texto com alguns atalhos. Nesse caso temos o @ e ponto.

url

Fechando a nossa lista, temos o url. Nesse teclado, a tecla de espaço geralmente é trocada por outras mais úteis para digitarmos links, como: ponto, barra e .com.

Os inputmodes melhoram bastante a experiência do usuário, e acabam até reduzindo a possibilidade de erros ao preencher algum formulário. Mas lembre-se: o inputmode não faz validação de dados. Alie o inputmode a um type adequado e a alguma outra forma de validação no código, e seus formulários ficarão cada vez melhores! 😃

Veja na prática!

Quer ver cada um dos possíveis inputmode funcionando?
Abra o inputmodes.com no seu celular, e vá tocando em cada um dos inputs disponíveis 😉

Quer ver mais a fundo sobre o inputmode?

Então dá uma olhada nessa página da MDN, ou veja diretamente a especificação!