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
93
Workshop JSFP - SEMCOMP 2021
anabastos
0
270
Clojure é um Java melhor que Java - Codecon 2021
anabastos
0
150
Clojure 101 - Criciuma Dev
anabastos
0
320
TDC POA - GraphQL
anabastos
1
260
TDC Porto Alegre 2019 - JS Funcional com Ramda
anabastos
0
240
BackEndSP - GraphQL
anabastos
0
230
Git & Github - RLadies
anabastos
1
240
Programaria Summit - Performance FrontEnd
anabastos
1
220
Other Decks in Programming
See All in Programming
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
150
AIでLINEスタンプを作ってみた
eycjur
1
220
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
4
480
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
970
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
AHC051解法紹介
eijirou
0
640
Kiroで始めるAI-DLC
kaonash
2
500
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
0
230
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
410
奥深くて厄介な「改行」と仲良くなる20分
oguemon
0
160
More Approvers for Greater OSS and Japan Community
tkikuc
1
110
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
3
1.8k
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Producing Creativity
orderedlist
PRO
347
40k
Scaling GitHub
holman
463
140k
The Pragmatic Product Professional
lauravandoore
36
6.8k
Faster Mobile Websites
deanohume
309
31k
How STYLIGHT went responsive
nonsquared
100
5.8k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
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