Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Immutable App Architecture

Immutable App Architecture

Rogério Chaves

July 05, 2016
Tweet

More Decks by Rogério Chaves

Other Decks in Programming

Transcript

  1. •O estado fica na raiz •Passa pra baixo apenas o

    que
 importa •Componentes apenas renderizam
 o que eles recebem,
 sem side-effects A IDEIA 5 main <foo> <bar> <qux> estado
  2. REACT + CURSOR 8 <List items={cursor.refine('items')} /> const List =

    (props) => <ul> {props.items.map(ListItem)} </ul> const ListItem = (item) => <li> {item.refine('name').value} <NameInput name={item.refine('name')} /> </li> const NameInput = (props) => <input value={props.name.value}
 onChange={props.name.set} /> (não é uma implementação real)
  3. CLOJURESCRIPT + OM 10 (def app-state (atom {:count 0})) (defn

    counter [data owner] (reify om/IRenderState (render-state [_ _] (dom/div nil (dom/label nil (:count data)) (dom/button #js {:onClick (fn [e] (om/transact! data :count inc)))} "+") (dom/button #js {:onClick (fn [e] (om/transact! data :count dec)))} "-")))))
  4. O QUE É UM REDUCER? 13 const list = [1,

    2, 3] list.reduce((accumulated, current) => { return accumulated + current }, 5) // 11
  5. COMO REDUX FUNCIONA 15 const state = { list: [{name:

    "une"}, {name: "due"}] }; const actions = [{type: "ADD", name: "tre"}]; const reducer = (currentState, action) => { switch (action.type) { case "ADD": return { list: [...currentState.list, {name: action.name}) } default: return currentState; } } actions.reduce(reducer, state); /* { list: [{name: "une"}, {name: "due"}, {name: "tre"}] }; */
  6. 17 type alias Model = Int model : Model model

    = 0 type Msg = Increment | Decrement update : Msg -> Model -> Model update msg model = case msg of Increment -> model + 1 Decrement -> model - 1 COMO ELM FUNCIONA
  7. 18 update : Msg -> Model -> Model update msg

    model = case msg of Increment -> model + 1 Decrement -> model - 1 view : Model -> Html Msg view model = div [] [ button [ onClick Decrement ] [ text "-" ] , div [] [ text (toString model) ] , button [ onClick Increment ] [ text "+" ] ] main = Html.beginnerProgram { model = model , view = view , update = update } COMO ELM FUNCIONA
  8. VANTAGENS 21 •Fonte única de verdade •Mudanças de estado determínisticas

    •Racionalizar sobre a UI renderizada •Viagem no tempo •Mais fácil de debugar •Hot reloading (exemplo) •Renderização mais rápida •Mais fácil de implementar Optimistic Updates •Mais fácil de ter um Isomorphic App •Funções e estrutura de dados simples