Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Introdução a programação funcional em React ⚛️
Search
Lucas Viana
February 15, 2020
Programming
1
130
Introdução a programação funcional em React ⚛️
Apresentação sobre conceitos de programação funcional e utilização com a biblioteca React
Lucas Viana
February 15, 2020
Tweet
Share
More Decks by Lucas Viana
See All by Lucas Viana
Introdução a Microfrontends
mechamobau
0
41
TypeScript: Introdução ao superset para devs JavaScript
mechamobau
0
29
Introdução ao GraphQL
mechamobau
0
22
GraphQL Intro
mechamobau
0
64
TypeScript: Introdução ao superset para devs JavaScript
mechamobau
0
66
Web Servers, Load Balancers e Proxies Reversos.
mechamobau
0
37
tRPC: Tipando seus endpoints sem GraphQL
mechamobau
0
54
Mantendo pacotes em um mono-repositório JavaScript
mechamobau
0
72
Tipos Genéricos em TypeScript: Boas práticas para escrever tipos fortes em seu código
mechamobau
0
32
Other Decks in Programming
See All in Programming
大規模UIKitベースアプリへのTCAの段階的導入/gradual-adoption-of-tca-in-a-large-scale-uikit-based-app
takehilo
2
220
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
170
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
480
Jetpack Composeとデザインシステム
rmakiyama
0
220
TypeScript 関数型スタイルでバックエンド開発のリアル
naoya
49
16k
Revisiting the Hotwire Landscape after Turbo 8 @ RailsConf 2024, Detroit
marcoroth
3
600
TypeScriptでもLLMアプリケーション開発 / LLM Application In Typescript
rkaga
5
1.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
0
110
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
2
470
Fast JSX: Don't clone props object #28768
yossydev
1
230
ServerAction で Progressive Enhancement はどこまで頑張れるか? / progressive-enhancement-with-server-action
takefumiyoshii
6
510
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
1
620
Featured
See All Featured
For a Future-Friendly Web
brad_frost
172
9k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
Done Done
chrislema
178
15k
Code Review Best Practice
trishagee
56
15k
Side Projects
sachag
451
41k
4 Signs Your Business is Dying
shpigford
176
21k
The Mythical Team-Month
searls
217
42k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
81
44k
The Cult of Friendly URLs
andyhume
74
5.7k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.7k
Transcript
Introdução a funcional em react Utilizando os conceitos de programação
funcional no dia a dia
Quem sou eu? Engenheiro Front-end na Linte Sistemas para Internet
Caiçara blog.lucasviana.dev/ @mechamobau
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
Pra quê funcional?
Fp é hipster
fp é da modinha
fp é hype
agora sério...
+ Declarativa - Imperativa
+ declarativa - imperativa
+ declarativa - imperativa
+ declarativa - imperativa - Clareza na lógica - Facilidade
de escrita - Menos possibilidade de falha
funções puras
"Uma função pura, é aquela dada um mesmo valor de
entrada, vai sempre retornar o mesmo valor de saída, sem efeitos colaterais."
Fonte: Mostly adequate guide to FP - professor Frisby
funções puras - Não possuem dependência de dados - Não
fazem I/O - Não produzem efeitos colaterais - Reusabilidade
Cidadãos de primeira classe
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
currying
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)
currying - Reaproveitamento de código - Currying implícito - Código
legível, elegante e conciso
certo… mas e o react?
react não é funcional
fp react imutabilidade mutabilidade
Pra quê funcional?
FP em JS: bibliotecas - FP/TS - Ramda.js
HOCs + FP = ❤
HOCs + FP = ❤
HOCs + FP = ❤
hooks ⚛
mas antes...
Componentes react Existem duas formas de se criar um componente
em React Class Components Functional Components
Fonte: https://www.codevoila.com/post/57/reactjs-tutorial-react-component-lifecycle class components
- 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
- 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
functional components - Antes usados apenas para exibição de dados
- A partir da versão 16.8 ganharam bastante tração
Hooks hooks ⚛
- Adicionam uma nova camada nos componentes funcionais - Muito
interessantes para abrigar regras de negócio - Possibilidade no uso de conceitos funcionais hooks ⚛
hooks ⚛
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