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
Jakarta EE Core Profile and Helidon - Speed, Simplicity, and AI Integration
ivargrimstad
0
290
Namespace and Its Future
tagomoris
6
680
ProxyによるWindow間RPC機構の構築
syumai
1
240
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
690
旅行プランAIエージェント開発の裏側
ippo012
1
590
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
120
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
290
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
130
AHC051解法紹介
eijirou
0
640
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
390
Laravel Boost 超入門
fire_arlo
2
170
A Gopher's Guide to Vibe Coding
danicat
0
200
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Documentation Writing (for coders)
carmenintech
73
5k
The Invisible Side of Design
smashingmag
301
51k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Navigating Team Friction
lara
189
15k
Producing Creativity
orderedlist
PRO
347
40k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Designing Experiences People Love
moore
142
24k
Music & Morning Musume
bryan
46
6.8k
GitHub's CSS Performance
jonrohan
1032
460k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Gamification - CAS2011
davidbonilla
81
5.4k
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