Contamos a nossa experiência em implementar o React em nosso projeto monólito em Rails, nossa motivação, processo de decisão, como iniciamos, o ganhos com essa abordagem e o que aprendemos com todo o processo.

1. REACT
NOS
TRILHOS
Como implementamos
o React em nosso projeto Rails

2. Graduado em Adm. Empresas, pós-graduado em
Análise, Projeto e Gerência de Sistemas.
John W. M. Carneiro
Dev. Full-Stack na Checkplant Sistemas S/A
- Ruby (Rails)
- Python (Django/Flask)
- PHP
Linguagens:
- JS
- React
- Vue e etc.
@johnwmcarneiro

3. SUPER
MOTIVAÇÃO

4. - Monólito.
- Frontend em Rails (erb, jquery e etc), Angular.js e Sprockets.
- Dificuldade de manutenção para o Dev.
- Divisão de responsabilidade.
- Hype da atualização do Rails.
- Novo Design System e uma nova funcionalidade.
Motivação

5. WHY
REACT?

6. Why React?
- Equipe.
- Mercado.
- Outros projetos internos já desenvolvidos com React e
React Native.
- React Hooks (State, Effect, Memo, Context e etc) e
sem classes.

7. SEM
HOOKS
REACT?
WHY

8. COM
HOOKS
REACT?
WHY

9. EAGORA?
Reuniões e Regras

10. Reuniões e Regras
- Reunião para apresentar a ideia.
- Reunião entre com os times de tecnologia.
- Deveria ter separação do código. Sem uso de gems que
gerem dependência;
- Comunicação deveria ser via API;
- Inclusão do JS e CSS no layout do projeto, múltiplos
entrypoints e múltiplos apps.
- Integração com CI e deploy junto do Rails.
Definição
- Ficar acoplado como a implementação do Angular.js.
Preocupação

11. POR ONDE
COMEÇAMOS?

12. Check…
- Tela simples um crud;
- Queríamos testar a inclusão do React e entender
como seria com o Semaphore e Rails.

13. MVP
FIRST
VERSION

14. Rails controlando
todas as rotas.
Adicionar no
pipeline de deploy
junto do app Rails.
FIRST VERSION
MVP

15. Helper para incluir
JS e CSS de acordo
com o ambiente.
FIRST VERSION
MVP

16. Múltiplos
entrypoints.
Tratar cada página
como um “app”.
FIRST VERSION
MVP

17. Não usamos o CRA.
Webpack
customizado.
FIRST VERSION
MVP

18. MVP First Version
- E quando vamos de uma página de listagem para uma
página de cadastro ou outra?
- E quando vários pontos precisam dos mesmos dados?
- Override de CSS.
Problemas:

19. VERSÃO
ATUAL

20. Único entrypoint.
ATUAL
VERSÃO

21. Destinamos no Rails
uma rota exclusiva
para o frontend em
React.
ATUAL
VERSÃO

22. React Router
controlando a partir
da rota Rails.
ATUAL
VERSÃO

23. Página inteira
deve ser em react.
ATUAL
VERSÃO

24. GANHOS
COM ESSA
ABORDAGEM

25. O que ganhamos…
- Evolução gradual do frontend, implementação do
React sem refazer todo o frontend;
- Aplicação do novo Design System;
- Melhora na experiência do usuário:
- Desempenho no carregamento da tela;
- Elementos já carregados;
- Resposta por api e cache;
- Assíncrono.
- Backend:
- Simplificação;
- API interna com cache;
- Serialização;
- Testes e documentação.
- Motivação da equipe.

26. APRENDIZADO

27. Aprendizado
- Inclua toda equipe no processo e principalmente quem lida
com o cliente (CS, Suporte,...).
- Planeje antes!
- Ao criar um nova tela, relacione tudo que se espera.
- Ao refazer uma tela, relacione todas as regras existentes e
esperadas.
- Verifique antes outras páginas que utilizam as mesmas
funcionalidades.
- Não exclua o código antigo, deixe para o final.
- Comece arrumando a casa e construa os componentes.
- Usou pela segunda vez, faça um componente.
- Instale o Lint e siga as regras.
- Principalmente, pense fora da caixa e não se apegue que
deve ser do jeito “certo".
- Feito é melhor que perfeito.

28. PRÓXIMOS
DESAFIOS

29. Próximos desafios
- Integrar as funcionalidades em React com as
funcionalidades antigas em Angular.js;
- Continuar evoluindo o código e migrar outras telas,
- Manter a organização e qualidade de código;
- I18n;
- Isolamento da CSS.

31. OBRIGADO