Como usar React para agilizar um projeto

No post sobre a área de Merchant Product falamos sobre produtos criados para atender os merchants do EBANX. O Rafael Bruno, desenvolvedor front end do time, contou um pouco pra gente sobre como a linguagem React foi usada em um desses produtos.

No post sobre a área de Merchant Product falamos sobre produtos criados para atender os merchants do EBANX. O Rafael Bruno, desenvolvedor front end do time, contou um pouco pra gente sobre como a linguagem React foi usada em um desses produtos.

React

Hoje se ouve muito falar sobre React: a famosa lib desenvolvida pelo Facebook para criar interfaces visuais (UI), e sobre seu ecossistema, que é composto por várias outras libs como Redux, React-router e Sagas, que tornam possível desenvolver aplicações incríveis.

Grandes empresas estão utilizando React para desenvolver seus produtos, entre elas estão AirBnb, Netflix, Instagram e claro, o próprio Facebook.

No EBANX também usamos React em alguns projetos, e hoje vou contar como foi nossa experiência em um deles: EBANX Checkout.

EBANX Checkout

É um produto destinado aos nossos merchants, com integração simples e fácil, que funciona em qualquer tipo de e-commerce, conectando-se perfeitamente ao carrinho de compras.

O Checkout permite processarmos pagamentos em 6 países – Brasil, México, Peru, Colômbia, Chile, Argentina – e no total são 30 métodos de pagamento locais.

Funciona assim: quando o cliente clica em pagar ele é redirecionado para a página de pagamento do EBANX Checkout. De forma simples, ele completa sua compra e é redirecionado novamente para o e-commerce.

Problemas

O aumento de volume no uso do Checkout gerou demanda de atualizações e começou a causar alguns problemas:

imagem de um computador bem antigo, com a tela azul e algumas letras na tela.

 

Tecnologias Antigas

Um grande problema de refatorar códigos legados é trabalhar com tecnologias antigas. E não foi diferente neste caso. O Checkout era feito com PHP, ou seja, server-side rendering, e utilizava uma versão muito antiga do jQuery e não tinha nenhum padrão nos estilos.

imagem de um desenho animado de cachorro sentado em uma cadeira, com fogo ao seu redor e uma mesa redonda em sua frente. Em cima da mesa tem um caneca.

Build centralizado

O processo de build também foi um desafio, ele era centralizado. Caso houvesse uma pequena mudança na interface como, por exemplo, a cor de um botão ou o tamanho de um título, era necessário fazer o build de toda a aplicação PHP para mudar apenas um pequeno detalhe da view.

caricatura de uma pessoa sentada em frente a um computador. A pessoa tem as mãos no rosto e olha fixamente pro computador.

Manutenção difícil

Tecnologias antigas + código legado = manutenção difícil. Considerando a difícil manutenção, o dilema foi: atualizar o projeto existente ou recomeçar e fazer tudo do zero? E para “ajudar”, tivemos o fator tempo de desenvolvimento, não só do código em si, mas de todo o UX e UI.

Com exceção do UX, o desenvolvimento do código e da interface deveria andar de forma simultânea, o que complicaria todo o processo, porque tínhamos pouco tempo para colocar a aplicação no ar e um desafio enorme pela frente.

E agora, o que fazer? Fazer do zero? Fazer um app Single Page? Usar qual framework/Lib?

Por que React?

Depois de avaliar todos os problemas, optamos por trabalhar no formato SPA (Single Page Application) e precisávamos escolher uma ferramenta para isso.

Como existem mais frameworks/libs front-end no mercado do que desenvolvedores front-end no mundo, como escolher entre tantas opções? Por que React?

várias logos de linguagens, incluindo React

Componentes

Um conceito que se popularizou muito nos dias de hoje, é o de frameworks ou libs component-based, e o React é um desses. Trabalhar com componentes torna o desenvolvimento no Front-end muito mais tranquilo e prazeroso. Sendo possível reaproveitar e padronizar o código.

Facilidade de testes

Algo que sempre assombrou o mundo do desenvolvimento Front-end são os testes. Como a maioria dos programadores Front-end tem um background de design ou de desenvolvimento de layout, desenvolver testes não é algo tão natural. Com o React isso muda, é tão fácil executar testes unitários em seus components React que não existe desculpas para não fazê-lo.

Complexidade de estados

O Checkout tem uma complexidade muito grande de estados, pelo fato de processar pagamentos em diversos países da América Latina, cada um com sua peculiaridade e estágios de pagamento. E o React trabalha bem em aplicações com muita complexidade de estados, com o auxílio do Redux e do Sagas conseguimos contornar esse problema.

Além das vantagens citadas acima, o React trás várias outras como:

  • Agilidade
  • Comunidade
  • Documentação
  • Flexibilidade

Boilerplate

Para agilizar ainda mais o processo de desenvolvimento, utilizamos um boilerplate para dar o start em nossa aplicação, isso nos poupou muito tempo gasto em configurações. Além de conter os principais recursos do ecossistema do React para desenvolver uma aplicação escalável.

Aqui nós podemos dar uma olhada no stack que estamos utilizando hoje com este boilerplate:

lista de todo o stack

Continuous Integration

Também utilizamos algumas ferramentas para trabalhar com continuous integration e tests:

  • Travis
  • Cypress (e2e)
  • Enzyme (Unit)
  • Jest (Unit)

Code

Aqui podemos dar uma olhada em como é a cara um código escrito com React. Este é um componente simples, mas nele é possível ver alguns detalhes sobre o React, como o JSX, que é como escrevemos as “views”.

Perceba que com React tudo é Javascript, isso inicialmente pode ser assustador, mas com o tempo percebemos que essa abordagem tem suas vantagens.

exemplo de código escrito em react.

Dicas

Vou deixar aqui alguns links que podem ajudar na jornada ao aprender ou desenvolver aplicações utilizando React:

Bons estudos.

3 comentários sobre “Como usar React para agilizar um projeto”

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *