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
200
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
69
Workshop JSFP - SEMCOMP 2021
anabastos
0
240
Clojure é um Java melhor que Java - Codecon 2021
anabastos
0
130
Clojure 101 - Criciuma Dev
anabastos
0
290
TDC POA - GraphQL
anabastos
1
240
TDC Porto Alegre 2019 - JS Funcional com Ramda
anabastos
0
210
BackEndSP - GraphQL
anabastos
0
210
Git & Github - RLadies
anabastos
1
210
Programaria Summit - Performance FrontEnd
anabastos
1
200
Other Decks in Programming
See All in Programming
Ça bouge du côté des animations CSS !
goetter
2
160
複数のAWSアカウントから横断で 利用する Lambda Authorizer の作り方
tc3jp
0
120
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
5
1.1k
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
41
16k
バッチを作らなきゃとなったときに考えること
irof
2
540
Introduction to kotlinx.rpc
arawn
0
770
技術を改善し続ける
gumioji
0
150
2025.2.14_Developers Summit 2025_登壇資料
0101unite
0
220
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
250
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
300
Jakarta EE meets AI
ivargrimstad
0
530
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
230
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Side Projects
sachag
452
42k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Optimizing for Happiness
mojombo
377
70k
4 Signs Your Business is Dying
shpigford
183
22k
A Tale of Four Properties
chriscoyier
158
23k
KATA
mclloyd
29
14k
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