REACT SP - Ramda + React

Transcript

1. ANA LUIZA BASTOS github.com/anabastos @naluhh @anapbastos Software Developer na Quanto e cientista da computação na PUC-SP anabastos.me
2. 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/
3. INTRODUÇAO AO RAMDA COM REACT
4. Biblioteca que foi pensada para tornar mais fácil o javascript funcional
5. REACT + RAMDA
6. USOS CONVENIÊNTES / REFACTORZINHOS
7. PQ RAMDA?
8. • faz uso de conceitos funcionais • 100% imutável • ganho em performance • elegante • point-free • etc
9. • 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)
10. TODAS AS FUNÇÕES SÃO CURRIED
11. const add = (x, y) => x + y add(1, 2); // 3 add(1) // Error
12. (curry)
13. const curryAdd = R.curry((x, y) => x + y)) curryAdd(1, 2); // 3 const addOne = curryAdd(1); // Function addOne(2) // 3
14. STATELESS FUNCTIONS todo list
15. const Container = children => (<div>{children}</div>); const List = children => (<ul>{children}</ul>); const ListItem = ({ id, text }) => (<li key={id}> <span>{text}</span> </li>);
16. const TodoItem = { id: 123, text: 'Comprar pão' }; Container(List(ListItem(TodoItem))); Comprar pão
17. COMPOSE HIGH ORDER COMPONENTS (pipe / compose)
18. PIPE / COMPOSE: compõe funções de forma sequencial
19. function1 function2
20. Composed Function
21. PIPE COMPOSE
22. // Container(List(ListItem(TodoItem))); const TodoList = R.compose( Container, List, ListItem ); TodoList(TodoItem); Comprar pão
23. const TodoItems = [{...}, {...}, {...}] const TodoList = R.compose( Container, List, R.map(ListItems) ); TodoList(TodoItems); Comprar pão Pagar boletos Ir pra react sp na neon
24. const TodoItems = [{...}, {...}, {...}] const TodoList = R.compose( Container, List, R.map(ListItems), R.sort(byId), ); const byId = R.ascend(R.prop(‘id’)) TodoList(TodoItems);
25. const sortedListItems = R.pipe( R.sort(byId), R.map(ListItems), )
26. const TodoItems = [{...}, {...}, {...}] const TodoList = R.compose( Container, List, sortedListItems, ); TodoList(TodoItems);
27. COMPOSIÇAO DE PROMISE (pipeP / composeP)
28. const todoList = R.pipeP( getUserById, getTodos, funçãoAsyncQueFazWhatever, ) // Promise await todoList(‘123’)
29. DATA HANDLING (Evolve, ApplySpec)
30. EVOLVE
31. R.evolve({ email: R.toLower, phone: R.replace(‘-’, ‘’), name: R.trim, })(data)
32. // state { // …, // selected: false, // … , // } onToggleSelected() { this.setState((prevState) => ({ ...prevState selected: !prevState.selected })) }
33. onToggleSelected() { this.setState(R.evolve({ selected: R.not })) }
34. APPLY SPEC
35. const createObj = R.applySpec({ counter: R.inc, userData: { phone: R.trim}, }) createObj(0, “ 98499-1900”) // {1, userData{ phone: “9849919000”}}
36. const handlePhone = R.pipe( R.split(‘-’), R.join, R.replace(/[^0-9]/, ‘’), algumaCoisa, // (str) => {str} )
37. const createObj = R.applySpec({ counter: R.inc, userData: { phone: handlePhone}, })
38. IMMUTABLE STATE (lenses)
39. currentState -> newState 0 - +
40. const counterLens = R.lensProp('counter'); counterLens(state) //{ counter: 0 }
41. // state = { a: { b: { counter: 0 } const counterLens = R.lensPath(['a','b','counter']); counterLens(state)
42. // 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
43. // sem lens :( this.setState((prevState) => { ({ counter: prevState.a.b.counter++ })) } // com lens :) this.setState(incCounter)
44. render() { const count = getCounter(this.state) return (<div>{count}</div>) }
45. • Se foca em apenas uma propriedade do objeto • Não muta a propriedade • Consigo lidar caso a propriedade é undefined • Torna bem mais declarativo
46. SWITCH CASE / IF (cond)
47. switch (action.type) { case 'INCREMENT': return state + action.payload; case 'DECREMENT': return state - action.payload; default: return state; }
48. const load = R.cond([ [R.equals('INCREMENT'), R.inc(state)], [R.equals('DECREMENT'), R.dec(state)], [R.T, R.always(state)], ]) load(action.type)
49. const Content = (props) => { if(props.loading) { return <Loading /> } if(props.items.length == 0) { return <Missing /> } return <Section {...props} /> }
50. const Content = R.cond([ [R.prop('loading'), Loading], [R.isEmpty(props.items), Missing], [R.T, Section], ]) Content(props)
51. STATIC COMPONENT (always)
52. const Loading = () => (<div>Loading</div>) ReactDOM.render(<Loading />, rootEl)
53. const Loading = R.always(<div>Loading</div>) ReactDOM.render(<Loading />, rootEl)
54. STYLED COMPONENTS (path)
55. const Name = () => styled.Text` font-weight: bold, font-size: 18px, color: ${props => props.theme.primaryColor} `
56. const Name = () => styled.Text` font-weight: bold, font-size: 18px, color: ${R.path([‘theme’, ‘primaryColor’])} `
57. • memoize(Function) • merge(List, Obj) • tryCatch(Function) • anyPass / AllPass(List) • flatter(List)
58. RAMDASCRIPT
59. Nem sempre você tem um trade-off em legibilidade.
60. 5 + 10 // 15 R.add(5, 10) // 15 [5, 10].reduce((x, y) => {x + y}, 0) [5, 10].reduce(add, 0)
61. const obj = {x: 10} R.prop(‘x’)(obj) // 10 obj.x // 10 R.sortBy(R.prop(‘x’)) R.prop(‘x’)({}) // undefined
62. BOM TOOLBOX
63. COOKBOOK
64. • 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.
65. t.me/lambdastudygroup github.com/lambda-study-group
66. OBRIGADA :) https://speakerdeck.com/anabastos anabastos.me