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
REACT SP - Ramda + React
Search
Ana Luiza Portello
July 13, 2018
Programming
0
210
REACT SP - Ramda + React
Ana Luiza Portello
July 13, 2018
Tweet
Share
More Decks by Ana Luiza Portello
See All by Ana Luiza Portello
FRONTIN | Elas Programam - Programação Funcional no Front-end
anabastos
0
89
Workshop JSFP - SEMCOMP 2021
anabastos
0
260
Clojure é um Java melhor que Java - Codecon 2021
anabastos
0
140
Clojure 101 - Criciuma Dev
anabastos
0
310
TDC POA - GraphQL
anabastos
1
260
TDC Porto Alegre 2019 - JS Funcional com Ramda
anabastos
0
240
BackEndSP - GraphQL
anabastos
0
220
Git & Github - RLadies
anabastos
1
230
Programaria Summit - Performance FrontEnd
anabastos
1
220
Other Decks in Programming
See All in Programming
NEWT Backend Evolution
xpromx
1
140
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
140
NPOでのDevinの活用
codeforeveryone
0
900
テスト駆動Kaggle
isax1015
1
620
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
7.3k
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7k
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
240
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
870
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
500
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
99
37k
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
220
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
21k
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
3.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
Scaling GitHub
holman
460
140k
Writing Fast Ruby
sferik
628
62k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Agile that works and the tools we love
rasmusluckow
329
21k
Embracing the Ebb and Flow
colly
86
4.8k
Making Projects Easy
brettharned
116
6.3k
How to train your dragon (web standard)
notwaldorf
96
6.1k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Transcript
ANA LUIZA BASTOS github.com/anabastos @naluhh @anapbastos Software Developer na Quanto
e cientista da computação na PUC-SP anabastos.me
JSLADIES fb.com/jsladiesbr twitter.com/jsladiessp meetup.com/JsLadies-BR/ LAMBDA.IO t.me/lambdastudygroup github.com/lambda-study-group/ meetup.com/Lambda-I-O-Sampa- Meetup/
INTRODUÇAO AO RAMDA COM REACT
Biblioteca que foi pensada para tornar mais fácil o javascript
funcional
REACT + RAMDA
USOS CONVENIÊNTES / REFACTORZINHOS
PQ RAMDA?
• faz uso de conceitos funcionais • 100% imutável •
ganho em performance • elegante • point-free • etc
• Lists(map, filter, reduce, contains, replace, passAll, crop, flatten, find)
• Maths(inc, add, mean, sum) • String(split, replace) • Logics(equals, cond, not) • Relation(intersection, clamp, gt, lt) • Functions(curry, pipe, compose, ifElse, etc)
TODAS AS FUNÇÕES SÃO CURRIED
const add = (x, y) => x + y add(1,
2); // 3 add(1) // Error
(curry)
const curryAdd = R.curry((x, y) => x + y)) curryAdd(1,
2); // 3 const addOne = curryAdd(1); // Function addOne(2) // 3
STATELESS FUNCTIONS todo list
const Container = children => (<div>{children}</div>); const List = children
=> (<ul>{children}</ul>); const ListItem = ({ id, text }) => (<li key={id}> <span>{text}</span> </li>);
const TodoItem = { id: 123, text: 'Comprar pão' };
Container(List(ListItem(TodoItem))); Comprar pão
COMPOSE HIGH ORDER COMPONENTS (pipe / compose)
PIPE / COMPOSE: compõe funções de forma sequencial
function1 function2
Composed Function
PIPE COMPOSE
// Container(List(ListItem(TodoItem))); const TodoList = R.compose( Container, List, ListItem );
TodoList(TodoItem); Comprar pão
const TodoItems = [{...}, {...}, {...}] const TodoList = R.compose(
Container, List, R.map(ListItems) ); TodoList(TodoItems); Comprar pão Pagar boletos Ir pra react sp na neon
const TodoItems = [{...}, {...}, {...}] const TodoList = R.compose(
Container, List, R.map(ListItems), R.sort(byId), ); const byId = R.ascend(R.prop(‘id’)) TodoList(TodoItems);
const sortedListItems = R.pipe( R.sort(byId), R.map(ListItems), )
const TodoItems = [{...}, {...}, {...}] const TodoList = R.compose(
Container, List, sortedListItems, ); TodoList(TodoItems);
COMPOSIÇAO DE PROMISE (pipeP / composeP)
const todoList = R.pipeP( getUserById, getTodos, funçãoAsyncQueFazWhatever, ) // Promise
await todoList(‘123’)
DATA HANDLING (Evolve, ApplySpec)
EVOLVE
R.evolve({ email: R.toLower, phone: R.replace(‘-’, ‘’), name: R.trim, })(data)
// state { // …, // selected: false, // …
, // } onToggleSelected() { this.setState((prevState) => ({ ...prevState selected: !prevState.selected })) }
onToggleSelected() { this.setState(R.evolve({ selected: R.not })) }
APPLY SPEC
const createObj = R.applySpec({ counter: R.inc, userData: { phone: R.trim},
}) createObj(0, “ 98499-1900”) // {1, userData{ phone: “9849919000”}}
const handlePhone = R.pipe( R.split(‘-’), R.join, R.replace(/[^0-9]/, ‘’), algumaCoisa, //
(str) => {str} )
const createObj = R.applySpec({ counter: R.inc, userData: { phone: handlePhone},
})
IMMUTABLE STATE (lenses)
currentState -> newState 0 - +
const counterLens = R.lensProp('counter'); counterLens(state) //{ counter: 0 }
// state = { a: { b: { counter: 0
} const counterLens = R.lensPath(['a','b','counter']); counterLens(state)
// const state = {counter : 0} // view const
getCounter = R.view(counterLens) // 0 getCounter(state) // 0 // set const setCounter = R.set(counterLens, 1) setCounter(state) // 1 // over const incCounter = R.over(counterLens, R.inc) incCounter(state) // 1
// sem lens :( this.setState((prevState) => { ({ counter: prevState.a.b.counter++
})) } // com lens :) this.setState(incCounter)
render() { const count = getCounter(this.state) return (<div>{count}</div>) }
• Se foca em apenas uma propriedade do objeto •
Não muta a propriedade • Consigo lidar caso a propriedade é undefined • Torna bem mais declarativo
SWITCH CASE / IF (cond)
switch (action.type) { case 'INCREMENT': return state + action.payload; case
'DECREMENT': return state - action.payload; default: return state; }
const load = R.cond([ [R.equals('INCREMENT'), R.inc(state)], [R.equals('DECREMENT'), R.dec(state)], [R.T, R.always(state)],
]) load(action.type)
const Content = (props) => { if(props.loading) { return <Loading
/> } if(props.items.length == 0) { return <Missing /> } return <Section {...props} /> }
const Content = R.cond([ [R.prop('loading'), Loading], [R.isEmpty(props.items), Missing], [R.T, Section],
]) Content(props)
STATIC COMPONENT (always)
const Loading = () => (<div>Loading</div>) ReactDOM.render(<Loading />, rootEl)
const Loading = R.always(<div>Loading</div>) ReactDOM.render(<Loading />, rootEl)
STYLED COMPONENTS (path)
const Name = () => styled.Text` font-weight: bold, font-size: 18px,
color: ${props => props.theme.primaryColor} `
const Name = () => styled.Text` font-weight: bold, font-size: 18px,
color: ${R.path([‘theme’, ‘primaryColor’])} `
• memoize(Function) • merge(List, Obj) • tryCatch(Function) • anyPass /
AllPass(List) • flatter(List)
RAMDASCRIPT
Nem sempre você tem um trade-off em legibilidade.
5 + 10 // 15 R.add(5, 10) // 15 [5,
10].reduce((x, y) => {x + y}, 0) [5, 10].reduce(add, 0)
const obj = {x: 10} R.prop(‘x’)(obj) // 10 obj.x //
10 R.sortBy(R.prop(‘x’)) R.prop(‘x’)({}) // undefined
BOM TOOLBOX
COOKBOOK
• Rambda - github.com/selfrefactor/rambda • Ramda-fantasy - github.com/ramda/ramda-fantasy • Ramda
React Redux Patterns - tommmyy.github.io/ramda-react-redux-patterns/ • Thinking Ramda - randycoulman.com/blog/2016/05/24/thinking-in-ramda-getting -started • Ramda - Derek Stavis(Pagar.me talks) • Hey Underscore, You’re doing it wrong - Brian Lonsdorf.
t.me/lambdastudygroup github.com/lambda-study-group
OBRIGADA :) https://speakerdeck.com/anabastos anabastos.me