Rails & ReactJS - Use case e estratégias

[In Portuguese]

Talk sobre casos de uso e a nossa experiência utilizando o ReactJS em nossos projetos novos e legados para melhorar tanto a experiência do usuário quanto o manutenção quanto o reaproveitamento dos códigos de front-end

Transcript

1. Rails & ReactJS
   Use case e estratégias
   Daniel Vinciguerra
   

   View Slide

2. View Slide

3. React JS
   

   View Slide

4. Biblioteca criada pelo 

   Facebook para a criação de UI
   

   View Slide

5. Biblioteca criada pelo 

   Facebook para a criação de UI
   

   View Slide

6. Components criados de forma
   declarativa que reagem a estado
   

   View Slide

7. Otimizado para soluções que alteram
   demais o conteúdo das paginas
   

   View Slide

8. View Slide

9. Vantagens
   

   View Slide

10. Simplifica o teste 

    e depuração de problemas
    

    View Slide

11. Favorece e a manutenção

    e o reaproveitamento do código
    

    View Slide

12. Com foco na solução de 

    um problema de forma otimizada
    

    View Slide

13. Components
    

    View Slide

14. Syntax sugar que auxilia criar

    componentes baseada no HTML
    

    View Slide

15. JSX não é obrigatório 

    mas facilita demais o trabalho
    

    View Slide

16. Um exemplo de implementação

    mais antiga que vemos em projetos
    

    View Slide

17. View Slide

18. Agora a mesma forma 

    utilizando o componentes do ReactJS
    

    View Slide

19. View Slide

20. E uma mesma implementação
    utilizando apenas funções
    

    View Slide

21. View Slide

22. E uma mesma implementação
    utilizando apenas funções
    

    View Slide

23. Use cases
    

    View Slide

24. Utilizar o ReactJS 

    em um projeto legado é fácil
    

    View Slide

25. https://reactjs.org/docs/try-react.html
    

    View Slide

26. https://reactjs.org/docs/add-react-to-an-existing-app.html
    

    View Slide

27. Existem excelentes alternativa
    mais integradas ao Rails
    

    View Slide

28. https://rubygems.org/gems/react-rails
    

    View Slide

29. https://github.com/reactjs/react-rails
    

    View Slide

30. E formas mais modernas

    de se utilizar dependências JS
    

    View Slide

31. https://webpack.js.org/
    

    View Slide

32. https://github.com/rails/webpacker
    

    View Slide

33. Começando?
    

    View Slide

34. Pensar em isolar sempre 

    que possível seus componentes
    

    View Slide

35. Buscar uma referência

    e discutir soluções costuma ajudar
    

    View Slide

36. Comece simples e evolua
    organicamente conforme a necessidade
    

    View Slide

37. Obrigado!
    

    View Slide