React - Em busca da arquitetura ideal

React é uma ferramenta fantástica para criar componentes. Pelo fato da biblioteca dar muita liberdade ao desenvolvedor, com o amadurecimento da stack e aplicações cada vez mais complexas, o desafio é: Como organizar melhor o código?
O conteúdo da palestra será composto de exemplos de código próximos do mundo real, referências de artigos, diagramas para ilustrar camadas da codebase e code show.

Transcript

1. React. Em busca da arquitetura ideal.
2. Milson Júnior @mjnr20
3. https://www.iq360.com.br/
4. Não existe arquitetura ideal.
5. Frameworks e bibliotecas são somente ferramentas de trabalho e nada além disso; O objetivo não é dizer o que precisa ser feito; Aprender fundamentos é importante; Não existem soluções definitivas.
6. Caso de uso Dumb and Container Components Recompose Inspiração na arquitetura do Elm O que funciona para nós
9. Dependencies
10. Dependencies Component Definition
11. Initial State
12. Controller Method
13. Lifecycle Hook
14. View
15. Resumo
16. Caso de uso Dumb and Container Components Recompose Inspiração na arquitetura do Elm O que funciona para nós
17. View Logic
25. Resumo Stateful Class Component Stateless Functional Component
26. View Logic
27. Presentational Container
28. Dumb Smart
29. MVC Architecture
30. Trygve Reenskaug Cientista da computação e primeira pessoa a descrever o padrão MVC.
31. Caso de uso Dumb and Container Components Recompose Inspiração na arquitetura do Elm O que funciona para nós
34. Dumb • Stateless • Functional Component • Totalmente reutilizável • Funções puras e pequenas • Simplicidade • Não é possível trabalhar com lifecycle hooks e estado. • Não é possível controlar o update do componente.
35. Container • Stateful • Class Component • É possível trabalhar com lifecycle hooks e estado. • É possível fazer gerenciar o update do componente via shouldComponentUpdate. • problemas desnecessários com this • dificuldade de reutilização de partes específicas do componente (lifecycle hooks, event handlers) • Containers cada vez maiores e monolíticos. • Estado é interno e não pode ser compartilhado
36. E se conseguirmos o melhor dos dois mundos?
37. Higher Order Components Think of it like lodash for React.
38. Enhanced • Composable • Totalmente reutilizável • Funções puras e pequenas • É possível trabalhar com lifecycle hooks e estado. • É possível controlar o update do componente. • Funcional (sem this) • É possível reutilizar com facilidade partes específicas de um componente. • Modular. Cada HOC é responsável por algo específico. • Estado interno é fácil de ser reutilizado. • Curva de aprendizado um pouco maior
41. Resumo
42. Caso de uso Dumb and Container Components Recompose Inspiração na arquitetura do Elm O que funciona para nós
44. Local State
45. Lifecycle Hooks
46. Controller Methods
50. Caso de uso Dumb and Container Components Recompose Inspiração na arquitetura do Elm O que funciona para nós
52. Data - Lidar com estado global da aplicação - Lidar com fetch de dados ou camada de serviços - Mapeamento de dados
53. State - Lidar com estado local - Declarar valores iniciais para os estados de um componente
54. Handlers - Lidar com event handlers e métodos de controle. - Atualizar estado local
55. Hooks - Define em qual momento do ciclo de vida do componente, métodos de controle devem ser executados. - Atualizar estado local
56. PropsMapper - Filtrar as propriedades e traduzi-lás da melhor forma possível para o componente. - Concentrar expressões booleanas.
58. Conclusão
59. Conclusão
61. Praticidade para desenvolver soluções complexas. Melhora na qualidade de código. Time mais colaborativo.
62. Futuro: - React Context API - Bibliotecas para programação funcional - Vanilla Javascript - Curva de aprendizado.
63. bit.ly/palestra-react-arquitetura-brjs18
64. recrutamento@redventures.com.br
65. Obrigado! @mjnr20