Tweet
Tweet

Slide 1

Slide 1 text

ANA LUIZA BASTOS github.com/anabastos @naluhh @anapbastos Software Developer na Quanto e cientista da computação na PUC-SP anabastos.me

Slide 2

Slide 2 text

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/

Slide 3

Slide 3 text

INTRODUÇAO AO RAMDA COM REACT

Slide 4

Slide 4 text

Biblioteca que foi pensada para tornar mais fácil o javascript funcional

Slide 5

Slide 5 text

REACT + RAMDA

Slide 6

Slide 6 text

USOS CONVENIÊNTES / REFACTORZINHOS

Slide 7

Slide 7 text

PQ RAMDA?

Slide 8

Slide 8 text

● faz uso de conceitos funcionais ● 100% imutável ● ganho em performance ● elegante ● point-free ● etc

Slide 9

Slide 9 text

● 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)

Slide 10

Slide 10 text

TODAS AS FUNÇÕES SÃO CURRIED

Slide 11

Slide 11 text

const add = (x, y) => x + y add(1, 2); // 3 add(1) // Error

Slide 12

Slide 12 text

(curry)

Slide 13

Slide 13 text

const curryAdd = R.curry((x, y) => x + y)) curryAdd(1, 2); // 3 const addOne = curryAdd(1); // Function addOne(2) // 3

Slide 14

Slide 14 text

STATELESS FUNCTIONS todo list

Slide 15

Slide 15 text

const Container = children => (
{children}
); const List = children => (
    {children}
); const ListItem = ({ id, text }) => (
  • {text}
    • );

    Slide 16

    Slide 16 text

    const TodoItem = { id: 123, text: 'Comprar pão' }; Container(List(ListItem(TodoItem))); Comprar pão

    Slide 17

    Slide 17 text

    COMPOSE HIGH ORDER COMPONENTS (pipe / compose)

    Slide 18

    Slide 18 text

    PIPE / COMPOSE: compõe funções de forma sequencial

    Slide 19

    Slide 19 text

    function1 function2

    Slide 20

    Slide 20 text

    Composed Function

    Slide 21

    Slide 21 text

    PIPE COMPOSE

    Slide 22

    Slide 22 text

    // Container(List(ListItem(TodoItem))); const TodoList = R.compose( Container, List, ListItem ); TodoList(TodoItem); Comprar pão

    Slide 23

    Slide 23 text

    const TodoItems = [{...}, {...}, {...}] const TodoList = R.compose( Container, List, R.map(ListItems) ); TodoList(TodoItems); Comprar pão Pagar boletos Ir pra react sp na neon

    Slide 24

    Slide 24 text

    const TodoItems = [{...}, {...}, {...}] const TodoList = R.compose( Container, List, R.map(ListItems), R.sort(byId), ); const byId = R.ascend(R.prop(‘id’)) TodoList(TodoItems);

    Slide 25

    Slide 25 text

    const sortedListItems = R.pipe( R.sort(byId), R.map(ListItems), )

    Slide 26

    Slide 26 text

    const TodoItems = [{...}, {...}, {...}] const TodoList = R.compose( Container, List, sortedListItems, ); TodoList(TodoItems);

    Slide 27

    Slide 27 text

    COMPOSIÇAO DE PROMISE (pipeP / composeP)

    Slide 28

    Slide 28 text

    const todoList = R.pipeP( getUserById, getTodos, funçãoAsyncQueFazWhatever, ) // Promise await todoList(‘123’)

    Slide 29

    Slide 29 text

    DATA HANDLING (Evolve, ApplySpec)

    Slide 30

    Slide 30 text

    EVOLVE

    Slide 31

    Slide 31 text

    R.evolve({ email: R.toLower, phone: R.replace(‘-’, ‘’), name: R.trim, })(data)

    Slide 32

    Slide 32 text

    // state { // …, // selected: false, // … , // } onToggleSelected() { this.setState((prevState) => ({ ...prevState selected: !prevState.selected })) }

    Slide 33

    Slide 33 text

    onToggleSelected() { this.setState(R.evolve({ selected: R.not })) }

    Slide 34

    Slide 34 text

    APPLY SPEC

    Slide 35

    Slide 35 text

    const createObj = R.applySpec({ counter: R.inc, userData: { phone: R.trim}, }) createObj(0, “ 98499-1900”) // {1, userData{ phone: “9849919000”}}

    Slide 36

    Slide 36 text

    const handlePhone = R.pipe( R.split(‘-’), R.join, R.replace(/[^0-9]/, ‘’), algumaCoisa, // (str) => {str} )

    Slide 37

    Slide 37 text

    const createObj = R.applySpec({ counter: R.inc, userData: { phone: handlePhone}, })

    Slide 38

    Slide 38 text

    IMMUTABLE STATE (lenses)

    Slide 39

    Slide 39 text

    currentState -> newState 0 - +

    Slide 40

    Slide 40 text

    const counterLens = R.lensProp('counter'); counterLens(state) //{ counter: 0 }

    Slide 41

    Slide 41 text

    // state = { a: { b: { counter: 0 } const counterLens = R.lensPath(['a','b','counter']); counterLens(state)

    Slide 42

    Slide 42 text

    // 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

    Slide 43

    Slide 43 text

    // sem lens :( this.setState((prevState) => { ({ counter: prevState.a.b.counter++ })) } // com lens :) this.setState(incCounter)

    Slide 44

    Slide 44 text

    render() { const count = getCounter(this.state) return (
    {count}
    ) }

    Slide 45

    Slide 45 text

    ● Se foca em apenas uma propriedade do objeto ● Não muta a propriedade ● Consigo lidar caso a propriedade é undefined ● Torna bem mais declarativo

    Slide 46

    Slide 46 text

    SWITCH CASE / IF (cond)

    Slide 47

    Slide 47 text

    switch (action.type) { case 'INCREMENT': return state + action.payload; case 'DECREMENT': return state - action.payload; default: return state; }

    Slide 48

    Slide 48 text

    const load = R.cond([ [R.equals('INCREMENT'), R.inc(state)], [R.equals('DECREMENT'), R.dec(state)], [R.T, R.always(state)], ]) load(action.type)

    Slide 49

    Slide 49 text

    const Content = (props) => { if(props.loading) { return } if(props.items.length == 0) { return } return }

    Slide 50

    Slide 50 text

    const Content = R.cond([ [R.prop('loading'), Loading], [R.isEmpty(props.items), Missing], [R.T, Section], ]) Content(props)

    Slide 51

    Slide 51 text

    STATIC COMPONENT (always)

    Slide 52

    Slide 52 text

    const Loading = () => (
    Loading
    ) ReactDOM.render(, rootEl)

    Slide 53

    Slide 53 text

    const Loading = R.always(
    Loading
    ) ReactDOM.render(, rootEl)

    Slide 54

    Slide 54 text

    STYLED COMPONENTS (path)

    Slide 55

    Slide 55 text

    const Name = () => styled.Text` font-weight: bold, font-size: 18px, color: ${props => props.theme.primaryColor} `

    Slide 56

    Slide 56 text

    const Name = () => styled.Text` font-weight: bold, font-size: 18px, color: ${R.path([‘theme’, ‘primaryColor’])} `

    Slide 57

    Slide 57 text

    ● memoize(Function) ● merge(List, Obj) ● tryCatch(Function) ● anyPass / AllPass(List) ● flatter(List)

    Slide 58

    Slide 58 text

    RAMDASCRIPT

    Slide 59

    Slide 59 text

    Nem sempre você tem um trade-off em legibilidade.

    Slide 60

    Slide 60 text

    5 + 10 // 15 R.add(5, 10) // 15 [5, 10].reduce((x, y) => {x + y}, 0) [5, 10].reduce(add, 0)

    Slide 61

    Slide 61 text

    const obj = {x: 10} R.prop(‘x’)(obj) // 10 obj.x // 10 R.sortBy(R.prop(‘x’)) R.prop(‘x’)({}) // undefined

    Slide 62

    Slide 62 text

    BOM TOOLBOX

    Slide 63

    Slide 63 text

    COOKBOOK

    Slide 64

    Slide 64 text

    ● 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.

    Slide 65

    Slide 65 text

    t.me/lambdastudygroup github.com/lambda-study-group

    Slide 66

    Slide 66 text

    OBRIGADA :) https://speakerdeck.com/anabastos anabastos.me