5 recursos JavaScript que você deve conhecer para desenvolver em Gutenberg

Em 2016, Matt Mullenweg nos disse:

Eu vou te dar uma lição de casa: aprenda JavaScript profundamente (…) porque é o futuro da web.

Matt Mullenweg (no YouTube)

Não sei se você seguiu o conselho dele há três anos, mas se não o fez, não pode mais adiar. O lançamento oficial do editor de blocos forçou muitos desenvolvedores a se atualizarem com o JavaScript. A linguagem está se tornando cada vez mais relevante dentro do WordPress e, se não quisermos ficar para trás, devemos aprimorar nossas habilidades com ela.

No passado eu escrevi um post sobre o que você pode conseguir usando JavaScript vanilla, sem bibliotecas como jQuery. Hoje quero dar um passo adiante e explicar algumas das novidades que estão nas novas versões do JavaScript e que são chocantes na primeira vez que você as vê. Acho importante que você os conheça, porque eles estão presentes em todos os novos projetos JavaScript (incluindo o Gutenberg, é claro).

Vamos aprender JavaScript com Gutenberg!

#1 – Desestruturando Objetos e Arrays

Vamos supor que queremos ver como funciona a interface de edição de um parágrafo no Gutenberg. Se você leu nossos posts anteriores sobre Gutenberg, você sabe que temos que olhar para o componente de edit do bloco relevante. No nosso caso, este componente é ParagraphBlock e a primeira coisa que encontraremos em seu método de renderização, linha 127, é esta:

O que é tudo isso? Bem, vamos começar com algo mais fácil. Imagine que você tem um objeto como o seguinte:

A desestruturação de objetos e arrays torna possível descompactar valores de arrays, ou propriedades de objetos, em variáveis ​​distintas:

Com uma única instrução, conseguimos recuperar o id , title e content do nosso post . E isso é precisamente o que Gutenberg estava fazendo em nosso primeiro trecho: extraímos o objeto de attributes , a função setAttributes , o atributo isRTL , etc. de this.props .

Um pouco mais confuso, mas igualmente interessante, é a possibilidade de extrair atributos de objetos aninhados. Ou seja, a partir de um objeto tal que:

podemos recuperar valores em post , bem como valores em um objeto aninhado, como id ou name em author :

Agora preste atenção: toda vez que desestruturamos um objeto, as variáveis ​​que criamos têm os mesmos nomes dos atributos que estamos puxando. Isso levanta a questão: o que aconteceria se quiséssemos recuperar vários atributos de id de diferentes objetos aninhados? Por exemplo, no nosso caso, tanto o post quanto o author do objeto aninhado têm um id , então…

podemos extrair esses dois valores? A solução está em aliases:

Ou seja, podemos especificar o atributo que queremos extrair (por exemplo, author.id ) e o nome da variável que conterá seu valor ( authorId ) de uma só vez.

Por fim, deixe-me dizer que a desestruturação também funciona com arrays:

bem como os parâmetros da função. Ou seja, se um dos parâmetros da nossa função for um objeto, podemos desestrutura-lo na própria definição da função:

Bem prático, hein?

#2 - Funções de seta

Outro exemplo bastante comum. Se você der uma olhada nas legendas dos blocos de imagem do Gutenberg, você verá o seguinte na linha 693 :

Qual o value entre parênteses? Por que há uma flecha? O que é isso sobre setAttributes com chaves dentro? Argh!!

Bem, vamos descriptografar isso passo a passo. Quando você vê uma seta como => , você acabou de conhecer uma função de seta. Uma função de seta pode ser extremamente semelhante às funções clássicas, mas elas usam uma sintaxe ligeiramente diferente:

A principal vantagem das funções de seta é que elas podem ser ainda mais simplificadas, tornando o código ainda mais compacto. Por exemplo, se sua função possui uma única instrução, você pode salvar as chaves e a palavra-chave return , pois a função retornará automaticamente o resultado da avaliação de sua única instrução:

Outra simplificação que podemos fazer são os parênteses em sua lista de argumentos. Se estivermos escrevendo uma função que possui um único parâmetro, os parênteses se tornam opcionais:

#3 – Operadores de Spread e Rest

De volta ao bloco de parágrafo, dê uma olhada na linha 64:

Que diabos?

Bem, deixe-me apresentá-lo ao operador de spread: ... .

A sintaxe de propagação permite que um iterável, como uma expressão de matriz ou string, seja expandido em locais onde zero ou mais argumentos (para chamadas de função) ou elementos (para literais de matriz) são esperados, ou uma expressão de objeto seja expandida em locais onde zero ou mais pares chave-valor (para literais de objeto) são esperados.

Vamos começar com o exemplo mais simples. Suponha que temos um array com um certo número de elementos e queremos colocá-lo dentro de outro array. Podemos conseguir isso com:

Com ele, estamos “expandindo” (daí o nome do operador) os elementos de um array ( list ) dentro do outro ( result ).

Isso também funciona com objetos:

Agora veja o seguinte exemplo (que é uma cópia do exemplo de Gutenberg com o qual abrimos esta seção):

Se estou expandindo dois objetos que possuem propriedades em comum, o objeto resultante conterá a união das propriedades de ambos os objetos e, para cada propriedade “repetida”, conterá o valor do objeto à direita. Assim, por exemplo, o atributo title que se repete em ambos os objetos, contém o valor do objeto newAttributes , enquanto os demais atributos ( author por um lado e words por outro) aparecem no resultado com os únicos valores que poderiam conter .

#4 - Literais de modelo

Os literais de modelo são amplamente usados ​​em Gutenberg. Você pode ver um exemplo no seguinte index.js , linha 133:

Ou, ainda mais complicado, inline 136:

Os literais de modelo são literais de string que permitem expressões incorporadas. Você pode usar strings de várias linhas e recursos de interpolação de strings com eles. Eles foram chamados de “cadeias de modelo” em edições anteriores da especificação ES2015. Aqui você tem outro exemplo semelhante ao primeiro que acabamos de ver:

Agora, o que estava acontecendo no segundo exemplo? Basicamente, estamos criando um objeto com propriedades cujos “nomes” são dinâmicos (alguns usam uma variável, outros usam literais de template). Vamos ver isso com um exemplo mais curto:

Mais fácil do que você esperava, não é?

#5 – Adeus por e enquanto

Por fim, gostaria de encerrar este post com algumas funções que são muito úteis para trabalhar com arrays e com as quais você já deve estar familiarizado. Ambos podem ser encontrados, por exemplo, no bloco de colunas de Gutenberg. Na verdade, estou falando de map (linha 136) e reduce (linha 119). Vamos ver para que serve cada um deles e como você pode usá-los.

O método map cria um novo array com os resultados da chamada de uma função fornecida em cada elemento no array de chamada:

Basicamente, é um método que percorre todos os elementos de um array (que é a instrução for ) e aplica uma função em cada elemento (o “corpo” do clássico for ).

O método reduce é muito parecido com map , mas ao invés de retornar um array cujos elementos são o resultado da aplicação de uma função aos elementos originais, ele retorna um único valor. Ou seja, um método que permite aplicar uma função a um acumulador e a cada valor de um array (da esquerda para a direita) para reduzi-lo a um único valor. Por exemplo:

Empacotando

Como você pode ver, novas versões de JavaScript adicionam construções que permitem escrever código de forma mais eficiente e confortável, mas sua sintaxe pode ser confusa no início. Espero que o post de hoje tenha ajudado você a entender o que há de novo em JavaScript e como usar suas novas estruturas e funções.

Eu realmente gosto da maneira como o JavaScript está evoluindo, pois acho que permite que você escreva um código melhor e mais legível (uma vez que você saiba como lê-lo, é claro). O que você acha? Depois de ler este post, você já está ansioso para “aprender profundamente JavaScript” de uma vez por todas?

Imagem em destaque por Ross Findon no Unsplash .