Introdução a programação funcional em React ⚛️

Apresentação sobre conceitos de programação funcional e utilização com a biblioteca React

Transcript

1. Introdução a funcional em react Utilizando os conceitos de programação funcional no dia a dia
2. Quem sou eu? Engenheiro Front-end na Linte Sistemas para Internet Caiçara blog.lucasviana.dev/ @mechamobau
3. Agradecimento especial Essa talk foi inspirada em: Por que dar uma chance a programação funcional com TypeScript? Vitor Luiz Cavalcanti @VitorLuizC Apoio e revisão técnica
4. Pra quê funcional?
5. Fp é hipster
6. fp é da modinha
7. fp é hype
8. agora sério...
9. + Declarativa - Imperativa
10. + declarativa - imperativa
11. + declarativa - imperativa
12. + declarativa - imperativa - Clareza na lógica - Facilidade de escrita - Menos possibilidade de falha
13. funções puras
14. "Uma função pura, é aquela dada um mesmo valor de entrada, vai sempre retornar o mesmo valor de saída, sem efeitos colaterais."
15. Fonte: Mostly adequate guide to FP - professor Frisby
16. funções puras - Não possuem dependência de dados - Não fazem I/O - Não produzem efeitos colaterais - Reusabilidade
17. Cidadãos de primeira classe
18. Cidadãos de primeira classe - Podem ser armazenados dentro de variáveis - Podem ser recebidos como parâmetros - Podem ser retornados por outras funções
19. currying
20. Dada uma função f do tipo f: (X x Y) → Z, a técnica de currying pode transformar a expressão em curry (f): → (Y → Z)
21. currying - Reaproveitamento de código - Currying implícito - Código legível, elegante e conciso
22. certo… mas e o react?
23. react não é funcional
24. fp react imutabilidade mutabilidade
25. Pra quê funcional?
26. FP em JS: bibliotecas - FP/TS - Ramda.js
27. HOCs + FP = ❤
28. HOCs + FP = ❤
29. HOCs + FP = ❤
30. hooks ⚛
31. mas antes...
32. Componentes react Existem duas formas de se criar um componente em React Class Components Functional Components
33. Fonte: https://www.codevoila.com/post/57/reactjs-tutorial-react-component-lifecycle class components
34. - Na versão 16.3, não é obrigado usar o alias - Na versão 16.4, warnings foram adicionados - A partir da versão 17 os métodos serão removidos class components
35. - Confusos (uso excessivo de binds com "this") - A lógica do componente se divide muito nos métodos de ciclo de vida - > Tamanho de bundle class components
36. functional components - Antes usados apenas para exibição de dados - A partir da versão 16.8 ganharam bastante tração
37. Hooks hooks ⚛
38. - Adicionam uma nova camada nos componentes funcionais - Muito interessantes para abrigar regras de negócio - Possibilidade no uso de conceitos funcionais hooks ⚛
39. hooks ⚛
40. Recap Funções puras - Fáceis de escrever - Fáceis de ler - Fáceis de testar - Muito reutilizáveis Fácil manutenção Componentes Funcionais - Remoção do uso de contexto - Alguns conceitos funcionais - Hooks ❤ Hooks - Escrita de lógica sem JSX - Mais poder ao componente funcional