Immutable App Architecture

Transcript

1. IMMUTABLE APP ARCHITECTURE
2. 2 @_rchaves_
3. 3 state =
4. 4 e se a gente colocasse o estado justamente na raiz?
5. •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
6. 6 MAS COMO NÓS ATUALIZAMOS O ESTADO?
7. PRIMEIRA IDEIA: CURSOR 7 ou atom, ou zipper
8. 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)
9. CLOJURESCRIPT + OM Single state atom 9
10. 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)))} "-")))))
11. 11 DEMO DAHORA https://youtu.be/5yHFTN-_mOo
12. REACT + REDUX 12 Reduce é vida! R
13. O QUE É UM REDUCER? 13 const list = [1, 2, 3] list.reduce((accumulated, current) => { return accumulated + current }, 5) // 11
14. ESTRUTURA DO REDUX 14 main <foo> <bar> <qux> estado ações entrada do usuário reduce onChange
15. 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"}] }; */
16. ELM 16 A maneira correta é a única maneira
17. 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
18. 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
19. 19 EXEMPLO
20. THE IMMUTABLE APP ARCHITECTURE 20 Model View Message Update
21. 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
22. 22 INVENÇÃO OU DESCOBERTA?
23. 23 POR QUE ISSO ESTÁ ACONTECENDO NO FRONT-END?
24. OBRIGADO! ALGUMA PERGUNTA?