[adrotate banner=”4″]

Atualmente, no ReactJS, os componentes baseados em funções são mais utilizados. Portanto, vamos começar esse tutorial de Clean Code com elas.

Funções

De acordo com Robert C. Martin, a primeira regra das funções é que elas devem ser pequenas. E a segunda regra é que elas devem ser menores ainda.

Isso se aplica tanto às funções normais quanto aos componentes funcionais do React. Assim, quanto menor, melhor.

Cada função deve fazer apenas uma coisa, esse é o princípio da responsabilidade única, SRP (Single Responsability Principle). Entretanto, esse é um conceito que deixamos passar com muita frequência.

Então, vamos a um exemplo, observe a seguinte função:

const submitForm = (e: any) => {
e.preventDefault();
if (emailValidator(email)) {
if (passwordValidator(password)) {
createUser({ email, password, name })
.then((response) => {
if (response === 200) AlertSuccess('Usuário criado com sucesso');
setEmail('');
setPassword('');
setName('');
setRegistration(false);
})
.catch((error) => {
AlertError(error.reponse.data.message);
});
} else {
AlertError(
'Digite uma senha válida. É necessário pelo menos oito dígitos sendo pelo menos um número e uma letra.'
);
}
} else {
AlertError('Digite um email válido');
}
};

Observe que a função “submitForm” é responsável por validar o formulário, enviar o formulário e resetar os
valores dos inputs. Dessa forma, usando o princípio da responsabilidade única, conseguimos extrair 3 funções dela e tornamos o código bem mais legível:

const submitForm = (event: any) => {
event.preventDefault();
const data = { email, password, name };
if (formIsValid(data)) createUserHandler(data);
};
const formIsValid = (form: registrationFormData) => {
if (!emailValidator(form.email)) {
AlertError("Digite um email válido");
return false;
} else if (!passwordValidator(form.password)) {
AlertError(
"Digite uma senha válida. É necessário pelo menos oito dígitos sendo pelo menos um número e uma letra."
);
return false;
} else if (!name.trim().length) {
AlertError("Digite um Nome válido");
return false;
} else {
return true;
}
};
const createUserHandler = (data: registrationFormData) => {
createUser(data)
.then((status) => {
if (status === 200) {
AlertSuccess("Usuário criado com sucesso")
resetInputs();
}
})
.catch((error) => AlertError(error.reponse.data.message));
};
const resetInputs = () => {
setEmail("");
setPassword("");
setName("");
setRegistration(false);
};

Isso também se aplica aos componentes funcionais. Assim, se existe algum componente que se repete em mais de um lugar, crie um componente apenas para ele. Reutilização de código é essencial. Afinal, essa é uma das vantagens de se utilizar React.

Agora, observe outra coisa no último exemplo de código: a função ‘submitForm’ chama a função ‘formIsValid’, que -por sua vez- chama a função ‘createUserHandler’, que chama a função ‘resetInputs’ e elas estão escritas nessa mesma ordem. Entretanto, aguarde! Pode uma função chamar outra que não existe antes dela?

Atualmente, no Javascript, isso não é um problema. Além disso, lembre-se que pessoas lerão o seu código e o comportamento normal ao lermos algo é de cima para baixo. Portanto, essa prática evita que precisemos ficar voltando e procurando a função que foi chamada, possibilitando uma leitura contínua do código.

Nomes

A forma como nomeamos as coisas no nosso código podem fazer a diferença na hora de definir se temos um bom código. Dessa forma, o nome de algo em seu código deve dizer o que ele faz ou o motivo de estar lá.

Observe o código a seguir:

const submitForm = (event: any) => {
event.preventDefault();
const formData = { email, password, name };
if (formIsValid(formData)) createUserHandler(formData);
};

Lendo essa função, você consegue fazer um parágrafo com base nela: quando o formulário for submetido a função, vai prevenir o comportamento padrão do navegador de atualizar a página. Em seguida, vai reunir os dados do formulário em uma variável. Assim, se o formulário for válido, ele vai tentar criar um usuário.

Dicas de Clean Code para nomenclatura

É esse tipo de lógica que se espera com as nomeações.

Evite abreviações e letras soltas como “x”. Na hora de lermos o código, já é o bastante termos que nos preocupar em decifrar a lógica por trás dele. Assim, não precisamos parar para pensar no que aquele nome de variável ou função significa.

Além disso, outra coisa para ter bastante cuidado são nomes que passam uma informação errada. Observe o seguinte exemplo:

import { PageTitle } from './styles';
const LoginPage = () => {
return (
<>
<section>
<PageTitle>
<h2>The</h2>
<h2>Greatest</h2>
<h2>App</h2>
<p>for</p>
<h1>Lottery</h1>
</PageTitle>
...

Quando vemos o componente de “PageTitle”, é esperado que ele já retorne o estilo necessário para o título da página e não que seja apenas um invólucro para ele. Nesse caso, seria muito mais apropriado um nome como “PageTitleContainer”. O que nos leva a outro ponto: não tenha medo de nomes grandes.

É melhor gastar tempo uma vez escrevendo um nome grande do que perder tempo várias outras vezes decifrando o que aquela abreviação significa. Dessa forma, o tamanho de um nome deve ser proporcional ao escopo que ele pertence.

É fácil decifrar o que “name” significa dentro de um componente de formulário. Entretanto, é muito difícil saber o que aquele nome representa dentro de uma página de carrinho. Isto é, ele é o nome do produto? O nome do cliente?

Outro ponto em relação a nomes: não misture inglês com português.

É sempre bom manter um padrão e é mais aconselhável que se utilize nomes em inglês. Assim, as palavras chaves das linguagens já são em inglês e nomear as partes do seu código em inglês ajuda tanto a manter a organização quanto a escalabilidade do código.

Isso porque, as vezes, seu projeto pode chegar a Devs de fora do Brasil e eles não vão saber o que a variável “corDoCarro” significa. Portanto, o Google tradutor é muito bom hoje em dia, use e abuse dele.

A sopa de Divs

Quem utiliza o React JS, sabe que cada componente funcional deve retornar apenas um elemento JSX. A questão é que, na maioria das vezes, não temos apenas um único elemento para retornar. Ou seja, isso nos obriga a utilizar uma tag invólucro, que geralmente é uma div.

Mas qual o problema disso? Isso vira um problema quando temos uma página com muitos componentes filhos que, por sua vez, tem mais componentes filhos e por aí vai.

O resultado disso é uma verdadeira sopa de divs. Então, a solução para isso são os Fragments do React, que são um invólucro para o código JSX sem adicionar um novo elemento HTML à página.

import { Fragment } from "react";
const Element = () => {
return (
<Fragment>
<h1>Title</h1>
<p>Description</p>
</Fragment>
);
};
export default Element;

Ou simplesmente:

const Element = () => {
return (
<>
<h1>Title</h1>
<p>Description</p>
</>
);
};
export default Element;

Atualização de estados

Quando precisamos atualizar um estado do React com base no estado anterior, não é uma boa prática pegar esse valor da variável de estado.

const updateCount = () => setCount(count + 1);

Ao invés disso, é recomendado passar uma função que recebe o estado anterior e atualizá-lo com esse valor. Assim, isso evita que o React se perca nos fluxos de Renderização.

const updateCount = () => setCount((prevState) => prevState + 1);

Organizando importações

Em uma página onde você possui diversos componentes e precisa importar todos eles, você vai acabar com algo desse tipo:

import React from 'react';
import Header from 'components/Header';
import Card from 'components/Card';
import Button from 'components/Button';
import NumberSelector from 'components/NumberSelector';
import GameSelector from 'components/GameSelector';
...

Em contrapartida, você pode criar uma página ‘index.ts’ dentro da pasta ‘components’ e de lá exportar todos os componentes.

import Header from 'components/Header';
import Card from 'components/Card';
import Button from 'components/Button';
import NumberSelector from 'components/NumberSelector';
import GameSelector from 'components/GameSelector';

export {Header, Card, Button, NumberSelector, GameSelector};

Assim, no componente de página, você vai ter algo como isso:

import { Header, Card, Button, NumberSelector, GameSelector } from 'components';

Veja quantas linhas de código você economizou!

Comentários

O melhor comentário é aquele que não existe. Por isso, comentários só devem ser utilizados em último caso. Isso porque, geralmente, eles estão lá para explicar um código que não se explica por si só.

Como melhorar o seu Clean Code?

No livro “Clean Code” é citada a “Regra do Escoteiro”. Em suma, essa regra fala para você deixar o código sempre melhor do que achou.

Por isso, achou uma variável com um nome esquisito? Refatore. Achou uma função grande demais? Refatore. Assim, pouco a pouco o código vai ficando melhor.

No final das contas, ter um Clean Code não é algo que se aprende do dia para a noite, requer prática. Dessa forma, lembre-se: um código perfeito não existe, sempre vai ter algo a ser melhorado.

Autora: Jaiane Souza Oliveira.

[adrotate banner=”5″]

Veja Também:
O que é Apache Kafka

Biblioteca Luby sobre Back End

O post Clean Code e boas práticas de programação aplicadas ao React JS apareceu primeiro em Luby Software.

[adrotate banner=”4″]

Pensando nisso, neste artigo, vamos aprender como fazer a validação de formulário com React Hook Form e Yup.

Aplicações React

Trabalhando com aplicações React, podemos encontrar inúmeras soluções para validação de formulários. Bem como, React Hook Form e Yup, que são soluções bastante performáticas e de simples integração para os desenvolvedores.

React Hook Form

React Hook Form é uma biblioteca usada para validação de formulário em aplicações React, sem nenhuma outra dependência. Assim, além de ser eficiente e fácil de usar, ela permite que os desenvolvedores escrevam poucas linhas em sua implementação comparada a outras bibliotecas com a mesma finalidade.

Nesse sentido, criando validação de formulário simples, o React Hook Form, alinhado com os existentes dentro do próprio HTML, suporta as validações: required, min, max, maxlength, minlength, pattern, validate.

Yup

Yup é um construtor de esquema JavaScript para análise e validação de valor. Assim, com seu esquema de validação poderoso e simples de usar, o Yup possibilita uma maneira abstrata que não interfere no restante da lógica de negócio.

Dessa forma, é possível criar um objeto formatado que assemelha-se com o esquema pretendido para um objeto. E em seguida, utilizar as funções deste utilitário para verificar se nossos objetos de dados correspondem a esse esquema. Para, assim, validá-los.

Afinal, vale ressaltar que podemos trabalhar em validações de qualquer objeto na aplicação. Tal qual podem ser utilizados dados de formulários no Front-end ou até no Back-end, dentre outras utilidades.

Passo a passo NA PRÁTICA

React Hook Form e Yup trabalham muito bem juntas. Pensando nisso, criamos um passo a passo para fazer essa integração.

1. Adicionar dependências

Primeiramente, é necessário adicionar as seguintes dependências em um projeto React:

2. Suposição do código

Em seguida, suponhamos que esse é o nosso trecho de código:

3. Adicionar importação

Então, adicionamos a importação dos pacotes no topo do arquivo:

4. Instanciar schema

Neste momento, instanciamos o schema de validação usando yup:

5. Declarar objeto

Agora, devemos declarar um objeto que recebe os seguintes atributos:

• register: método que permite registrar um elemento e aplicar nele as regras de validação;
• handleSubmit: função que irá receber os dados do formulário se a validação for bem sucedida;
• reset: função que irá limpar todos os campos do formulário ou reiniciá-los para seus valores padrão. E, nesse caso, formState, que irá retornar os erros de uma forma simples;
• yupResolver: função que irá gerar as validações com base no schema criado na passo anterior.

6. Adicionar tipagem

Nesse projeto, estamos usando typescript. Por isso, precisamos adicionar a tipagem no useForm. Então, será possível facilmente identificar os atributos dentro o objeto data, retornado pela função handleSubmit. Bem como tipar o nome do input que será registrado usando register.

A interface:

Adicionando a tipagem no método useForm:

7. Adicionar handleSubmit

Neste momento, iremos adicionar os métodos handleSubmit no formulário e register nos inputs:

Observação: o método onSubmitHandler, que está sendo passado como parâmetro para função handleSubmit do React Hook Form e marcado como erro, ainda não foi criado, faremos isso no passo seguinte.

A intelliSense em funcionamento no método register após a adição da tipagem:

8. Criar onSubmitHandler

Então, iremos criar o método onSubmitHandler para receber e usar os dados do formulário:

A intelliSense em funcionamento no objeto com os dados do formulário:

9. Adicionar mensagens de erro

Por último, adicionamos as mensagens de erro para cada input:

10. Finalização

Dessa forma, com tudo pronto, o código fica assim:

Assim, ao rodar o aplicativo, ele deve funcionar assim:

Veja também:

Como utilizar animações Lottie com React

Conclusão

A validação de formulário facilita a aplicação de diversas funcionalidades do sistema. Bem como melhora a usabilidade e experiência do usuário. Então, neste artigo, aprendemos como fazemos a validação de formulário com React Hook Form e Yup. 

Pensando nisso, acesse o nosso blog e confira diversas dicas sobre o mundo do desenvolvimento.

Lembrando que as referências utilizadas para a aplicação neste artigo foram: https://react-hook-form.com/ e https://github.com/jquense/yup.

[adrotate banner=”5″][/vc_column_text][/vc_column][/vc_row]

O post Validação de formulário com React Hook Form e Yup apareceu primeiro em Luby Software.

[adrotate banner=”4″]

Neste artigo, vamos abordar tudo sobre essa ferramenta. Então vamos lá?

O que é Apache Kafka?

O Apache Kafka é uma plataforma open-source para realizar transmissão de dados em um fluxo contínuo. Ou seja, é um sistema de mensageria de alto desempenho e em tempo real. Essa plataforma se popularizou muito nos últimos anos com a “ascensão dos microsserviços”. O Kafka se destaca por ser extremamente veloz, escalável e versátil.

Inicialmente, o Kafka era um sistema interno desenvolvido pelo LinkedIn. Então, sua principal aplicação era no processamento em tempo real das mensagens, comentários e postagens na rede social.

Explicando alguns termos

Nesse artigo, serão utilizados alguns termos estritamente técnicos e isso pode assustar quem tá começando na área ou pessoas que não tenham estudado a fundo sobre esse assunto. Portanto, listei aqui definições de alguns termos técnicos para facilitar a sua leitura.

• Broker: em computação, um brocker é o servidor de envio de mensagens. É ele que irá disparar e receber essas mensagens. O broker também possui os tópicos e as partições;

• Tópicos: um tópico é um identificador. Por meio desse identificador, será possível se conectar ao broker e disparar e receber as mensagens;

• Microsserviços: microsserviços são um modelo de sistema da informação. Esse modelo visa “quebrar” um sistema em vários sistemas menores, a fim de melhorar a performance e a disponibilidade;
• Partição: subdivisão de um tópico, a partição é um recurso para ajudar a balancear a carga;

• Cluster: resumidamente, um cluster é um conjunto de brokers, nele serão contidos os servidores e a instância principal do Kafka.

Como o Kafka funciona?

O Kafka foi escrito nas linguagens de programação Java e Scala. Ele realiza as suas transmissões de maneira assíncrona e pode ser considerado como um sistema distribuído. Em sua estrutura, o Kafka possui consumers e producers. Para definir esses termos, basta traduzir: os producers são os produtores das mensagens (quem envia e distribui os dados); já os consumers são os consumidores das mensagens (eles se inscrevem em um tópico e ficam ouvindo as mensagem que chegarão).

A arquitetura do Kafka descrita acima permite a consistência do envio de mensagens. Assim, os brokers são projetados para suportarem quedas e falhas. Quando um broker do Kafka cai e fica fora do ar por algum motivo, um broker reserva assume as atividades para manter a entrega e alta disponibilidade, sem perder nenhuma informação. A mesma coisa acontece com os tópicos, que possuem múltiplas partições, que são réplicas da partição principal.

Ao inicializar uma nova instância do Kafka, é possível definir um número personalizado de brokers e partições nos tópicos. O mais comum é três de cada um, mas use conforme a necessidade da sua aplicação.

Vantagens do Kafka

• Rápido e versátil;
• Utiliza o disco rígido ao invés da memória para armazenar os dados;
• Alta disponibilidade;
• Transmissões assíncronas;
• Sua funcionalidade de mensageria já possui filas integradas por padrão;
• Garantia de entrega das mensagens ao consumer. O Kafka armazena os dados no disco. Então, se ocorre algum problema de conexão, as mensagens não serão perdidas, pois estão escritas no disco rígido. Assim, ao restabelecer a conexão, o disco será lido e as informações serão enviadas.

Desvantagens do Kafka

• As mensagens não são entregues de maneira ordenada;
• Exige uma conexão de internet forte. Isso porque pequenas oscilações podem afetar a comunicação. Portanto, em casos de conexão via satélite, é mais viável implementar o sistema de mensageria com outras tecnologias (como por exemplo o MQTT);
• Curva de aprendizado e complexidade nas configurações.

Veja também:
Guias sobre Back End

Validação de formulário com React Hook Form e Yup

Quais empresas adotaram o Apache Kafka?

Por causa de suas qualidades, ampla comunidade e documentação completa, o Kafka foi adotado por diversas empresas, inclusive as famosas big techs. Alguns exemplos de grandes empresas que utilizam o Apache Kafka são: Uber; Netflix; RedHat; Spotify; Twitter; LinkedIn; AirBnb; Nubank; e PayPal.

Conclusão

Chegamos ao final deste artigo e podemos concluir que o Apache Kafka é uma ótima tecnologia, que está em ascensão e que pode ser utilizada em vários casos de uso (como IOT, E-commerces, chats e em sistemas bancários). Portanto, vale a pena tirar um tempo para estudar essa ferramenta, pois ela pode ajudar muito nos seus futuros projetos, tornando-os mais escaláveis e blindados.

A comunidade do Kafka é muito ampla e sua documentação é completa. Ou seja, isso facilita muito no processo de aprendizado e nas dúvidas e bugs que eventualmente possam aparecer.

Leia também:

9 extensões para desenvolvedores que você deveria experimentar

O que é Power BI?

Quais são as diferenças entre .NET Core e .NET Framework?[/vc_column_text][/vc_column][/vc_row]

[adrotate banner=”5″]

O post O que é Apache Kafka e como funciona? apareceu primeiro em Luby Software.