DEV Community: Gabriel Lopes

Melhores práticas de colaboração em equipe: Padronização de Commits, Code Review e Fluxo de Pull Requests

Gabriel Lopes — Thu, 15 Jun 2023 16:41:38 +0000

Introdução

No mundo do desenvolvimento de software, a colaboração eficiente entre membros da equipe é fundamental para garantir a qualidade do código e o sucesso do projeto. Neste artigo, vamos explorar três práticas essenciais para uma colaboração efetiva: padronização de commits, code review e o fluxo de Pull Requests (PR).

Padronização de Commits: Clareza e Consistência

A padronização de commits é uma prática que visa tornar as mensagens de commit mais claras, concisas e fáceis de entender. Ao adotar um formato padrão, como o Conventional Commits, os membros da equipe podem ter uma visão rápida e precisa das alterações realizadas. O formato básico consiste em um tipo, um escopo opcional e uma descrição. Por exemplo:

feat(login): Adiciona validação de senha no formulário de login

Essa padronização permite uma navegação mais fácil pelo histórico de alterações e uma melhor compreensão das modificações realizadas.

Além disso, é recomendado utilizar ferramentas como o Git Hooks para automatizar a verificação da padronização dos commits, garantindo que todas as mensagens estejam de acordo com as diretrizes estabelecidas pela equipe.

Code Review: Aperfeiçoando o Código em Equipe

O code review é uma prática na qual os membros da equipe revisam o código escrito por seus colegas antes de ser mesclado no ramo principal do repositório. Essa prática traz vários benefícios, como a identificação de erros e problemas de lógica, melhorias na qualidade do código e a troca de conhecimento entre os membros da equipe.

Durante o code review, os revisores examinam o código, analisam sua legibilidade, aderência às boas práticas e fornecem feedback construtivo. É importante estabelecer diretrizes claras para o code review, como prazos para revisão, critérios de aceitação e boas práticas específicas para o projeto. Ferramentas como o GitHub e o GitLab geralmente oferecem recursos para facilitar o processo de code review, permitindo comentários diretamente no código e discussões sobre as alterações propostas.

Fluxo de Pull Requests: Facilitando a Colaboração

O fluxo de Pull Requests é um processo de colaboração em equipe que permite que as alterações sejam revisadas e mescladas de forma controlada. Esse fluxo geralmente envolve os seguintes passos:

Clone o repositório: Comece clonando o repositório do projeto em sua máquina local.
Crie uma branch: Crie uma nova branch a partir do ramo principal do repositório.
Faça suas alterações: Realize as alterações desejadas nos arquivos do projeto.
Adicione e faça commit das alterações: Adicione os arquivos modificados ao índice de commit e faça o commit das alterações com uma mensagem descritiva.
Envie suas alterações: Envie suas alterações para o repositório remoto na sua branch.
Crie o Pull Request: Acesse o repositório no serviço de hospedagem Git e crie um novo Pull Request, preenchendo as informações necessárias.
Aguarde a revisão: Aguarde a revisão e o feedback dos outros membros da equipe.
Realize as alterações: Se forem solicitadas alterações durante a revisão, faça as modificações necessárias em sua branch local e envie novamente para o repositório remoto.
Merge do Pull Request: Após a revisão e a aprovação do Pull Request, um membro com permissões suficientes pode mesclar as alterações no ramo principal.
Atualize sua branch local: Atualize sua branch local com as alterações mescladas.

Essa abordagem promove uma colaboração transparente, facilita a discussão e mantém um histórico claro das alterações realizadas. Além disso, pode ajudar a evitar conflitos de código e garantir a integridade do projeto.

Conclusão: Melhorando a Colaboração em Equipe

A colaboração eficiente entre os membros da equipe é essencial para o sucesso de qualquer projeto de desenvolvimento de software. Ao adotar a padronização de commits, realizar o code review e seguir o fluxo de Pull Requests, é possível aprimorar a qualidade do código, promover a troca de conhecimento e garantir um histórico claro das alterações realizadas.

Ao implementar essas práticas, as equipes de desenvolvimento podem alcançar uma colaboração mais efetiva, resultando em um código mais robusto, consistente e de alta qualidade. Lembre-se de adaptar essas práticas de acordo com as necessidades e particularidades de cada projeto, sempre buscando o aprimoramento contínuo da equipe e do código produzido.

Links úteis

Git hooks: https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks

Conventinal commits: https://www.conventionalcommits.org/en/v1.0.0/

Pull Requests: https://coodesh.com/blog/dicionario/o-que-e-pull-request-pr/

Controlled components vs Uncontrolled components no React

Gabriel Lopes — Tue, 28 Mar 2023 17:45:38 +0000

O "form" é um dos elementos mais populares em HTML para fazer sites. Quando o React foi lançado, ele mudou a maneira como lidamos com os formulários em muitos aspectos.

No React, existem duas formas de trabalhar com dados de formulário em nossos componentes. A primeira forma é usando o "estado" para manipular os dados do formulário, o que chamamos de "Controlled Components". A segunda forma é deixando a própria DOM lidar com os dados do formulário, sem intervenção direta do componente - isso é chamado de "Uncontrolled Components".

Neste artigo, vou explicar a diferença entre esses dois tipos de componentes no React, usando exemplos práticos.

O que são Controlled Components?

Controlled Components no React são aqueles onde os dados são controlados pelo estado do componente.

Os formulários são usados para guardar informações em um documento, geralmente para enviar ao servidor fazer alguma coisa. E essas informações são guardadas por elementos de entrada de formulário, como input, textarea, select, e outros que controlam o estado ou valor deles.

Onde eu quero chegar?

Sabe quando preenchemos um formulário na internet? Cada campo tem um valor que pode ser digitado pelo usuário ou selecionado através de um menu. Quando mudamos o valor de um campo, o estado dele também muda.

Para conseguir o valor de um campo, usamos uma propriedade do próprio campo. Também podemos usar essa propriedade para definir valores nos campos do formulário. Ela se chama ".value".

Agora, podemos usar essa mudança de estado para gerenciar os valores dos campos em um formulário. Veja um exemplo:

function App(){
    const [email, setEmail] = useState("");
    const [senha, setSenha] = useState("");

    function onSubmit(){
        console.log("Valor do email: "+ email);
        console.log("Valor da senha: "+ senha);
    } return (
        <form onSubmit={onSubmit}>
            <input
                type="email"
                name="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
            />
            <input
                type="password"
                name="senha"
                value={senha}
                onChange={(e) => setSenha(e.target.value)}
                required
            />
            <input type="submit" value="Submit" />
        </form>
    );
}

Aqui temos dois estados: um para o email e outro para a senha. O que a gente faz é atribuir um valor a cada um deles, usando a propriedade "value".

O campo do email guarda o valor digitado nele. Quando a pessoa digita algo nesse campo, um evento chamado "onchange" é acionado e atualiza o valor do email usando uma função chamada "setEmail", que atualiza o estado do email.

A mesma coisa acontece com o campo da senha. Quando a pessoa digita algo nele, o evento "onchange" atualiza o valor da senha usando a função "setSenha".

Resumindo: os valores digitados nos campos de email e senha são controlados pelo estado do componente. Esse estado se torna a fonte única e verdadeira para os campos, então o componente é chamado de "componente controlado".

O problema de usar um componente controlado é que, conforme adicionamos mais campos ao formulário, o número de estados também aumenta. Isso pode causar muitas renderizações e tornar o componente difícil de controlar.

O que são Uncontrolled Components?

Uncontrolled components são aqueles em que os dados do formulário são tratados diretamente pela DOM. O nome "Uncontrolled" vem do fato de que esses componentes não são controlados pelo estado do React.

Os valores dos campos do formulário são normalmente controlados e armazenados na própria DOM. Para obter os valores dos campos, precisamos acessar a instância desses elementos no DOM.

function App() {
  function onSubmit() {
    console.log("Valor do email: " + window.email.value);
    console.log("Valor da senha: " + window.senha.value);
  }
  return (
    <form onSubmit={onSubmit}>
      <input type="email" name="email" id="email" required />
      <input type="password" name="senha" id="senha" required />
      <input type="submit" value="Submit" />
    </form>
  );
}

No código acima, demos aos campos de email e senha um ID com valores "email" e "senha", respectivamente. Usamos esses IDs para obter os valores dos campos quando o formulário é enviado.

O componente acima é chamado de "Uncontrolled Component", porque o React não controla o valor dos campos de entrada do formulário.

Nesse exemplo, usamos as APIs da DOM diretamente. Agora, vamos dar uma repaginada no código para usar elementos do React.

function App() {
  const emailRef = useRef();
  const senhaRef = useRef();


  function onSubmit() {
    console.log("Valor do email: " + emailRef.current.value);
    console.log("Valor da senha: " + senhaRef.current.value);
  }
  return (
    <form onSubmit={onSubmit}>
      <input type="email" name="email" ref={emailRef} required />
      <input type="password" name="senha" ref={senhaRef} required />
      <input type="submit" value="Submit" />
    </form>
  );
}

Criamos duas referências no React, uma para o nome e outra para o email. Depois, as conectamos às entradas de email e senha usando o atributo 'ref'. Isso faz com que as referências guardem os elementos HTML correspondentes. A partir daí, podemos usar a propriedade '.current' para acessar os valores inseridos nos campos de entrada.

Controlled components vs. Uncontrolled components: Principais diferenças

Quando usamos componentes controlados, é mais fácil prever o comportamento do nosso formulário, porque o componente está no controle do estado dos elementos do formulário.
Já nos componentes não controlados, as coisas podem ficar imprevisíveis, porque os elementos do formulário podem perder a referência ou serem afetados por outras fontes durante o ciclo de vida do componente.
Usando componentes controlados, podemos fazer validações de formulários de maneira mais eficaz. Isso porque os valores dos elementos do formulário são armazenados em nosso estado local e, portanto, são mais seguros. É aqui que realizamos nossas validações.
Com componentes controlados, temos muito controle sobre os valores dos elementos do formulário. Podemos ditar o que é permitido e o que não é, e como os valores devem ser tratados.

Conclusão

Neste tutorial, ensinamos como lidar com elementos de formulário no React e como estruturar os dados. Falamos sobre duas maneiras diferentes de lidar com dados de formulário em componentes de React: controlados e não controlados. E, por fim, exploramos os dois tipos de componentes em detalhes e demos exemplos práticos para demonstrar como eles funcionam.