Slide 1
Slide 1 text
Introdução a funcional em
react
Utilizando os conceitos de programação funcional no
dia a dia
Slide 2
Slide 2 text
Quem sou eu?
Engenheiro Front-end na
Linte
Sistemas para Internet
Caiçara
blog.lucasviana.dev/
@mechamobau
Slide 3
Slide 3 text
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
Slide 4
Slide 4 text
Pra quê funcional?
Slide 5
Slide 5 text
Fp é hipster
Slide 6
Slide 6 text
fp é da modinha
Slide 7
Slide 7 text
fp é hype
Slide 8
Slide 8 text
agora sério...
Slide 9
Slide 9 text
+ Declarativa
- Imperativa
Slide 10
Slide 10 text
+ declarativa
- imperativa
Slide 11
Slide 11 text
+ declarativa
- imperativa
Slide 12
Slide 12 text
+ declarativa
- imperativa
- Clareza na lógica
- Facilidade de escrita
- Menos possibilidade de
falha
Slide 13
Slide 13 text
funções puras
Slide 14
Slide 14 text
"Uma função pura, é aquela
dada um mesmo valor de
entrada, vai sempre retornar
o mesmo valor de saída, sem
efeitos colaterais."
Slide 15
Slide 15 text
Fonte: Mostly adequate guide to FP - professor Frisby
Slide 16
Slide 16 text
funções puras
- Não possuem dependência
de dados
- Não fazem I/O
- Não produzem efeitos
colaterais
- Reusabilidade
Slide 17
Slide 17 text
Cidadãos de
primeira classe
Slide 18
Slide 18 text
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
Slide 19
Slide 19 text
currying
Slide 20
Slide 20 text
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)
Slide 21
Slide 21 text
currying
- Reaproveitamento de código
- Currying implícito
- Código legível, elegante e conciso
Slide 22
Slide 22 text
certo… mas e o
react?
Slide 23
Slide 23 text
react não é
funcional
Slide 24
Slide 24 text
fp react
imutabilidade mutabilidade
Slide 25
Slide 25 text
Pra quê funcional?
Slide 26
Slide 26 text
FP em JS: bibliotecas
- FP/TS
- Ramda.js
Slide 27
Slide 27 text
HOCs + FP = ❤
Slide 28
Slide 28 text
HOCs + FP = ❤
Slide 29
Slide 29 text
HOCs + FP = ❤
Slide 30
Slide 30 text
hooks ⚛
Slide 31
Slide 31 text
mas antes...
Slide 32
Slide 32 text
Componentes react
Existem duas formas de se
criar um componente em React
Class Components
Functional Components
Slide 33
Slide 33 text
Fonte: https://www.codevoila.com/post/57/reactjs-tutorial-react-component-lifecycle
class components
Slide 34
Slide 34 text
- 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
Slide 35
Slide 35 text
- 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
Slide 36
Slide 36 text
functional components
- Antes usados apenas para
exibição de dados
- A partir da versão 16.8
ganharam bastante tração
Slide 37
Slide 37 text
Hooks
hooks ⚛
Slide 38
Slide 38 text
- Adicionam uma nova camada nos
componentes funcionais
- Muito interessantes para
abrigar regras de negócio
- Possibilidade no uso de
conceitos funcionais
hooks ⚛
Slide 39
Slide 39 text
hooks ⚛
Slide 40
Slide 40 text
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